feat: implement pagination

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "astro-erudite",
-  "version": "0.0.1",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "astro-erudite",
-      "version": "0.0.1",
+      "version": "1.1.0",
       "dependencies": {
         "@astrojs/check": "^0.7.0",
         "@astrojs/markdown-remark": "^5.2.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-erudite",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "dev": "astro dev",

src/components/Footer.astro

@@ -10,7 +10,7 @@ import SocialIcons from './SocialIcons.astro'
       class="flex flex-col items-center justify-center gap-y-2 sm:flex-row sm:justify-between"
     >
       <div class="flex items-center">
-        <p class="text-sm text-muted-foreground">
+        <p class="text-center text-sm text-muted-foreground">
           &copy; {new Date().getFullYear()} All rights reserved.
         </p>
       </div>

src/components/ui/pagination.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react'
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { type ButtonProps, buttonVariants } from '@/components/ui/button'
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn('mx-auto flex w-full justify-center', className)}
+    {...props}
+  />
+)
+Pagination.displayName = 'Pagination'
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn('flex flex-row items-center gap-1', className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = 'PaginationContent'
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn('', className)} {...props} />
+))
+PaginationItem.displayName = 'PaginationItem'
+
+type PaginationLinkProps = {
+  isActive?: boolean
+  isDisabled?: boolean
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>
+
+const PaginationLink = ({
+  className,
+  isActive,
+  isDisabled,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'ghost',
+        size,
+      }),
+      isDisabled && 'pointer-events-none opacity-50',
+      className,
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = 'PaginationLink'
+
+const PaginationPrevious = ({
+  className,
+  isDisabled,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn('gap-1 pl-2.5', className)}
+    isDisabled={isDisabled}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = 'PaginationPrevious'
+
+const PaginationNext = ({
+  className,
+  isDisabled,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn('gap-1 pr-2.5', className)}
+    isDisabled={isDisabled}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = 'PaginationNext'
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = 'PaginationEllipsis'
+
+interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  baseUrl: string
+}
+
+const PaginationComponent: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  baseUrl,
+}) => {
+  const pages = Array.from({ length: totalPages }, (_, i) => i + 1)
+
+  const getPageUrl = (page: number) => {
+    if (page === 1) return baseUrl
+    return `${baseUrl}${page}`
+  }
+
+  return (
+    <Pagination>
+      <PaginationContent className="flex-wrap">
+        <PaginationItem>
+          <PaginationPrevious
+            href={currentPage > 1 ? getPageUrl(currentPage - 1) : undefined}
+            isDisabled={currentPage === 1}
+          />
+        </PaginationItem>
+
+        {pages.map((page) => (
+          <PaginationItem key={page}>
+            <PaginationLink
+              href={getPageUrl(page)}
+              isActive={page === currentPage}
+            >
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+
+        {totalPages > 5 && (
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+        )}
+
+        <PaginationItem>
+          <PaginationNext
+            href={
+              currentPage < totalPages ? getPageUrl(currentPage + 1) : undefined
+            }
+            isDisabled={currentPage === totalPages}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+export default PaginationComponent

src/consts.ts

@@ -3,6 +3,7 @@ export type Site = {
   DESCRIPTION: string
   EMAIL: string
   NUM_POSTS_ON_HOMEPAGE: number
+  POSTS_PER_PAGE: number
   SITEURL: string
 }
 
@@ -17,6 +18,7 @@ export const SITE: Site = {
     'astro-erudite is a opinionated, no-frills blogging template—built with Astro, Tailwind, and shadcn/ui.',
   EMAIL: 'jason@enscribe.dev',
   NUM_POSTS_ON_HOMEPAGE: 2,
+  POSTS_PER_PAGE: 3,
   SITEURL: 'https://astro-erudite.vercel.app',
 }
 

src/content/blog/2022-post/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: '2022 Post'
 description: 'This a dummy post written in the year 2022.'
-date: 2022-01-01
+date: 2022-06-01
 tags: ['dummy', 'placeholder']
 image: './2022.png'
 ---

src/content/blog/2023-post/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: '2023 Post'
 description: 'This a dummy post written in the year 2023.'
-date: 2023-01-01
+date: 2023-06-01
 tags: ['dummy', 'placeholder']
 image: './2023.png'
 authors: ['enscribe']

src/content/blog/2024-post/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: '2024 Post'
 description: 'This a dummy post written in the year 2024 (with multiple authors).'
-date: 2024-01-01
+date: 2024-06-01
 tags: ['dummy', 'placeholder']
 image: './2024.png'
 authors: ['enscribe', 'jktrn']

src/pages/blog/[page].astro

@@ -0,0 +1,70 @@
+---
+import Breadcrumbs from '@/components/Breadcrumbs.astro'
+import PaginationComponent from '@/components/ui/pagination'
+import { SITE } from '@/consts'
+import BlogCard from '@components/BlogCard.astro'
+import Container from '@components/Container.astro'
+import Layout from '@layouts/Layout.astro'
+import type { PaginateFunction } from 'astro'
+import { type CollectionEntry, getCollection } from 'astro:content'
+
+export async function getStaticPaths({
+  paginate,
+}: {
+  paginate: PaginateFunction
+}) {
+  const allPosts = await getCollection('blog', ({ data }) => !data.draft)
+  return paginate(
+    allPosts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()),
+    { pageSize: SITE.POSTS_PER_PAGE },
+  )
+}
+
+const { page } = Astro.props
+
+const postsByYear = page.data.reduce(
+  (acc: Record<string, CollectionEntry<'blog'>[]>, post) => {
+    const year = post.data.date.getFullYear().toString()
+    ;(acc[year] ??= []).push(post)
+    return acc
+  },
+  {},
+)
+
+const years = Object.keys(postsByYear).sort((a, b) => parseInt(b) - parseInt(a))
+---
+
+<Layout title="Blog" description="Blog">
+  <Container class="flex grow flex-col gap-y-6">
+    <Breadcrumbs
+      items={[
+        { label: 'Blog', href: '/blog' },
+        { label: `Page ${page.currentPage}` },
+      ]}
+    />
+
+    <div class="flex min-h-[calc(100vh-18rem)] flex-col gap-y-8">
+      {
+        years.map((year) => (
+          <section class="flex flex-col gap-y-4">
+            <div class="font-semibold">{year}</div>
+            <ul class="not-prose flex flex-col gap-4">
+              {postsByYear[year].map((post) => (
+                <li>
+                  <BlogCard entry={post} />
+                </li>
+              ))}
+            </ul>
+          </section>
+        ))
+      }
+    </div>
+
+    <PaginationComponent
+      currentPage={page.currentPage}
+      totalPages={page.lastPage}
+      baseUrl="/blog/"
+      client:load
+    />
+  </Container>
+</Layout>

src/pages/blog/index.astro

@@ -1,51 +1,5 @@
 ---
-import Breadcrumbs from '@/components/Breadcrumbs.astro'
+export const prerender = true
-import BlogCard from '@components/BlogCard.astro'
-import Container from '@components/Container.astro'
-import Layout from '@layouts/Layout.astro'
-import { type CollectionEntry, getCollection } from 'astro:content'
 
-const data = (await getCollection('blog'))
+return Astro.redirect('/blog/1')
-  .filter((post) => !post.data.draft)
-  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
-
-type Acc = {
-  [year: string]: CollectionEntry<'blog'>[]
-}
-
-const posts = data.reduce((acc: Acc, post) => {
-  const year = post.data.date.getFullYear().toString()
-  if (!acc[year]) {
-    acc[year] = []
-  }
-  acc[year].push(post)
-  return acc
-}, {})
-
-const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a))
 ---
-
-<Layout title="Blog" description="Blog">
-  <Container class="flex flex-col gap-y-6">
-    <Breadcrumbs items={[{ label: 'Blog' }]} />
-
-    <div class="flex flex-col gap-y-8">
-      {
-        years.map((year) => (
-          <section class="flex flex-col gap-y-4">
-            <div class="font-semibold">{year}</div>
-            <div>
-              <ul class="not-prose flex flex-col gap-4">
-                {posts[year].map((post) => (
-                  <li>
-                    <BlogCard entry={post} />
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </section>
-        ))
-      }
-    </div>
-  </Container>
-</Layout>