UI optimizations

This commit is contained in:
KingKDot
2026-04-08 14:37:03 -05:00
parent b711efe6bd
commit d37355ffaa
21 changed files with 110 additions and 50 deletions
+3 -3
View File
@@ -25,8 +25,8 @@
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="/assets/toast.js"></script>
<script src="/assets/ripple.js"></script>
<script defer src="/assets/toast.js"></script>
<script defer src="/assets/ripple.js"></script>
<style>
.accordion-body {
display: grid;
@@ -634,4 +634,4 @@
<script type="module" src="/assets/nav.js"></script>
<script type="module" src="/assets/build.js"></script>
</body>
</html>
</html>
+1 -1
View File
@@ -71,7 +71,7 @@
</form>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<script type="module" src="/assets/nav.js"></script>
<script type="module" src="/assets/console.js"></script>
</body>
+2 -2
View File
@@ -14,8 +14,8 @@
/>
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<script src="/assets/toast.js"></script>
<script src="/assets/ripple.js"></script>
<script defer src="/assets/toast.js"></script>
<script defer src="/assets/ripple.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
+2 -2
View File
@@ -13,8 +13,8 @@
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="/assets/toast.js"></script>
<script src="/assets/ripple.js"></script>
<script defer src="/assets/toast.js"></script>
<script defer src="/assets/ripple.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
+3 -3
View File
@@ -55,7 +55,7 @@
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
<style>
body {
@@ -364,8 +364,8 @@
#sidebar { display: none !important; }
}
</style>
<script src="/assets/toast.js"></script>
<script src="/assets/ripple.js"></script>
<script defer src="/assets/toast.js"></script>
<script defer src="/assets/ripple.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
+2 -2
View File
@@ -21,7 +21,7 @@
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<link rel="stylesheet" href="/assets/console.css" />
<script src="/assets/logout.js"></script>
<script defer src="/assets/logout.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
@@ -273,7 +273,7 @@
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<script type="module" src="/assets/nav.js"></script>
<script type="module" src="/assets/hvnc.js"></script>
</body>
+2 -2
View File
@@ -174,8 +174,8 @@
</div>
</main>
<script type="module" src="/assets/nav.js"></script>
<script src="/assets/toast.js"></script>
<script src="/assets/ripple.js"></script>
<script defer src="/assets/toast.js"></script>
<script defer src="/assets/ripple.js"></script>
<script type="module" src="/assets/main.js"></script>
</body>
</html>
+1 -1
View File
@@ -14,7 +14,7 @@
/>
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<script src="/assets/toast.js"></script>
<script defer src="/assets/toast.js"></script>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100">
<header id="top-nav"></header>
+3 -3
View File
@@ -20,8 +20,8 @@
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<script src="/assets/toast.js"></script>
<script src="/assets/ripple.js"></script>
<script defer src="/assets/toast.js"></script>
<script defer src="/assets/ripple.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
@@ -132,6 +132,6 @@
</main>
<script type="module" src="/assets/nav.js"></script>
<script src="/assets/logs.js"></script>
<script defer src="/assets/logs.js"></script>
</body>
</html>
+4 -4
View File
@@ -47,9 +47,9 @@
z-index: 2;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="/assets/toast.js"></script>
<script src="/assets/ripple.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script defer src="/assets/toast.js"></script>
<script defer src="/assets/ripple.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
@@ -302,7 +302,7 @@
</main>
<script type="module" src="/assets/nav.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script type="module" src="/assets/metrics.js"></script>
</body>
</html>
+4 -4
View File
@@ -18,12 +18,12 @@
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ace.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ace.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<script src="/assets/toast.js"></script>
<script src="/assets/ripple.js"></script>
<script defer src="/assets/toast.js"></script>
<script defer src="/assets/ripple.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
+1 -1
View File
@@ -19,7 +19,7 @@
/>
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
<link rel="stylesheet" href="/assets/custom.css" />
<script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<style>
body {
font-family: "Inter", sans-serif;
+1 -1
View File
@@ -14,7 +14,7 @@
/>
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<script src="/assets/toast.js"></script>
<script defer src="/assets/toast.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
+2 -2
View File
@@ -21,7 +21,7 @@
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<link rel="stylesheet" href="/assets/console.css" />
<script src="/assets/logout.js"></script>
<script defer src="/assets/logout.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
@@ -204,7 +204,7 @@
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<script type="module" src="/assets/nav.js"></script>
<script type="module" src="/assets/remotedesktop.js"></script>
</body>
+6 -6
View File
@@ -27,8 +27,8 @@
</style>
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<script src="/assets/toast.js"></script>
<script src="/assets/ripple.js"></script>
<script defer src="/assets/toast.js"></script>
<script defer src="/assets/ripple.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
@@ -264,10 +264,10 @@
</main>
<script type="module" src="/assets/nav.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/powershell/powershell.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/shell/shell.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/python/python.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/powershell/powershell.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/shell/shell.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/python/python.min.js"></script>
<script type="module" src="/assets/scripts.js"></script>
</body>
</html>
+1 -1
View File
@@ -14,7 +14,7 @@
/>
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<script src="/assets/toast.js"></script>
<script defer src="/assets/toast.js"></script>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100">
<header id="top-nav"></header>
+3 -3
View File
@@ -20,8 +20,8 @@
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<script src="/assets/toast.js"></script>
<script src="/assets/ripple.js"></script>
<script defer src="/assets/toast.js"></script>
<script defer src="/assets/ripple.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
@@ -118,6 +118,6 @@
</main>
<script type="module" src="/assets/nav.js"></script>
<script src="/assets/sol-publish.js"></script>
<script defer src="/assets/sol-publish.js"></script>
</body>
</html>
+2 -2
View File
@@ -14,8 +14,8 @@
/>
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<script src="/assets/toast.js"></script>
<script src="/assets/ripple.js"></script>
<script defer src="/assets/toast.js"></script>
<script defer src="/assets/ripple.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
+2 -2
View File
@@ -21,7 +21,7 @@
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<link rel="stylesheet" href="/assets/console.css" />
<script src="/assets/logout.js"></script>
<script defer src="/assets/logout.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
@@ -125,7 +125,7 @@
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/msgpackr@1.11.8/dist/index.js"></script>
<script type="module" src="/assets/nav.js"></script>
<script type="module" src="/assets/webcam.js"></script>
</body>
+2 -2
View File
@@ -14,8 +14,8 @@
/>
<link rel="stylesheet" href="/assets/main.css" />
<link rel="stylesheet" href="/assets/custom.css" />
<script src="/assets/toast.js"></script>
<script src="/assets/ripple.js"></script>
<script defer src="/assets/toast.js"></script>
<script defer src="/assets/ripple.js"></script>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header>
@@ -7,6 +7,49 @@ type AssetsRouteDeps = {
mimeType: (path: string) => string;
};
const COMPRESSIBLE_TYPES = new Set(["text/html", "text/css", "text/javascript", "application/json", "image/svg+xml"]);
function isCompressible(contentType: string): boolean {
for (const t of COMPRESSIBLE_TYPES) {
if (contentType.startsWith(t)) return true;
}
return false;
}
function acceptsGzip(req: Request): boolean {
return (req.headers.get("accept-encoding") ?? "").includes("gzip");
}
const STATIC_ASSET_CACHE = "public, max-age=3600, stale-while-revalidate=86400";
const MUTABLE_ASSET_CACHE = "public, max-age=60, stale-while-revalidate=300";
const NO_CACHE = "no-cache";
function assetCacheControl(relativePath: string): string {
if (relativePath === "custom.css") return NO_CACHE;
if (relativePath === "notification-sw.js") return NO_CACHE;
if (relativePath.endsWith(".min.js") || relativePath.endsWith(".min.css")) {
return STATIC_ASSET_CACHE;
}
if (/\.(ico|png|jpg|jpeg|webp|woff2?|ttf|eot|svg)$/.test(relativePath)) {
return STATIC_ASSET_CACHE;
}
return MUTABLE_ASSET_CACHE;
}
async function compressedResponse(
req: Request,
body: Uint8Array | ArrayBuffer,
headers: Record<string, string>,
): Promise<Response> {
if (!isCompressible(headers["Content-Type"] ?? "") || !acceptsGzip(req) || body.byteLength < 1024) {
return new Response(body, { headers });
}
const compressed = Bun.gzipSync(new Uint8Array(body instanceof ArrayBuffer ? body : body));
return new Response(compressed, {
headers: { ...headers, "Content-Encoding": "gzip", "Vary": "Accept-Encoding" },
});
}
export async function handleAssetsRoutes(
req: Request,
url: URL,
@@ -17,7 +60,7 @@ export async function handleAssetsRoutes(
return new Response(css, {
headers: {
"Content-Type": "text/css; charset=utf-8",
"Cache-Control": "no-cache",
"Cache-Control": NO_CACHE,
},
});
}
@@ -25,7 +68,8 @@ export async function handleAssetsRoutes(
if (req.method === "GET" && url.pathname === "/favicon.ico") {
const file = Bun.file(path.join(deps.PUBLIC_ROOT, "assets", "favicon.ico"));
if (await file.exists()) {
return new Response(file, { headers: deps.secureHeaders("image/x-icon") });
const headers = { ...deps.secureHeaders("image/x-icon"), "Cache-Control": STATIC_ASSET_CACHE };
return new Response(file, { headers });
}
return new Response("Not found", { status: 404 });
}
@@ -56,10 +100,26 @@ export async function handleAssetsRoutes(
const file = Bun.file(resolvedPath);
if (await file.exists()) {
const headers: Record<string, string> = { ...deps.secureHeaders(deps.mimeType(url.pathname)) };
const contentType = deps.mimeType(url.pathname);
const headers: Record<string, string> = {
...deps.secureHeaders(contentType),
"Cache-Control": assetCacheControl(relativePath),
};
if (relativePath === "notification-sw.js") {
headers["Service-Worker-Allowed"] = "/";
}
const stat = file;
const etag = `"${stat.size.toString(36)}-${stat.lastModified.toString(36)}"`;
headers["ETag"] = etag;
if (req.headers.get("if-none-match") === etag) {
return new Response(null, { status: 304, headers });
}
if (isCompressible(contentType) && acceptsGzip(req)) {
const bytes = await file.arrayBuffer();
return compressedResponse(req, bytes, headers);
}
return new Response(file, { headers });
}
return new Response("Not found", { status: 404 });