UI optimizations
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 });
|
||||
|
||||
Reference in New Issue
Block a user