@raystack/chronicle 0.1.0-canary.49fe67c → 0.1.0-canary.4a4a3f8

package/src/themes/paper/Page.tsx

@@ -2,59 +2,33 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { Flex } from '@raystack/apsara';
 import { useMemo } from 'react';
 import { Link as RouterLink, useLocation } from 'react-router';
+import { getBreadcrumbItems } from 'fumadocs-core/breadcrumb';
+import { flattenTree } from 'fumadocs-core/page-tree';
 import { Search } from '@/components/ui/search';
-import type { PageTreeItem, ThemePageProps } from '@/types';
+import type { ThemePageProps } from '@/types';
 import styles from './Page.module.css';
 import { ReadingProgress } from './ReadingProgress';
 
-function flattenTree(items: PageTreeItem[]): PageTreeItem[] {
-  const result: PageTreeItem[] = [];
-  for (const item of items) {
-    if (item.type === 'page' && item.url) result.push(item);
-    if (item.children) result.push(...flattenTree(item.children));
-  }
-  return result;
-}
-
-function findBreadcrumb(
-  items: PageTreeItem[],
-  slug: string[]
-): { label: string; href: string }[] {
-  const result: { label: string; href: string }[] = [];
-  for (let i = 0; i < slug.length; i++) {
-    const path = '/' + slug.slice(0, i + 1).join('/');
-    const found = findInTree(items, path);
-    result.push({ label: found?.name ?? slug[i], href: path });
-  }
-  return result;
-}
-
-function findInTree(
-  items: PageTreeItem[],
-  path: string
-): PageTreeItem | undefined {
-  for (const item of items) {
-    if (item.url === path) return item;
-    if (item.children) {
-      const found = findInTree(item.children, path);
-      if (found) return found;
-    }
-  }
-  return undefined;
-}
-
 export function Page({ page, config, tree }: ThemePageProps) {
   const { pathname } = useLocation();
 
   const { prev, next, crumbs } = useMemo(() => {
     const pages = flattenTree(tree.children);
     const currentIndex = pages.findIndex(p => p.url === pathname);
+    const breadcrumbItems = getBreadcrumbItems(
+      pathname,
+      tree,
+      { includePage: true }
+    );
     return {
       prev: currentIndex > 0 ? pages[currentIndex - 1] : null,
       next: currentIndex < pages.length - 1 ? pages[currentIndex + 1] : null,
-      crumbs: findBreadcrumb(tree.children, page.slug)
+      crumbs: breadcrumbItems.map(item => ({
+        label: item.name,
+        href: item.url ?? pathname,
+      })),
     };
-  }, [tree, pathname, page.slug]);
+  }, [tree, pathname]);
 
   return (
     <>
@@ -63,7 +37,7 @@ export function Page({ page, config, tree }: ThemePageProps) {
           <Flex align='center' gap='small' className={styles.navLeft}>
             {prev ? (
               <RouterLink
-                to={prev.url!}
+                to={prev.url}
                 className={styles.arrow}
                 aria-label='Previous page'
               >
@@ -80,7 +54,7 @@ export function Page({ page, config, tree }: ThemePageProps) {
             )}
             {next ? (
               <RouterLink
-                to={next.url!}
+                to={next.url}
                 className={styles.arrow}
                 aria-label='Next page'
               >

package/src/themes/paper/ReadingProgress.tsx

@@ -2,7 +2,7 @@
 
 import { cx } from 'class-variance-authority';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { TocItem } from '@/types';
+import type { TOCItemType } from 'fumadocs-core/toc';
 import styles from './ReadingProgress.module.css';
 
 interface Heading {
@@ -68,7 +68,7 @@ function resolveOverlaps(headings: Heading[], maxPosition: number): Heading[] {
 }
 
 interface ReadingProgressProps {
-  items: TocItem[];
+  items: TOCItemType[];
 }
 
 export function ReadingProgress({ items }: ReadingProgressProps) {

package/src/types/content.ts

@@ -1,4 +1,8 @@
 import type { ReactNode } from 'react'
+import type { TableOfContents } from 'fumadocs-core/toc'
+
+export type { Root, Node, Item, Folder, Separator } from 'fumadocs-core/page-tree'
+export type { TOCItemType, TableOfContents } from 'fumadocs-core/toc'
 
 export interface Frontmatter {
   title: string
@@ -12,25 +16,5 @@ export interface Page {
   slug: string[]
   frontmatter: Frontmatter
   content: ReactNode
-  toc: TocItem[]
-}
-
-export interface TocItem {
-  title: string
-  url: string
-  depth: number
-}
-
-export interface PageTreeItem {
-  type: 'page' | 'folder' | 'separator'
-  name: string
-  url?: string
-  order?: number
-  icon?: string
-  children?: PageTreeItem[]
-}
-
-export interface PageTree {
-  name: string
-  children: PageTreeItem[]
+  toc: TableOfContents
 }

package/src/types/globals.d.ts

@@ -1,4 +1,3 @@
 // Vite build-time constants (injected via define in vite-config.ts)
 declare const __CHRONICLE_CONTENT_DIR__: string
 declare const __CHRONICLE_PROJECT_ROOT__: string
-declare const __CHRONICLE_PACKAGE_ROOT__: string

package/src/types/theme.ts

@@ -1,18 +1,19 @@
 import type { ReactNode } from 'react'
+import type { Root } from 'fumadocs-core/page-tree'
 import type { ChronicleConfig } from './config'
-import type { Page, PageTree } from './content'
+import type { Page } from './content'
 
 export interface ThemeLayoutProps {
   children: ReactNode
   config: ChronicleConfig
-  tree: PageTree
+  tree: Root
   classNames?: { layout?: string; body?: string; sidebar?: string; content?: string }
 }
 
 export interface ThemePageProps {
   page: Page
   config: ChronicleConfig
-  tree: PageTree
+  tree: Root
 }
 
 export interface Theme {