@valentinkolb/cloud 0.5.1 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valentinkolb/cloud",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Modular Hono+SolidJS framework for building per-app docker services behind a dynamic gateway. Powers cloud.stuve-ulm.de.",
   "license": "MIT",
   "repository": {

package/scripts/build.ts

@@ -21,11 +21,13 @@
  * it ships a `scripts/build-extras.ts` that this script runs at the end.
  */
 import { existsSync } from "node:fs";
-import { cp, mkdir, readdir, rm } from "node:fs/promises";
-import { dirname, resolve } from "node:path";
+import { cp, mkdir, readdir, readFile, rm, writeFile } from "node:fs/promises";
+import { dirname, extname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { brotliCompress, constants as zlibConstants, gzip } from "node:zlib";
 import tailwind from "bun-plugin-tailwind";
 import { Glob, CryptoHasher } from "bun";
+import { promisify } from "node:util";
 
 const appId = process.env.APP_ID;
 if (!appId) throw new Error("APP_ID env var required");
@@ -47,6 +49,8 @@ if (!existsSync(appDir)) throw new Error(`Unknown app dir: ${appDir} (set APP_DI
 
 const dist = resolve(root, "dist");
 const distPublic = resolve(dist, "public");
+const compressBrotli = promisify(brotliCompress);
+const compressGzip = promisify(gzip);
 
 await rm(dist, { recursive: true, force: true });
 await mkdir(distPublic, { recursive: true });
@@ -59,6 +63,29 @@ const islandId = (file: string): string => {
   return new CryptoHasher("md5").update(rel).digest("hex").slice(0, 12);
 };
 
+const compressibleExtensions = new Set([".css", ".html", ".js", ".json", ".map", ".svg", ".txt", ".xml"]);
+
+async function precompressDistAssets(dir: string): Promise<void> {
+  if (!existsSync(dir)) return;
+
+  for await (const file of new Glob("**/*").scan({ cwd: dir, absolute: true, onlyFiles: true })) {
+    if (file.endsWith(".br") || file.endsWith(".gz")) continue;
+    if (!compressibleExtensions.has(extname(file))) continue;
+
+    const source = await readFile(file);
+    const [br, gz] = await Promise.all([
+      compressBrotli(source, {
+        params: {
+          [zlibConstants.BROTLI_PARAM_QUALITY]: zlibConstants.BROTLI_MAX_QUALITY,
+        },
+      }),
+      compressGzip(source, { level: zlibConstants.Z_BEST_COMPRESSION }),
+    ]);
+
+    await Promise.all([writeFile(`${file}.br`, br), writeFile(`${file}.gz`, gz)]);
+  }
+}
+
 // Register the app's SSR plugin (Solid JSX transform + island bundler).
 // In the monorepo this resolves via `packages/<id>/src/config`; in standalone
 // it resolves via the appDir path (because the script's relative imports
@@ -133,4 +160,7 @@ if (existsSync(extras)) {
   await import(extras);
 }
 
+await precompressDistAssets(resolve(dist, "public"));
+await precompressDistAssets(resolve(dist, "_ssr"));
+
 console.log(`Built ${appId} → ${dist}`);

package/src/_internal/define-app.ts

@@ -9,7 +9,6 @@ import type { SsrConfig } from "@valentinkolb/ssr";
 import { createConfig as createSsrConfig } from "@valentinkolb/ssr";
 import { createSSRHandler, routes } from "@valentinkolb/ssr/hono";
 import { Hono } from "hono";
-import { serveStatic } from "hono/bun";
 import { generateSpecs } from "hono-openapi";
 import type { AppCapabilities, AppLifecycle, AppMeta, AppSearchContext, CloudContext } from "../contracts/app";
 import type { AppRegistryEntry } from "../contracts/registry";
@@ -23,6 +22,7 @@ import { createSettingsAPI, type SettingsAPI } from "../services/settings/api";
 import { registerSettings, type SettingDef } from "../services/settings/defaults";
 import { createHeartbeat } from "./heartbeat";
 import { ensureRuntimeWatcher, getCurrentRuntime, stopRuntimeWatcher } from "./runtime-watcher";
+import { servePublicAsset } from "./static-assets";
 
 /** Cache-busting version stamp — changes on every server start / rebuild. */
 const v = Date.now();
@@ -252,6 +252,9 @@ export const defineApp = <const S extends AppSettingsMap = {}>(opts: AppOptions<
     <meta name="mobile-web-app-capable" content="yes">
     <link rel="icon" href="/branding/favicon">
     <style data-cloud-css-layers>@layer theme, base, components, utilities;</style>
+    <link rel="preload" href="/public/tabler-icons.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="stylesheet" href="/public/fonts.css?v=${v}">
+    <link rel="stylesheet" href="/public/tabler-icons.css?v=${v}">
     <link rel="stylesheet" href="/public/${opts.id}/app.css?v=${v}">
     <link rel="stylesheet" href="/public/global.css?v=${v}">
     <script>${themeBootstrapScript}</script>
@@ -349,19 +352,7 @@ export const defineApp = <const S extends AppSettingsMap = {}>(opts: AppOptions<
 
     const server = new Hono()
       .route(ssrMountPath, routes(config))
-      .use(
-        "/public/*",
-        serveStatic({
-          root: "./",
-          onFound: (_path, c) => {
-            c.header("Cache-Control", isDevelopment ? "no-store" : "public, max-age=31536000, immutable");
-          },
-        }),
-      )
-      // serveStatic calls next() on miss — terminate /public/* here so a
-      // missing asset is a clean 404 instead of falling through to the app
-      // fetch (which might render an HTML page for the missing path).
-      .all("/public/*", (c) => c.notFound());
+      .all("/public/*", servePublicAsset(isDevelopment));
 
     if (startOpts.capabilities?.search) {
       const searchRun = startOpts.capabilities.search.run;

package/src/_internal/static-assets.ts

@@ -0,0 +1,86 @@
+import { resolve, sep } from "node:path";
+import type { Context } from "hono";
+
+const publicRoot = resolve(process.cwd(), "public");
+
+function decodePathname(pathname: string): string | null {
+  try {
+    return decodeURIComponent(pathname);
+  } catch {
+    return null;
+  }
+}
+
+function resolvePublicAsset(pathname: string): string | null {
+  const decoded = decodePathname(pathname);
+  if (!decoded?.startsWith("/public/")) return null;
+
+  const path = resolve(process.cwd(), decoded.slice(1));
+  if (path !== publicRoot && !path.startsWith(`${publicRoot}${sep}`)) return null;
+  return path;
+}
+
+function acceptsEncoding(header: string | null, encoding: "br" | "gzip"): boolean {
+  if (!header) return false;
+
+  return header.split(",").some((part) => {
+    const [name, ...params] = part.trim().split(";");
+    if (name?.trim().toLowerCase() !== encoding) return false;
+    return !params.some((param) => {
+      const [key, value] = param.trim().split("=");
+      return key?.toLowerCase() === "q" && Number(value) === 0;
+    });
+  });
+}
+
+async function encodedFile(path: string, encoding: "br" | "gzip"): Promise<Bun.BunFile | null> {
+  const suffix = encoding === "br" ? ".br" : ".gz";
+  const file = Bun.file(`${path}${suffix}`);
+  return (await file.exists()) ? file : null;
+}
+
+export function servePublicAsset(isDevelopment: boolean) {
+  return async (c: Context) => {
+    if (c.req.method !== "GET" && c.req.method !== "HEAD") {
+      c.header("Allow", "GET, HEAD");
+      return c.text("Method Not Allowed", 405);
+    }
+
+    const path = resolvePublicAsset(new URL(c.req.url).pathname);
+    if (!path) return c.notFound();
+
+    const sourceFile = Bun.file(path);
+    if (!(await sourceFile.exists())) return c.notFound();
+
+    const acceptEncoding = c.req.header("Accept-Encoding") ?? null;
+    let selected = sourceFile;
+    let selectedEncoding: "br" | "gzip" | null = null;
+
+    if (acceptsEncoding(acceptEncoding, "br")) {
+      const br = await encodedFile(path, "br");
+      if (br) {
+        selected = br;
+        selectedEncoding = "br";
+      }
+    }
+
+    if (!selectedEncoding && acceptsEncoding(acceptEncoding, "gzip")) {
+      const gz = await encodedFile(path, "gzip");
+      if (gz) {
+        selected = gz;
+        selectedEncoding = "gzip";
+      }
+    }
+
+    const headers = new Headers({
+      "Cache-Control": isDevelopment ? "no-store" : "public, max-age=31536000, immutable",
+      "Content-Length": String(selected.size),
+      "Content-Type": sourceFile.type || "application/octet-stream",
+      Vary: "Accept-Encoding",
+    });
+
+    if (selectedEncoding) headers.set("Content-Encoding", selectedEncoding);
+
+    return new Response(c.req.method === "HEAD" ? null : selected, { headers });
+  };
+}

package/src/styles/global.css

@@ -9,25 +9,12 @@
 @custom-variant dark (&:where(.dark, .dark *));
 @custom-variant light (html:not(.dark) &);
 
-@import "@tabler/icons-webfont/dist/tabler-icons.css";
-
-/* IBM Plex family — Sans for body, Mono for code, Condensed for badges/tags.
-   Per-weight imports keep the network payload predictable; we deliberately
-   skip the lighter weights (100–300) and italic-condensed since the design
-   system never uses them. */
-@import "@fontsource/ibm-plex-sans/400.css";
-@import "@fontsource/ibm-plex-sans/400-italic.css";
-@import "@fontsource/ibm-plex-sans/500.css";
-@import "@fontsource/ibm-plex-sans/600.css";
-@import "@fontsource/ibm-plex-sans/700.css";
-@import "@fontsource/ibm-plex-mono/400.css";
-@import "@fontsource/ibm-plex-mono/400-italic.css";
-@import "@fontsource/ibm-plex-mono/500.css";
-@import "@fontsource/ibm-plex-mono/600.css";
-@import "@fontsource/ibm-plex-sans-condensed/400.css";
-@import "@fontsource/ibm-plex-sans-condensed/500.css";
-@import "@fontsource/ibm-plex-sans-condensed/600.css";
-@import "@fontsource/ibm-plex-sans-condensed/700.css";
+/* IBM Plex font-face rules are emitted as `/public/fonts.css` during the core
+   build. Keeping them out of global.css avoids Bun inlining the font binaries
+   as base64 into the render-blocking stylesheet. */
+/* Tabler icon font rules are emitted as `/public/tabler-icons.css` during the
+   core build and preloaded by the shared HTML template to reduce icon flicker
+   without changing icon layout semantics. */
 
 @import "./tokens.css";
 @import "./utilities-buttons.css";
@@ -174,7 +161,7 @@
    beat stdlib's one-class embedded <style> the same way the dark-mode
    overrides above do. font-family is otherwise unset by stdlib, so the
    chart would inherit the app sans — we pin the numeric labels to the
-   platform mono stack (IBM Plex Mono via @fontsource). */
+   platform mono stack (IBM Plex Mono via `/public/fonts.css`). */
 .stdlib-chart .stdlib-chart-tick-label,
 .stdlib-chart .stdlib-chart-bar-value,
 .stdlib-chart .stdlib-chart-axis-label {

package/src/styles/utilities-markdown-editor.css

@@ -146,8 +146,8 @@
        4. `text-rendering: geometricPrecision` — disables kerning so
           even non-monospace fallback fonts don't shift glyph X
           positions across layers. */
-  /* IBM Plex Mono is shipped via @fontsource (regular + italic + 500
-     + 600 weights — see global.css). Pinning the font here means the
+  /* IBM Plex Mono is shipped via `/public/fonts.css` (regular + italic +
+     500 + 600 weights). Pinning the font here means the
      editor looks identical across OSes and we control the italic
      variant precisely. The bold/heading "weight" is faked via
      text-shadow further down so we never actually request a weight