Bundle frontend styles locally

backend/internal/web/templates/index.html

@@ -8,6 +8,8 @@
   <!--Favicon-->
   <link rel="icon" type="image/x-icon" href="/fs/public/favicon.png">
   <!-- JS & CSS -->
+  <link id="watchyourlan-icons-css" rel="stylesheet" href="/fs/public/vendor/bootstrap-icons/font/bootstrap-icons.min.css">
+  <link id="watchyourlan-theme-css" rel="stylesheet" href="/fs/public/vendor/aceberg-bootswatch-fork/dist/sand/bootstrap.min.css">
   <script type="module" crossorigin src="/fs/public/assets/index.js"></script>
   <link rel="stylesheet" crossorigin href="/fs/public/assets/index.css">
   </head>
@@ -16,4 +18,4 @@
     <div id="root"></div>
   </body>
 </html>
-{{ end }}
+{{ end }}

frontend/package-lock.json

@@ -1,18 +1,21 @@
 {
   "name": "watchyourlan",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "watchyourlan",
-      "version": "2.1.3",
+      "version": "2.1.4",
       "dependencies": {
         "@solid-primitives/scheduled": "^1.5.2",
         "@solidjs/router": "^0.15.3",
+        "aceberg-bootswatch-fork": "5.3.3-2",
+        "bootstrap-icons": "1.11.3",
         "solid-js": "^1.9.5"
       },
       "devDependencies": {
+        "@types/node": "22.13.10",
         "typescript": "~5.7.2",
         "vite": "^6.2.0",
         "vite-plugin-solid": "^2.11.2"
@@ -1029,6 +1032,22 @@
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "22.13.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.10.tgz",
+      "integrity": "sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.20.0"
+      }
+    },
+    "node_modules/aceberg-bootswatch-fork": {
+      "version": "5.3.3-2",
+      "resolved": "https://registry.npmjs.org/aceberg-bootswatch-fork/-/aceberg-bootswatch-fork-5.3.3-2.tgz",
+      "integrity": "sha512-DE7EB59n718Q+niRQhR1SQf9e6p/Q+U2yBtIbsPCoK1TGgj+n2VYHtcDIyXsbKofWB9D3T/zr5Gkx8EHX9n0jA==",
+      "license": "MIT"
+    },
     "node_modules/babel-plugin-jsx-dom-expressions": {
       "version": "0.39.7",
       "resolved": "https://registry.npmjs.org/babel-plugin-jsx-dom-expressions/-/babel-plugin-jsx-dom-expressions-0.39.7.tgz",
@@ -1070,6 +1089,22 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
+      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/browserslist": {
       "version": "4.24.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
@@ -1509,6 +1544,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",

frontend/package.json

@@ -11,9 +11,12 @@
   "dependencies": {
     "@solid-primitives/scheduled": "^1.5.2",
     "@solidjs/router": "^0.15.3",
+    "aceberg-bootswatch-fork": "5.3.3-2",
+    "bootstrap-icons": "1.11.3",
     "solid-js": "^1.9.5"
   },
   "devDependencies": {
+    "@types/node": "22.13.10",
     "typescript": "~5.7.2",
     "vite": "^6.2.0",
     "vite-plugin-solid": "^2.11.2"

frontend/src/components/Header.tsx

@@ -1,37 +1,39 @@
-import { createSignal } from "solid-js";
+import { onMount } from "solid-js";
 import { appConfig, setAppConfig } from "../functions/exports";
 import { apiGetConfig } from "../functions/api";
 
 function Header() {
-
-  const [themePath, setThemePath] = createSignal('');
-  const [iconsPath, setIconsPath] = createSignal('');
   
   const setCurrentTheme = async () => {
     setAppConfig(await apiGetConfig());
 
     const theme = appConfig().Theme?appConfig().Theme:"sand";
     const color = appConfig().Color?appConfig().Color:"dark";
+    let themePath = "/fs/public/vendor/aceberg-bootswatch-fork/dist/"+theme+"/bootstrap.min.css";
+    let iconsPath = "/fs/public/vendor/bootstrap-icons/font/bootstrap-icons.min.css";
     
-    if (appConfig().NodePath == '') {
+    if (appConfig().NodePath != '') {
-      setThemePath("https://cdn.jsdelivr.net/npm/aceberg-bootswatch-fork@v5.3.3-2/dist/"+theme+"/bootstrap.min.css");
+      themePath = appConfig().NodePath+"/node_modules/bootswatch/dist/"+theme+"/bootstrap.min.css";
-      setIconsPath("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css");
+      iconsPath = appConfig().NodePath+"/node_modules/bootstrap-icons/font/bootstrap-icons.css";
-    } else {
-      setThemePath(appConfig().NodePath+"/node_modules/bootswatch/dist/"+theme+"/bootstrap.min.css");
-      setIconsPath(appConfig().NodePath+"/node_modules/bootstrap-icons/font/bootstrap-icons.css");
     }
 
+    const themeLink = document.getElementById("watchyourlan-theme-css") as HTMLLinkElement | null;
+    const iconsLink = document.getElementById("watchyourlan-icons-css") as HTMLLinkElement | null;
+    themeLink?.setAttribute("href", themePath);
+    iconsLink?.setAttribute("href", iconsPath);
+
     document.documentElement.setAttribute("data-bs-theme", color);
     color === "dark"
       ? document.documentElement.style.setProperty('--transparent-light', '#ffffff15')
       : document.documentElement.style.setProperty('--transparent-light', '#00000015');
   }
-  setCurrentTheme();
+
+  onMount(() => {
+    setCurrentTheme();
+  });
 
   return (
     <>
-    <link rel="stylesheet" href={iconsPath()}></link> {/* icons */}
-    <link rel="stylesheet" href={themePath()}></link> {/* theme */}
     <nav class="navbar navbar-expand-md navbar-dark bg-primary">
       <div class="container-lg">
         <a class="navbar-brand" href="/">

frontend/tsconfig.app.json

@@ -5,6 +5,7 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "types": [],
     "skipLibCheck": true,
 
     /* Bundler mode */

frontend/tsconfig.node.json

@@ -3,6 +3,7 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",
     "lib": ["ES2023"],
+    "types": ["node"],
     "module": "ESNext",
     "skipLibCheck": true,
 

frontend/vite.config.ts

@@ -1,8 +1,51 @@
 import { defineConfig } from 'vite'
 import solid from 'vite-plugin-solid'
+import { copyFileSync, cpSync, mkdirSync, readdirSync, rmSync } from 'node:fs'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const rootDir = dirname(fileURLToPath(import.meta.url))
+
+function copyVendorAssets() {
+  const vendorDir = resolve(rootDir, 'dist/vendor')
+
+  rmSync(vendorDir, { recursive: true, force: true })
+  mkdirSync(vendorDir, { recursive: true })
+
+  const themesDir = resolve(rootDir, 'node_modules/aceberg-bootswatch-fork/dist')
+  for (const theme of readdirSync(themesDir, { withFileTypes: true })) {
+    if (!theme.isDirectory()) {
+      continue
+    }
+
+    const targetDir = resolve(vendorDir, 'aceberg-bootswatch-fork/dist', theme.name)
+    mkdirSync(targetDir, { recursive: true })
+    copyFileSync(
+      resolve(themesDir, theme.name, 'bootstrap.min.css'),
+      resolve(targetDir, 'bootstrap.min.css'),
+    )
+  }
+
+  mkdirSync(resolve(vendorDir, 'bootstrap-icons/font'), { recursive: true })
+  cpSync(
+    resolve(rootDir, 'node_modules/bootstrap-icons/font/bootstrap-icons.min.css'),
+    resolve(vendorDir, 'bootstrap-icons/font/bootstrap-icons.min.css'),
+  )
+  cpSync(
+    resolve(rootDir, 'node_modules/bootstrap-icons/font/fonts'),
+    resolve(vendorDir, 'bootstrap-icons/font/fonts'),
+    { recursive: true },
+  )
+}
 
 export default defineConfig({
-  plugins: [solid()],
+  plugins: [
+    solid(),
+    {
+      name: 'copy-vendor-assets',
+      closeBundle: copyVendorAssets,
+    },
+  ],
   build: {
     rollupOptions: {
       output: {