feat: default theme layout with tab bar + page nav types

docs/chronicle.yaml

@@ -3,7 +3,7 @@ description: Config-driven documentation framework
 content: .
 
 theme:
-  name: paper
+  name: default
 
 navigation:
   links:

package.json

@@ -13,5 +13,8 @@
     "dev:docs": "./packages/chronicle/bin/chronicle.js dev --config docs/chronicle.yaml",
     "start:docs": "./packages/chronicle/bin/chronicle.js start --config docs/chronicle.yaml",
     "build:docs": "./packages/chronicle/bin/chronicle.js build --config docs/chronicle.yaml"
+  },
+  "dependencies": {
+    "std-env": "^4.0.0"
   }
 }

packages/chronicle/src/components/ui/client-theme-switcher.tsx

@@ -1,18 +1,35 @@
 'use client'
 
-import { ThemeSwitcher } from '@raystack/apsara'
-import { useState, useEffect } from 'react'
+import { MoonIcon, SunIcon } from '@heroicons/react/24/outline'
+import { IconButton, useTheme } from '@raystack/apsara'
+import { useEffect, useState } from 'react'
 
 interface ClientThemeSwitcherProps {
   size?: number
 }
 
-export function ClientThemeSwitcher({ size }: ClientThemeSwitcherProps) {
+export function ClientThemeSwitcher({ size = 16 }: ClientThemeSwitcherProps) {
   const [isClient, setIsClient] = useState(false)
+  const { resolvedTheme, setTheme } = useTheme()
 
   useEffect(() => {
     setIsClient(true)
   }, [])
 
-  return isClient ? <ThemeSwitcher size={size} /> : null
+  if (!isClient) return null
+
+  const isDark = resolvedTheme === 'dark'
+  return (
+    <IconButton
+      size={3}
+      aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
+      onClick={() => setTheme(isDark ? 'light' : 'dark')}
+    >
+      {isDark ? (
+        <SunIcon width={size} height={size} />
+      ) : (
+        <MoonIcon width={size} height={size} />
+      )}
+    </IconButton>
+  )
 }

packages/chronicle/src/components/ui/search.module.css

@@ -1,16 +1,3 @@
-.trigger {
-  gap: 8px;
-  color: var(--rs-color-foreground-base-secondary);
-  cursor: pointer;
-}
-
-.kbd {
-  padding: 2px 6px;
-  border-radius: 4px;
-  border: 1px solid var(--rs-color-border-base-primary);
-  font-size: 12px;
-}
-
 .dialogContent {
   max-width: 600px;
   padding: 0;

packages/chronicle/src/components/ui/search.tsx

@@ -1,28 +1,16 @@
-import { DocumentIcon, HashtagIcon } from '@heroicons/react/24/outline';
-import { Button, Command, Dialog, Text } from '@raystack/apsara';
-import { cx } from 'class-variance-authority';
+import {
+  DocumentIcon,
+  HashtagIcon,
+  MagnifyingGlassIcon
+} from '@heroicons/react/24/outline';
+import { Command, Dialog, IconButton, Text } from '@raystack/apsara';
 import type { SortedResult } from 'fumadocs-core/search';
 import { useDocsSearch } from 'fumadocs-core/search/client';
 import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { MethodBadge } from '@/components/api/method-badge';
 import styles from './search.module.css';
 
-function SearchShortcutKey({ className }: { className?: string }) {
-  const [key, setKey] = useState('⌘');
-
-  useEffect(() => {
-    const isMac = navigator.platform?.toUpperCase().includes('MAC');
-    setKey(isMac ? '⌘' : 'Ctrl');
-  }, []);
-
-  return (
-    <kbd className={className} suppressHydrationWarning>
-      {key} K
-    </kbd>
-  );
-}
-
 interface SearchProps {
   className?: string;
 }
@@ -64,16 +52,15 @@ export function Search({ className }: SearchProps) {
 
   return (
     <>
-      <Button
-        variant='outline'
-        color='neutral'
-        size='small'
+      <IconButton
+        size={3}
+        aria-label='Search'
+        title='Search (⌘K)'
         onClick={() => setOpen(true)}
-        className={cx(styles.trigger, className)}
-        trailingIcon={<SearchShortcutKey className={styles.kbd} />}
+        className={className}
       >
-        Search...
-      </Button>
+        <MagnifyingGlassIcon width={16} height={16} />
+      </IconButton>
 
       <Dialog open={open} onOpenChange={setOpen}>
         <Dialog.Content className={styles.dialogContent}>

packages/chronicle/src/lib/page-context.tsx

@@ -7,21 +7,14 @@ import {
 } from 'react';
 import { useLocation } from 'react-router';
 import type { ApiSpec } from '@/lib/openapi';
-import type { ChronicleConfig, Frontmatter, Root, TableOfContents } from '@/types';
+import type { ChronicleConfig, Frontmatter, Page, Root, TableOfContents } from '@/types';
 
 export type MdxLoader = (relativePath: string) => Promise<{ content: ReactNode; toc: TableOfContents }>;
 
-interface PageData {
-  slug: string[];
-  frontmatter: Frontmatter;
-  content: ReactNode;
-  toc: TableOfContents;
-}
-
 interface PageContextValue {
   config: ChronicleConfig;
   tree: Root;
-  page: PageData | null;
+  page: Page | null;
   errorStatus: number | null;
   apiSpecs: ApiSpec[];
 }
@@ -46,7 +39,7 @@ export function usePageContext(): PageContextValue {
 interface PageProviderProps {
   initialConfig: ChronicleConfig;
   initialTree: Root;
-  initialPage: PageData | null;
+  initialPage: Page | null;
   initialApiSpecs: ApiSpec[];
   loadMdx: MdxLoader;
   children: ReactNode;
@@ -56,7 +49,7 @@ function isApisRoute(pathname: string): boolean {
   return pathname === '/apis' || pathname.startsWith('/apis/');
 }
 
-function getInitialErrorStatus(page: PageData | null, pathname: string): number | null {
+function getInitialErrorStatus(page: Page | null, pathname: string): number | null {
   if (page) return null;
   if (pathname === '/' || isApisRoute(pathname)) return null;
   return 404;
@@ -72,7 +65,7 @@ export function PageProvider({
 }: PageProviderProps) {
   const { pathname } = useLocation();
   const [tree] = useState<Root>(initialTree);
-  const [page, setPage] = useState<PageData | null>(initialPage);
+  const [page, setPage] = useState<Page | null>(initialPage);
   const [errorStatus, setErrorStatus] = useState<number | null>(getInitialErrorStatus(initialPage, pathname));
   const [apiSpecs, setApiSpecs] = useState<ApiSpec[]>(initialApiSpecs);
   const [currentPath, setCurrentPath] = useState(pathname);
@@ -112,12 +105,19 @@ export function PageProvider({
         }
         return res.json();
       })
-      .then(async (data: { frontmatter: Frontmatter; relativePath: string; originalPath?: string } | undefined) => {
+      .then(async (data: { frontmatter: Frontmatter; relativePath: string; originalPath?: string; prev?: Page['prev']; next?: Page['next'] } | undefined) => {
         if (cancelled.current || !data) return;
         const { content, toc } = await loadMdx(data.originalPath || data.relativePath);
         if (cancelled.current) return;
         setErrorStatus(null);
-        setPage({ slug, frontmatter: data.frontmatter, content, toc });
+        setPage({
+          slug,
+          frontmatter: data.frontmatter,
+          content,
+          toc,
+          prev: data.prev ?? null,
+          next: data.next ?? null
+        });
       })
       .catch(() => {
         if (!cancelled.current) {

packages/chronicle/src/lib/source.ts

@@ -1,8 +1,9 @@
 import { loader } from 'fumadocs-core/source';
+import { flattenTree } from 'fumadocs-core/page-tree';
 import type { Root, Node, Folder } from 'fumadocs-core/page-tree';
 import type { MDXContent } from 'mdx/types';
 import type { TableOfContents } from 'fumadocs-core/toc';
-import type { Frontmatter } from '@/types';
+import type { Frontmatter, PageNav, PageNavLink } from '@/types';
 
 const CONTENT_PREFIX = '../../.content/';
 
@@ -105,6 +106,22 @@ export async function getPage(slugs?: string[]) {
   return s.getPage(slugs);
 }
 
+export async function getPageNav(slug: string[]): Promise<PageNav> {
+  const tree = await getPageTree();
+  const pages = flattenTree(tree.children);
+  const url = slug.length === 0 ? '/' : `/${slug.join('/')}`;
+  const i = pages.findIndex(p => p.url === url);
+  if (i < 0) return { prev: null, next: null };
+  const toLink = (p: (typeof pages)[number]): PageNavLink => ({
+    url: p.url,
+    title: typeof p.name === 'string' ? p.name : ''
+  });
+  return {
+    prev: i > 0 ? toLink(pages[i - 1]) : null,
+    next: i < pages.length - 1 ? toLink(pages[i + 1]) : null
+  };
+}
+
 export function extractFrontmatter(page: { data: unknown }, fallbackTitle?: string): Frontmatter {
   const d = page.data as Record<string, unknown>;
   return {

packages/chronicle/src/pages/DocsPage.tsx

@@ -32,12 +32,7 @@ export function DocsPage({ slug }: DocsPageProps) {
         }}
       />
       <Page
-        page={{
-          slug: page.slug,
-          frontmatter: page.frontmatter,
-          content: page.content,
-          toc: page.toc
-        }}
+        page={page}
         config={config}
         tree={tree}
       />

packages/chronicle/src/server/api/page.ts

@@ -1,5 +1,5 @@
 import { defineHandler, HTTPError } from 'nitro';
-import { getPage, extractFrontmatter, getRelativePath, getOriginalPath } from '@/lib/source';
+import { getPage, getPageNav, extractFrontmatter, getRelativePath, getOriginalPath } from '@/lib/source';
 
 export default defineHandler(async event => {
   const slugParam = event.url.searchParams.get('slug') ?? '';
@@ -10,9 +10,13 @@ export default defineHandler(async event => {
     throw new HTTPError({ status: 404, message: 'Page not found' });
   }
 
+  const nav = await getPageNav(slug);
+
   return {
     frontmatter: extractFrontmatter(page, slug[slug.length - 1]),
     relativePath: getRelativePath(page),
     originalPath: getOriginalPath(page),
+    prev: nav.prev,
+    next: nav.next,
   };
 });

packages/chronicle/src/server/entry-client.tsx

@@ -5,7 +5,7 @@ import { BrowserRouter } from 'react-router';
 import { ReactRouterProvider } from 'fumadocs-core/framework/react-router';
 import { mdxComponents } from '@/components/mdx';
 import { PageProvider } from '@/lib/page-context';
-import type { ChronicleConfig, Frontmatter, Root, TableOfContents } from '@/types';
+import type { ChronicleConfig, Frontmatter, PageNavLink, Root, TableOfContents } from '@/types';
 import type { ApiSpec } from '@/lib/openapi';
 import type { ReactNode } from 'react';
 import { App } from './App';
@@ -17,6 +17,8 @@ interface EmbeddedData {
   frontmatter: Frontmatter;
   relativePath: string;
   originalPath?: string;
+  prev: PageNavLink | null;
+  next: PageNavLink | null;
 }
 
 const contentModules = import.meta.glob<{ default?: React.ComponentType<any>; toc?: TableOfContents }>(
@@ -60,6 +62,8 @@ async function hydrate() {
       ? {
           slug: embedded!.slug,
           frontmatter: embedded!.frontmatter,
+          prev: embedded!.prev,
+          next: embedded!.next,
           ...(await loadMdxModule(mdxPath)),
         }
       : null;

packages/chronicle/src/server/entry-server.tsx

@@ -8,7 +8,7 @@ import { mdxComponents } from '@/components/mdx';
 import { loadConfig } from '@/lib/config';
 import { loadApiSpecs } from '@/lib/openapi';
 import { PageProvider } from '@/lib/page-context';
-import { getPageTree, getPage, loadPageModule, extractFrontmatter, getRelativePath, getOriginalPath } from '@/lib/source';
+import { getPageTree, getPage, getPageNav, loadPageModule, extractFrontmatter, getRelativePath, getOriginalPath } from '@/lib/source';
 import { useNitroApp } from 'nitro/app';
 import { App } from './App';
 
@@ -26,9 +26,10 @@ export default {
       ? await loadApiSpecs(config.api).catch(() => [])
       : [];
 
-    const [tree, page] = await Promise.all([
+    const [tree, page, nav] = await Promise.all([
       getPageTree(),
       getPage(slug),
+      getPageNav(slug),
     ]);
 
     const relativePath = page ? getRelativePath(page) : null;
@@ -43,6 +44,8 @@ export default {
             ? React.createElement(mdxModule.default, { components: mdxComponents })
             : null,
           toc: mdxModule?.toc ?? [],
+          prev: nav.prev,
+          next: nav.next,
         }
       : null;
 
@@ -53,6 +56,8 @@ export default {
       frontmatter: pageData?.frontmatter ?? null,
       relativePath,
       originalPath,
+      prev: pageData?.prev ?? null,
+      next: pageData?.next ?? null,
     };
     const safeJson = JSON.stringify(embeddedData).replace(/</g, '\\u003c');