@raystack/chronicle 0.5.4 → 0.6.1

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

@@ -26,6 +26,36 @@
   line-height: 1.4;
 }
 
+.content > :is(h1, h2, h3, h4, h5, h6):first-child {
+  margin-top: 0;
+}
+
+.content h1 {
+  margin-top: 0;
+  margin-bottom: var(--rs-space-10);
+}
+
+.content p {
+  color: var(--rs-color-foreground-base-primary);
+  font-family: var(--rs-font-body);
+  font-size: var(--rs-font-size-regular);
+  font-style: normal;
+  font-weight: var(--rs-font-weight-regular);
+  line-height: 171.429%;
+}
+
+.content h2 {
+  margin-top: var(--rs-space-8);
+  margin-bottom: var(--rs-space-8);
+  color: var(--rs-color-foreground-base-primary);
+  font-family: var(--rs-font-title);
+  font-size: var(--rs-font-size-t3);
+  font-style: normal;
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-t3);
+  letter-spacing: var(--rs-letter-spacing-t3);
+}
+
 .content ul,
 .content ol {
   padding-left: var(--rs-space-5);

package/src/themes/default/Page.tsx

@@ -1,16 +1,14 @@
 'use client';
 
 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) {
+export function Page({ page }: ThemePageProps) {
   return (
     <Flex className={styles.page}>
       <article className={styles.article} data-article-content>
-        <Breadcrumbs slug={page.slug} tree={tree} />
         <div className={styles.content}>{page.content}</div>
       </article>
       <Toc items={page.toc} />

package/src/themes/default/SidebarLogo.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { BookOpenIcon } from '@heroicons/react/24/outline';
+import { useTheme } from '@raystack/apsara';
+import type { ChronicleConfig } from '@/types';
+import styles from './Layout.module.css';
+
+interface SidebarLogoProps {
+  config: ChronicleConfig;
+}
+
+export function SidebarLogo({ config }: SidebarLogoProps) {
+  const { resolvedTheme } = useTheme();
+  const logo = config.logo;
+
+  if (logo) {
+    const src = resolvedTheme === 'dark'
+      ? logo.dark ?? logo.light
+      : logo.light ?? logo.dark;
+    if (src) {
+      return <img src={src} alt={config.site.title} className={styles.sidebarLogo} />;
+    }
+  }
+
+  return <BookOpenIcon width={28} height={28} />;
+}

package/src/themes/default/Toc.module.css

@@ -1,48 +1,125 @@
 .toc {
-  width: 200px;
-  flex-shrink: 0;
-  position: sticky;
-  top: var(--rs-space-9);
-  max-height: calc(100vh - var(--rs-space-17));
-  overflow-y: auto;
+  position: fixed;
+  right: var(--rs-space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
 }
 
-.title {
+.markers {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--rs-space-4);
+  opacity: 1;
+  transition: opacity 150ms ease;
+}
+
+.toc:hover .markers,
+.toc:focus-within .markers {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.marker {
   display: block;
+  height: 2px;
+  background: var(--rs-color-border-base-secondary);
+  border-radius: 1px;
+  transition:
+    width 0.15s ease,
+    background 0.15s ease;
+}
+
+.marker:hover {
+  background: var(--rs-color-foreground-base-secondary);
+}
+
+.markerActive {
+  background: var(--rs-color-border-base-emphasis);
+}
+
+
+.panel {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%) translateX(8px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rs-space-2);
+  min-width: 200px;
+  padding: var(--rs-space-3) 0;
+  background: var(--rs-color-background-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
+  border-radius: var(--rs-radius-4);
+  box-shadow: var(--rs-shadow-soft);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+.toc:hover .panel,
+.toc:focus-within .panel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(-50%) translateX(0);
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-3);
+  padding: var(--rs-space-3);
   color: var(--rs-color-foreground-base-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: var(--rs-space-3);
-  font-size: var(--rs-font-size-mini);
+  font-family: var(--rs-font-body);
+  font-size: var(--rs-font-size-small);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
 }
 
-.nav {
+.panelHeaderLabel {
+  flex: 1;
+}
+
+.panelList {
   display: flex;
   flex-direction: column;
-  gap: 0;
-  border-left: 1px solid var(--rs-color-border-base-primary);
-  padding-left: var(--rs-space-3);
-  margin-bottom: var(--rs-space-6);
+  gap: var(--rs-space-1);
+  padding-left: var(--rs-space-8);
 }
 
-.link {
+.panelItem {
+  display: block;
+  padding: var(--rs-space-3);
+  border-radius: var(--rs-radius-2);
   color: var(--rs-color-foreground-base-tertiary);
-  text-decoration: none;
+  font-family: var(--rs-font-body);
   font-size: var(--rs-font-size-small);
-  line-height: 1.4;
-  padding: var(--rs-space-1) 0;
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
+  text-decoration: none;
   transition: color 0.15s ease;
 }
 
-.link:hover {
+.panelItem:hover {
   color: var(--rs-color-foreground-base-primary);
 }
 
-.active {
+.panelItemNested {
+  padding-left: var(--rs-space-5);
+}
+
+.panelItemActive {
   color: var(--rs-color-foreground-base-primary);
-  font-weight: 500;
 }
 
-.nested {
-  padding-left: var(--rs-space-3);
+@media (max-width: 900px) {
+  .toc {
+    display: none;
+  }
 }

package/src/themes/default/Toc.tsx

@@ -1,10 +1,23 @@
 'use client';
 
-import { Text } from '@raystack/apsara';
+import { Bars3BottomLeftIcon } from '@heroicons/react/24/outline';
 import { AnchorProvider, useActiveAnchor } from 'fumadocs-core/toc';
 import type { TableOfContents, TOCItemType } from 'fumadocs-core/toc';
+import { cx } from 'class-variance-authority';
+import { isValidElement, type ReactNode } from 'react';
 import styles from './Toc.module.css';
 
+function nodeToText(node: ReactNode): string {
+  if (node == null || typeof node === 'boolean') return '';
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(nodeToText).join('');
+  if (isValidElement(node)) {
+    const children = (node.props as { children?: ReactNode }).children;
+    return nodeToText(children);
+  }
+  return '';
+}
+
 interface TocProps {
   items: TableOfContents;
 }
@@ -23,30 +36,63 @@ export function Toc({ items }: TocProps) {
   );
 }
 
+const MARKER_BASE = 8;
+const MARKER_PER_CHAR = 1;
+const MARKER_MAX = 40;
+
+function markerWidth(title: ReactNode): number {
+  const len = nodeToText(title).length;
+  return Math.min(MARKER_MAX, MARKER_BASE + len * MARKER_PER_CHAR);
+}
+
 function TocContent({ items }: { items: TOCItemType[] }) {
   const activeAnchor = useActiveAnchor();
 
   return (
-    <aside className={styles.toc}>
-      <Text size={1} weight='medium' className={styles.title}>
-        On this page
-      </Text>
-      <nav className={styles.nav}>
+    <aside className={styles.toc} aria-label='Table of contents'>
+      <div className={styles.markers} aria-hidden='true'>
         {items.map(item => {
           const id = item.url.replace('#', '');
           const isActive = activeAnchor === id;
-          const isNested = item.depth > 2;
           return (
             <a
               key={item.url}
               href={item.url}
-              className={`${styles.link} ${isActive ? styles.active : ''} ${isNested ? styles.nested : ''}`}
+              tabIndex={-1}
+              className={cx(styles.marker, isActive && styles.markerActive)}
+              style={{ width: `${markerWidth(item.title)}px` }}
             >
-              {item.title}
+              <span />
             </a>
           );
         })}
-      </nav>
+      </div>
+      <div className={styles.panel} role='presentation'>
+        <div className={styles.panelHeader}>
+          <Bars3BottomLeftIcon width={16} height={16} />
+          <span className={styles.panelHeaderLabel}>On this page</span>
+        </div>
+        <nav className={styles.panelList}>
+          {items.map(item => {
+            const id = item.url.replace('#', '');
+            const isActive = activeAnchor === id;
+            const isNested = item.depth > 2;
+            return (
+              <a
+                key={item.url}
+                href={item.url}
+                className={cx(
+                  styles.panelItem,
+                  isNested && styles.panelItemNested,
+                  isActive && styles.panelItemActive
+                )}
+              >
+                {nodeToText(item.title)}
+              </a>
+            );
+          })}
+        </nav>
+      </div>
     </aside>
   );
 }

package/src/themes/default/VersionSwitcher.tsx

@@ -0,0 +1,59 @@
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { Badge, Button, Menu, Flex } from '@raystack/apsara';
+import { useNavigate } from 'react-router';
+import { getAllVersions } from '@/lib/config';
+import { getVersionHomeHref } from '@/lib/navigation';
+import { usePageContext } from '@/lib/page-context';
+
+export function VersionSwitcher() {
+  const { config, version } = usePageContext();
+  const navigate = useNavigate();
+
+  if (!config.versions?.length) return null;
+
+  const versions = getAllVersions(config);
+  const active = versions.find(v =>
+    v.isLatest ? version.dir === null : v.dir === version.dir,
+  );
+
+  return (
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Button
+            size='small'
+            variant='outline'
+            color='neutral'
+            trailingIcon={<ChevronDownIcon width={14} height={14} />}
+          />
+        }
+      >
+        <Flex gap='small' align='center'>
+          {active?.label ?? 'Version'}
+          {active?.badge ? (
+            <Badge variant={active.badge.variant} size='micro'>
+              {active.badge.label}
+            </Badge>
+          ) : null}
+        </Flex>
+      </Menu.Trigger>
+      <Menu.Content>
+        {versions.map(v => (
+          <Menu.Item
+            key={v.dir ?? '_latest'}
+            onClick={() => navigate(getVersionHomeHref(config, v.dir))}
+          >
+            <Flex gap='small' align='center'>
+              {v.label}
+              {v.badge ? (
+                <Badge variant={v.badge.variant} size='micro'>
+                  {v.badge.label}
+                </Badge>
+              ) : null}
+            </Flex>
+          </Menu.Item>
+        ))}
+      </Menu.Content>
+    </Menu>
+  );
+}

package/src/themes/paper/ContentDirDropdown.tsx

@@ -0,0 +1,47 @@
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { Button, Menu } from '@raystack/apsara';
+import { useLocation, useNavigate } from 'react-router';
+import { getLandingEntries } from '@/lib/config';
+import { getActiveContentDir } from '@/lib/navigation';
+import { usePageContext } from '@/lib/page-context';
+
+export function ContentDirDropdown() {
+  const { config, version } = usePageContext();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
+  const entries = getLandingEntries(config, version.dir);
+  if (entries.length <= 1) return null;
+
+  const activeDir = getActiveContentDir(pathname, config);
+  const activeEntry =
+    entries.find(e => e.contentDir === activeDir) ?? entries[0];
+
+  return (
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Button
+            size='small'
+            variant='outline'
+            color='neutral'
+            width='100%'
+            trailingIcon={<ChevronDownIcon width={14} height={14} />}
+          />
+        }
+      >
+        {activeEntry.label}
+      </Menu.Trigger>
+      <Menu.Content>
+        {entries.map(entry => (
+          <Menu.Item
+            key={entry.href}
+            onClick={() => navigate(entry.href)}
+          >
+            {entry.label}
+          </Menu.Item>
+        ))}
+      </Menu.Content>
+    </Menu>
+  );
+}

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

@@ -25,6 +25,13 @@
   margin-bottom: var(--rs-space-7);
 }
 
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rs-space-3);
+  margin-bottom: var(--rs-space-7);
+}
+
 .content {
   flex: 1;
   overflow-y: auto;

package/src/themes/paper/Layout.tsx

@@ -2,36 +2,43 @@
 
 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 { ContentDirDropdown } from './ContentDirDropdown';
 import styles from './Layout.module.css';
+import { VersionSwitcher } from './VersionSwitcher';
 
 export function Layout({
   children,
   config,
   tree,
+  hideSidebar,
   classNames
 }: ThemeLayoutProps) {
   return (
     <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}
-          >
-            {config.title}
-          </Headline>
-          <ChapterNav tree={tree} />
-        </aside>
+        {hideSidebar ? null : (
+          <aside className={cx(styles.sidebar, classNames?.sidebar)}>
+            <Headline
+              size='small'
+              weight='medium'
+              as='h1'
+              className={styles.title}
+            >
+              {config.site.title}
+            </Headline>
+            <div className={styles.nav}>
+              <VersionSwitcher />
+              <ContentDirDropdown />
+            </div>
+            <ChapterNav tree={tree} />
+          </aside>
+        )}
         <div className={cx(styles.content, classNames?.content)}>
           {children}
         </div>
       </Flex>
-      <Footer config={config.footer} />
     </Flex>
   );
 }

package/src/themes/paper/VersionSwitcher.tsx

@@ -0,0 +1,60 @@
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { Badge, Button, Menu, Flex } from '@raystack/apsara';
+import { useNavigate } from 'react-router';
+import { getAllVersions } from '@/lib/config';
+import { getVersionHomeHref } from '@/lib/navigation';
+import { usePageContext } from '@/lib/page-context';
+
+export function VersionSwitcher() {
+  const { config, version } = usePageContext();
+  const navigate = useNavigate();
+
+  if (!config.versions?.length) return null;
+
+  const versions = getAllVersions(config);
+  const active = versions.find(v =>
+    v.isLatest ? version.dir === null : v.dir === version.dir,
+  );
+
+  return (
+    <Menu>
+      <Menu.Trigger
+        render={
+          <Button
+            size='small'
+            variant='outline'
+            color='neutral'
+            width='100%'
+            trailingIcon={<ChevronDownIcon width={14} height={14} />}
+          />
+        }
+      >
+        <Flex gap='small' align='center' justify='start'>
+          {active?.label ?? 'Version'}
+          {active?.badge ? (
+            <Badge variant={active.badge.variant} size='micro'>
+              {active.badge.label}
+            </Badge>
+          ) : null}
+        </Flex>
+      </Menu.Trigger>
+      <Menu.Content>
+        {versions.map(v => (
+          <Menu.Item
+            key={v.dir ?? '_latest'}
+            onClick={() => navigate(getVersionHomeHref(config, v.dir))}
+          >
+            <Flex gap='small' align='center'>
+              {v.label}
+              {v.badge ? (
+                <Badge variant={v.badge.variant} size='micro'>
+                  {v.badge.label}
+                </Badge>
+              ) : null}
+            </Flex>
+          </Menu.Item>
+        ))}
+      </Menu.Content>
+    </Menu>
+  );
+}