webpack fixes, theme editor fixes

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

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/vendor.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">
     {{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 %> <% }) %>

frontend/src/App.vue

@@ -55,8 +55,5 @@
 
 <style lang="scss">
     @import "./assets/css/bootstrap.min.css";
-    @import "./assets/scss/base";
+    @import "./assets/scss/index";
-    @import "./assets/scss/layout";
-    @import "./assets/scss/forms";
-    @import "./assets/scss/mobile";
 </style>

frontend/src/assets/scss/index.scss

@@ -1,6 +1,6 @@
 @import 'variables';
 @import 'mixin';
+@import 'layout';
 @import 'base';
 @import 'forms';
-@import 'layout';
 @import 'mobile';

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;

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>

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>

frontend/src/components/Dashboard/Incidents.vue

@@ -50,8 +50,9 @@
 </template>
 
 <script>
-    import Api from "../../API";
+import Api from "../../API";
-    const FormIncidentUpdates = () => import(/* webpackChunkName: "dashboard" */ '@/forms/IncidentUpdates')
+
+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>

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>

frontend/src/components/Dashboard/ThemeEditor.vue

@@ -57,15 +57,16 @@
 </template>
 
 <script>
-  import Api from "../../API";
+import Api from "../../API";
 
-  // require component
+// require component
-  import { codemirror } from 'vue-codemirror'
+import {codemirror} from 'vue-codemirror'
-  import 'codemirror/mode/css/css.js'
 
-  import 'codemirror/lib/codemirror.css'
+import('codemirror/mode/css/css.js')
-  import 'codemirror-colorpicker/dist/codemirror-colorpicker.css'
+
-  import 'codemirror-colorpicker'
+  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>

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
+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'
 
 export default {
     name: 'Notifier',
@@ -325,10 +329,3 @@ export default {
     }
 }
 </script>
-<style scoped>
-    .CodeMirror {
-        border: 1px solid #eee;
-        height: 550px;
-        font-size: 9pt;
-    }
-</style>

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);

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>

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

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>`
+

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")
 

source/generate_wiki.go

@@ -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>`))

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",
+		"css/index.css",
-		"scss/main.scss",
+		"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))

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;`)