Show batch date and hash

Author: q1zhen

src/components/BatchCard.astro

@@ -10,42 +10,63 @@ interface Props {
 
 const { id, pdf, posts, hash } = Astro.props as Props;
 
-// generate a near-gray color derived from the hash
-const gray = 40 + (parseInt(hash.slice(0, 2), 16) % 50);
-const color = `hsl(0, 0%, ${gray}%)`;
+// generate a near-gray hue derived from the hash so every batch has a slightly
+// different colour
+const hue = (parseInt(hash.slice(0, 2), 16) / 255) * 360;
+const light = 40 + (parseInt(hash.slice(2, 4), 16) % 50);
+const color = `hsl(${hue.toFixed(0)}, 20%, ${light}%)`;
 
-// create symmetric 5x5 pixel art similar to GitHub identicons
+// build a 25x15 pixel art grid, mirroring horizontally
+const width = 25;
+const height = 15;
 const coords: { x: number; y: number }[] = [];
 let i = 0;
-for (let y = 0; y < 5; y++) {
-  for (let x = 0; x < 3; x++, i++) {
-    if (parseInt(hash[i], 16) % 2 === 1) {
+for (let y = 0; y < height; y++) {
+  for (let x = 0; x < Math.ceil(width / 2); x++, i++) {
+    if (parseInt(hash[i % hash.length], 16) % 2 === 1) {
       coords.push({ x, y });
-      if (x !== 2) coords.push({ x: 4 - x, y });
+      const mirror = width - 1 - x;
+      if (mirror !== x) coords.push({ x: mirror, y });
     }
   }
 }
+
+const date = posts[0]?.data.date ?? "";
 ---
 <a
   href={pdf}
   target="_blank"
   rel="noopener noreferrer"
   class="group relative 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">
   <div class="relative w-full h-48 bg-black/5 dark:bg-white/10">
-    <svg viewBox="0 0 100 100" class="w-full h-full">
+    <svg
+      viewBox="0 0 375 225"
+      preserveAspectRatio="none"
+      class="w-full h-full"
+    >
       {coords.map(({ x, y }) => (
-        <rect x={x * 20} y={y * 20} width="20" height="20" fill={color} />
+        <rect x={x * 15} y={y * 15} width="15" height="15" fill={color} />
       ))}
     </svg>
-    <div class="absolute inset-0 grid place-items-center font-mono text-3xl sm:text-4xl text-black dark:text-white">
-      Batch #{id}
+    <div class="absolute inset-0 flex flex-col items-center justify-center font-mono text-black dark:text-white">
+      <div class="font-bold text-3xl sm:text-4xl">Batch #{id}</div>
+      <div class="text-xs sm:text-sm">{date}</div>
+      <div class="text-xs sm:text-sm">{hash}</div>
     </div>
   </div>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    class="absolute top-2 right-2 size-5 stroke-0 fill-current opacity-80">
-    <path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112v320c0 44.2 35.8 80 80 80h320c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v112c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16h112c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="absolute top-2 right-2 size-5 opacity-80"
+  >
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    <polyline points="15 3 21 3 21 9" />
+    <line x1="10" y1="14" x2="21" y2="3" />
   </svg>
   <div class="p-4 space-y-2">
     <ul class="text-sm list-disc list-inside space-y-0.5">