Anim and game releases pages

astro.config.mjs

@@ -48,10 +48,8 @@ export default defineConfig({
   output: 'server',
   adapter: node({ mode: 'standalone' }),
   redirects: {
-    '/anim': { status: 307, destination: '/maintenance' },
     '/anim/[id]': { status: 307, destination: '/maintenance' },
     '/anim/list': { status: 307, destination: '/maintenance' },
-    '/game': { status: 307, destination: '/maintenance' },
     '/game/[slug]': { status: 307, destination: '/maintenance' },
     '/game/list': { status: 307, destination: '/maintenance' },
     '/platform/list': { status: 307, destination: '/maintenance' },

messages/en.json

@@ -81,5 +81,8 @@
   "holy12_2": "12 clicks till midnight",
   "holy12_3": "We let our technicians pick these",
   "holy12_4": "It's noisy outside, take one of these",
-  "holy12_5": "Silksong is hidden behind one of these"
+  "holy12_5": "Silksong is hidden behind one of these",
+  "latestGameReleases": "Latest game releases",
+  "latestAnimReleases": " Latest animation releases",
+  "latestReleases": "Latest releases"
 }

src/components/Header.astro

@@ -1,6 +1,7 @@
 ---
 import { Image, Picture } from 'astro:assets'
 import * as m from '../paraglide/messages.js'
+import prismaClient from 'utils/prisma-client.js'
 
 import logo from 'img/logos/winter.png'
 import logoEs from 'img/logos/default_es.png'
@@ -10,12 +11,16 @@ import DropdownItem from './header/DropdownItem.astro'
 import Toggler from './header/Toggler.astro'
 import NavButton from './header/NavButton.astro'
 import LoginNav from './header/LoginNav.astro'
-import prismaClient from 'utils/prisma-client.js'
-import { Icon } from 'astro-icon/components'
 import SearchBar from './search/SearchBar.astro'
 
-const { value: bannerId } = (await prismaClient.config.findUnique({ where: { name: 'banner' } })) ?? {}
+const [bannerConfig, bannerPositionConfig] = await Promise.all([
-const { value: bannerPosition } = (await prismaClient.config.findUnique({ where: { name: 'banner-position' } })) ?? {}
+  prismaClient.config.findUnique({ where: { name: 'banner' }, select: { value: true } }),
+  prismaClient.config.findUnique({ where: { name: 'banner-position' }, select: { value: true } })
+])
+
+const bannerId = bannerConfig?.value || ''
+const bannerPosition = bannerPositionConfig?.value || 'top'
+
 const { session } = Astro.locals
 ---
 
@@ -53,18 +58,18 @@ const { session } = Astro.locals
       <Dropdown>
         {m.games()}
         <Fragment slot='items'>
-          <DropdownItem href='/game'>{m.albums()}</DropdownItem>
+          <DropdownItem href='/game/latest'>{m.latestReleases()}</DropdownItem>
+          <DropdownItem href='/game/list'>{m.gamelist()}</DropdownItem>
           <DropdownItem href='/series'>{m.series()}</DropdownItem>
           <DropdownItem href='/publisher/list'>{m.publishers()}</DropdownItem>
           <DropdownItem href='/platforms/list'>{m.platforms()}</DropdownItem>
-          <DropdownItem href='/game/list'>{m.gamelist()}</DropdownItem>
         </Fragment>
       </Dropdown>
 
       <Dropdown>
         {m.animation()}
         <Fragment slot='items'>
-          <DropdownItem href='/anim'>{m.albums()}</DropdownItem>
+          <DropdownItem href='/anim/latest'>{m.latestReleases()}</DropdownItem>
           <DropdownItem href='/anim/list'>{m.animationlist()}</DropdownItem>
           <DropdownItem href='/studio/list'>{m.studios()}</DropdownItem>
         </Fragment>

src/layouts/PaginatedAlbumList.astro

@@ -0,0 +1,42 @@
+---
+interface Props {
+  albums: { title: string | null; id: number }[]
+  limitXS: number
+  limitMD: number
+  fullPageList: number[]
+  page: number
+}
+
+import Base from './base.astro'
+import AlbumBox from 'components/AlbumBox.astro'
+import FooterNav from 'components/lastAdded/FooterNav.astro'
+
+const { albums, limitMD, limitXS, ...listProps } = Astro.props
+
+if (albums.length === 0) {
+  Astro.redirect('/404')
+}
+---
+
+<Base>
+  <div class='flex flex-col w-full'>
+    <div class='w-full min-h-100vh mx-auto max-w-[1140px]'>
+      <div class='px-2 mb-2'>
+        <h1 class='uppercase font-medium tracking-wide text-5xl drop-shadow-2xl mt-5 mb-2 text-center'>
+          <slot />
+        </h1>
+        <div class='grid grid-cols-2 md:grid-cols-4 gap-x-1.5'>
+          {
+            albums.map((album) => (
+              <AlbumBox title={album.title} href={`/album/${album.id}`} image={`/album/${album.id}.png`} />
+            ))
+          }
+        </div>
+      </div>
+    </div>
+    <nav class='bg-dark p-2'>
+      <FooterNav class='flex md:hidden' pageLimit={limitXS} {...listProps} />
+      <FooterNav class='hidden md:flex' pageLimit={limitMD} {...listProps} />
+    </nav>
+  </div>
+</Base>

src/pages/anim/latest/[...page].astro

@@ -0,0 +1,28 @@
+---
+import prismaClient from 'utils/prisma-client'
+import * as m from 'paraglide/messages'
+import { AlbumStatus } from '@prisma/client'
+
+import PaginatedAlbumList from 'layouts/PaginatedAlbumList.astro'
+
+const page = Math.min(1, parseInt(Astro.params.page ?? '1'))
+const take = 40
+const limitMD = 12
+const limitXS = 5
+
+const albums = await prismaClient.albums.findMany({
+  where: { status: AlbumStatus.SHOW, categories: { some: { categoryName: 'Animation' } } },
+  select: { id: true, title: true },
+  take,
+  skip: take * (page - 1),
+  orderBy: [{ releaseDate: 'desc' }, { publishedAt: 'desc' }, { createdAt: 'desc' }]
+})
+const count = await prismaClient.albums.count({ where: { status: AlbumStatus.SHOW } })
+
+const fullPageList = [...Array(Math.ceil(count / take))].map((v, i) => i + 1)
+const listProps = { fullPageList, page, albums, limitMD, limitXS }
+---
+
+<PaginatedAlbumList {...listProps}>
+  {m.latestAnimReleases()}
+</PaginatedAlbumList>

src/pages/game/latest/[...page].astro

@@ -0,0 +1,28 @@
+---
+import prismaClient from 'utils/prisma-client'
+import * as m from 'paraglide/messages'
+import { AlbumStatus } from '@prisma/client'
+
+import PaginatedAlbumList from 'layouts/PaginatedAlbumList.astro'
+
+const page = Math.min(1, parseInt(Astro.params.page ?? '1'))
+const take = 40
+const limitMD = 12
+const limitXS = 5
+
+const albums = await prismaClient.albums.findMany({
+  where: { status: AlbumStatus.SHOW, categories: { some: { categoryName: 'Game' } } },
+  select: { id: true, title: true },
+  take,
+  skip: take * (page - 1),
+  orderBy: [{ releaseDate: 'desc' }, { publishedAt: 'desc' }, { createdAt: 'desc' }]
+})
+const count = await prismaClient.albums.count({ where: { status: AlbumStatus.SHOW } })
+
+const fullPageList = [...Array(Math.ceil(count / take))].map((v, i) => i + 1)
+const listProps = { fullPageList, page, albums, limitMD, limitXS }
+---
+
+<PaginatedAlbumList {...listProps}>
+  {m.latestGameReleases()}
+</PaginatedAlbumList>

src/pages/last-added/[...page].astro

@@ -3,53 +3,26 @@ import prismaClient from 'utils/prisma-client'
 import * as m from 'paraglide/messages'
 import { AlbumStatus } from '@prisma/client'
 
-import BaseLayout from 'layouts/base.astro'
+import PaginatedAlbumList from 'layouts/PaginatedAlbumList.astro'
-import AlbumBox from 'components/AlbumBox.astro'
-import FooterNav from 'components/lastAdded/FooterNav.astro'
 
-const page = parseInt(Astro.params.page ?? '1')
+const page = Math.min(1, parseInt(Astro.params.page ?? '1'))
 const take = 40
 const limitMD = 12
 const limitXS = 5
 
-if (page < 1) {
+const albums = await prismaClient.albums.findMany({
-  Astro.redirect('/last-added')
-}
-
-const lastAlbums = await prismaClient.albums.findMany({
   where: { status: AlbumStatus.SHOW },
   select: { id: true, title: true },
   take,
   skip: take * (page - 1),
-  orderBy: { createdAt: 'desc' }
+  orderBy: { publishedAt: 'desc' }
 })
 const count = await prismaClient.albums.count({ where: { status: AlbumStatus.SHOW } })
 
-if (lastAlbums.length === 0) {
-  Astro.redirect('/404')
-}
-
 const fullPageList = [...Array(Math.ceil(count / take))].map((v, i) => i + 1)
-const listProps = { fullPageList, page }
+const listProps = { fullPageList, page, albums, limitMD, limitXS }
 ---
 
-<BaseLayout>
+<PaginatedAlbumList {...listProps}>
-  <div class='w-full min-h-100vh mx-auto max-w-[1440px]'>
+  {m.lastAdded()}
-    <div class='px-2 mb-2'>
+</PaginatedAlbumList>
-      <h1 class='uppercase font-medium tracking-wide text-5xl drop-shadow-2xl mt-5 mb-2 text-center'>
-        {m.lastAdded()}
-      </h1>
-      <div class='grid grid-cols-2 md:grid-cols-4 gap-x-1.5'>
-        {
-          lastAlbums.map((album) => (
-            <AlbumBox title={album.title} href={`/album/${album.id}`} image={`/album/${album.id}.png`} />
-          ))
-        }
-      </div>
-    </div>
-    <nav class='bg-dark p-2'>
-      <FooterNav class='flex md:hidden' pageLimit={limitXS} {...listProps} />
-      <FooterNav class='hidden md:flex' pageLimit={limitMD} {...listProps} />
-    </nav>
-  </div>
-</BaseLayout>