From 843ce77bce7908aaa6081c2a3d9ec46d9406ff5e Mon Sep 17 00:00:00 2001 From: Rishabh Date: Thu, 7 May 2026 11:04:29 +0530 Subject: [PATCH 1/2] fix: paper theme breadcrumbs and sidebar nested folder spacing Replace custom breadcrumb HTML with Apsara Breadcrumb component to fix duplicate key bug causing breadcrumbs to append instead of replacing on navigation. Add className prop to shared Breadcrumbs component for theme customization. Add top margin to nested sidebar folders for visual separation. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/components/ui/breadcrumbs.tsx | 5 +-- .../src/themes/paper/ChapterNav.module.css | 4 +++ .../chronicle/src/themes/paper/ChapterNav.tsx | 2 +- .../src/themes/paper/Page.module.css | 22 ------------- packages/chronicle/src/themes/paper/Page.tsx | 31 +++---------------- 5 files changed, 13 insertions(+), 51 deletions(-) diff --git a/packages/chronicle/src/components/ui/breadcrumbs.tsx b/packages/chronicle/src/components/ui/breadcrumbs.tsx index c7724e1a..7f9c2afc 100644 --- a/packages/chronicle/src/components/ui/breadcrumbs.tsx +++ b/packages/chronicle/src/components/ui/breadcrumbs.tsx @@ -8,16 +8,17 @@ import { Link as RouterLink } from 'react-router' interface BreadcrumbsProps { slug: string[] tree: Root + className?: string } -export function Breadcrumbs({ slug, tree }: BreadcrumbsProps) { +export function Breadcrumbs({ slug, tree, className }: BreadcrumbsProps) { const url = slug.length === 0 ? '/' : `/${slug.join('/')}` const items = getBreadcrumbItems(url, tree, { includePage: true }) if (items.length === 0) return null return ( - + {items.flatMap((item, index) => { const isCurrent = index === items.length - 1 const breadcrumbItem = ( diff --git a/packages/chronicle/src/themes/paper/ChapterNav.module.css b/packages/chronicle/src/themes/paper/ChapterNav.module.css index bbf525c4..2205aac6 100644 --- a/packages/chronicle/src/themes/paper/ChapterNav.module.css +++ b/packages/chronicle/src/themes/paper/ChapterNav.module.css @@ -65,6 +65,10 @@ flex-shrink: 0; } +.subFolder { + margin-top: var(--rs-space-5); +} + .subLabel { font-family: var(--paper-font-mono); font-size: var(--rs-font-size-small); diff --git a/packages/chronicle/src/themes/paper/ChapterNav.tsx b/packages/chronicle/src/themes/paper/ChapterNav.tsx index d0923448..11a36b65 100644 --- a/packages/chronicle/src/themes/paper/ChapterNav.tsx +++ b/packages/chronicle/src/themes/paper/ChapterNav.tsx @@ -67,7 +67,7 @@ function ChapterItem({ if (item.type === 'folder') { return ( -
  • +
  • {item.name}
      {item.children.map(child => ( diff --git a/packages/chronicle/src/themes/paper/Page.module.css b/packages/chronicle/src/themes/paper/Page.module.css index 92bcad75..fa827c01 100644 --- a/packages/chronicle/src/themes/paper/Page.module.css +++ b/packages/chronicle/src/themes/paper/Page.module.css @@ -68,34 +68,12 @@ } .breadcrumb { - display: flex; - align-items: center; font-family: var(--paper-font-mono); font-size: var(--rs-font-size-small); line-height: var(--rs-line-height-small); letter-spacing: var(--rs-letter-spacing-small); } -.separator { - margin: 0 var(--rs-space-1); - color: var(--rs-color-foreground-base-tertiary); -} - -.crumbLink { - color: var(--rs-color-foreground-base-tertiary); - font-weight: var(--rs-font-weight-medium); - text-decoration: none; -} - -.crumbLink:hover { - color: var(--rs-color-foreground-base-primary); -} - -.crumbActive { - color: var(--rs-color-foreground-base-primary); - font-weight: var(--rs-font-weight-medium); -} - .article { flex: 1; min-width: 0; diff --git a/packages/chronicle/src/themes/paper/Page.tsx b/packages/chronicle/src/themes/paper/Page.tsx index 7792c7b1..447c754f 100644 --- a/packages/chronicle/src/themes/paper/Page.tsx +++ b/packages/chronicle/src/themes/paper/Page.tsx @@ -1,7 +1,6 @@ import { ArrowLeftIcon, ArrowRightIcon, - ChevronRightIcon, AdjustmentsHorizontalIcon, EyeIcon, SunIcon, @@ -11,8 +10,8 @@ import { import { IconButton, useTheme } from '@raystack/apsara'; import { useEffect, useMemo, useState } from 'react'; import { Link as RouterLink, useLocation } from 'react-router'; -import { getBreadcrumbItems } from 'fumadocs-core/breadcrumb'; import { flattenTree } from 'fumadocs-core/page-tree'; +import { Breadcrumbs } from '@/components/ui/breadcrumbs'; import type { ThemePageProps } from '@/types'; import styles from './Page.module.css'; import { useReaderMode } from './ReaderModeContext'; @@ -27,21 +26,14 @@ export function Page({ page, tree }: ThemePageProps) { useEffect(() => { setIsClient(true); }, []); - const { prev, next, crumbs } = useMemo(() => { + const slug = pathname === '/' ? [] : pathname.replace(/^\//, '').split('/'); + + const { prev, next } = 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: breadcrumbItems.map(item => ({ - label: item.name, - href: item.url ?? pathname, - })), }; }, [tree, pathname]); @@ -70,20 +62,7 @@ export function Page({ page, tree }: ThemePageProps) { )} - +
      {settingsOpen ? ( From 8384e150accb7dac43495df928e9dfb8b2e05545 Mon Sep 17 00:00:00 2001 From: Rishabh Date: Thu, 7 May 2026 11:07:35 +0530 Subject: [PATCH 2/2] fix: paper theme table horizontal scroll on overflow Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/chronicle/src/themes/paper/Page.module.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/chronicle/src/themes/paper/Page.module.css b/packages/chronicle/src/themes/paper/Page.module.css index fa827c01..0ee712e0 100644 --- a/packages/chronicle/src/themes/paper/Page.module.css +++ b/packages/chronicle/src/themes/paper/Page.module.css @@ -197,6 +197,9 @@ } .content table { + display: block; + width: 100%; + overflow-x: auto; margin-bottom: var(--rs-space-5); }