feat: 🎸 add assets cache

1000h-portal/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="default-layout">
+  <div class="default-layout bg-white">
     <PageHeader />
     <slot />
     <PageFooter />

1000h-portal/styles/main.css

@@ -3,3 +3,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+  background: white;
+}

1000h-portal/workers-site/index.js

@@ -1,4 +1,7 @@
-import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
+import {
+  getAssetFromKV,
+  mapRequestToAsset,
+} from "@cloudflare/kv-asset-handler";
 
 /**
  * The DEBUG flag will do two things that help during development:
@@ -7,26 +10,26 @@ import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
  * 2. we will return an error message on exception in your Response rather
  *    than the default 404.html page.
  */
-const DEBUG = true
+const DEBUG = true;
 
-addEventListener('fetch', event => {
+addEventListener("fetch", (event) => {
   try {
-    event.respondWith(handleEvent(event))
+    event.respondWith(handleEvent(event));
   } catch (e) {
     if (DEBUG) {
       return event.respondWith(
         new Response(e.message || e.toString(), {
           status: 500,
-        }),
+        })
-      )
+      );
     }
-    event.respondWith(new Response('Internal Error', { status: 500 }))
+    event.respondWith(new Response("Internal Error", { status: 500 }));
   }
-})
+});
 
 async function handleEvent(event) {
   // const url = new URL(event.request.url)
-  let options = {}
+  let options = {};
 
   // const key = url.pathname.slice(1);
   // if (event.request.method === 'GET' && key.startsWith("storage/")) {
@@ -79,8 +82,11 @@ async function handleEvent(event) {
     response.headers.set("Referrer-Policy", "unsafe-url");
     response.headers.set("Feature-Policy", "none");
 
-    return response;
+    if (event.request.url.match(/\.(js|css|png|jpg|svg|ttf)$/)) {
+      response.headers.set("Cache-Control", "max-age=604800");
+    }
 
+    return response;
   } catch (e) {
     // if an error is thrown try to serve the asset at 404.html
     // if (!DEBUG) {
@@ -103,18 +109,18 @@ async function handleEvent(event) {
         }
 
         // If the pathname ends with '/', assume it's a directory and append 'index.html'
-        if (pathname.endsWith('/')) {
+        if (pathname.endsWith("/")) {
-          pathname += 'index.html';
+          pathname += "index.html";
         }
 
         // If it doesn't have an extension, assume it's a directory and append '/index.html'
         else if (!pathname.split("/").pop().includes(".")) {
-          pathname += '/index.html';
+          pathname += "/index.html";
         }
 
         return new Request(`${url.origin}${pathname}`, req);
       },
-    })
+    });
 
     // return new Response(e.message || e.toString(), { status: 500 })
   }
@@ -128,15 +134,15 @@ async function handleEvent(event) {
  * to exist at a specific path.
  */
 function handlePrefix(prefix) {
-  return request => {
+  return (request) => {
     // compute the default (e.g. / -> index.html)
-    let defaultAssetKey = mapRequestToAsset(request)
+    let defaultAssetKey = mapRequestToAsset(request);
-    let url = new URL(defaultAssetKey.url)
+    let url = new URL(defaultAssetKey.url);
 
     // strip the prefix from the path for lookup
-    url.pathname = url.pathname.replace(prefix, '/')
+    url.pathname = url.pathname.replace(prefix, "/");
 
     // inherit all other props from the default request
-    return new Request(url.toString(), defaultAssetKey)
+    return new Request(url.toString(), defaultAssetKey);
-  }
+  };
-}
+}