Embed CSS files as TS

denoland/deno#25354 (comment)

Author: dahlia

.vscode/settings.json

@@ -64,6 +64,7 @@
     "phensley",
     "pico",
     "Pixelfed",
+    "smallweb",
     "Tailscale",
     "unfollow",
     "unfollowed",

deno.json

@@ -24,7 +24,6 @@
     "@phensley/language-tag": "npm:@phensley/language-tag@^1.9.2",
     "@std/assert": "jsr:@std/assert@^1.0.10",
     "@std/html": "jsr:@std/html@^1.0.3",
-    "@std/path": "jsr:@std/path@^1.0.8",
     "@std/uuid": "jsr:@std/uuid@^1.0.4",
     "markdown-it": "npm:markdown-it@^14.1.0",
     "xss": "npm:xss@^1.0.15"
@@ -33,15 +32,17 @@
   "exclude": [
     ".github",
     ".vscode",
-    "docs"
+    "docs",
+    "src/css"
   ],
   "fmt": {
     "exclude": [
-      "src/css/*.css",
-      "*.md"
+      "*.md",
+      "src/static/*.ts"
     ]
   },
   "tasks": {
+    "embed-css": "deno run -A jsr:@smallweb/embed src/css src/static",
     "check": "deno check src/ && deno lint && deno fmt --check && deno publish --dry-run --allow-dirty",
     "test": "deno test --allow-net=hollo.social",
     "test-all": "deno task check && deno task test",

src/css/pico.azure.min.css

@@ -24,13 +24,13 @@ import {
   PUBLIC_COLLECTION,
 } from "@fedify/fedify/vocab";
 import { Hono } from "@hono/hono";
-import { join } from "@std/path/join";
 import type { BotImpl } from "./bot-impl.ts";
 import { Layout } from "./components/Layout.tsx";
 import { Message } from "./components/Message.tsx";
 import { getMessageClass, isMessageObject } from "./message-impl.ts";
 import type { MessageClass } from "./message.ts";
 import type { Uuid } from "./repository.ts";
+import staticFiles from "./static/mod.ts";
 
 export interface Bindings {
   readonly bot: BotImpl<unknown>;
@@ -44,16 +44,10 @@ export interface Env {
 export const app = new Hono<Env>();
 
 app.get("/css/:filename", async (c) => {
-  let data: string;
-  try {
-    data = await Deno.readTextFile(
-      join(import.meta.dirname ?? ".", "css", c.req.param("filename")),
-    );
-  } catch (e) {
-    console.error(e);
-    return c.notFound();
-  }
-  return c.body(data, 200, { "Content-Type": "text/css" });
+  const file = await staticFiles.get(c.req.param("filename"));
+  if (file == null) return c.notFound();
+  const bytes = await file.bytes();
+  return c.body(bytes, 200, { "Content-Type": "text/css" });
 });
 
 const WINDOW = 15;