feat: add thumbhashes to images closes #6

routes/_app.tsx

@@ -29,6 +29,7 @@ export default function App({ Component }: AppProps) {
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
         <meta name="msapplication-TileColor" content="#da532c" />
         <meta name="theme-color" content="#141218" />
+        <script src="/thumbnails.js" type="module"></script>
 
         <style>
           {`

routes/api/auth/callback.ts

@@ -55,8 +55,6 @@ export const handler: Handlers = {
       exp: getNumericDate(SESSION_DURATION),
     }, JWT_SECRET);
 
-    console.log({ redirect });
-
     const headers = new Headers({
       location: redirect || "/",
     });

routes/api/images/index.ts

@@ -152,7 +152,7 @@ const GET = async (
   });
   if (cachedResponse) {
     log.debug("cached", { imageUrl });
-    return new Response(cachedResponse.buffer, {
+    return new Response(cachedResponse.buffer.slice(), {
       headers: {
         "Content-Type": cachedResponse.mediaType,
       },
@@ -172,11 +172,19 @@ const GET = async (
       height: params.height,
       mediaType: mediaType,
     });
-  }, 200);
+  }, 10);
 
-  log.debug("not-cached", { imageUrl, resizedImage });
+  log.debug("not-cached", { imageUrl });
 
-  return new Response(resizedImage, {
+  cache.getThumbhash({ url: imageUrl }).then((hash) => {
+    if (!hash) {
+      cache.createThumbhash(resizedImage.slice(), imageUrl).catch((_err) => {
+        //
+      });
+    }
+  });
+
+  return new Response(resizedImage.slice(), {
     headers: {
       "Content-Type": mediaType,
     },

routes/articles/index.tsx

@@ -48,6 +48,7 @@ export default function Greet(
           return (
             <Card
               image={doc?.meta?.image || "/placeholder.svg"}
+              thumbnail={doc?.meta?.thumbnail}
               link={`/articles/${doc.id}`}
               title={doc.name}
             />

routes/recipes/index.tsx

@@ -5,7 +5,7 @@ import { getAllRecipes, Recipe } from "@lib/resource/recipes.ts";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
-import { fetchQueryResource, RedirectSearchHandler } from "@islands/Search.tsx";
+import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { parseResourceUrl, searchResource } from "@lib/search.ts";
 import { SearchResult } from "@lib/types.ts";