From 4c79ecdb797e409eeadb0904378b7afd82e0c5b6 Mon Sep 17 00:00:00 2001
From: KishiTheMechanic <s.kishi@elsoul.nl>
Date: Mon, 4 Nov 2024 21:26:56 +0100
Subject: [PATCH] add pager

---
 deno.json                                    |   2 +-
 deno.lock                                    |   8 +-
 islands/posts/Pager.tsx                      | 121 +++++++++++++++++++
 routes/[locale]/(default)/news/[...slug].tsx |  19 ++-
 4 files changed, 143 insertions(+), 7 deletions(-)
 create mode 100644 islands/posts/Pager.tsx

diff --git a/deno.json b/deno.json
index 653453c..74592bf 100644
--- a/deno.json
+++ b/deno.json
@@ -34,7 +34,7 @@
     "fresh-atom": "jsr:@elsoul/fresh-atom@1.0.0",
     "fresh-i18n": "jsr:@elsoul/fresh-i18n@1.2.0",
     "fresh-theme": "jsr:@elsoul/fresh-theme@1.3.0",
-    "fresh-sitemap": "jsr:@elsoul/fresh-sitemap@1.3.0",
+    "fresh-sitemap": "jsr:@elsoul/fresh-sitemap@1.3.1",
     "preact": "npm:preact@10.24.3",
     "preact/hooks": "npm:preact@10.24.3/hooks",
     "preact/jsx-runtime": "npm:preact@10.24.3/jsx-runtime",
diff --git a/deno.lock b/deno.lock
index 7db1189..af2166d 100644
--- a/deno.lock
+++ b/deno.lock
@@ -3,7 +3,7 @@
   "specifiers": {
     "jsr:@elsoul/fresh-atom@1.0.0": "1.0.0",
     "jsr:@elsoul/fresh-i18n@1.2.0": "1.2.0",
-    "jsr:@elsoul/fresh-sitemap@1.3.0": "1.3.0",
+    "jsr:@elsoul/fresh-sitemap@1.3.1": "1.3.1",
     "jsr:@elsoul/fresh-theme@1.3.0": "1.3.0",
     "jsr:@fresh/core@2.0.0-alpha.23": "2.0.0-alpha.23",
     "jsr:@fresh/plugin-tailwind@0.0.1-alpha.7": "0.0.1-alpha.7",
@@ -72,8 +72,8 @@
         "jsr:@std/path@1.0.6"
       ]
     },
-    "@elsoul/fresh-sitemap@1.3.0": {
-      "integrity": "f01a3ed5405d143fed767257cbd5e7277801b8824576830d05ee7bae72e426ad",
+    "@elsoul/fresh-sitemap@1.3.1": {
+      "integrity": "0aaad04ee169516a081e9b8a3f8952333d7abe73164f71008ca96df7ddeec19d",
       "dependencies": [
         "jsr:@std/fs@0.224.0",
         "jsr:@std/path@0.224.0"
@@ -2033,7 +2033,7 @@
     "dependencies": [
       "jsr:@elsoul/fresh-atom@1.0.0",
       "jsr:@elsoul/fresh-i18n@1.2.0",
-      "jsr:@elsoul/fresh-sitemap@1.3.0",
+      "jsr:@elsoul/fresh-sitemap@1.3.1",
       "jsr:@elsoul/fresh-theme@1.3.0",
       "jsr:@fresh/core@2.0.0-alpha.23",
       "jsr:@fresh/plugin-tailwind@0.0.1-alpha.7",
diff --git a/islands/posts/Pager.tsx b/islands/posts/Pager.tsx
new file mode 100644
index 0000000..cf74bd0
--- /dev/null
+++ b/islands/posts/Pager.tsx
@@ -0,0 +1,121 @@
+import Link from '@/components/utils/Link.tsx'
+import { useTranslation } from '@/hooks/i18n/useTranslation.ts'
+import { ArrowLeft, ArrowRight } from 'iconoir-react'
+import { asset } from 'fresh/runtime'
+import { cn } from '@/lib/utils.ts'
+import {
+  basicBorderColor,
+  basicTextColor,
+  lightTextColor,
+} from '@/components/utils/tailwinds.ts'
+
+export type PagerProps = {
+  pagerData: {
+    nextPage: {
+      title: string
+      path: string
+      thumbnail?: string
+      date?: string
+    } | undefined
+    prevPage: {
+      title: string
+      path: string
+      thumbnail?: string
+      date?: string
+    } | undefined
+  }
+}
+
+export default function Pager({ pagerData }: PagerProps) {
+  const t = useTranslation()
+  return (
+    <>
+      <>
+        <div className='flex flex-col gap-4 sm:flex-row py-12'>
+          <div className='flex-1'>
+            {pagerData.prevPage && (
+              <Link
+                href={pagerData.prevPage.path}
+                className={cn(
+                  'block h-full w-full rounded-lg p-3',
+                  'border hover:opacity-80',
+                  basicBorderColor,
+                )}
+              >
+                <div class='flex flex-row justify-between items-end gap-3'>
+                  <p
+                    className={cn(
+                      'flex flex-row items-center justify-start',
+                      'text-sm tracking-tight',
+                      basicTextColor,
+                    )}
+                  >
+                    <ArrowLeft className='mr-1.5 h-4 w-4' />
+                    {t('common.toPrevious')}
+                  </p>
+                  {pagerData.prevPage.thumbnail && (
+                    <img
+                      src={asset(pagerData.prevPage.thumbnail)}
+                      alt={pagerData.prevPage.title}
+                      className='w-24 rounded-sm'
+                    />
+                  )}
+                </div>
+                <p
+                  className={cn(
+                    'mt-3 text-left text-xs font-light',
+                    lightTextColor,
+                  )}
+                >
+                  {pagerData.prevPage.title}
+                </p>
+              </Link>
+            )}
+          </div>
+          <div className='flex-1'>
+            {pagerData.nextPage && (
+              <Link
+                href={pagerData.nextPage.path}
+                className={cn(
+                  'block h-full w-full rounded-lg p-3',
+                  'border hover:opacity-80',
+                  basicBorderColor,
+                )}
+              >
+                <div class='flex flex-row justify-between items-end gap-3'>
+                  {pagerData.nextPage.thumbnail
+                    ? (
+                      <img
+                        src={asset(pagerData.nextPage.thumbnail)}
+                        alt={pagerData.nextPage.title}
+                        className='w-24 rounded-sm'
+                      />
+                    )
+                    : <div />}
+                  <p
+                    className={cn(
+                      'flex flex-row items-center justify-end',
+                      'text-sm tracking-tight',
+                      basicTextColor,
+                    )}
+                  >
+                    {t('common.toNext')}
+                    <ArrowRight className='ml-1.5 h-4 w-4' />
+                  </p>
+                </div>
+                <p
+                  className={cn(
+                    'mt-3 text-right text-xs font-light',
+                    lightTextColor,
+                  )}
+                >
+                  {pagerData.nextPage.title}
+                </p>
+              </Link>
+            )}
+          </div>
+        </div>
+      </>
+    </>
+  )
+}
diff --git a/routes/[locale]/(default)/news/[...slug].tsx b/routes/[locale]/(default)/news/[...slug].tsx
index f29ad36..8d57d5b 100644
--- a/routes/[locale]/(default)/news/[...slug].tsx
+++ b/routes/[locale]/(default)/news/[...slug].tsx
@@ -10,6 +10,9 @@ import {
 } from '@/components/utils/tailwinds.ts'
 import Toc from '@/islands/posts/Toc.tsx'
 import NewsHeader from '@/islands/layouts/news/NewsHeader.tsx'
+import { newsPosts } from '@/generated/newsPostsIndex.ts'
+import NewsIndexRow from '@/islands/rows/news/NewsIndexRow.tsx'
+import Pager from '@/islands/posts/Pager.tsx'
 
 const kind = 'news'
 
@@ -46,20 +49,30 @@ export const handler = define.handlers({
     ctx.state.description = attrs.description
     ctx.state.ogImage = new URL(asset(`${attrs.thumbnail}`), ctx.url).href
 
+    const allPosts = newsPosts[ctx.params.locale as keyof typeof newsPosts] ||
+      []
+    const postPath = `/${kind}/${ctx.params.slug}`
+    const currentIndex = allPosts.findIndex((post) => post.path === postPath)
+
+    const pagerData = {
+      nextPage: allPosts[currentIndex + 1],
+      prevPage: allPosts[currentIndex - 1],
+    }
+
     return page({
       page: {
         ctx,
         body,
         attrs,
         date: formattedDate,
+        pagerData,
       },
     })
   },
 })
 
-export default define.page<typeof handler>(function LegalSlugPage(props) {
+export default define.page<typeof handler>(function NewsSlugPage(props) {
   const { html, headings } = renderMarkdown(props.data.page.body)
-
   return (
     <>
       <NewsHeader title={props.state.title || 'News'} headings={headings} />
@@ -92,6 +105,7 @@ export default define.page<typeof handler>(function LegalSlugPage(props) {
               class='prose prose-zinc dark:prose-invert'
               dangerouslySetInnerHTML={{ __html: html }}
             />
+            <Pager pagerData={props.data.page.pagerData} />
           </div>
           <div className='max-h-full p-4 md:col-span-1'>
             <div
@@ -107,6 +121,7 @@ export default define.page<typeof handler>(function LegalSlugPage(props) {
           </div>
         </div>
       </div>
+      <NewsIndexRow defaultShowCounts={3} />
     </>
   )
 })