Add pagination to last-added

src/components/lastAdded/FooterNav.astro

@@ -0,0 +1,61 @@
+---
+import FooterNavItem from './FooterNavItem.astro'
+
+interface Props {
+  class?: String
+  fullPageList: number[]
+  page: number
+  pageLimit: number
+}
+
+const { class: className, fullPageList, page, pageLimit } = Astro.props
+const pageList: number[][] = [[]]
+
+fullPageList.forEach((n) => {
+  pageList[pageList.length - 1].push(n)
+  if (n % pageLimit === 0) pageList.push([])
+})
+
+const currentListIndex = pageList.findIndex((l) => l.includes(page))
+const currentList = pageList[currentListIndex]
+---
+
+<ul class:list={[className, 'bg-dark mb-0 py-2 justify-center']}>
+  {
+    currentListIndex > 0 && (
+      <>
+        <FooterNavItem href='/last-added/1' aria-label='First'>
+          <span aria-hidden='true'>&laquo;</span>
+        </FooterNavItem>
+        <FooterNavItem href={`/last-added/${currentList[0] - 1}`} aria-label={(currentList[0] - 1).toString()}>
+          <span aria-hidden='true'>&lt;</span>
+        </FooterNavItem>
+      </>
+    )
+  }
+  {
+    currentList.map((item) => (
+      <FooterNavItem
+        class:list={[{ ['cursor-auto text-white bg-gray-hover hover:no-underline']: item === page }]}
+        href={`/last-added/${item}`}
+      >
+        {item}
+      </FooterNavItem>
+    ))
+  }
+  {
+    currentListIndex !== pageList.length - 1 && (
+      <>
+        <FooterNavItem
+          href={`/last-added/${currentList[currentList.length - 1] + 1}`}
+          aria-label={(currentList[currentList.length - 1] + 1).toString()}
+        >
+          <span aria-hidden='true'>&gt;</span>
+        </FooterNavItem>
+        <FooterNavItem href={`/last-added/${fullPageList[fullPageList.length - 1]}`} aria-label='Last'>
+          <span aria-hidden='true'>&raquo;</span>
+        </FooterNavItem>
+      </>
+    )
+  }
+</ul>

src/components/lastAdded/FooterNavItem.astro

@@ -0,0 +1,12 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'a'> {}
+const { class: className, ...attrs } = Astro.props
+---
+
+<li class='first:rounded-l-md last:rounded-r-md border border-gray-hover'>
+  <a class:list={[className, 'text-link px-4 py-2 block  hover:bg-gray-hover']} {...attrs}>
+    <slot />
+  </a>
+</li>

src/pages/404.astro

@@ -9,8 +9,8 @@ import BaseLayout from '../layouts/base.astro'
     <div class='text-md` text-center'>
       <a class='text-blue-500 underline' href='https://twitter.com/i/status/1890946922908721317'>Boat Goes Binted</a>
     </div>
-    <video class='mt-4' controls autoplay style={{ height: '350px', width: 'auto' }}>
-      <source src='/public/video/boat-goes-binted.mp4' type='video/mp4' />
+    <video class='mt-4' controls autoplay style={{ height: '350px', width: 'auto' }} onloadstart='this.volume=0.15'>
+      <source src='/video/boat-goes-binted.mp4' type='video/mp4' />
     </video>
   </div>
 </BaseLayout>

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

@@ -4,12 +4,32 @@ import * as m from 'paraglide/messages'
 
 import BaseLayout from 'layouts/base.astro'
 import AlbumBox from 'components/AlbumBox.astro'
+import FooterNav from 'components/lastAdded/FooterNav.astro'
+
+const page = parseInt(Astro.params.page ?? '1')
+const take = 40
+const limitMD = 12
+const limitXS = 5
+
+if (page < 1) {
+  return Astro.redirect('/last-added')
+}
 
 const lastAlbums = await prismaClient.albums.findMany({
+  where: { status: 'show' },
   select: { id: true, title: true },
-  take: 40,
+  take,
+  skip: take * (page - 1),
   orderBy: { createdAt: 'desc' }
 })
+const count = await prismaClient.albums.count({ where: { status: 'show' } })
+
+if (lastAlbums.length === 0) {
+  return Astro.redirect('/404')
+}
+
+const fullPageList = [...Array(Math.ceil(count / take))].map((v, i) => i + 1)
+const listProps = { fullPageList, page }
 ---
 
 <BaseLayout>
@@ -26,5 +46,9 @@ const lastAlbums = await prismaClient.albums.findMany({
         }
       </div>
     </div>
+    <nav class='bg-dark p-2'>
+      <FooterNav class='flex md:hidden' pageLimit={limitXS} {...listProps} client:visible />
+      <FooterNav class='hidden md:flex' pageLimit={limitMD} {...listProps} client:visible />
+    </nav>
   </div>
 </BaseLayout>