@raystack/chronicle 0.1.0-canary.111b55a → 0.1.0-canary.1e5fdae

package/src/server/utils/safe-path.ts

@@ -0,0 +1,17 @@
+import path from 'node:path';
+
+/**
+ * Resolve a URL path within a base directory, preventing path traversal.
+ * Returns null if the resolved path escapes the base directory.
+ */
+export function safePath(baseDir: string, urlPath: string): string | null {
+  const decoded = decodeURIComponent(urlPath.split('?')[0]);
+  const resolved = path.resolve(baseDir, '.' + decoded);
+  if (
+    !resolved.startsWith(path.resolve(baseDir) + path.sep) &&
+    resolved !== path.resolve(baseDir)
+  ) {
+    return null;
+  }
+  return resolved;
+}

package/src/server/vite-config.ts

@@ -1,71 +1,111 @@
-import path from 'path'
-import { type InlineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import mdx from '@mdx-js/rollup'
-import remarkDirective from 'remark-directive'
-import remarkGfm from 'remark-gfm'
-import remarkFrontmatter from 'remark-frontmatter'
-import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
-import rehypeShiki from '@shikijs/rehype'
+import react from '@vitejs/plugin-react';
+import { remarkDirectiveAdmonition, remarkMdxMermaid } from 'fumadocs-core/mdx-plugins';
+import { defineConfig as defineFumadocsConfig } from 'fumadocs-mdx/config';
+import mdx from 'fumadocs-mdx/vite';
+import { nitro } from 'nitro/vite';
+import path from 'node:path';
+import remarkDirective from 'remark-directive';
+import { type InlineConfig } from 'vite';
+import remarkUnusedDirectives from '../lib/remark-unused-directives';
+
+function resolveOutputDir(projectRoot: string, preset?: string): string {
+  if (preset === 'vercel' || preset === 'vercel-static') return path.resolve(projectRoot, '.vercel/output');
+  return path.resolve(projectRoot, '.output');
+}
 
 export interface ViteConfigOptions {
-  root: string
-  contentDir: string
-  isDev?: boolean
+  packageRoot: string;
+  projectRoot: string;
+  contentDir: string;
+  preset?: string;
 }
 
-export async function createViteConfig(options: ViteConfigOptions): Promise<InlineConfig> {
-  const { root, contentDir, isDev = false } = options
+export async function createViteConfig(
+  options: ViteConfigOptions
+): Promise<InlineConfig> {
+  const { packageRoot, projectRoot, contentDir, preset } = options;
 
   return {
-    root,
+    root: packageRoot,
     configFile: false,
+    plugins: [
+      nitro({
+        serverDir: path.resolve(packageRoot, 'src/server'),
+        ...(preset && { preset }),
+      }),
+      mdx({
+        default: defineFumadocsConfig({
+          mdxOptions: {
+            remarkPlugins: [
+              remarkDirective,
+              [remarkDirectiveAdmonition, {
+                tags: {
+                  CalloutContainer: 'Callout',
+                  CalloutTitle: 'CalloutTitle',
+                  CalloutDescription: 'CalloutDescription',
+                },
+                types: {
+                  note: 'accent',
+                  tip: 'accent',
+                  info: 'accent',
+                  warn: 'attention',
+                  warning: 'attention',
+                  danger: 'alert',
+                  caution: 'alert',
+                  success: 'success',
+                },
+              }],
+              remarkUnusedDirectives,
+              remarkMdxMermaid,
+            ],
+          },
+        }),
+      }, { index: false }),
+      react()
+    ],
     resolve: {
       alias: {
-        '@': path.resolve(root, 'src'),
-        '@content': contentDir,
+        '@': path.resolve(packageRoot, 'src'),
       },
-      dedupe: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
+      conditions: ['module-sync', 'import', 'node'],
+      dedupe: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'react/jsx-dev-runtime',
+        'react-router',
+      ]
     },
     server: {
       fs: {
-        allow: [root, contentDir],
-      },
+        allow: [packageRoot, projectRoot, contentDir]
+      }
     },
-    plugins: [
-      mdx({
-        remarkPlugins: [
-          remarkFrontmatter,
-          remarkMdxFrontmatter,
-          remarkGfm,
-          remarkDirective,
-        ],
-        rehypePlugins: [
-          [rehypeShiki, { themes: { light: 'github-light', dark: 'github-dark' }, defaultColor: false }],
-        ],
-        mdExtensions: ['.md'],
-        mdxExtensions: ['.mdx'],
-      }),
-      react(),
-    ],
     define: {
-      'process.env.CHRONICLE_CONTENT_DIR': JSON.stringify(contentDir),
-      'process.env.CHRONICLE_PROJECT_ROOT': JSON.stringify(root),
+      __CHRONICLE_CONTENT_DIR__: JSON.stringify(contentDir),
+      __CHRONICLE_PROJECT_ROOT__: JSON.stringify(projectRoot)
     },
     css: {
       modules: {
-        localsConvention: 'camelCase',
-      },
+        localsConvention: 'camelCase'
+      }
     },
     ssr: {
-      noExternal: ['@raystack/apsara'],
+      noExternal: ['@raystack/apsara', 'dayjs', 'fumadocs-core']
+    },
+    environments: {
+      client: {
+        build: {
+          rollupOptions: {
+            input: path.resolve(packageRoot, 'src/server/entry-client.tsx')
+          }
+        }
+      }
     },
-    build: {
-      rolldownOptions: {
-        input: isDev ? undefined : {
-          client: path.resolve(root, 'src/server/index.html'),
-        },
+    nitro: {
+      output: {
+        dir: resolveOutputDir(projectRoot, preset),
       },
     },
-  }
+  };
 }

package/src/themes/default/Layout.tsx

@@ -1,64 +1,87 @@
-"use client";
-
-import { useMemo, useEffect, useRef } from "react";
-import { useLocation, Link } from "react-router-dom";
-import { cx } from "class-variance-authority";
-import { Flex, Navbar, Headline, Sidebar, Button } from "@raystack/apsara";
-import { RectangleStackIcon } from "@heroicons/react/24/outline";
-import { ClientThemeSwitcher } from "@/components/ui/client-theme-switcher";
-import { Search } from "@/components/ui/search";
-import { Footer } from "@/components/ui/footer";
-import { MethodBadge } from "@/components/api/method-badge";
-import type { ThemeLayoutProps, PageTreeItem } from "@/types";
-import styles from "./Layout.module.css";
+import { RectangleStackIcon } from '@heroicons/react/24/outline';
+import {
+  Button,
+  Flex,
+  Headline,
+  Link,
+  Navbar,
+  Sidebar
+} from '@raystack/apsara';
+import { cx } from 'class-variance-authority';
+import { useEffect, useMemo, useRef } from 'react';
+import { Link as RouterLink, useLocation } from 'react-router';
+import { MethodBadge } from '@/components/api/method-badge';
+import { ClientThemeSwitcher } from '@/components/ui/client-theme-switcher';
+import { Footer } from '@/components/ui/footer';
+import { Search } from '@/components/ui/search';
+import type { Node } from 'fumadocs-core/page-tree';
+import type { ThemeLayoutProps } from '@/types';
+import styles from './Layout.module.css';
 
 const iconMap: Record<string, React.ReactNode> = {
-  "rectangle-stack": <RectangleStackIcon width={16} height={16} />,
-  "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" />,
+  'rectangle-stack': <RectangleStackIcon width={16} height={16} />,
+  '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' />
 };
 
 let savedScrollTop = 0;
 
-export function Layout({ children, config, tree, classNames }: ThemeLayoutProps) {
+export function Layout({
+  children,
+  config,
+  tree,
+  classNames
+}: ThemeLayoutProps) {
   const { pathname } = useLocation();
   const scrollRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
-    const onScroll = () => { savedScrollTop = el.scrollTop; };
+    const onScroll = () => {
+      savedScrollTop = el.scrollTop;
+    };
     el.addEventListener('scroll', onScroll);
     return () => el.removeEventListener('scroll', onScroll);
   }, []);
 
   useEffect(() => {
     const el = scrollRef.current;
-    if (el) requestAnimationFrame(() => { el.scrollTop = savedScrollTop; });
+    if (el)
+      requestAnimationFrame(() => {
+        el.scrollTop = savedScrollTop;
+      });
   }, [pathname]);
 
   return (
-    <Flex direction="column" className={cx(styles.layout, classNames?.layout)}>
+    <Flex direction='column' className={cx(styles.layout, classNames?.layout)}>
       <Navbar className={styles.header}>
         <Navbar.Start>
-          <Link to="/" style={{ textDecoration: 'none', color: 'inherit' }}>
-            <Headline size="small" weight="medium" as="h1">
+          <RouterLink
+            to='/'
+            style={{ textDecoration: 'none', color: 'inherit' }}
+          >
+            <Headline size='small' weight='medium' as='h1'>
               {config.title}
             </Headline>
-          </Link>
+          </RouterLink>
         </Navbar.Start>
         <Navbar.End>
-          <Flex gap="medium" align="center" className={styles.navActions}>
-            {config.api?.map((api) => (
-              <Link key={api.name} to={api.basePath} className={styles.navButton}>
+          <Flex gap='medium' align='center' className={styles.navActions}>
+            {config.api?.map(api => (
+              <RouterLink
+                key={api.basePath}
+                to={api.basePath}
+                className={styles.navButton}
+              >
                 {api.name} API
-              </Link>
+              </RouterLink>
             ))}
-            {config.navigation?.links?.map((link) => (
-              <Link key={link.href} to={link.href}>
+            {config.navigation?.links?.map(link => (
+              <Link key={link.href} href={link.href}>
                 {link.label}
               </Link>
             ))}
@@ -68,18 +91,24 @@ export function Layout({ children, config, tree, classNames }: ThemeLayoutProps)
         </Navbar.End>
       </Navbar>
       <Flex className={cx(styles.body, classNames?.body)}>
-        <Sidebar defaultOpen collapsible={false} className={cx(styles.sidebar, classNames?.sidebar)}>
+        <Sidebar
+          defaultOpen
+          collapsible={false}
+          className={cx(styles.sidebar, classNames?.sidebar)}
+        >
           <Sidebar.Main ref={scrollRef}>
-            {tree.children.map((item) => (
+            {tree.children.map((item, i) => (
               <SidebarNode
-                key={item.url ?? item.name}
+                key={item.type === 'page' ? item.url : (item.name?.toString() ?? i)}
                 item={item}
                 pathname={pathname}
               />
             ))}
           </Sidebar.Main>
         </Sidebar>
-        <main className={cx(styles.content, classNames?.content)}>{children}</main>
+        <main className={cx(styles.content, classNames?.content)}>
+          {children}
+        </main>
       </Flex>
       <Footer config={config.footer} />
     </Flex>
@@ -88,25 +117,26 @@ export function Layout({ children, config, tree, classNames }: ThemeLayoutProps)
 
 function SidebarNode({
   item,
-  pathname,
+  pathname
 }: {
-  item: PageTreeItem;
+  item: Node;
   pathname: string;
 }) {
-  if (item.type === "separator") {
+  if (item.type === 'separator') {
     return null;
   }
 
-  if (item.type === "folder" && item.children) {
+  if (item.type === 'folder') {
+    const icon = typeof item.icon === 'string' ? iconMap[item.icon] : item.icon;
     return (
       <Sidebar.Group
-        label={item.name}
-        leadingIcon={item.icon ? iconMap[item.icon] : undefined}
+        label={item.name?.toString() ?? ''}
+        leadingIcon={icon ?? undefined}
         classNames={{ items: styles.groupItems }}
       >
-        {item.children.map((child) => (
+        {item.children.map((child, i) => (
           <SidebarNode
-            key={child.url ?? child.name}
+            key={child.type === 'page' ? child.url : (child.name?.toString() ?? i)}
             item={child}
             pathname={pathname}
           />
@@ -116,14 +146,15 @@ function SidebarNode({
   }
 
   const isActive = pathname === item.url;
-  const href = item.url ?? "#";
-  const link = useMemo(() => <Link to={href} />, [href]);
+  const href = item.url ?? '#';
+  const icon = typeof item.icon === 'string' ? iconMap[item.icon] : item.icon;
+  const link = useMemo(() => <RouterLink to={href} />, [href]);
 
   return (
     <Sidebar.Item
       href={href}
       active={isActive}
-      leadingIcon={item.icon ? iconMap[item.icon] : undefined}
+      leadingIcon={icon ?? undefined}
       as={link}
     >
       {item.name}

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

@@ -38,22 +38,6 @@
   margin-bottom: var(--rs-space-3);
 }
 
-.content :global(pre) {
-  background-color: var(--shiki-light-bg, #fff);
-}
-
-.content :global(pre code span) {
-  color: var(--shiki-light);
-}
-
-:global([data-theme="dark"]) .content :global(pre) {
-  background-color: var(--shiki-dark-bg, #24292e);
-}
-
-:global([data-theme="dark"]) .content :global(pre code span) {
-  color: var(--shiki-dark);
-}
-
 .content img {
   max-width: 100%;
   height: auto;

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 };