@raystack/chronicle 0.1.0-canary.323385a → 0.1.0-canary.4a4a3f8

package/src/themes/default/Page.tsx

@@ -1,21 +1,19 @@
-'use client'
+'use client';
 
-import { Flex } from '@raystack/apsara'
-import type { ThemePageProps } from '@/types'
-import { Breadcrumbs } from '@/components/ui/breadcrumbs'
-import { Toc } from './Toc'
-import styles from './Page.module.css'
+import { Flex } from '@raystack/apsara';
+import { Breadcrumbs } from '@/components/ui/breadcrumbs';
+import type { ThemePageProps } from '@/types';
+import styles from './Page.module.css';
+import { Toc } from './Toc';
 
 export function Page({ page, tree }: ThemePageProps) {
   return (
     <Flex className={styles.page}>
-      <article className={styles.article}>
+      <article className={styles.article} data-article-content>
         <Breadcrumbs slug={page.slug} tree={tree} />
-        <div className={styles.content}>
-          {page.content}
-        </div>
+        <div className={styles.content}>{page.content}</div>
       </article>
       <Toc items={page.toc} />
     </Flex>
-  )
+  );
 }

package/src/themes/default/Toc.tsx

@@ -1,55 +1,41 @@
-'use client'
+'use client';
 
-import { useEffect, useState } from 'react'
-import { Text } from '@raystack/apsara'
-import type { TocItem } from '@/types'
-import styles from './Toc.module.css'
+import { Text } from '@raystack/apsara';
+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>('')
+  const filteredItems = items.filter(
+    item => item.depth >= 2 && item.depth <= 3
+  );
 
-  // Filter to only show h2 and h3 headings
-  const filteredItems = items.filter((item) => item.depth >= 2 && item.depth <= 3)
+  if (filteredItems.length === 0) return null;
 
-  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)
-    })
-
-    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}>
-      <Text size={1} weight="medium" className={styles.title}>
+      <Text size={1} weight='medium' className={styles.title}>
         On this page
       </Text>
       <nav className={styles.nav}>
-        {filteredItems.map((item) => {
-          const id = item.url.replace('#', '')
-          const isActive = activeId === id
-          const isNested = item.depth > 2
+        {items.map(item => {
+          const id = item.url.replace('#', '');
+          const isActive = activeAnchor === id;
+          const isNested = item.depth > 2;
           return (
             <a
               key={item.url}
@@ -58,9 +44,9 @@ export function Toc({ items }: TocProps) {
             >
               {item.title}
             </a>
-          )
+          );
         })}
       </nav>
     </aside>
-  )
+  );
 }

package/src/themes/default/index.ts

@@ -1,13 +1,11 @@
-import { Layout } from './Layout'
-import { Page } from './Page'
-import { Toc } from './Toc'
-import { inter } from './font'
-import type { Theme } from '@/types'
+import type { Theme } from '@/types';
+import { Layout } from './Layout';
+import { Page } from './Page';
+import { Toc } from './Toc';
 
 export const defaultTheme: Theme = {
   Layout,
-  Page,
-  className: inter.className,
-}
+  Page
+};
 
-export { Layout, Page, Toc }
+export { Layout, Page, Toc };

package/src/themes/paper/ChapterNav.tsx

@@ -1,96 +1,115 @@
-'use client'
-
-import { usePathname } from 'next/navigation'
-import NextLink from 'next/link'
-import { MethodBadge } from '@/components/api/method-badge'
-import type { PageTree, PageTreeItem } from '@/types'
-import styles from './ChapterNav.module.css'
+import { Link as RouterLink, useLocation } from 'react-router';
+import { MethodBadge } from '@/components/api/method-badge';
+import type { Root, Node } from 'fumadocs-core/page-tree';
+import styles from './ChapterNav.module.css';
 
 const iconMap: Record<string, React.ReactNode> = {
-  'method-get': <MethodBadge method="GET" size="micro" />,
-  'method-post': <MethodBadge method="POST" size="micro" />,
-  'method-put': <MethodBadge method="PUT" size="micro" />,
-  'method-delete': <MethodBadge method="DELETE" size="micro" />,
-  'method-patch': <MethodBadge method="PATCH" size="micro" />,
-}
+  'method-get': <MethodBadge method='GET' size='micro' />,
+  'method-post': <MethodBadge method='POST' size='micro' />,
+  'method-put': <MethodBadge method='PUT' size='micro' />,
+  'method-delete': <MethodBadge method='DELETE' size='micro' />,
+  'method-patch': <MethodBadge method='PATCH' size='micro' />
+};
 
 interface ChapterNavProps {
-  tree: PageTree
+  tree: Root;
 }
 
-function buildChapterIndices(children: PageTreeItem[]): Map<PageTreeItem, number> {
-  const indices = new Map<PageTreeItem, number>()
-  let index = 0
+function buildChapterIndices(
+  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) {
-      index++
-      indices.set(item, index)
+    if (item.type === 'folder') {
+      index++;
+      indices.set(item, index);
     }
   }
-  return indices
+  return indices;
 }
 
 export function ChapterNav({ tree }: ChapterNavProps) {
-  const pathname = usePathname()
-  const chapterIndices = buildChapterIndices(tree.children)
+  const { pathname } = useLocation();
+  const chapterIndices = buildChapterIndices(tree.children);
 
   return (
     <nav className={styles.nav}>
       <ul className={styles.chapterItems}>
-        {tree.children.map((item) => {
-          if (item.type === 'separator') return null
+        {tree.children.map(item => {
+          if (item.type === 'separator') return null;
 
-          if (item.type === 'folder' && item.children) {
-            const chapterIndex = chapterIndices.get(item) ?? 0
+          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} item={child} pathname={pathname} />
+                  {item.children.map(child => (
+                    <ChapterItem
+                      key={child.type === 'page' ? child.url : (child.name?.toString() ?? '')}
+                      item={child}
+                      pathname={pathname}
+                    />
                   ))}
                 </ul>
               </li>
-            )
+            );
           }
 
-          return <ChapterItem key={item.url ?? item.name} item={item} pathname={pathname} />
+          return (
+            <ChapterItem
+              key={item.url ?? item.name?.toString() ?? ''}
+              item={item}
+              pathname={pathname}
+            />
+          );
         })}
       </ul>
     </nav>
-  )
+  );
 }
 
-function ChapterItem({ item, pathname }: { item: PageTreeItem; pathname: string }) {
-  if (item.type === 'separator') return null
+function ChapterItem({
+  item,
+  pathname
+}: {
+  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} item={child} pathname={pathname} />
+          {item.children.map(child => (
+            <ChapterItem
+              key={child.type === 'page' ? child.url : (child.name?.toString() ?? '')}
+              item={child}
+              pathname={pathname}
+            />
           ))}
         </ul>
       </li>
-    )
+    );
   }
 
-  const isActive = pathname === item.url
-  const icon = item.icon ? iconMap[item.icon] : null
+  const isActive = pathname === item.url;
+  const icon = typeof item.icon === 'string' ? iconMap[item.icon] : item.icon;
 
   return (
     <li>
-      <NextLink
-        href={item.url ?? '#'}
+      <RouterLink
+        to={item.url ?? '#'}
         className={`${styles.link} ${isActive ? styles.active : ''}`}
       >
         {icon && <span className={styles.icon}>{icon}</span>}
         <span>{item.name}</span>
-      </NextLink>
+      </RouterLink>
     </li>
-  )
+  );
 }

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

@@ -13,7 +13,7 @@
   padding: var(--rs-space-7) var(--rs-space-5);
   background: var(--rs-color-background-neutral-primary);
   overflow-y: auto;
-  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
+  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
 }
 
 .title {

package/src/themes/paper/Layout.tsx

@@ -1,25 +1,37 @@
-'use client'
+'use client';
 
-import { Flex, Headline } from '@raystack/apsara'
-import { cx } from 'class-variance-authority'
-import { Footer } from '@/components/ui/footer'
-import { ChapterNav } from './ChapterNav'
-import type { ThemeLayoutProps } from '@/types'
-import styles from './Layout.module.css'
+import { Flex, Headline } from '@raystack/apsara';
+import { cx } from 'class-variance-authority';
+import { Footer } from '@/components/ui/footer';
+import type { ThemeLayoutProps } from '@/types';
+import { ChapterNav } from './ChapterNav';
+import styles from './Layout.module.css';
 
-export function Layout({ children, config, tree, classNames }: ThemeLayoutProps) {
+export function Layout({
+  children,
+  config,
+  tree,
+  classNames
+}: ThemeLayoutProps) {
   return (
-    <Flex direction="column" className={cx(styles.layout, classNames?.layout)}>
+    <Flex direction='column' className={cx(styles.layout, classNames?.layout)}>
       <Flex className={cx(styles.body, classNames?.body)}>
         <aside className={cx(styles.sidebar, classNames?.sidebar)}>
-          <Headline size="small" weight="medium" as="h1" className={styles.title}>
+          <Headline
+            size='small'
+            weight='medium'
+            as='h1'
+            className={styles.title}
+          >
             {config.title}
           </Headline>
           <ChapterNav tree={tree} />
         </aside>
-        <div className={cx(styles.content, classNames?.content)}>{children}</div>
+        <div className={cx(styles.content, classNames?.content)}>
+          {children}
+        </div>
       </Flex>
       <Footer config={config.footer} />
     </Flex>
-  )
+  );
 }

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

@@ -1,7 +1,12 @@
 .main {
   --paper-navbar-height: 40px;
   --paper-navbar-padding: var(--rs-space-3);
-  --paper-navbar-total: calc(var(--paper-navbar-height) + var(--paper-navbar-padding) * 2 + 1px);
+  --paper-navbar-total: calc(
+    var(--paper-navbar-height) +
+    var(--paper-navbar-padding) *
+    2 +
+    1px
+  );
 
   flex: 1;
   max-width: 1024px;
@@ -52,7 +57,7 @@
 }
 
 .breadcrumb {
-  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-family: "SF Mono", "Fira Code", monospace;
   font-size: var(--rs-font-size-small);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -94,13 +99,15 @@
 }
 
 .content {
-  font-family: Georgia, 'Times New Roman', serif;
+  font-family: Georgia, "Times New Roman", serif;
   line-height: 1.8;
   background: var(--rs-color-background-base-primary);
   padding: var(--rs-space-9);
   border-left: 1px solid var(--rs-color-border-base-primary);
   border-right: 1px solid var(--rs-color-border-base-primary);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.08),
+    0 4px 12px rgba(0, 0, 0, 0.04);
   margin-bottom: var(--rs-space-9);
 }
 
@@ -167,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

@@ -1,78 +1,71 @@
-'use client'
-
-import { useMemo } from 'react'
-import { usePathname } from 'next/navigation'
-import NextLink from 'next/link'
-import { Flex } from '@raystack/apsara'
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
-import type { ThemePageProps, PageTreeItem } from '@/types'
-import { Search } from '@/components/ui/search'
-import { ReadingProgress } from './ReadingProgress'
-import styles from './Page.module.css'
-
-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
-}
+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 { ThemePageProps } from '@/types';
+import styles from './Page.module.css';
+import { ReadingProgress } from './ReadingProgress';
 
 export function Page({ page, config, tree }: ThemePageProps) {
-  const pathname = usePathname()
+  const { pathname } = useLocation();
 
   const { prev, next, crumbs } = useMemo(() => {
-    const pages = flattenTree(tree.children)
-    const currentIndex = pages.findIndex((p) => p.url === pathname)
+    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),
-    }
-  }, [tree, pathname, page.slug])
+      crumbs: breadcrumbItems.map(item => ({
+        label: item.name,
+        href: item.url ?? pathname,
+      })),
+    };
+  }, [tree, pathname]);
 
   return (
     <>
       <main className={styles.main}>
-        <Flex align="center" className={styles.navbar}>
-          <Flex align="center" gap="small" className={styles.navLeft}>
+        <Flex align='center' className={styles.navbar}>
+          <Flex align='center' gap='small' className={styles.navLeft}>
             {prev ? (
-              <NextLink href={prev.url!} className={styles.arrow} aria-label="Previous page">
+              <RouterLink
+                to={prev.url}
+                className={styles.arrow}
+                aria-label='Previous page'
+              >
                 <ChevronLeftIcon width={14} height={14} />
-              </NextLink>
+              </RouterLink>
             ) : (
-              <button disabled className={styles.arrowDisabled} aria-label="Previous page">
+              <button
+                disabled
+                className={styles.arrowDisabled}
+                aria-label='Previous page'
+              >
                 <ChevronLeftIcon width={14} height={14} />
               </button>
             )}
             {next ? (
-              <NextLink href={next.url!} className={styles.arrow} aria-label="Next page">
+              <RouterLink
+                to={next.url}
+                className={styles.arrow}
+                aria-label='Next page'
+              >
                 <ChevronRightIcon width={14} height={14} />
-              </NextLink>
+              </RouterLink>
             ) : (
-              <button disabled className={styles.arrowDisabled} aria-label="Next page">
+              <button
+                disabled
+                className={styles.arrowDisabled}
+                aria-label='Next page'
+              >
                 <ChevronRightIcon width={14} height={14} />
               </button>
             )}
@@ -83,25 +76,25 @@ export function Page({ page, config, tree }: ThemePageProps) {
                   {i === crumbs.length - 1 ? (
                     <span className={styles.crumbActive}>{crumb.label}</span>
                   ) : (
-                    <NextLink href={crumb.href} className={styles.crumbLink}>
+                    <RouterLink to={crumb.href} className={styles.crumbLink}>
                       {crumb.label}
-                    </NextLink>
+                    </RouterLink>
                   )}
                 </span>
               ))}
             </nav>
           </Flex>
-          <Flex align="center" className={styles.navRight}>
-            {config.search?.enabled && <Search className={styles.searchButton} />}
+          <Flex align='center' className={styles.navRight}>
+            {config.search?.enabled && (
+              <Search className={styles.searchButton} />
+            )}
           </Flex>
         </Flex>
         <article className={styles.article} data-article-content>
-          <div className={styles.content}>
-            {page.content}
-          </div>
+          <div className={styles.content}>{page.content}</div>
         </article>
       </main>
       <ReadingProgress items={page.toc} />
     </>
-  )
+  );
 }