blog: Use Cloudflare KV to store assets

phoenix-blog/src/caching.ts

@@ -1,17 +1,6 @@
 import { sha256Sum } from "@phoenix/core/crypto";
 import { Context } from "./context";
 
-let etagsCache = new Map<string, string>();
-
-export async function getEtag(path: string, content: string): Promise<string> {
-  let etag = etagsCache.get(path);
-  if (!etag) {
-    etag = await sha256Sum(content);
-    etagsCache.set(path, etag);
-  }
-  return etag;
-}
-
 export function handleCaching(ctx: Context, cacheControl: string, etag: string): Response | null {
   ctx.res.headers.set('Cache-Control', cacheControl);
   ctx.res.headers.set('ETag', `"${etag}"`);

phoenix-blog/src/index.ts

@@ -2,23 +2,27 @@ import { Hono } from 'hono';
 import { NotFoundError } from '@phoenix/core/errors';
 import { ErrorTemplate } from './routes/_error';
 import { Bindings, Variables } from './context';
-import { robotsTxt } from './routes/robotstxt';
-import { favicon } from './routes/favicon';
-import { indexCss } from './routes/indexcss';
 import { handlebars } from './routes/handlebars';
 import { index } from './routes';
 import { page } from './routes/page';
+import { publicCacheControl, serveFavicon, serveRobotsTxt, serveTheme } from './routes/public';
+import { etag } from 'hono/etag'
 
 const app = new Hono<{ Bindings: Bindings; Variables: Variables }>();
+const staticAssets = new Hono<{ Bindings: Bindings; Variables: Variables }>();
 
 app.use('*', async (ctx, next) => {
   ctx.res.headers.set('X-Robots-Tag', 'noindex');
   await next();
 })
 
-app.get('/robots.txt', robotsTxt);
-app.get('/favicon.ico', favicon);
-app.get('/theme/index-5eca4c37898bca4ff1a357cf7c481dfe0375b737.css', indexCss);
+staticAssets.use('*', etag());
+staticAssets.use('*', publicCacheControl);
+staticAssets.get('/robots.txt', etag(), serveRobotsTxt);
+staticAssets.get('/favicon.ico', serveFavicon);
+staticAssets.get('/theme/*', serveTheme);
+
+app.route('/', staticAssets);
 
 app.get('/handlebars', handlebars);
 app.get('/', index);

phoenix-blog/src/routes/public.ts

@@ -0,0 +1,24 @@
+import { Context, Next } from 'hono';
+import { serveStatic } from 'hono/cloudflare-workers';
+
+export const serveFavicon = serveStatic({ path: './favicon.ico' });
+export const serveRobotsTxt = serveStatic({ path: './robots.txt' });
+export const serveTheme = serveStatic();
+
+export async function publicCacheControl(ctx: Context, next: Next) {
+  const url = new URL(ctx.req.url);
+  switch (url.pathname) {
+    case '/favicon.ico':
+      ctx.res.headers.set('Cache-Control', 'public, max-age=3600, must-revalidate');
+      break;
+    default: {
+      if (url.pathname.startsWith('/theme')) {
+        ctx.res.headers.set('Cache-Control', 'public, max-age=31536000, immutable');
+      } else {
+        ctx.res.headers.set('Cache-Control', 'public, max-age=1800, immutable');
+      }
+      break;
+    }
+  }
+  await next();
+}

phoenix-blog/wrangler.toml

@@ -6,6 +6,9 @@ services = [
   { binding = "api", service = "phoenix-api" }
 ]
 
+[site]
+bucket = "./public"
+
 # See https://developers.cloudflare.com/workers/wrangler/bundling/
 # and https://developers.cloudflare.com/workers/wrangler/configuration/#bundling
 rules = [