Implement /anim/list

astro.config.mjs

@@ -50,9 +50,7 @@ export default defineConfig({
   redirects: {
     '/en/[...params]': '/[...params]',
     '/anim/[id]': { status: 307, destination: '/maintenance' },
-    '/anim/list': { status: 307, destination: '/maintenance' },
     '/game/[slug]': { status: 307, destination: '/maintenance' },
-    '/game/list': { status: 307, destination: '/maintenance' },
     '/platform/list': { status: 307, destination: '/maintenance' },
     '/platform/[id]': { status: 307, destination: '/maintenance' },
     '/profile': { status: 307, destination: '/maintenance' },

src/components/AlbumBox.astro

@@ -2,16 +2,20 @@
 import { Image } from 'astro:assets'
 
 type Props =
-  | { title?: string | null; href: string; image: string; loading?: false }
-  | { title?: string; href?: string; image?: string; loading: true }
+  | { title?: string | null; href: string; image: string; loading?: false; class?: string }
+  | { title?: string; href?: string; image?: string; loading: true; class?: string }
 
 const { props } = Astro
-const { title, href, image, loading = false } = props
+const { title, href, image, loading = false, class: className } = props
 ---
 
 <a
   href={href}
-  class:list={['block w-full mt-2.5 rounded-xl bg-dark/85 ', loading ? 'cursor-default' : 'hover:bg-dark group']}
+  class:list={[
+    'block w-full mt-2.5 rounded-xl bg-dark/85 ',
+    loading ? 'cursor-default' : 'hover:bg-dark group',
+    className
+  ]}
 >
   {
     loading ? (
@@ -39,7 +43,9 @@ const { title, href, image, loading = false } = props
         </div>
       </div>
     ) : (
-      <div class='group-hover:text-hover-link group-hover:underline text-lg font-bold px-1 pb-1 text-center'>{title}</div>
+      <div class='group-hover:text-hover-link group-hover:underline text-lg font-bold px-1 pb-1 text-center'>
+        {title}
+      </div>
     )
   }
 </a>

src/components/letterList/AlbumList.astro

@@ -13,12 +13,10 @@ const albums = await prismaClient.albums.findMany({
 })
 ---
 
-<div class='flex flex-col gap-y-1'>
-  {
-    albums.map((a) => (
-      <a class='text-left' href={`/album/${a.id}`}>
-        {a.title}
-      </a>
-    ))
-  }
-</div>
+{
+  albums.map((a) => (
+    <a class='text-left hover:bg-btn-gray/30 rounded-md p-2' href={`/album/${a.id}`}>
+      {a.title}
+    </a>
+  ))
+}

src/components/letterList/AnimList.astro

@@ -0,0 +1,20 @@
+---
+import AlbumBox from 'components/AlbumBox.astro'
+import prismaClient from 'utils/prisma-client'
+
+interface Props {
+  letter: string
+}
+
+const { letter } = Astro.props
+const anims = await prismaClient.animation.findMany({
+  where: { title: { startsWith: letter } },
+  select: { id: true, title: true }
+})
+---
+
+{
+  anims.map((a) => (
+    <AlbumBox class='!bg-btn-dark !mt-0' title={a.title} href={`/anim/${a.id}`} image={`/anim/${a.id}.png`} />
+  ))
+}

src/components/letterList/GameList.astro

@@ -0,0 +1,21 @@
+---
+import prismaClient from 'utils/prisma-client'
+
+interface Props {
+  letter: string
+}
+
+const { letter } = Astro.props
+const games = await prismaClient.game.findMany({
+  where: { name: { startsWith: letter } },
+  select: { slug: true, name: true }
+})
+---
+
+{
+  games.map((a) => (
+    <a class='text-left hover:bg-btn-gray/30 rounded-md p-2' href={`/game/${a.slug}`}>
+      {a.name}
+    </a>
+  ))
+}

src/layouts/LetterList.astro

@@ -0,0 +1,37 @@
+---
+interface Props {
+  letters: { letter: string; count: BigInt }[]
+}
+
+import BaseLayout from 'layouts/base.astro'
+import Sidebar from 'components/Sidebar.astro'
+import DefaultSEO from 'components/DefaultSEO.astro'
+
+const { letters } = Astro.props
+---
+
+<DefaultSEO />
+<BaseLayout>
+  <div class='flex flex-col md:flex-row flex-1 max-w-[2000px]'>
+    <div class='flex-1 px-5 bg-dark'>
+      <div class='flex flex-wrap gap-4 justify-center my-3'>
+        {
+          letters.map((l) => (
+            <div class='bg-btn-gray rounded-md size-14 uppercase font-semibold text-4xl text-white hover:bg-gray-hover'>
+              <a
+                href={`#${l.letter}`}
+                class='flex justify-center items-center size-full hover:no-underline hover:text-white'
+              >
+                {l.letter}
+              </a>
+            </div>
+          ))
+        }
+      </div>
+      <div class='flex flex-col gap-y-6'>
+        <slot />
+      </div>
+    </div>
+    <Sidebar />
+  </div>
+</BaseLayout>

src/pages/album/list/index.astro

@@ -1,59 +1,33 @@
 ---
 import prismaClient from 'utils/prisma-client'
 
-import BaseLayout from 'layouts/base.astro'
-import Sidebar from 'components/Sidebar.astro'
-import LetterSection from 'components/albumList/letterSection.astro'
-import DefaultSEO from 'components/DefaultSEO.astro'
+import LetterList from 'layouts/LetterList.astro'
+import AlbumList from 'components/letterList/AlbumList.astro'
 
 const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRaw`
-    SELECT DISTINCT UPPER(LEFT(title, 1)) AS letter, COUNT(*) AS count
-    FROM albums
-    WHERE status = 'SHOW'
-    GROUP BY letter
-    ORDER BY letter;
-  `
+  SELECT DISTINCT UPPER(LEFT(title, 1)) AS letter, COUNT(*) AS count
+  FROM albums
+  WHERE status = 'SHOW'
+  GROUP BY letter
+  ORDER BY letter;
+`
 ---
 
-<DefaultSEO />
-<BaseLayout>
-  <div class='flex flex-col md:flex-row flex-1 max-w-[2000px]'>
-    <div class='flex-1 px-5 bg-dark'>
-      <div class='flex flex-wrap gap-4 justify-center my-3'>
-        {
-          letters.map((l) => (
-            <div class='bg-btn-gray rounded-md size-14 uppercase font-semibold text-4xl text-white hover:bg-gray-hover'>
-              <a
-                href={`#${l.letter}`}
-                class='flex justify-center items-center size-full hover:no-underline hover:text-white'
-              >
-                {l.letter}
-              </a>
-            </div>
-          ))
-        }
+<LetterList letters={letters}>
+  {
+    letters.map((l) => (
+      <div id={l.letter}>
+        <div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
+        <div class='flex flex-col gap-2 py-4'>
+          <AlbumList letter={l.letter} server:defer>
+            <Fragment slot='fallback'>
+              {Array.from({ length: Number(l.count) }).map(() => (
+                <div class='animate-pulse h-8 w-full bg-gray/85' />
+              ))}
+            </Fragment>
+          </AlbumList>
+        </div>
       </div>
-      <div class='flex flex-col gap-y-6'>
-        {
-          letters.map((l) => (
-            <div id={l.letter}>
-              <div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
-              <div class='my-4'>
-                <LetterSection letter={l.letter} server:defer>
-                  <Fragment slot='fallback'>
-                    <div class='flex flex-col gap-y-2'>
-                      {Array.from({ length: Number(l.count) }).map(() => (
-                        <div class='animate-pulse h-3.5 w-lg bg-gray/85' />
-                      ))}
-                    </div>
-                  </Fragment>
-                </LetterSection>
-              </div>
-            </div>
-          ))
-        }
-      </div>
-    </div>
-    <Sidebar />
-  </div>
-</BaseLayout>
+    ))
+  }
+</LetterList>

src/pages/anim/list/index.astro

@@ -0,0 +1,35 @@
+---
+import prismaClient from 'utils/prisma-client'
+
+import LetterList from 'layouts/LetterList.astro'
+import AnimList from 'components/letterList/AnimList.astro'
+
+const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRaw`
+  SELECT DISTINCT UPPER(LEFT(animation.title, 1)) AS letter, COUNT(*) AS count
+  FROM Album_Animation, albums, animation
+  WHERE Album_Animation.albumId = albums.id
+  AND Album_Animation.animationId = animation.id
+  AND albums.status = "Show"
+  GROUP BY letter
+  ORDER BY letter;
+`
+---
+
+<LetterList letters={letters}>
+  {
+    letters.map((l) => (
+      <div id={l.letter}>
+        <div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
+        <div class='py-4 grid sm:grid-cols-1 md:grid-cols-6 gap-1 justify-items-center'>
+          <AnimList letter={l.letter} server:defer>
+            <Fragment slot='fallback'>
+              {Array.from({ length: Number(l.count) }).map(() => (
+                <div class='animate-pulse h-96 rounded-md w-full bg-gray/85' />
+              ))}
+            </Fragment>
+          </AnimList>
+        </div>
+      </div>
+    ))
+  }
+</LetterList>

src/pages/game/list/index.astro

@@ -0,0 +1,35 @@
+---
+import prismaClient from 'utils/prisma-client'
+
+import LetterList from 'layouts/LetterList.astro'
+import GameList from 'components/letterList/GameList.astro'
+
+const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRaw`
+  SELECT  DISTINCT UPPER(LEFT(name, 1)) AS letter, COUNT(*) AS count
+  FROM Album_Game, albums, game
+  WHERE Album_Game.albumId = albums.id
+  AND Album_Game.gameSlug = game.slug
+  AND albums.status = "Show"
+  GROUP BY letter
+  ORDER BY letter;
+`
+---
+
+<LetterList letters={letters}>
+  {
+    letters.map((l) => (
+      <div id={l.letter}>
+        <div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
+        <div class='py-4 grid sm:grid-cols-1 md:grid-cols-3 gap-1'>
+          <GameList letter={l.letter} server:defer>
+            <Fragment slot='fallback'>
+              {Array.from({ length: Number(l.count) }).map(() => (
+                <div class='animate-pulse h-6 w-full bg-gray/85' />
+              ))}
+            </Fragment>
+          </GameList>
+        </div>
+      </div>
+    ))
+  }
+</LetterList>

src/styles/global.css

@@ -7,6 +7,7 @@
   --color-dark: #212529;
   --color-dark-hover: #2b3035;
   --color-gold: #ffdb37;
+  --color-btn-dark: #121212;
   --color-btn-gray: #6c757d;
   --color-btn-disabled: rgba(108, 117, 125, 0.65);
   --color-gray: #3f3f3f;