Implement Get Lucky sidebar button

src/components/Sidebar.astro

@@ -13,13 +13,16 @@ import AlbumBox from './AlbumBox.astro'
 import AlbumCount from './sidebar/AlbumCount.astro'
 import CommentCarousel from './sidebar/CommentCarousel.astro'
 import SidebarAd from './sidebar/SidebarAd.astro'
+import GetLuckyAlbum from './sidebar/GetLuckyAlbum.astro'
 
 const listClass =
   'uppercase text-3xl font-semibold w-full text-center py-3 hover:bg-dark-hover hover:text-cyan-400 hover:underline'
 ---
 
 <div class='md:w-3/12 md:max-w-[300px] h-full bg-dark flex flex-col'>
-  <a href='#' class={listClass}>{m.getLucky()}</a>
+  <GetLuckyAlbum server:defer class={listClass}>
+    <div slot='fallback' class:list={[listClass, 'animate-pulse w-full h-14 bg-gray/90']}></div>
+  </GetLuckyAlbum>
   <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'>

src/components/sidebar/GetLuckyAlbum.astro

@@ -0,0 +1,14 @@
+---
+interface Props {
+  class: string
+}
+
+import * as m from '../../paraglide/messages.js'
+
+import { getRandomAlbum } from 'utils/queries'
+
+const album = await getRandomAlbum()
+const { class: className } = Astro.props
+---
+
+<a href={`/album/${album.id}`} class={className}>{m.getLucky()}</a>

src/pages/holy12.astro

@@ -1,28 +1,12 @@
 ---
 import * as m from 'paraglide/messages'
-import prismaClient from 'utils/prisma-client'
+
+import { getRandom } from 'utils/form'
+import { getRandomAlbum } from 'utils/queries'
 
 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))

src/utils/queries.ts

@@ -0,0 +1,18 @@
+import prismaClient from './prisma-client'
+
+export 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]
+}