Doc Pager

elsoul · Nov 4, 2024 · eb0a531 · eb0a531
1 parent 934f177
commit eb0a531
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 55 deletions.
diff --git a/islands/layouts/doc/DocMenu.tsx b/islands/layouts/doc/DocMenu.tsx
@@ -40,10 +40,10 @@ const DocMenuSection = ({ section }: DocMenuSectionProps) => {
           'cursor-pointer hover:opacity-70',
         )}
       >
-        <Link href={section.route} className='w-full'>
+        <Link href={section.path} className='w-full'>
           <span
             className={cn(
-              isActivePath(section.route) ? linkActiveColor : basicTextColor,
+              isActivePath(section.path) ? linkActiveColor : basicTextColor,
               'flex-1 text-sm font-bold',
             )}
           >
@@ -73,9 +73,9 @@ const DocMenuItem = ({ item }: DocMenuItemProps) => {
 
   useEffect(() => {
     const hasActiveSubItem = item.subItems?.some((subItem) =>
-      isActivePath(subItem.route)
+      isActivePath(subItem.path)
     ) || false
-    isOpen.value = isActivePath(item.route as string) || hasActiveSubItem
+    isOpen.value = isActivePath(item.path as string) || hasActiveSubItem
   }, [item, isActivePath])
 
   return (
@@ -92,7 +92,7 @@ const DocMenuItem = ({ item }: DocMenuItemProps) => {
             <div class='flex flex-row justify-between items-center w-full'>
               <p
                 className={cn(
-                  isActivePath(item.route as string)
+                  isActivePath(item.path as string)
                     ? linkActiveColor
                     : linkMenuColor,
                   'text-sm',
@@ -102,7 +102,7 @@ const DocMenuItem = ({ item }: DocMenuItemProps) => {
               </p>
               <p
                 className={cn(
-                  isActivePath(item.route as string)
+                  isActivePath(item.path as string)
                     ? linkActiveColor
                     : linkMenuColor,
                   'text-sm',
@@ -116,10 +116,10 @@ const DocMenuItem = ({ item }: DocMenuItemProps) => {
           )
           : (
             <>
-              <Link href={item.route as string} className='w-full'>
+              <Link href={item.path as string} className='w-full'>
                 <span
                   className={cn(
-                    isActivePath(item.route as string)
+                    isActivePath(item.path as string)
                       ? linkActiveColor
                       : linkMenuColor,
                     'flex-1 text-sm',
@@ -137,10 +137,10 @@ const DocMenuItem = ({ item }: DocMenuItemProps) => {
         >
           {item.subItems.map((subItem) => (
             <li key={subItem.title} className='mb-1 w-full'>
-              <Link href={subItem.route} className='w-full'>
+              <Link href={subItem.path} className='w-full'>
                 <p
                   className={cn(
-                    isActivePath(subItem.route)
+                    isActivePath(subItem.path)
                       ? linkActiveColor
                       : linkMenuColor,
                     'w-full py-2 text-sm hover:opacity-70',

diff --git a/islands/layouts/doc/DocPager.tsx b/islands/layouts/doc/DocPager.tsx
@@ -0,0 +1,105 @@
+import Link from '@/components/utils/Link.tsx'
+import { useTranslation } from '@/hooks/i18n/useTranslation.ts'
+import { ArrowLeft, ArrowRight } from 'iconoir-react'
+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 DocPager({ 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>
+                </div>
+                <p
+                  className={cn(
+                    'mt-2 text-left text-xs font-light',
+                    lightTextColor,
+                  )}
+                >
+                  {t(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'>
+                  <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-2 text-right text-xs font-light',
+                    lightTextColor,
+                  )}
+                >
+                  {t(pagerData.nextPage.title)}
+                </p>
+              </Link>
+            )}
+          </div>
+        </div>
+      </>
+    </>
+  )
+}
diff --git a/islands/layouts/doc/docNavs.ts b/islands/layouts/doc/docNavs.ts
@@ -3,32 +3,32 @@ import { Section } from '@/utils/posts.ts'
 export const docMenuData: Section[] = [
   {
     title: 'doc.nav.general.getting-started',
-    route: '/doc/general/getting-started',
+    path: '/doc/general/getting-started',
     items: [
       {
         title: 'doc.nav.general.installation',
-        route: '/doc/general/installation',
+        path: '/doc/general/installation',
       },
       {
         title: 'doc.nav.general.project-structure',
-        route: '/doc/general/project-structure',
+        path: '/doc/general/project-structure',
       },
     ],
   },
   {
     title: 'doc.nav.building-your-application.title',
-    route: '/doc/building-your-application/menu',
+    path: '/doc/building-your-application/menu',
     items: [
       {
         title: 'doc.nav.building-your-application.api.title',
         subItems: [
           {
             title: 'doc.nav.building-your-application.api.http',
-            route: '/doc/building-your-application/api/http',
+            path: '/doc/building-your-application/api/http',
           },
           {
             title: 'doc.nav.building-your-application.api.rpc',
-            route: '/doc/building-your-application/api/rpc',
+            path: '/doc/building-your-application/api/rpc',
           },
         ],
       },
@@ -37,11 +37,11 @@ export const docMenuData: Section[] = [
         subItems: [
           {
             title: 'doc.nav.building-your-application.worker.cron',
-            route: '/doc/building-your-application/worker/cron',
+            path: '/doc/building-your-application/worker/cron',
           },
           {
             title: 'doc.nav.building-your-application.worker.queue',
-            route: '/doc/building-your-application/worker/queue',
+            path: '/doc/building-your-application/worker/queue',
           },
         ],
       },
@@ -50,21 +50,21 @@ export const docMenuData: Section[] = [
         subItems: [
           {
             title: 'doc.nav.building-your-application.frontend.ssg',
-            route: '/doc/building-your-application/frontend/ssg',
+            path: '/doc/building-your-application/frontend/ssg',
           },
           {
             title: 'doc.nav.building-your-application.frontend.webapp',
-            route: '/doc/building-your-application/frontend/webapp',
+            path: '/doc/building-your-application/frontend/webapp',
           },
           {
             title: 'doc.nav.building-your-application.frontend.solana',
-            route: '/doc/building-your-application/frontend/solana',
+            path: '/doc/building-your-application/frontend/solana',
           },
         ],
       },
       {
         title: 'doc.nav.building-your-application.cli.title',
-        route: '/doc/building-your-application/cli/main',
+        path: '/doc/building-your-application/cli/main',
       },
     ],
   },

diff --git a/routes/[locale]/(default)/doc/[...slug].tsx b/routes/[locale]/(default)/doc/[...slug].tsx
@@ -1,16 +1,14 @@
 import { define } from '@/utils/state.ts'
 import { asset } from 'fresh/runtime'
 import { HttpError, page } from 'fresh'
-import { getPost } from '@/utils/posts.ts'
+import { getAllPaths, getPost } from '@/utils/posts.ts'
 import { frontMatter, renderMarkdown } from '@/utils/markdown.ts'
 import { cn } from '@/lib/utils.ts'
-import {
-  lightTextColor,
-  mainShardGradation,
-} from '@/components/utils/tailwinds.ts'
+import { mainShardGradation } from '@/components/utils/tailwinds.ts'
 import Toc from '@/islands/posts/Toc.tsx'
-import Pager from '@/islands/posts/Pager.tsx'
 import DocHeader from '@/islands/layouts/doc/DocHeader.tsx'
+import { docMenuData } from '@/islands/layouts/doc/docNavs.ts'
+import DocPager from '@/islands/layouts/doc/DocPager.tsx'
 
 const kind = 'doc'
 
@@ -41,26 +39,25 @@ export const handler = define.handlers({
     ctx.state.description = attrs.description
     ctx.state.ogImage = new URL(asset(`ogp.jpg`), ctx.url).href
 
-    // const allPosts = newsPosts[ctx.params.locale as keyof typeof newsPosts] ||
-    //   []
-    // if (!allPosts) {
-    //   throw new HttpError(404)
-    // }
+    const allPosts = getAllPaths(docMenuData)
+    if (!allPosts) {
+      throw new HttpError(404)
+    }
 
-    // const postPath = `/${kind}/${ctx.params.slug}`
-    // const currentIndex = allPosts.findIndex((post) => post.path === postPath)
+    const postPath = `/${kind}/${ctx.params.slug}`
+    const currentIndex = allPosts.findIndex((post) => post.path === postPath)
 
-    // const pagerData = {
-    //   nextPage: allPosts[currentIndex + 1],
-    //   prevPage: allPosts[currentIndex - 1],
-    // }
+    const pagerData = {
+      nextPage: allPosts[currentIndex + 1],
+      prevPage: allPosts[currentIndex - 1],
+    }
 
     return page({
       page: {
         ctx,
         body,
         attrs,
-        // pagerData,
+        pagerData,
       },
     })
   },
@@ -86,7 +83,7 @@ export default define.page<typeof handler>(function DocSlugPage(props) {
               class='prose prose-zinc dark:prose-invert'
               dangerouslySetInnerHTML={{ __html: html }}
             />
-            {/* <Pager pagerData={props.data.page.pagerData} /> */}
+            <DocPager pagerData={props.data.page.pagerData} />
           </div>
           <div className='max-h-full p-4 md:col-span-1'>
             <div

diff --git a/utils/posts.ts b/utils/posts.ts
@@ -20,47 +20,47 @@ export async function getPost(
 
 export type SubItem = {
   title: string
-  route: string
+  path: string
 }
 
 export type Item = {
   title: string
-  route?: string
+  path?: string
   subItems?: SubItem[]
 }
 
 export type Section = {
   title: string
-  route: string
+  path: string
   items?: Item[]
 }
 
-export const getAllRoutes = (menuData: Section[]) => {
-  const routes: string[] = []
+export const getAllPaths = (menuData: Section[]) => {
+  const paths: { path: string; title: string }[] = []
 
-  const collectRoutes = (items: Item[]) => {
+  const collectPaths = (items: Item[]) => {
     items.forEach((item) => {
-      if (item.route) {
-        routes.push(item.route)
+      if (item.path) {
+        paths.push({ path: item.path, title: item.title })
       }
       if (item.subItems) {
         item.subItems.forEach((subItem) => {
-          if (subItem.route) {
-            routes.push(subItem.route)
+          if (subItem.path) {
+            paths.push({ path: subItem.path, title: subItem.title })
           }
         })
       }
     })
   }
 
   menuData.forEach((section) => {
-    if (section.route) {
-      routes.push(section.route)
+    if (section.path) {
+      paths.push({ path: section.path, title: section.title })
     }
     if (section.items) {
-      collectRoutes(section.items)
+      collectPaths(section.items)
     }
   })
 
-  return routes
+  return paths
 }