Migrate all static content to _static dirs

Upgrade htmx & missing css Tweak quote generation
jollytoad · Mar 14, 2024 · edc70ba · edc70ba
1 parent 1767cde
commit edc70ba
Show file tree

Hide file tree

Showing 29 changed files with 1,030 additions and 131 deletions.
diff --git a/cache/blog/dependency_hell b/cache/blog/dependency_hell
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-GB"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Jollytoad</title><link rel="stylesheet" href="https://unpkg.com/missing.css@1.0.13/dist/missing.min.css"/><link rel="stylesheet" href="/prism.css"/><link rel="stylesheet" href="/index.css"/><script src="https://unpkg.com/htmx.org@1.9.4" integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV" crossorigin="anonymous"></script><script src="https://unpkg.com/htmx.org@1.9.4/dist/ext/sse.js" integrity="sha384-9sPcBiA9fhU9fq7gfjFF29VlQp6vyoGP5skQ99zfpnpCEUZ2+9f+XmIk/DGE+ndH" crossorigin="anonymous"></script><script src="/app.js" type="module"></script></head><body><header><h1><a href="/">The home of Jollytoad</a></h1><div class="user-widget" hx-get="/auth/widget" hx-trigger="load" hx-swap="outerHTML"></div></header><main><h1>Dependency Hell or Heaven</h1>
+<html lang="en-GB"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Jollytoad</title><link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.1/dist/missing.min.css" integrity="sha384-se/UYQCQ0CMlLo1I5DcMmgR8t9hjCEpTpjPu7JWzT6M4wbxzI078hgX0pxTLyyMm" crossorigin="anonymous"/><link rel="stylesheet" href="/prism.css"/><link rel="stylesheet" href="/main.css"/><script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script><script src="https://unpkg.com/htmx.org@1.9.10/dist/ext/sse.js" integrity="sha384-jlVlI/i5K5APUIz8cxowC1/FsCEZgsrg126wue89Np9N75pQdAzqkYYP+jsUi43W" crossorigin="anonymous"></script><script src="/app.js" type="module"></script></head><body><header><h1><a href="/">The home of Jollytoad</a></h1><div class="user-widget" hx-get="/auth/widget" hx-trigger="load" hx-swap="outerHTML"></div></header><main><h1>Dependency Hell or Heaven</h1>
 <p>TLDR; Is Deno heading down the same dependency hell path as Node, due to the use
 of the <code>deps.ts</code> &amp; <code>mod.ts</code> conventions?</p>
 <h2>Introduction</h2>

diff --git a/cache/blog/http_fns b/cache/blog/http_fns
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-GB"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Jollytoad</title><link rel="stylesheet" href="https://unpkg.com/missing.css@1.0.13/dist/missing.min.css"/><link rel="stylesheet" href="/prism.css"/><link rel="stylesheet" href="/index.css"/><script src="https://unpkg.com/htmx.org@1.9.4" integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV" crossorigin="anonymous"></script><script src="https://unpkg.com/htmx.org@1.9.4/dist/ext/sse.js" integrity="sha384-9sPcBiA9fhU9fq7gfjFF29VlQp6vyoGP5skQ99zfpnpCEUZ2+9f+XmIk/DGE+ndH" crossorigin="anonymous"></script><script src="/app.js" type="module"></script></head><body><header><h1><a href="/">The home of Jollytoad</a></h1><div class="user-widget" hx-get="/auth/widget" hx-trigger="load" hx-swap="outerHTML"></div></header><main><h1>Useful functions for a HTTP server</h1>
+<html lang="en-GB"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Jollytoad</title><link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.1/dist/missing.min.css" integrity="sha384-se/UYQCQ0CMlLo1I5DcMmgR8t9hjCEpTpjPu7JWzT6M4wbxzI078hgX0pxTLyyMm" crossorigin="anonymous"/><link rel="stylesheet" href="/prism.css"/><link rel="stylesheet" href="/main.css"/><script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script><script src="https://unpkg.com/htmx.org@1.9.10/dist/ext/sse.js" integrity="sha384-jlVlI/i5K5APUIz8cxowC1/FsCEZgsrg126wue89Np9N75pQdAzqkYYP+jsUi43W" crossorigin="anonymous"></script><script src="/app.js" type="module"></script></head><body><header><h1><a href="/">The home of Jollytoad</a></h1><div class="user-widget" hx-get="/auth/widget" hx-trigger="load" hx-swap="outerHTML"></div></header><main><h1>Useful functions for a HTTP server</h1>
 <p>I&#39;ve always considered HTTP to be a function, Request in, Response out.</p>
 <p>I&#39;ve never really warmed to the way Node frameworks such as Express, Koa, and
 henceforth Oak deal with it via middleware routers.</p>

diff --git a/cache/blog/jsx_streaming b/cache/blog/jsx_streaming
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-GB"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Jollytoad</title><link rel="stylesheet" href="https://unpkg.com/missing.css@1.0.13/dist/missing.min.css"/><link rel="stylesheet" href="/prism.css"/><link rel="stylesheet" href="/index.css"/><script src="https://unpkg.com/htmx.org@1.9.4" integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV" crossorigin="anonymous"></script><script src="https://unpkg.com/htmx.org@1.9.4/dist/ext/sse.js" integrity="sha384-9sPcBiA9fhU9fq7gfjFF29VlQp6vyoGP5skQ99zfpnpCEUZ2+9f+XmIk/DGE+ndH" crossorigin="anonymous"></script><script src="/app.js" type="module"></script></head><body><header><h1><a href="/">The home of Jollytoad</a></h1><div class="user-widget" hx-get="/auth/widget" hx-trigger="load" hx-swap="outerHTML"></div></header><main><h1>JSX Streaming</h1>
+<html lang="en-GB"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Jollytoad</title><link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.1/dist/missing.min.css" integrity="sha384-se/UYQCQ0CMlLo1I5DcMmgR8t9hjCEpTpjPu7JWzT6M4wbxzI078hgX0pxTLyyMm" crossorigin="anonymous"/><link rel="stylesheet" href="/prism.css"/><link rel="stylesheet" href="/main.css"/><script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script><script src="https://unpkg.com/htmx.org@1.9.10/dist/ext/sse.js" integrity="sha384-jlVlI/i5K5APUIz8cxowC1/FsCEZgsrg126wue89Np9N75pQdAzqkYYP+jsUi43W" crossorigin="anonymous"></script><script src="/app.js" type="module"></script></head><body><header><h1><a href="/">The home of Jollytoad</a></h1><div class="user-widget" hx-get="/auth/widget" hx-trigger="load" hx-swap="outerHTML"></div></header><main><h1>JSX Streaming</h1>
 <p>TLDR; This is about using JSX as an async streaming template language in Deno,
 and has very little to do with React.</p>
 <h2>Introduction</h2>

diff --git a/cache/index.html b/cache/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-GB"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Jollytoad</title><link rel="stylesheet" href="https://unpkg.com/missing.css@1.0.13/dist/missing.min.css"/><link rel="stylesheet" href="/prism.css"/><link rel="stylesheet" href="/index.css"/><script src="https://unpkg.com/htmx.org@1.9.4" integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV" crossorigin="anonymous"></script><script src="https://unpkg.com/htmx.org@1.9.4/dist/ext/sse.js" integrity="sha384-9sPcBiA9fhU9fq7gfjFF29VlQp6vyoGP5skQ99zfpnpCEUZ2+9f+XmIk/DGE+ndH" crossorigin="anonymous"></script><script src="/app.js" type="module"></script></head><body><header><h1><a href="/">The home of Jollytoad</a></h1><div class="user-widget" hx-get="/auth/widget" hx-trigger="load" hx-swap="outerHTML"></div></header><main><h2>Demos and Experiments</h2>
+<html lang="en-GB"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Jollytoad</title><link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.1/dist/missing.min.css" integrity="sha384-se/UYQCQ0CMlLo1I5DcMmgR8t9hjCEpTpjPu7JWzT6M4wbxzI078hgX0pxTLyyMm" crossorigin="anonymous"/><link rel="stylesheet" href="/prism.css"/><link rel="stylesheet" href="/main.css"/><script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script><script src="https://unpkg.com/htmx.org@1.9.10/dist/ext/sse.js" integrity="sha384-jlVlI/i5K5APUIz8cxowC1/FsCEZgsrg126wue89Np9N75pQdAzqkYYP+jsUi43W" crossorigin="anonymous"></script><script src="/app.js" type="module"></script></head><body><header><h1><a href="/">The home of Jollytoad</a></h1><div class="user-widget" hx-get="/auth/widget" hx-trigger="load" hx-swap="outerHTML"></div></header><main><h2>Demos and Experiments</h2>
 <ul>
 <li><a href="/quiz">Quiz</a></li>
 <li><a href="/async">Async component streaming demo</a></li>
@@ -16,13 +16,16 @@
 <p>This site is powered by...</p>
 <ul>
 <li><a href="https://deno.land">Deno</a> - the JS/TS runtime that isn&#39;t Node</li>
-<li><a href="https://jsr.io/">JSR</a> - the new registry that supplies many of the dependencies</li>
+<li><a href="https://jsr.io/">JSR</a> - the new registry that supplies many of the
+dependencies</li>
 <li><a href="https://deno.com/deploy">Deno Deploy</a> - the Deno based serverless hosting
 service</li>
 <li><a href="https://htmx.org">htmx</a> - used for many of the interactive demos</li>
 <li><a href="https://missing.style">missing.css</a> - css library</li>
-<li><a href="https://jsr.io/@http/fns">@http/fns</a> - my HTTP server functions library (for routing etc)</li>
-<li><a href="https://jsr.io/@http/jsx-stream">@http/jsx-stream</a> - my JSX streaming serializer</li>
+<li><a href="https://jsr.io/@http/fns">@http/fns</a> - my HTTP server functions library (for
+routing etc)</li>
+<li><a href="https://jsr.io/@http/jsx-stream">@http/jsx-stream</a> - my JSX streaming
+serializer</li>
 <li><a href="https://remark.js.org">remark</a> - the markdown processor (although I use
 <a href="https://github.com/syntax-tree/mdast">mdast</a> and it&#39;s utilities directly)</li>
 <li><a href="https://esbuild.github.io/">esbuild</a> - to build the service worker, as not

diff --git a/components/Page.tsx b/components/Page.tsx
@@ -21,20 +21,22 @@ export function Page({ req, children, reqURL, module, ...props }: Props) {
         <title>Jollytoad</title>
         <link
           rel="stylesheet"
-          href="https://unpkg.com/missing.css@1.0.13/dist/missing.min.css"
+          href="https://unpkg.com/missing.css@1.1.1/dist/missing.min.css"
+          integrity="sha384-se/UYQCQ0CMlLo1I5DcMmgR8t9hjCEpTpjPu7JWzT6M4wbxzI078hgX0pxTLyyMm"
+          crossorigin="anonymous"
         />
         <link rel="stylesheet" href="/prism.css" />
-        <link rel="stylesheet" href="/index.css" />
+        <link rel="stylesheet" href="/main.css" />
 
         <script
-          src="https://unpkg.com/htmx.org@1.9.4"
-          integrity="sha384-zUfuhFKKZCbHTY6aRR46gxiqszMk5tcHjsVFxnUo8VMus4kHGVdIYVbOYYNlKmHV"
+          src="https://unpkg.com/htmx.org@1.9.10"
+          integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
           crossorigin="anonymous"
         />
 
         <script
-          src="https://unpkg.com/htmx.org@1.9.4/dist/ext/sse.js"
-          integrity="sha384-9sPcBiA9fhU9fq7gfjFF29VlQp6vyoGP5skQ99zfpnpCEUZ2+9f+XmIk/DGE+ndH"
+          src="https://unpkg.com/htmx.org@1.9.10/dist/ext/sse.js"
+          integrity="sha384-jlVlI/i5K5APUIz8cxowC1/FsCEZgsrg126wue89Np9N75pQdAzqkYYP+jsUi43W"
           crossorigin="anonymous"
         />
 

diff --git a/cron.ts b/cron.ts
@@ -2,6 +2,6 @@
 
 import * as cron_1 from "./routes/quote/_cron/generate_quote.ts";
 
-export default function () {
+export default function initCron() {
   Deno.cron(cron_1.name, cron_1.schedule, cron_1.default);
 }
diff --git a/deno.json b/deno.json
@@ -21,12 +21,13 @@
     "verbatimModuleSyntax": true
   },
   "exclude": [
-    "static/sw.js",
-    "static/sw_compat.js",
-    "static/prism.*"
+    "routes/_static/sw.js",
+    "routes/_static/sw_compat.js",
+    "routes/_static/prism.*"
   ],
   "fmt": {
     "exclude": [
+      "cache",
       "routes.ts"
     ]
   },
@@ -37,7 +38,7 @@
     "@std/path": "jsr:@std/path@^0.219.1",
     "@std/fs": "jsr:@std/fs@^0.219.1",
     "@std/ulid": "jsr:@std/ulid@^0.219.1",
-    "@http/fns": "jsr:@http/fns@^0.6.3",
+    "@http/fns": "jsr:@http/fns@^0.6.4",
     "$jsx": "jsr:@http/jsx-stream@^0.1.1",
     "$deno_kv_oauth/": "https://deno.land/x/deno_kv_oauth@v0.10.0/lib/",
     "https://deno.land/x/oauth2_client@v1.0.2/mod.ts": "https://cdn.jsdelivr.net/gh/jollytoad/deno-oauth2-client@oidc-2/mod.ts",

diff --git a/deno.lock b/deno.lock
diff --git a/handler.ts b/handler.ts
@@ -9,6 +9,4 @@ export default handle([
     skip(404, 405),
   ),
   routes,
-  // TODO: Migrate /static to a /_static folder instead
-  staticRoute("/", import.meta.resolve("./static")),
 ]);
diff --git a/lib/content.ts b/lib/content.ts
@@ -1,5 +1,4 @@
 import { notFound } from "@http/fns/response/not_found";
-import type { RequestProps } from "./route.ts";
 
 export async function fetchContent(
   name: string,
@@ -14,27 +13,3 @@ export async function fetchContent(
     return notFound();
   }
 }
-
-export interface ContentProps extends RequestProps {
-  content: Response;
-}
-
-export function fetchContentForPath(prefix: string, ext = "md") {
-  return async function (
-    req: Request,
-    match: URLPatternResult,
-  ): Promise<ContentProps> {
-    const content = await fetchContent(
-      `${prefix}/${match.pathname.groups.path || "index"}.${ext}`,
-    );
-    if (content.ok) {
-      return { req, content };
-    } else {
-      throw content;
-    }
-  };
-}
-
-export function rawContent(_req: Request, { content }: ContentProps) {
-  return content;
-}
diff --git a/lib/generate_cron_module.ts b/lib/generate_cron_module.ts
@@ -57,7 +57,7 @@ export async function generateCronModule({
     "// IMPORTANT: This file has been automatically generated, DO NOT edit by hand.\n\n",
   );
 
-  body.push("export default function() {\n");
+  body.push("export default function initCron() {\n");
 
   const routes = await discoverRoutes({
     fileRootUrl,
@@ -90,7 +90,7 @@ export async function generateCronModule({
     i++;
   }
 
-  body.push(`};\n`);
+  body.push(`}\n`);
 
   head.push(`\n`);
 

diff --git a/lib/handle_route_static.ts b/lib/handle_route_static.ts
diff --git a/lib/handle_route_static_dir.ts b/lib/handle_route_static_dir.ts
@@ -1,13 +1,14 @@
 import { byMethod } from "@http/fns/by_method";
-import { fetchContent } from "../lib/content.ts";
+import { serveDir } from "@std/http/file_server";
+import { fromFileUrl } from "@std/path/from_file_url";
 
 export default byMethod({
-  GET: rawContent,
+  GET(req, match: URLPatternResult) {
+    const path = match.pathname.groups.path ?? "";
+    const urlRoot = match.pathname.input.slice(1, -path.length);
+    const fsRoot = fromFileUrl(
+      import.meta.resolve(`../routes/${urlRoot}_static`),
+    );
+    return serveDir(req, { quiet: true, fsRoot, urlRoot });
+  },
 });
-
-function rawContent(_req: Request, match: URLPatternResult) {
-  const path = match.pathname.groups.path ?? "";
-  const prefix = match.pathname.input.slice(0, -path.length);
-  const route = `../routes${prefix}_static/${path}`;
-  return fetchContent(import.meta.resolve(route));
-}
diff --git a/lib/route_mapper.ts b/lib/route_mapper.ts
@@ -3,11 +3,10 @@ import type {
   DiscoveredRoute,
 } from "@http/fns/discover_routes";
 
-// TODO: Fix generateRoutesModule to remove duplicate routes
-
 export default function routeMapper(
   { parentPath, name, ext, pattern, module }: DiscoveredPath,
 ): DiscoveredRoute[] {
+  // Treat any route under a `_static` dir as static content
   if (/[/\\]_static/.test(parentPath)) {
     return [{
       pattern: pattern.replace(/_static\/.*/, ":path+"),
@@ -16,7 +15,7 @@ export default function routeMapper(
   }
 
   // Skip any route that has a path segment that starts with an underscore
-  if (name.startsWith("_") || /[/\\]_/.test(parentPath)) {
+  if (name.startsWith("_") || /(^|[/\\])_/.test(parentPath)) {
     return [];
   }
 
@@ -34,13 +33,6 @@ export default function routeMapper(
           : `${pattern}{.:ext}?`,
         module: import.meta.resolve("./handle_route_md.tsx"),
       }];
-    // TODO: Migrate png/svg files into _static folders
-    case ".png":
-    case ".svg":
-      return [{
-        pattern: `${pattern}${ext}`,
-        module: import.meta.resolve("./handle_route_static.ts"),
-      }];
   }
   return [];
 }