@raystack/chronicle 0.1.0-canary.6511afe → 0.1.0-canary.67113f8

package/src/themes/default/Toc.tsx

@@ -1,46 +1,30 @@
 'use client';
 
 import { Text } from '@raystack/apsara';
-import { useEffect, useState } from 'react';
-import type { TocItem } from '@/types';
+import { AnchorProvider, useActiveAnchor } from 'fumadocs-core/toc';
+import type { TableOfContents, TOCItemType } from 'fumadocs-core/toc';
 import styles from './Toc.module.css';
 
 interface TocProps {
-  items: TocItem[];
+  items: TableOfContents;
 }
 
 export function Toc({ items }: TocProps) {
-  const [activeId, setActiveId] = useState<string>('');
-
-  // Filter to only show h2 and h3 headings
   const filteredItems = items.filter(
     item => item.depth >= 2 && item.depth <= 3
   );
 
-  useEffect(() => {
-    const headingIds = filteredItems.map(item => item.url.replace('#', ''));
-
-    const observer = new IntersectionObserver(
-      entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            setActiveId(entry.target.id);
-          }
-        });
-      },
-      // -80px top: offset for fixed header, -80% bottom: trigger when heading is in top 20% of viewport
-      { rootMargin: '-80px 0px -80% 0px' }
-    );
-
-    headingIds.forEach(id => {
-      const element = document.getElementById(id);
-      if (element) observer.observe(element);
-    });
+  if (filteredItems.length === 0) return null;
 
-    return () => observer.disconnect();
-  }, [filteredItems]);
+  return (
+    <AnchorProvider toc={filteredItems} single>
+      <TocContent items={filteredItems} />
+    </AnchorProvider>
+  );
+}
 
-  if (filteredItems.length === 0) return null;
+function TocContent({ items }: { items: TOCItemType[] }) {
+  const activeAnchor = useActiveAnchor();
 
   return (
     <aside className={styles.toc}>
@@ -48,9 +32,9 @@ export function Toc({ items }: TocProps) {
         On this page
       </Text>
       <nav className={styles.nav}>
-        {filteredItems.map(item => {
+        {items.map(item => {
           const id = item.url.replace('#', '');
-          const isActive = activeId === id;
+          const isActive = activeAnchor === id;
           const isNested = item.depth > 2;
           return (
             <a

package/src/themes/paper/ChapterNav.tsx

@@ -1,6 +1,6 @@
 import { Link as RouterLink, useLocation } from 'react-router';
 import { MethodBadge } from '@/components/api/method-badge';
-import type { PageTree, PageTreeItem } from '@/types';
+import type { Root, Node } from 'fumadocs-core/page-tree';
 import styles from './ChapterNav.module.css';
 
 const iconMap: Record<string, React.ReactNode> = {
@@ -12,16 +12,16 @@ const iconMap: Record<string, React.ReactNode> = {
 };
 
 interface ChapterNavProps {
-  tree: PageTree;
+  tree: Root;
 }
 
 function buildChapterIndices(
-  children: PageTreeItem[]
-): Map<PageTreeItem, number> {
-  const indices = new Map<PageTreeItem, number>();
+  children: Node[]
+): Map<Node, number> {
+  const indices = new Map<Node, number>();
   let index = 0;
   for (const item of children) {
-    if (item.type === 'folder' && item.children) {
+    if (item.type === 'folder') {
       index++;
       indices.set(item, index);
     }
@@ -39,17 +39,17 @@ export function ChapterNav({ tree }: ChapterNavProps) {
         {tree.children.map(item => {
           if (item.type === 'separator') return null;
 
-          if (item.type === 'folder' && item.children) {
+          if (item.type === 'folder') {
             const chapterIndex = chapterIndices.get(item) ?? 0;
             return (
-              <li key={item.name} className={styles.chapter}>
+              <li key={item.name?.toString()} className={styles.chapter}>
                 <span className={styles.chapterLabel}>
                   {String(chapterIndex).padStart(2, '0')}. {item.name}
                 </span>
                 <ul className={styles.chapterItems}>
                   {item.children.map(child => (
                     <ChapterItem
-                      key={child.url ?? child.name}
+                      key={child.type === 'page' ? child.url : (child.name?.toString() ?? '')}
                       item={child}
                       pathname={pathname}
                     />
@@ -61,7 +61,7 @@ export function ChapterNav({ tree }: ChapterNavProps) {
 
           return (
             <ChapterItem
-              key={item.url ?? item.name}
+              key={item.url ?? item.name?.toString() ?? ''}
               item={item}
               pathname={pathname}
             />
@@ -76,19 +76,19 @@ function ChapterItem({
   item,
   pathname
 }: {
-  item: PageTreeItem;
+  item: Node;
   pathname: string;
 }) {
   if (item.type === 'separator') return null;
 
-  if (item.type === 'folder' && item.children) {
+  if (item.type === 'folder') {
     return (
       <li>
         <span className={styles.subLabel}>{item.name}</span>
         <ul className={styles.chapterItems}>
           {item.children.map(child => (
             <ChapterItem
-              key={child.url ?? child.name}
+              key={child.type === 'page' ? child.url : (child.name?.toString() ?? '')}
               item={child}
               pathname={pathname}
             />
@@ -99,7 +99,7 @@ function ChapterItem({
   }
 
   const isActive = pathname === item.url;
-  const icon = item.icon ? iconMap[item.icon] : null;
+  const icon = typeof item.icon === 'string' ? iconMap[item.icon] : item.icon;
 
   return (
     <li>

package/src/themes/paper/Page.module.css

@@ -174,6 +174,11 @@
   margin-bottom: var(--rs-space-3);
 }
 
+.content img {
+  max-width: 100%;
+  height: auto;
+}
+
 .content blockquote {
   margin: 1rem 0;
   padding-left: 1rem;

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 {