add pager

elsoul · Nov 4, 2024 · 4c79ecd · 4c79ecd
1 parent b133caa
commit 4c79ecd
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 7 deletions.
diff --git a/deno.json b/deno.json
@@ -34,7 +34,7 @@
     "fresh-atom": "jsr:@elsoul/[email protected]",
     "fresh-i18n": "jsr:@elsoul/[email protected]",
     "fresh-theme": "jsr:@elsoul/[email protected]",
-    "fresh-sitemap": "jsr:@elsoul/[email protected].0",
+    "fresh-sitemap": "jsr:@elsoul/[email protected].1",
     "preact": "npm:[email protected]",
     "preact/hooks": "npm:[email protected]/hooks",
     "preact/jsx-runtime": "npm:[email protected]/jsx-runtime",

diff --git a/deno.lock b/deno.lock
diff --git a/islands/posts/Pager.tsx 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
@@ -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} />
     </>
   )
 })