mirror of https://github.com/jetkvm/kvm.git
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.
This commit is contained in:
Marc Brooks
GitHub
parent
33e099f258
commit
ca8b06f4cf
5
Makefile
5
Makefile
|
|
@ -63,14 +63,17 @@ build_dev_test: build_test2json build_gotestsum
|
||||||
|
|
||||||
frontend:
|
frontend:
|
||||||
cd ui && npm ci && npm run build:device && \
|
cd ui && npm ci && npm run build:device && \
|
||||||
find ../static/assets \
|
find ../static/ \
|
||||||
-type f \
|
-type f \
|
||||||
\( -name '*.js' \
|
\( -name '*.js' \
|
||||||
-o -name '*.css' \
|
-o -name '*.css' \
|
||||||
|
-o -name '*.html' \
|
||||||
|
-o -name '*.ico' \
|
||||||
-o -name '*.png' \
|
-o -name '*.png' \
|
||||||
-o -name '*.jpg' \
|
-o -name '*.jpg' \
|
||||||
-o -name '*.jpeg' \
|
-o -name '*.jpeg' \
|
||||||
-o -name '*.gif' \
|
-o -name '*.gif' \
|
||||||
|
-o -name '*.svg' \
|
||||||
-o -name '*.webp' \
|
-o -name '*.webp' \
|
||||||
-o -name '*.woff2' \
|
-o -name '*.woff2' \
|
||||||
\) \
|
\) \
|
||||||
|
|
|
||||||
|
|
@ -6,27 +6,34 @@
|
||||||
<!-- These are the fonts used in the app -->
|
<!-- These are the fonts used in the app -->
|
||||||
<link
|
<link
|
||||||
rel="preload"
|
rel="preload"
|
||||||
href="/fonts/CircularXXWeb-Medium.woff2"
|
href="./public/fonts/CircularXXWeb-Medium.woff2"
|
||||||
as="font"
|
as="font"
|
||||||
type="font/woff2"
|
type="font/woff2"
|
||||||
crossorigin
|
crossorigin
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
rel="preload"
|
rel="preload"
|
||||||
href="/fonts/CircularXXWeb-Book.woff2"
|
href="./public/fonts/CircularXXWeb-Book.woff2"
|
||||||
as="font"
|
as="font"
|
||||||
type="font/woff2"
|
type="font/woff2"
|
||||||
crossorigin
|
crossorigin
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
rel="preload"
|
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"
|
as="font"
|
||||||
type="font/woff2"
|
type="font/woff2"
|
||||||
crossorigin
|
crossorigin
|
||||||
/>
|
/>
|
||||||
<title>JetKVM</title>
|
<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/png" href="/favicon-96x96.png" sizes="96x96" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<link rel="shortcut icon" href="/favicon.ico" />
|
<link rel="shortcut icon" href="/favicon.ico" />
|
||||||
|
|
@ -36,23 +43,21 @@
|
||||||
<meta name="theme-color" content="#051946" />
|
<meta name="theme-color" content="#051946" />
|
||||||
<meta name="description" content="A web-based KVM console for managing remote servers." />
|
<meta name="description" content="A web-based KVM console for managing remote servers." />
|
||||||
<script>
|
<script>
|
||||||
// Initial theme setup
|
function applyThemeFromPreference() {
|
||||||
document.documentElement.classList.toggle(
|
// dark theme setup
|
||||||
"dark",
|
var darkDesired = localStorage.theme === "dark" ||
|
||||||
localStorage.theme === "dark" ||
|
|
||||||
(!("theme" in localStorage) &&
|
(!("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
|
// Listen for system theme changes
|
||||||
window
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", applyThemeFromPreference);
|
||||||
.matchMedia("(prefers-color-scheme: dark)")
|
window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", applyThemeFromPreference);
|
||||||
.addEventListener("change", ({ matches }) => {
|
|
||||||
if (!("theme" in localStorage)) {
|
|
||||||
// Only auto-switch if user hasn't manually set a theme
|
|
||||||
document.documentElement.classList.toggle("dark", matches);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body
|
<body
|
||||||
|
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
User-agent: *
|
|
||||||
Disallow: /
|
|
||||||
|
|
@ -31,6 +31,7 @@ export default defineConfig(({ mode, command }) => {
|
||||||
esbuild: {
|
esbuild: {
|
||||||
pure: ["console.debug"],
|
pure: ["console.debug"],
|
||||||
},
|
},
|
||||||
|
assetsInclude: ["**/*.woff2"],
|
||||||
build: {
|
build: {
|
||||||
outDir: isCloud ? "dist" : "../static",
|
outDir: isCloud ? "dist" : "../static",
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
|
|
|
||||||
16
web.go
16
web.go
|
|
@ -69,8 +69,7 @@ type SetupRequest struct {
|
||||||
}
|
}
|
||||||
|
|
||||||
var cachableFileExtensions = []string{
|
var cachableFileExtensions = []string{
|
||||||
".jpg", ".jpeg", ".png", ".gif", ".webp", ".woff2",
|
".jpg", ".jpeg", ".png", ".svg", ".gif", ".webp", ".ico", ".woff2",
|
||||||
".ico",
|
|
||||||
}
|
}
|
||||||
|
|
||||||
func setupRouter() *gin.Engine {
|
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(
|
staticFileServer := http.StripPrefix("/static", statigz.FileServer(
|
||||||
staticFS.(fs.ReadDirFS),
|
staticFS.(fs.ReadDirFS),
|
||||||
))
|
))
|
||||||
|
|
@ -109,9 +111,17 @@ func setupRouter() *gin.Engine {
|
||||||
c.Next()
|
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) {
|
r.Any("/static/*w", func(c *gin.Context) {
|
||||||
staticFileServer.ServeHTTP(c.Writer, c.Request)
|
staticFileServer.ServeHTTP(c.Writer, c.Request)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Public routes (no authentication required)
|
||||||
r.POST("/auth/login-local", handleLogin)
|
r.POST("/auth/login-local", handleLogin)
|
||||||
|
|
||||||
// We use this to determine if the device is setup
|
// We use this to determine if the device is setup
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue