Implement /series/list

astro.config.mjs

@@ -56,7 +56,6 @@ export default defineConfig({
     '/profile': { status: 307, destination: '/maintenance' },
     '/profile/[username]': { status: 307, destination: '/maintenance' },
     '/series/[slug]': { status: 307, destination: '/maintenance' },
-    '/series/list': { status: 307, destination: '/maintenance' },
     '/studio/[slug]': { status: 307, destination: '/maintenance' },
     '/studio/list': { status: 307, destination: '/maintenance' },
     '/request': { status: 307, destination: '/maintenance' }

src/components/Header.astro

@@ -60,7 +60,7 @@ const { session } = Astro.locals
         <Fragment slot='items'>
           <DropdownItem href='/game/latest'>{m.latestReleases()}</DropdownItem>
           <DropdownItem href='/game/list'>{m.gamelist()}</DropdownItem>
-          <DropdownItem href='/series'>{m.series()}</DropdownItem>
+          <DropdownItem href='/series/list'>{m.series()}</DropdownItem>
           <DropdownItem href='/publisher/list'>{m.publishers()}</DropdownItem>
           <DropdownItem href='/platforms/list'>{m.platforms()}</DropdownItem>
         </Fragment>

src/components/letterList/SeriesList.astro

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

src/components/letterList/SeriesListCover.astro

@@ -0,0 +1,30 @@
+---
+import { AlbumStatus } from '@prisma/client'
+import { Image } from 'astro:assets'
+import prismaClient from 'utils/prisma-client'
+
+interface Props {
+  letter: string
+}
+
+const { letter } = Astro.props
+const albums = await prismaClient.series.findMany({
+  where: { name: { startsWith: letter } },
+  select: { slug: true }
+})
+---
+
+{
+  albums.map((a) => (
+    <a class='group text-left rounded-md p-2' href={`/album/${a.slug}`}>
+      <Image
+        src={`https://cdn.sittingonclouds.net/series/${a.slug}.png`}
+        alt={a.slug}
+        height={500}
+        width={500}
+        quality='low'
+        class='rounded-md scale-95 group-hover:scale-98 transition-transform'
+      />
+    </a>
+  ))
+}

src/layouts/LetterList.astro

@@ -1,13 +1,14 @@
 ---
 interface Props {
   letters: { letter: string; count: BigInt }[]
+  sidebar?: boolean
 }
 
 import BaseLayout from 'layouts/base.astro'
 import Sidebar from 'components/Sidebar.astro'
 import DefaultSEO from 'components/DefaultSEO.astro'
 
-const { letters } = Astro.props
+const { letters, sidebar = true } = Astro.props
 ---
 
 <DefaultSEO />
@@ -32,6 +33,6 @@ const { letters } = Astro.props
         <slot />
       </div>
     </div>
-    <Sidebar />
+    {sidebar ? <Sidebar /> : null}
   </div>
 </BaseLayout>

src/pages/series/list/index.astro

@@ -0,0 +1,39 @@
+---
+import prismaClient from 'utils/prisma-client'
+
+import LetterList from 'layouts/LetterList.astro'
+import AnimList from 'components/letterList/AnimList.astro'
+import SeriesList from 'components/letterList/SeriesList.astro'
+import SeriesListCover from 'components/letterList/SeriesListCover.astro'
+
+const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRaw`
+  SELECT DISTINCT UPPER(LEFT(series.name, 1)) AS letter, COUNT(*) AS count
+  FROM Series_Game, series, game
+  WHERE Series_Game.gameSlug = game.slug
+  AND Series_Game.seriesSlug = series.slug
+  GROUP BY letter
+  ORDER BY letter;
+`
+---
+
+<LetterList letters={letters} sidebar={false}>
+  <div class='flex mt-4'>
+    <div class='w-80'>
+      {
+        letters.map((l) => (
+          <div id={l.letter}>
+            <div class='flex uppercase text-4xl justify-center py-1.5'>{l.letter}</div>
+            <div class='w-full flex flex-col items-center'>
+              <SeriesList letter={l.letter} />
+            </div>
+          </div>
+        ))
+      }
+    </div>
+    <div class='w-full'>
+      <div class='grid grid-cols-3'>
+        {letters.map((l) => <SeriesListCover letter={l.letter} />)}
+      </div>
+    </div>
+  </div>
+</LetterList>