feat: Docs Child Page List

Author: NEKOYASAN

app/routes/docs/01-getting-started/01-basic.mdx

@@ -1,7 +1,7 @@
 ---
 title: Getting Started - Basic
 nav_title: Basic
-description:
+description: Create a basic HonoX application using hono/jsx as a renderer.
 ---
 
 Let's create a basic HonoX application using hono/jsx as a renderer. This application has no client JavaScript and renders JSX on the server side.

app/routes/docs/_components/DocsChildPagesList/DocsChildPagesList.tsx

@@ -0,0 +1,46 @@
+import { useRequestContext } from 'hono/jsx-renderer'
+import type { Frontmatter } from '../../../../global'
+import { getDocsPagination } from '../DocsPagination/DocsPaginationUtil'
+import { getDocsChildPages } from './DocsChildPagesListUtil'
+
+export const DocsChildPagesList = () => {
+  const c = useRequestContext()
+
+  const docs = import.meta.glob<{
+    frontmatter?: Frontmatter
+  }>('../../**/*.mdx', {
+    eager: true,
+  })
+
+  const childDocs = getDocsChildPages(docs, c.req.path.replace('/docs', ''))
+
+  if (childDocs.length === 0) {
+    return null
+  }
+  return (
+    <div className='my-12 grid grid-cols-2 gap-6'>
+      {childDocs.map((docs) => {
+        if (!docs.frontmatter) {
+          return null
+        }
+        return (
+          <a
+            href={`/docs${docs.path}`}
+            className={
+              'rounded-md border border-gray-300 p-4 text-lg text-gray-900 transition-colors hover:text-orange-700 dark:border-gray-700 dark:text-gray-100 dark:hover:text-orange-400'
+            }
+          >
+            <p className={'font-semibold'}>
+              {docs.frontmatter?.nav_title || docs.frontmatter?.title}
+            </p>
+            {docs.frontmatter?.description ? (
+              <p class={'mt-2 text-sm text-gray-600 dark:text-gray-400'}>
+                {docs.frontmatter?.description}
+              </p>
+            ) : null}
+          </a>
+        )
+      })}
+    </div>
+  )
+}

app/routes/docs/_components/DocsChildPagesList/DocsChildPagesListUtil.test.ts

@@ -0,0 +1,110 @@
+import type { Frontmatter } from '../../../../global'
+import { getDocsChildPages } from './DocsChildPagesListUtil'
+
+describe('DocsPaginationutil', () => {
+  const docs: Record<string, { frontmatter?: Frontmatter }> = {
+    '../../index.mdx': {
+      frontmatter: {
+        title: 'Home',
+        nav_title: 'Home',
+        description: 'Welcome to HonoX documentation.',
+        exclude_from_nav: true,
+      },
+    },
+    '../../testing.mdx': {
+      frontmatter: {
+        title: 'Testing',
+        nav_title: 'Testing',
+        description: 'Testing description',
+        exclude_from_nav: false,
+      },
+    },
+    '../../01-getting-started/01-basic.mdx': {
+      frontmatter: {
+        title: 'Getting Started - Basic',
+        nav_title: 'Basic',
+        description: null,
+      },
+    },
+    '../../01-getting-started/02-with-client.mdx': {
+      frontmatter: {
+        title: 'Get Started - with Client',
+        nav_title: 'with Client',
+        description: null,
+      },
+    },
+    '../../01-getting-started/byor/index.mdx': {
+      frontmatter: {
+        title: 'BYOR - Bring Your Own Renderer',
+        nav_title: 'Bring Your Own Renderer',
+        description: null,
+      },
+    },
+    '../../01-getting-started/byor/react.mdx': {
+      frontmatter: {
+        title: 'React Renderer',
+        nav_title: 'React',
+        description: null,
+      },
+    },
+    '../../01-getting-started/index.mdx': {
+      frontmatter: {
+        title: 'Getting Started',
+        nav_title: 'Getting Started',
+        description: 'Learn how to create a basic HonoX application.',
+      },
+    },
+    '../../02-guide/01-nested-layouts.mdx': {
+      frontmatter: {
+        title: 'Nexted Layouts',
+        nav_title: 'Nested Layouts',
+        description: null,
+      },
+    },
+    '../../02-guide/index.mdx': {
+      frontmatter: {
+        title: 'Guide',
+        nav_title: 'Guide',
+        description: 'Guide to create a HonoX application.',
+      },
+    },
+  }
+  it('Should be get next and previous page at correct paths.', () => {
+    const docsPagination = getDocsChildPages(docs, '/getting-started')
+    expect(docsPagination).toStrictEqual([
+      {
+        path: '/getting-started/basic',
+        frontmatter: {
+          title: 'Getting Started - Basic',
+          nav_title: 'Basic',
+          description: null,
+        },
+      },
+      {
+        path: '/getting-started/with-client',
+        frontmatter: {
+          title: 'Get Started - with Client',
+          nav_title: 'with Client',
+          description: null,
+        },
+      },
+      {
+        path: '/getting-started/byor',
+        frontmatter: {
+          title: 'BYOR - Bring Your Own Renderer',
+          nav_title: 'Bring Your Own Renderer',
+          description: null,
+        },
+      },
+    ])
+  })
+
+  it('Should be return empty array when incorrect paths.', () => {
+    const docsPagination = getDocsChildPages(docs, '/incorrect-path')
+    expect(docsPagination).toStrictEqual([])
+  })
+  it('Should be return empty array when child page is nothing.', () => {
+    const docsPagination = getDocsChildPages(docs, '/getting-started/with-client')
+    expect(docsPagination).toStrictEqual([])
+  })
+})

app/routes/docs/_components/DocsChildPagesList/DocsChildPagesListUtil.ts

@@ -0,0 +1,40 @@
+import type { Frontmatter } from '../../../../global'
+
+export type Docs = {
+  path: string
+  frontmatter?: Frontmatter
+}
+
+export const getDocsChildPages = (
+  docs: Record<string, { frontmatter?: Frontmatter }>,
+  currentPathName: string
+): Docs[] => {
+  const childrenResult = Object.entries(docs)
+    .map(([key, value]): [string, { frontmatter?: Frontmatter }] => {
+      return [
+        `/${key
+          .replace(/\.\.\//g, '')
+          .replace(/\.\//g, '')
+          .replace(/index.mdx$/, '')
+          .replace(/\.mdx$/, '')
+          .replace(/\/$/, '')}`,
+        value,
+      ]
+    })
+    .filter(([key]) => {
+      return (
+        key.replace(/\/\d+-/g, '/').startsWith(currentPathName) &&
+        key
+          .replace(/\/\d+-/g, '/')
+          .replace(currentPathName, '')
+          .split('/').length == 2
+      )
+    })
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([key, value]) => ({
+      path: key.replace(/\/\d+-/g, '/'),
+      frontmatter: value.frontmatter,
+    }))
+
+  return childrenResult
+}

app/routes/docs/_components/DocsPagination/DocsPagination.tsx

@@ -19,7 +19,7 @@ export const DocsPagination = () => {
   return (
     <nav
       className={
-        'mt-8 flex items-center justify-between border-t border-gray-200 pt-8 pb-4 dark:border-gray-700'
+        'my-12 flex items-center justify-between border-t border-gray-200 pt-8 pb-4 dark:border-gray-700'
       }
     >
       {groupedDocs.previous ? (

app/routes/docs/_renderer.tsx

@@ -1,6 +1,7 @@
 import { jsxRenderer } from 'hono/jsx-renderer'
 import { Link, Script } from 'honox/server'
 import { Header } from '../_components/common/Header/Header'
+import { DocsChildPagesList } from './_components/DocsChildPagesList/DocsChildPagesList'
 import { DocsPagination } from './_components/DocsPagination/DocsPagination'
 import { SideNav } from './_components/SideNav/SideNav'
 
@@ -31,6 +32,7 @@ export default jsxRenderer(({ children, frontmatter }) => {
           <article className={'w-full min-w-0'}>
             {frontmatter ? <h1 class={'mb-6 text-4xl font-bold'}>{frontmatter.title}</h1> : null}
             {children}
+            <DocsChildPagesList />
             <DocsPagination />
           </article>
         </main>