From 2bce4e999a7f1620458495ff355127801ff4538e Mon Sep 17 00:00:00 2001
From: Marc Brooks <IDisposable@gmail.com>
Date: Fri, 12 Sep 2025 01:41:41 -0500
Subject: [PATCH] chore: enhance the gzip and cacheable handling of static
 files

Add SVG and ICO to cacheable files.
Emit robots.txt directly.
Recognize WOFF2 (font) files as assets (so the get the immutable treatment)
Pre-gzip the entire /static/ directory (not just /static/assets/) and include SVG, ICO, and HTML files
Ensure fonts.css is processed by vite/rollup so that the preload and css reference the same immutable files (which get long-cached with hashes)
Add CircularXXWeb-Black to the preload list as it is used in the hot-path.
Handle system-driven color-scheme changes from dark to light correctly.
---
 Makefile             |  5 ++++-
 ui/index.html        | 41 +++++++++++++++++++++++------------------
 ui/public/robots.txt |  2 --
 ui/vite.config.ts    |  1 +
 web.go               | 16 +++++++++++++---
 5 files changed, 41 insertions(+), 24 deletions(-)
 delete mode 100644 ui/public/robots.txt

diff --git a/Makefile b/Makefile
index 178e6daf..ab393b00 100644
--- a/Makefile
+++ b/Makefile
@@ -63,14 +63,17 @@ build_dev_test: build_test2json build_gotestsum
 
 frontend:
 	cd ui && npm ci && npm run build:device && \
-	find ../static/assets \
+	find ../static/ \
 		-type f \
 		\( -name '*.js' \
 		-o -name '*.css' \
+		-o -name '*.html' \
+		-o -name '*.ico' \
 		-o -name '*.png' \
 		-o -name '*.jpg' \
 		-o -name '*.jpeg' \
 		-o -name '*.gif' \
+		-o -name '*.svg' \
 		-o -name '*.webp' \
 		-o -name '*.woff2' \
 		\) \
diff --git a/ui/index.html b/ui/index.html
index 0ce91234..a798221c 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -6,27 +6,34 @@
     <!-- These are the fonts used in the app -->
     <link
       rel="preload"
-      href="/fonts/CircularXXWeb-Medium.woff2"
+      href="./public/fonts/CircularXXWeb-Medium.woff2"
       as="font"
       type="font/woff2"
       crossorigin
     />
     <link
       rel="preload"
-      href="/fonts/CircularXXWeb-Book.woff2"
+      href="./public/fonts/CircularXXWeb-Book.woff2"
       as="font"
       type="font/woff2"
       crossorigin
     />
     <link
       rel="preload"
-      href="/fonts/CircularXXWeb-Regular.woff2"
+      href="./public/fonts/CircularXXWeb-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="./public/fonts/CircularXXWeb-Black.woff2"
       as="font"
       type="font/woff2"
       crossorigin
     />
     <title>JetKVM</title>
-    <link rel="stylesheet" href="/fonts/fonts.css" />
+    <link rel="stylesheet" href="./public/fonts/fonts.css" />
     <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="shortcut icon" href="/favicon.ico" />
@@ -36,23 +43,21 @@
     <meta name="theme-color" content="#051946" />
     <meta name="description" content="A web-based KVM console for managing remote servers." />
     <script>
-      // Initial theme setup
-      document.documentElement.classList.toggle(
-        "dark",
-        localStorage.theme === "dark" ||
+      function applyThemeFromPreference() {
+        // dark theme setup
+        var darkDesired = localStorage.theme === "dark" ||
           (!("theme" in localStorage) &&
-            window.matchMedia("(prefers-color-scheme: dark)").matches),
-      );
+            window.matchMedia("(prefers-color-scheme: dark)").matches)
+
+        document.documentElement.classList.toggle("dark", darkDesired)
+      }
+
+      // initial theme application
+      applyThemeFromPreference();
 
       // Listen for system theme changes
-      window
-        .matchMedia("(prefers-color-scheme: dark)")
-        .addEventListener("change", ({ matches }) => {
-          if (!("theme" in localStorage)) {
-            // Only auto-switch if user hasn't manually set a theme
-            document.documentElement.classList.toggle("dark", matches);
-          }
-        });
+      window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", applyThemeFromPreference);
+      window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", applyThemeFromPreference);
     </script>
   </head>
   <body
diff --git a/ui/public/robots.txt b/ui/public/robots.txt
deleted file mode 100644
index 1f53798b..00000000
--- a/ui/public/robots.txt
+++ /dev/null
@@ -1,2 +0,0 @@
-User-agent: *
-Disallow: /
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index e227f67f..13b2da02 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -31,6 +31,7 @@ export default defineConfig(({ mode, command }) => {
     esbuild: {
       pure: ["console.debug"],
     },
+    assetsInclude: ["**/*.woff2"],
     build: {
       outDir: isCloud ? "dist" : "../static",
       rollupOptions: {
diff --git a/web.go b/web.go
index 883ebb75..f1aa1ab4 100644
--- a/web.go
+++ b/web.go
@@ -69,8 +69,7 @@ type SetupRequest struct {
 }
 
 var cachableFileExtensions = []string{
-	".jpg", ".jpeg", ".png", ".gif", ".webp", ".woff2",
-	".ico",
+	".jpg", ".jpeg", ".png", ".svg", ".gif", ".webp", ".ico", ".woff2",
 }
 
 func setupRouter() *gin.Engine {
@@ -83,7 +82,10 @@ func setupRouter() *gin.Engine {
 		}),
 	))
 
-	staticFS, _ := fs.Sub(staticFiles, "static")
+	staticFS, err := fs.Sub(staticFiles, "static")
+	if err != nil {
+		logger.Fatal().Err(err).Msg("failed to get rooted static files subdirectory")
+	}
 	staticFileServer := http.StripPrefix("/static", statigz.FileServer(
 		staticFS.(fs.ReadDirFS),
 	))
@@ -109,9 +111,17 @@ func setupRouter() *gin.Engine {
 		c.Next()
 	})
 
+	r.GET("/robots.txt", func(c *gin.Context) {
+		c.Header("Content-Type", "text/plain")
+		c.Header("Cache-Control", "public, max-age=31536000, immutable") // Cache for 1 year
+		c.String(http.StatusOK, "User-agent: *\nDisallow: /")
+	})
+
 	r.Any("/static/*w", func(c *gin.Context) {
 		staticFileServer.ServeHTTP(c.Writer, c.Request)
 	})
+
+	// Public routes (no authentication required)
 	r.POST("/auth/login-local", handleLogin)
 
 	// We use this to determine if the device is setup