Implement holy12 page

src/components/Sidebar.astro

@@ -20,7 +20,7 @@ const listClass =
 
 <div class='md:w-3/12 md:max-w-[300px] h-full bg-dark flex flex-col'>
   <a href='#' class={listClass}>{m.getLucky()}</a>
-  <a href='#' class={listClass}>{m.randomPull()}</a>
+  <a href='/holy12' class={listClass}>{m.randomPull()}</a>
   <div class='px-6 flex flex-col gap-y-3'>
     <SidebarSection class='flex flex-col gap-y-3'>
       <div class='flex gap-x-2 justify-center'>

src/pages/holy12.astro

@@ -0,0 +1,42 @@
+---
+import * as m from 'paraglide/messages'
+import prismaClient from 'utils/prisma-client'
+
+import Base from 'layouts/base.astro'
+import { getRandom } from 'utils/form'
+import AlbumBox from 'components/AlbumBox.astro'
+
+async function getRandomAlbum(): Promise<{ id: number; title: string }> {
+  const res: { id: number; title: string }[] = await prismaClient.$queryRawUnsafe(`
+    SELECT r1.id as id, r1.title as title
+    FROM albums AS r1 JOIN (
+	    SELECT (
+		    RAND() * (
+			    SELECT MAX(id) FROM albums
+		    )
+	    ) AS id
+    )  AS r2
+    WHERE r1.id >= r2.id
+    ORDER BY r1.id ASC
+    LIMIT 1;`)
+
+  return res[0]
+}
+
+const titles = [m.holy12_0(), m.holy12_1(), m.holy12_2(), m.holy12_3(), m.holy12_4(), m.holy12_5()]
+const title = getRandom(titles)
+const albums: { id: number; title: string }[] = await Promise.all(Array.from({ length: 12 }, getRandomAlbum))
+---
+
+<Base>
+  <div class='flex flex-col px-28'>
+    <h1 class='w-full uppercase font-medium tracking-wide text-4xl drop-shadow-2xl mt-5 mb-2 text-center'>{title}</h1>
+    <div class='grid grid-cols-2 md:grid-cols-4 gap-x-1.5 mb-4'>
+      {
+        albums.map((album) => (
+          <AlbumBox title={album.title} href={`/album/${album.id}`} image={`/album/${album.id}.png`} />
+        ))
+      }
+    </div>
+  </div>
+</Base>