From 9e62ba8fbe482774904f82118e5e75bcc099ea15 Mon Sep 17 00:00:00 2001
From: Hunter Long <info@socialeck.com>
Date: Thu, 6 Aug 2020 00:58:00 -0700
Subject: [PATCH] webpack fixes, theme editor fixes

---
 Makefile                                      |  4 +-
 frontend/public/base.gohtml                   | 13 +---
 frontend/src/App.vue                          |  5 +-
 .../main.scss => src/assets/scss/index.scss}  |  2 +-
 frontend/src/assets/scss/variables.scss       |  2 +-
 .../src/components/Dashboard/Checkins.vue     |  7 --
 .../src/components/Dashboard/Failures.vue     |  7 --
 .../src/components/Dashboard/Incidents.vue    | 12 +--
 .../src/components/Dashboard/ServiceInfo.vue  | 14 +---
 .../src/components/Dashboard/ThemeEditor.vue  | 21 ++---
 frontend/src/forms/Notifier.vue               | 27 +++----
 frontend/src/main.js                          |  3 +-
 frontend/src/pages/Logs.vue                   |  7 --
 handlers/dashboard.go                         | 16 ++++
 notifiers/email_rendered.go                   |  3 +-
 notifiers/{generate/main.go => generate.go}   |  0
 notifiers/notifiers.go                        |  2 +-
 source/generate_wiki.go                       | 77 -------------------
 source/source.go                              | 12 +--
 source/source_test.go                         |  2 +-
 20 files changed, 60 insertions(+), 176 deletions(-)
 rename frontend/{public/main.scss => src/assets/scss/index.scss} (100%)
 rename notifiers/{generate/main.go => generate.go} (100%)
 delete mode 100644 source/generate_wiki.go

diff --git a/Makefile b/Makefile
index 525bc7a3..4f641f11 100644
--- a/Makefile
+++ b/Makefile
@@ -144,7 +144,6 @@ frontend-build:
 	cd frontend && yarn && yarn build
 	@cp -r frontend/dist source/
 	@cp -r frontend/src/assets/scss source/dist/
-	@cp -r frontend/public/main.scss source/dist/scss/
 	@cp frontend/public/favicon.ico source/dist/
 	@cp frontend/public/robots.txt source/dist/
 	@cp frontend/public/banner.png source/dist/
@@ -159,9 +158,10 @@ yarn:
 	cd frontend && yarn
 
 # compile assets using SASS and Rice. compiles scss -> css, and run rice embed-go
-compile: generate frontend-build
+compile: frontend-build
 	rm -f source/rice-box.go
 	cd source && rice embed-go
+	make generate
 
 embed:
 	cd source && rice embed-go
diff --git a/frontend/public/base.gohtml b/frontend/public/base.gohtml
index 1620c649..45ecbe3c 100644
--- a/frontend/public/base.gohtml
+++ b/frontend/public/base.gohtml
@@ -43,11 +43,7 @@
     <meta property="twitter:image" content="favicon/social.png">
 
     {{if USE_CDN}}
-    <link rel="stylesheet" href="https://assets.statping.com/css/style.css">
-    <link rel="stylesheet" href="https://assets.statping.com/css/main.css">
-    {{else if USING_ASSETS }}
-    <link href="css/style.css" rel="stylesheet">
-    <link href="css/main.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://assets.statping.com/css/vendor.css">
     {{else}}
     <% _.each(htmlWebpackPlugin.tags.headTags, function(headTag) { %>
     <%= headTag %> <% }) %>
@@ -62,14 +58,9 @@
 
 {{if USE_CDN}}
 <script src="https://assets.statping.com/js/bundle.js"></script>
-<script src="https://assets.statping.com/js/style.chunk.js"></script>
+<script src="https://assets.statping.com/js/vendor.chunk.js"></script>
 <script src="https://assets.statping.com/js/polyfill.chunk.js"></script>
 <script src="https://assets.statping.com/js/main.chunk.js"></script>
-{{else if USING_ASSETS }}
-<script src="js/bundle.js"></script>
-<script src="js/style.chunk.js"></script>
-<script src="js/polyfill.chunk.js"></script>
-<script src="js/main.chunk.js"></script>
 {{else}}
 <% _.each(htmlWebpackPlugin.tags.bodyTags, function(bodyTag) { %>
 <%= bodyTag %> <% }) %>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 54f5bab4..999cd1b4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -55,8 +55,5 @@
 
 <style lang="scss">
     @import "./assets/css/bootstrap.min.css";
-    @import "./assets/scss/base";
-    @import "./assets/scss/layout";
-    @import "./assets/scss/forms";
-    @import "./assets/scss/mobile";
+    @import "./assets/scss/index";
 </style>
diff --git a/frontend/public/main.scss b/frontend/src/assets/scss/index.scss
similarity index 100%
rename from frontend/public/main.scss
rename to frontend/src/assets/scss/index.scss
index fe1ad7d4..fbb1a62e 100644
--- a/frontend/public/main.scss
+++ b/frontend/src/assets/scss/index.scss
@@ -1,6 +1,6 @@
 @import 'variables';
 @import 'mixin';
+@import 'layout';
 @import 'base';
 @import 'forms';
-@import 'layout';
 @import 'mobile';
diff --git a/frontend/src/assets/scss/variables.scss b/frontend/src/assets/scss/variables.scss
index ffb94b77..a5e37794 100644
--- a/frontend/src/assets/scss/variables.scss
+++ b/frontend/src/assets/scss/variables.scss
@@ -1,5 +1,5 @@
 /*    Index Page      */
-$background-color: #f5f5f5;
+$background-color: #bf1010;
 $container-color: #ffffff;
 $text-color: #2a2a2a;
 $max-width: 860px;
diff --git a/frontend/src/components/Dashboard/Checkins.vue b/frontend/src/components/Dashboard/Checkins.vue
index d7bd08a8..0e4592e2 100644
--- a/frontend/src/components/Dashboard/Checkins.vue
+++ b/frontend/src/components/Dashboard/Checkins.vue
@@ -163,10 +163,3 @@ export default {
     }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-    .sm {
-        font-size: 8pt;
-    }
-</style>
diff --git a/frontend/src/components/Dashboard/Failures.vue b/frontend/src/components/Dashboard/Failures.vue
index 9c002e61..fe98e8f3 100644
--- a/frontend/src/components/Dashboard/Failures.vue
+++ b/frontend/src/components/Dashboard/Failures.vue
@@ -173,10 +173,3 @@ export default {
     }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-    .sm {
-        font-size: 8pt;
-    }
-</style>
diff --git a/frontend/src/components/Dashboard/Incidents.vue b/frontend/src/components/Dashboard/Incidents.vue
index cc379b0d..d758d7a6 100644
--- a/frontend/src/components/Dashboard/Incidents.vue
+++ b/frontend/src/components/Dashboard/Incidents.vue
@@ -50,8 +50,9 @@
 </template>
 
 <script>
-    import Api from "../../API";
-    const FormIncidentUpdates = () => import(/* webpackChunkName: "dashboard" */ '@/forms/IncidentUpdates')
+import Api from "../../API";
+
+const FormIncidentUpdates = () => import(/* webpackChunkName: "dashboard" */ '@/forms/IncidentUpdates')
 
     export default {
         name: 'Incidents',
@@ -112,10 +113,3 @@
     }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-    .sm {
-        font-size: 8pt;
-    }
-</style>
diff --git a/frontend/src/components/Dashboard/ServiceInfo.vue b/frontend/src/components/Dashboard/ServiceInfo.vue
index 9d670796..acd62c6a 100644
--- a/frontend/src/components/Dashboard/ServiceInfo.vue
+++ b/frontend/src/components/Dashboard/ServiceInfo.vue
@@ -75,6 +75,7 @@
   const ServiceFailures = () => import(/* webpackChunkName: "dashboard" */ '../Service/ServiceFailures');
   const ServiceSparkLine = () => import(/* webpackChunkName: "dashboard" */ "./ServiceSparkLine");
   import Api from "../../API";
+
   const ServiceEvents = () => import(/* webpackChunkName: "dashboard" */ "@/components/Dashboard/ServiceEvents");
 
   export default {
@@ -167,16 +168,3 @@
       }
   }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-    .offline-card {
-        background-color: #fff5f5;
-    }
-    .fade-enter-active, .fade-leave-active {
-        transition: opacity .75s;
-    }
-    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-        opacity: 0;
-    }
-</style>
diff --git a/frontend/src/components/Dashboard/ThemeEditor.vue b/frontend/src/components/Dashboard/ThemeEditor.vue
index 5400d1ea..de74f90d 100644
--- a/frontend/src/components/Dashboard/ThemeEditor.vue
+++ b/frontend/src/components/Dashboard/ThemeEditor.vue
@@ -57,15 +57,16 @@
 </template>
 
 <script>
-  import Api from "../../API";
+import Api from "../../API";
 
-  // require component
-  import { codemirror } from 'vue-codemirror'
-  import 'codemirror/mode/css/css.js'
+// require component
+import {codemirror} from 'vue-codemirror'
 
-  import 'codemirror/lib/codemirror.css'
-  import 'codemirror-colorpicker/dist/codemirror-colorpicker.css'
-  import 'codemirror-colorpicker'
+import('codemirror/mode/css/css.js')
+
+  import('codemirror/lib/codemirror.css')
+  import('codemirror-colorpicker/dist/codemirror-colorpicker.css')
+  import('codemirror-colorpicker')
 
   export default {
       name: 'ThemeEditor',
@@ -191,9 +192,3 @@
       }
   }
 </script>
-<style scoped>
-    .CodeMirror {
-        border: 1px solid #eee;
-        height: 550px;
-    }
-</style>
diff --git a/frontend/src/forms/Notifier.vue b/frontend/src/forms/Notifier.vue
index e6c8541d..eb06d1d9 100644
--- a/frontend/src/forms/Notifier.vue
+++ b/frontend/src/forms/Notifier.vue
@@ -173,15 +173,19 @@
 </template>
 
 <script>
-  import Api from "../API";
+import Api from "../API";
+/* webpackChunkName: "codemirror" */
+import {codemirror} from 'vue-codemirror'
+/* webpackChunkName: "codemirror" */
+import 'codemirror/mode/javascript/javascript.js'
+/* webpackChunkName: "codemirror" */
+import 'codemirror/lib/codemirror.css'
+/* webpackChunkName: "codemirror" */
+import 'codemirror/theme/neat.css'
+/* webpackChunkName: "codemirror" */
+import '../codemirror_json'
 
-  const beautify = require('js-beautify').js
-
-  /* webpackChunkName: "codemirror" */ import { codemirror } from 'vue-codemirror'
-  /* webpackChunkName: "codemirror" */ import 'codemirror/mode/javascript/javascript.js'
-  /* webpackChunkName: "codemirror" */ import 'codemirror/lib/codemirror.css'
-  /* webpackChunkName: "codemirror" */ import 'codemirror/theme/neat.css'
-  /* webpackChunkName: "codemirror" */ import '../codemirror_json'
+const beautify = require('js-beautify').js
 
 export default {
     name: 'Notifier',
@@ -325,10 +329,3 @@ export default {
     }
 }
 </script>
-<style scoped>
-    .CodeMirror {
-        border: 1px solid #eee;
-        height: 550px;
-        font-size: 9pt;
-    }
-</style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 20e4e100..b65ba543 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -8,10 +8,11 @@ import VueI18n from 'vue-i18n'
 import router from './routes'
 import "./mixin"
 import "./icons"
-const App = () => import('@/App.vue')
 import store from './store'
 import language from './languages'
 
+const App = () => import(/* webpackChunkName: "index" */ '@/App.vue')
+
 Vue.component('apexchart', VueApexCharts)
 
 Vue.use(VueClipboard);
diff --git a/frontend/src/pages/Logs.vue b/frontend/src/pages/Logs.vue
index c93b1614..293f84df 100644
--- a/frontend/src/pages/Logs.vue
+++ b/frontend/src/pages/Logs.vue
@@ -87,10 +87,3 @@ export default {
     }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-    .sm {
-        font-size: 8pt;
-    }
-</style>
diff --git a/handlers/dashboard.go b/handlers/dashboard.go
index 7e4e9390..a2e49418 100644
--- a/handlers/dashboard.go
+++ b/handlers/dashboard.go
@@ -84,14 +84,30 @@ func apiThemeSaveHandler(w http.ResponseWriter, r *http.Request) {
 		sendErrorJson(err, w, r)
 		return
 	}
+	defer r.Body.Close()
+
+	fmt.Println(themes.Variables)
+
 	if err := source.SaveAsset([]byte(themes.Base), "scss/base.scss"); err != nil {
 		sendErrorJson(err, w, r)
 		return
 	}
+	if err := source.SaveAsset([]byte(themes.Layout), "scss/layout.scss"); err != nil {
+		sendErrorJson(err, w, r)
+		return
+	}
 	if err := source.SaveAsset([]byte(themes.Variables), "scss/variables.scss"); err != nil {
 		sendErrorJson(err, w, r)
 		return
 	}
+	if err := source.SaveAsset([]byte(themes.Forms), "scss/forms.scss"); err != nil {
+		sendErrorJson(err, w, r)
+		return
+	}
+	if err := source.SaveAsset([]byte(themes.Mixins), "scss/mixin.scss"); err != nil {
+		sendErrorJson(err, w, r)
+		return
+	}
 	if err := source.SaveAsset([]byte(themes.Mobile), "scss/mobile.scss"); err != nil {
 		sendErrorJson(err, w, r)
 		return
diff --git a/notifiers/email_rendered.go b/notifiers/email_rendered.go
index 204529b5..09cffe78 100755
--- a/notifiers/email_rendered.go
+++ b/notifiers/email_rendered.go
@@ -1,4 +1,4 @@
-// DO NOT EDIT ** This file was generated with go generate on 2020-08-06 04:13:25.078006 +0000 UTC ** DO NOT EDIT //
+// DO NOT EDIT ** This file was generated with go generate on 2020-08-06 07:54:20.364299 +0000 UTC ** DO NOT EDIT //
 package notifiers
 
 const emailSuccess = `<!doctype html><html xmlns=http://www.w3.org/1999/xhtml xmlns:v=urn:schemas-microsoft-com:vml xmlns:o=urn:schemas-microsoft-com:office:office><title>Statping Service Notification</title><meta http-equiv=x-ua-compatible content="IE=edge"><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><style type=text/css>
@@ -52,3 +52,4 @@ const emailFailure = `<!doctype html><html xmlns=http://www.w3.org/1999/xhtml xm
 <a class=footer-link href=https://github.com/statping/statping>Github</a>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
 <a class=footer-link href=https://statping.com/privacy>Privacy</a>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
 <a class=footer-link href="https://news.statping.com/delete?email={{.Email}}">Unsubscribe</a></div></table></table></div></div></table></div></table></div></table></div></div>`
+
diff --git a/notifiers/generate/main.go b/notifiers/generate.go
similarity index 100%
rename from notifiers/generate/main.go
rename to notifiers/generate.go
diff --git a/notifiers/notifiers.go b/notifiers/notifiers.go
index b1ecd986..d2cc6680 100644
--- a/notifiers/notifiers.go
+++ b/notifiers/notifiers.go
@@ -10,7 +10,7 @@ import (
 	"time"
 )
 
-//go:generate go run generate/main.go
+//go:generate go run generate.go
 
 var log = utils.Log.WithField("type", "notifier")
 
diff --git a/source/generate_wiki.go b/source/generate_wiki.go
deleted file mode 100644
index 8554ea68..00000000
--- a/source/generate_wiki.go
+++ /dev/null
@@ -1,77 +0,0 @@
-// +build ignore
-
-package main
-
-import (
-	"github.com/statping/statping/utils"
-	"io/ioutil"
-	"log"
-	"os"
-	"strings"
-	"text/template"
-	"time"
-)
-
-const (
-	wikiUrl = "http://assets.statping.com/wiki/"
-)
-
-func replaceDash(s string) string {
-	return strings.Replace(s, "-", " ", -1)
-}
-
-func main() {
-	var compiled string
-
-	utils.InitLogs()
-	utils.Command("git clone https://github.com/statping/statping.wiki.git")
-
-	pages := []string{"Types-of-Monitoring", "Features", "Start-Statping", "Linux", "Mac", "Windows", "AWS-EC2", "Docker", "Mobile-App", "Heroku", "API", "Makefile",
-		"Notifiers", "Notifier-Events", "Notifier-Example", "Prometheus-Exporter", "SSL", "Config-with-.env-File", "Static-Export", "Statping-Plugins", "Statuper", "Build-and-Test", "Contributing", "PGP-Signature", "Testing", "Deployment"}
-	newPages := map[string]string{}
-
-	for k, v := range pages {
-		compiled += "<a class=\"scrollclick\" href=\"#\" data-id=\"page_" + utils.ToString(k) + "\">" + replaceDash(v) + "</a><br>"
-	}
-
-	for k, v := range pages {
-		sc, _ := ioutil.ReadFile("statping.wiki/" + v + ".md")
-		newPages[v] = string(sc)
-		compiled += "\n\n<div class=\"mt-5\" id=\"page_" + utils.ToString(k) + "\"><h1>" + replaceDash(v) + "</h1></div>\n" + string(sc)
-	}
-
-	utils.DeleteDirectory("./statping.wiki")
-	utils.DeleteDirectory("./logs")
-
-	f, err := os.Create("../frontend/src/pages/Help.vue")
-	die(err)
-	defer f.Close()
-
-	packageTemplate.Execute(f, struct {
-		Timestamp time.Time
-		URL       string
-		Compiled  string
-		Pages     map[string]string
-	}{
-		Timestamp: utils.Now(),
-		URL:       "ok",
-		Compiled:  compiled,
-		Pages:     newPages,
-	})
-}
-
-func die(err error) {
-	if err != nil {
-		log.Fatal(err)
-	}
-}
-
-var packageTemplate = template.Must(template.New("").Parse(`<template>
-    <div class="col-12 p-4" v-html={{printf "%q" .Compiled}}></div>
-</template>
-
-<script>
-export default {
-  name: 'Help',
-}
-</script>`))
diff --git a/source/source.go b/source/source.go
index e829d169..ef43633a 100644
--- a/source/source.go
+++ b/source/source.go
@@ -1,7 +1,5 @@
 package source
 
-//go:generate go run generate_wiki.go
-
 import (
 	"fmt"
 	"github.com/GeertJohan/go.rice"
@@ -19,8 +17,8 @@ var (
 	RequiredFiles = []string{
 		"css/style.css",
 		"css/style.css.gz",
-		"css/main.css",
-		"scss/main.scss",
+		"css/index.css",
+		"scss/index.scss",
 		"scss/base.scss",
 		"scss/forms.scss",
 		"scss/layout.scss",
@@ -44,6 +42,10 @@ func Assets() error {
 	}
 	var err error
 	TmplBox, err = rice.FindBox("dist")
+	if err != nil {
+		return err
+	}
+
 	return err
 }
 
@@ -67,7 +69,7 @@ func CompileSASS() error {
 		sassBin = bin
 	}
 
-	scssFile := filepath.Join(utils.Params.GetString("STATPING_DIR"), "assets", "scss", "main.scss")
+	scssFile := filepath.Join(utils.Params.GetString("STATPING_DIR"), "assets", "scss", "index.scss")
 	log.Infoln(fmt.Sprintf("Compiling SASS %v into %v", scssFile, scssRendered(scssFile)))
 
 	stdout, stderr, err := utils.Command(sassBin, scssFile, scssRendered(scssFile))
diff --git a/source/source_test.go b/source/source_test.go
index 564e905d..95712f22 100644
--- a/source/source_test.go
+++ b/source/source_test.go
@@ -80,7 +80,7 @@ func TestSaveAndCompileAsset(t *testing.T) {
 	require.Nil(t, err)
 	assertFiles(t, true)
 
-	themeCSS, err := utils.OpenFile(dir + "/assets/css/main.css")
+	themeCSS, err := utils.OpenFile(dir + "/assets/css/index.css")
 	require.Nil(t, err)
 
 	assert.Contains(t, themeCSS, `color: #b1b2b3;`)