take screenshot script

.vscode/launch.json

@@ -24,6 +24,17 @@
                 "./docs",
             ],
             "outputCapture": "std",
+        },
+        {
+            "request": "launch",
+            "name": "Take Screenshot",
+            "type": "pwa-node",
+            "cwd": "${workspaceFolder}/tools/screenshot",
+            "runtimeExecutable": "node",
+            "runtimeArgs": [
+                "app.js",
+            ],
+            "outputCapture": "std",
         }
     ]
 }

src/main.go

@@ -83,8 +83,10 @@ func loadData() {
 	}
 
 	// Load template engine
-	themefs = http.FileServer(http.Dir(filepath.Join(pwd, "themes", appConfig.Website.Theme)))
-	tmpl, _ := template.ParseFiles(filepath.Join(pwd, "themes", appConfig.Website.Theme, "index.html"))
+	themeDir := filepath.Join(pwd, "themes", appConfig.Website.Theme)
+	log.Println(themeDir)
+	themefs = http.FileServer(http.Dir(themeDir))
+	tmpl, _ := template.ParseFiles(filepath.Join(themeDir, "index.html"))
 	webTemplate = tmpl
 }
 
@@ -128,20 +130,24 @@ var weatherTimeOut int64
 var weatherCache []byte
 
 func serveWeather(w http.ResponseWriter, r *http.Request) {
-	if time.Now().UnixMilli() >= weatherTimeOut {
-		resp, err := http.Get("https://api.openweathermap.org/data/2.5/weather?lat=" + appConfig.OpenWeatherMap.Latitude + "&lon=" + appConfig.OpenWeatherMap.Longitude + "&limit=1&appid=" + appConfig.OpenWeatherMap.ApiKey)
-		if err != nil {
-			log.Fatalln(err)
-			return
-		}
-		body, err := ioutil.ReadAll(resp.Body)
-		if err != nil {
-			log.Fatalln(err)
-			return
-		}
-		weatherCache = body
-		weatherTimeOut = time.Now().UnixMilli() + 1800000
-	}
 	w.Header().Set("Content-Type", "application/json")
-	w.Write(weatherCache)
+	if appConfig.OpenWeatherMap.ApiKey == "demo" {
+		w.Write([]byte("{\"coord\":{\"lon\":105.8085,\"lat\":21.0427},\"weather\":[{\"id\":803,\"main\":\"Clouds\",\"description\":\"broken clouds\",\"icon\":\"04n\"}],\"base\":\"stations\",\"main\":{\"temp\":301.14,\"feels_like\":305.69,\"temp_min\":301.14,\"temp_max\":301.14,\"pressure\":1004,\"humidity\":83},\"visibility\":10000,\"wind\":{\"speed\":6.17,\"deg\":120},\"clouds\":{\"all\":75},\"dt\":1650981392,\"sys\":{\"type\":1,\"id\":9308,\"country\":\"VN\",\"sunrise\":1650925786,\"sunset\":1650971952},\"timezone\":25200,\"id\":1581130,\"name\":\"Hanoi\",\"cod\":200}"))
+	} else {
+		if time.Now().UnixMilli() >= weatherTimeOut {
+			resp, err := http.Get("https://api.openweathermap.org/data/2.5/weather?lat=" + appConfig.OpenWeatherMap.Latitude + "&lon=" + appConfig.OpenWeatherMap.Longitude + "&limit=1&appid=" + appConfig.OpenWeatherMap.ApiKey)
+			if err != nil {
+				log.Fatalln(err)
+				return
+			}
+			body, err := ioutil.ReadAll(resp.Body)
+			if err != nil {
+				log.Fatalln(err)
+				return
+			}
+			weatherCache = body
+			weatherTimeOut = time.Now().UnixMilli() + 1800000
+		}
+		w.Write(weatherCache)
+	}
 }

src/themes/flame/css/magma.css

@@ -71,7 +71,7 @@ body {
 .group-items .icon-container {
   margin-top: 0px !important;
   margin-left: 0.5em !important;
-  margin-right: 0.5em !important;
+  margin-right: 0.7em !important;
   text-align: center;
   width: 32px;
   height: 32px;

src/themes/flame/index.html

@@ -88,8 +88,8 @@
         <div id="footer" class="row"></div>
     </div>
 
-    <script src="theme/js/skycons.min.js"></script>
-    <script src="common/js/core.js"></script>
+    <script src="/theme/js/skycons.min.js"></script>
+    <script src="/common/js/core.js"></script>
     <script>
         window.config = {
             localization: {{.Config.Localization}},

tools/screenshot/app.js

@@ -0,0 +1,44 @@
+const puppeteer = require('puppeteer');
+const { readdirSync, copyFileSync } = require('fs');
+const { exec } = require('child_process');
+
+const getDirectories = source =>
+    readdirSync(source, { withFileTypes: true })
+        .filter(dirent => dirent.isDirectory())
+        .map(dirent => dirent.name);
+
+const replaceFiles = (source, destination) =>
+    readdirSync(source, { withFileTypes: true })
+        .filter(dirent => !dirent.isDirectory())
+        .forEach(file => copyFileSync(`${source}/${file.name}`, `${destination}/${file.name}`));
+
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+(async () => {
+    const browser = await puppeteer.launch({
+        headless: true,
+        defaultViewport: {
+            width: 1920,
+            height: 1080
+        }
+    });
+
+    const themes = getDirectories("./config");
+    for (const theme of themes) {
+        replaceFiles(`./config/${theme}`, '../../src/data');
+        exec('cd ../../src/ && go run main.go');
+        await sleep(500);
+
+        const page = await browser.newPage();
+        await page.goto('http://localhost:7001');
+        await page.waitForNetworkIdle();
+        await page.screenshot({ path: `../../docs/screenshots/${theme}.png` });
+        await page.close();
+
+        exec('pkill -f go');
+        exec('pkill -f main');
+        await sleep(500);
+    }
+
+    browser.close();
+})();

tools/screenshot/config/flame/config.yaml

@@ -0,0 +1,12 @@
+website:
+  theme: "flame"
+  title: "Magma Dashboard"
+  description: ""
+  language: "en"
+  localization: "en-US"
+  useMetric: true
+openweathermap:
+  apiKey: demo
+  lon: 0
+  lat: 0
+addons:

tools/screenshot/config/flame/data.yaml

@@ -0,0 +1,70 @@
+data:
+  - title: Applications
+    columns:
+      - title: Servers
+        bookmarks:
+          - name: OpenWRT
+            icon: fa-solid fa-wifi
+            url: http://192.168.2.1
+          - name: Proxmox
+            icon: https://iconape.com/wp-content/files/pk/18549/svg/cib-proxmox.svg
+            url: http://192.168.2.200
+          - name: Home Assistant
+            icon: fa-solid fa-house
+            url: http://huawei.lan:8123/
+          - name: Docker
+            icon: fa-brands fa-docker
+            url: http://docker.lan/#!/2/docker/containers
+      - title: Nas
+        bookmarks:
+          - name: TrueNas
+            icon: fa-solid fa-server
+            url: http://nas.lan/
+          - name: Kerberos
+            icon: fa-solid fa-video
+            url: http://huawei.lan:8200/
+          - name: jDownloader
+            icon: fa-solid fa-cloud-arrow-down
+            url: http://nas.lan:9800/
+      - title: Monitoring
+        bookmarks:
+          - name: Grafana
+            icon: https://iconape.com/wp-content/files/sn/17615/svg/cib-grafana.svg
+            url: https://help14.grafana.net/
+          - name: InfluxDb
+            icon: fa-solid fa-database
+            url: http://20.205.154.71:8086/
+      - title: Tools
+        bookmarks:
+          - name: Bitwarden
+            icon: fa-solid fa-shield-halved
+            url: https://vault.help14.com/
+  - title: Bookmarks
+    columns:
+      - title: Social Media
+        bookmarks:
+          - name: Facebook
+            icon: fa-brands fa-facebook
+            url: https://www.facebook.com
+          - name: Reddit
+            icon: fa-brands fa-reddit
+            url: https://www.reddit.com
+          - name: Youtube
+            icon: fa-brands fa-youtube
+            url: https://www.youtube.com
+      - title: Shopping
+        bookmarks:
+          - name: Shopee
+            icon: fa-solid fa-bag-shopping
+            url: https://shopee.vn
+          - name: Lazada
+            icon: fa-solid fa-heart
+            url: https://www.lazada.vn/
+          - name: Shipping
+            icon: fa-solid fa-truck
+            url: http://nhaphang.com/i/#
+      - title: Tools
+        bookmarks:
+          - name: Maps
+            icon: fa-solid fa-map
+            url: https://www.google.com/maps

tools/screenshot/config/leaf/config.yaml

@@ -0,0 +1,12 @@
+website:
+  theme: "leaf"
+  title: "Magma Dashboard"
+  description: ""
+  language: "en"
+  localization: "en-US"
+  useMetric: true
+openweathermap:
+  apiKey: demo
+  lon: 0
+  lat: 0
+addons:

tools/screenshot/config/leaf/data.yaml

@@ -0,0 +1,73 @@
+data:
+  - title: Applications
+    columns:
+      - title: Servers
+        bookmarks:
+          - name: OpenWRT
+            icon: fa-solid fa-wifi
+            url: http://192.168.2.1
+          - name: Proxmox
+            icon: https://iconape.com/wp-content/files/pk/18549/svg/cib-proxmox.svg
+            url: http://192.168.2.200
+          - name: Home Assistant
+            icon: fa-solid fa-house
+            url: http://huawei.lan:8123/
+          - name: Docker
+            icon: fa-brands fa-docker
+            url: http://docker.lan/#!/2/docker/containers
+      - title: Nas
+        bookmarks:
+          - name: TrueNas
+            icon: fa-solid fa-server
+            url: http://nas.lan/
+          - name: Kerberos
+            icon: fa-solid fa-video
+            url: http://huawei.lan:8200/
+          - name: jDownloader
+            icon: fa-solid fa-cloud-arrow-down
+            url: http://nas.lan:9800/
+      - title: Monitoring
+        bookmarks:
+          - name: Grafana
+            icon: https://iconape.com/wp-content/files/sn/17615/svg/cib-grafana.svg
+            url: https://help14.grafana.net/
+          - name: InfluxDb
+            icon: fa-solid fa-database
+            url: http://20.205.154.71:8086/
+      - title: Tools
+        bookmarks:
+          - name: Bitwarden
+            icon: fa-solid fa-shield-halved
+            url: https://vault.help14.com/
+  - title: Bookmarks
+    columns:
+      - title: Social Media
+        bookmarks:
+          - name: Facebook
+            icon: fa-brands fa-facebook
+            url: https://www.facebook.com
+          - name: Reddit
+            icon: fa-brands fa-reddit
+            url: https://www.reddit.com
+          - name: Voz
+            icon: https://files.help14.com/voz.svg
+            url: https://voz.vn
+          - name: Youtube
+            icon: fa-brands fa-youtube
+            url: https://www.youtube.com
+      - title: Shopping
+        bookmarks:
+          - name: Shopee
+            icon: fa-solid fa-bag-shopping
+            url: https://shopee.vn
+          - name: Lazada
+            icon: fa-solid fa-heart
+            url: https://www.lazada.vn/
+          - name: Shipping
+            icon: fa-solid fa-truck
+            url: http://nhaphang.com/i/#
+      - title: Tools
+        bookmarks:
+          - name: Maps
+            icon: fa-solid fa-map
+            url: https://www.google.com/maps

tools/screenshot/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "screenshot",
+  "version": "1.0.0",
+  "description": "Take screenshot of all themes",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Help-14",
+  "license": "ISC",
+  "dependencies": {
+    "puppeteer": "^13.6.0"
+  }
+}