Replace PDF previews with hash-based gradient art

Author: q1zhen

src/components/BatchCard.astro

@@ -5,12 +5,18 @@ interface Props {
   id: number;
   pdf: string;
   posts: CollectionEntry<"blog">[];
+  hash: string;
 }
 
-const { id, pdf, posts } = Astro.props as Props;
+const { id, pdf, posts, hash } = Astro.props as Props;
+
+const color1 = `#${hash.slice(0, 6)}`;
+const color2 = `#${(parseInt(hash.slice(0, 6), 16) ^ 0xffffff)
+  .toString(16)
+  .padStart(6, "0")}`;
 ---
 <a href={pdf} class="group block overflow-hidden rounded-lg border border-black/15 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 transition-colors duration-300 ease-in-out">
-  <canvas id={`preview-${id}`} class="w-full h-48 object-cover bg-black/5 dark:bg-white/10" />
+  <div class="w-full h-48" style={`background: linear-gradient(135deg, ${color1}, ${color2});`}></div>
   <div class="p-4 space-y-2">
     <div class="font-semibold">Batch #{id}</div>
     <ul class="text-sm list-disc list-inside space-y-0.5">
@@ -20,25 +26,3 @@ const { id, pdf, posts } = Astro.props as Props;
     </ul>
   </div>
 </a>
-
-<script type="module" is:inline>
-  const pdfUrl = "${pdf}";
-  const canvasId = "preview-${id}";
-  import("https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/+esm").then((pdfjsLib) => {
-    pdfjsLib.GlobalWorkerOptions.workerSrc =
-      "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/build/pdf.worker.min.js";
-    const canvas = document.getElementById(canvasId);
-    if (!canvas) return;
-    pdfjsLib.getDocument(pdfUrl).promise.then((pdfDoc) => {
-      pdfDoc.getPage(1).then((page) => {
-        const viewport = page.getViewport({ scale: 1 });
-        const scale = canvas.clientWidth / viewport.width;
-        const scaledViewport = page.getViewport({ scale });
-        canvas.width = scaledViewport.width;
-        canvas.height = scaledViewport.height;
-        const context = canvas.getContext("2d");
-        page.render({ canvasContext: context, viewport: scaledViewport });
-      });
-    });
-  });
-</script>

src/pages/batch/index.astro

@@ -16,13 +16,15 @@ const blog = (await getCollection("blog"))
 
 const batches = pdfFiles
   .map((file) => {
-    const [, idStr] = file.split("_");
+    const [, idStr, hashWithExt] = file.split("_");
     const id = parseInt(idStr, 10);
+    const hash = hashWithExt.replace(/\.pdf$/, "");
     const posts = blog.slice(id * 5, id * 5 + 5);
     return {
       id,
       pdf: `/batch/${file}`,
       posts,
+      hash,
     };
   })
   .sort((a, b) => b.id - a.id);
@@ -43,7 +45,7 @@ const batches = pdfFiles
       </section>
       <div class="grid gap-6 md:grid-cols-2">
         {batches.map((batch) => (
-          <BatchCard id={batch.id} pdf={batch.pdf} posts={batch.posts} />
+          <BatchCard id={batch.id} pdf={batch.pdf} posts={batch.posts} hash={batch.hash} />
         ))}
       </div>
     </div>