@raystack/chronicle 0.1.0-canary.a320792 → 0.1.0-canary.ac60f9f

package/src/lib/head.tsx

@@ -1,45 +1,49 @@
-import type { ChronicleConfig } from '@/types'
+import type { ChronicleConfig } from '@/types';
 
 export interface HeadProps {
-  title: string
-  description?: string
-  config: ChronicleConfig
-  jsonLd?: Record<string, unknown>
+  title: string;
+  description?: string;
+  config: ChronicleConfig;
+  jsonLd?: Record<string, unknown>;
 }
 
 export function Head({ title, description, config, jsonLd }: HeadProps) {
-  const fullTitle = `${title} | ${config.title}`
-  const ogParams = new URLSearchParams({ title })
-  if (description) ogParams.set('description', description)
+  const fullTitle = `${title} | ${config.title}`;
+  const ogParams = new URLSearchParams({ title });
+  if (description) ogParams.set('description', description);
 
   return (
     <>
       <title>{fullTitle}</title>
-      {description && <meta name="description" content={description} />}
+      {description && <meta name='description' content={description} />}
 
       {config.url && (
         <>
-          <meta property="og:title" content={title} />
-          {description && <meta property="og:description" content={description} />}
-          <meta property="og:site_name" content={config.title} />
-          <meta property="og:type" content="website" />
-          <meta property="og:image" content={`/og?${ogParams.toString()}`} />
-          <meta property="og:image:width" content="1200" />
-          <meta property="og:image:height" content="630" />
+          <meta property='og:title' content={title} />
+          {description && (
+            <meta property='og:description' content={description} />
+          )}
+          <meta property='og:site_name' content={config.title} />
+          <meta property='og:type' content='website' />
+          <meta property='og:image' content={`/og?${ogParams.toString()}`} />
+          <meta property='og:image:width' content='1200' />
+          <meta property='og:image:height' content='630' />
 
-          <meta name="twitter:card" content="summary_large_image" />
-          <meta name="twitter:title" content={title} />
-          {description && <meta name="twitter:description" content={description} />}
-          <meta name="twitter:image" content={`/og?${ogParams.toString()}`} />
+          <meta name='twitter:card' content='summary_large_image' />
+          <meta name='twitter:title' content={title} />
+          {description && (
+            <meta name='twitter:description' content={description} />
+          )}
+          <meta name='twitter:image' content={`/og?${ogParams.toString()}`} />
         </>
       )}
 
       {jsonLd && (
         <script
-          type="application/ld+json"
+          type='application/ld+json'
           dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd, null, 2) }}
         />
       )}
     </>
-  )
+  );
 }

package/src/lib/openapi.ts

@@ -1,5 +1,5 @@
-import fs from 'fs'
-import path from 'path'
+import fs from 'node:fs/promises'
+import path from 'node:path'
 import { parse as parseYaml } from 'yaml'
 import type { OpenAPIV2, OpenAPIV3 } from 'openapi-types'
 import type { ApiConfig, ApiServerConfig, ApiAuthConfig } from '@/types/config'
@@ -17,14 +17,14 @@ export interface ApiSpec {
 export type { SchemaField } from './schema'
 export { flattenSchema } from './schema'
 
-export function loadApiSpecs(apiConfigs: ApiConfig[]): ApiSpec[] {
-  const contentDir = process.env.CHRONICLE_CONTENT_DIR ?? process.cwd()
-  return apiConfigs.map((config) => loadApiSpec(config, contentDir))
+export async function loadApiSpecs(apiConfigs: ApiConfig[]): Promise<ApiSpec[]> {
+  const projectRoot = typeof __CHRONICLE_PROJECT_ROOT__ !== 'undefined' ? __CHRONICLE_PROJECT_ROOT__ : process.cwd()
+  return Promise.all(apiConfigs.map((config) => loadApiSpec(config, projectRoot)))
 }
 
-export function loadApiSpec(config: ApiConfig, contentDir: string): ApiSpec {
-  const specPath = path.resolve(contentDir, config.spec)
-  const raw = fs.readFileSync(specPath, 'utf-8')
+export async function loadApiSpec(config: ApiConfig, projectRoot: string): Promise<ApiSpec> {
+  const specPath = path.resolve(projectRoot, config.spec)
+  const raw = await fs.readFile(specPath, 'utf-8')
   const isYaml = specPath.endsWith('.yaml') || specPath.endsWith('.yml')
   const doc = (isYaml ? parseYaml(raw) : JSON.parse(raw)) as OpenAPIV2.Document | OpenAPIV3.Document
 

package/src/lib/page-context.tsx

@@ -1,95 +1,114 @@
-import { createContext, useContext, useState, useEffect, type ReactNode } from 'react'
-import { useLocation } from 'react-router-dom'
-import type { ChronicleConfig, Frontmatter, PageTree } from '@/types'
-import type { ApiSpec } from '@/lib/openapi'
-import { getPage, loadPageComponent, buildPageTree } from '@/lib/source'
-import { mdxComponents } from '@/components/mdx'
-import React from 'react'
+import React, {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useState
+} from 'react';
+import { useLocation } from 'react-router';
+import { mdxComponents } from '@/components/mdx';
+import type { ApiSpec } from '@/lib/openapi';
+import type { ChronicleConfig, Frontmatter, PageTree } from '@/types';
 
 interface PageData {
-  slug: string[]
-  frontmatter: Frontmatter
-  content: ReactNode
+  slug: string[];
+  frontmatter: Frontmatter;
+  content: ReactNode;
 }
 
 interface PageContextValue {
-  config: ChronicleConfig
-  tree: PageTree
-  page: PageData | null
-  apiSpecs: ApiSpec[]
+  config: ChronicleConfig;
+  tree: PageTree;
+  page: PageData | null;
+  apiSpecs: ApiSpec[];
 }
 
-const PageContext = createContext<PageContextValue | null>(null)
+const PageContext = createContext<PageContextValue | null>(null);
 
 export function usePageContext(): PageContextValue {
-  const ctx = useContext(PageContext)
+  const ctx = useContext(PageContext);
   if (!ctx) {
-    console.error('usePageContext: no context found!')
+    console.error('usePageContext: no context found!');
     return {
       config: { title: 'Documentation' },
       tree: { name: 'root', children: [] },
       page: null,
-      apiSpecs: [],
-    }
+      apiSpecs: []
+    };
   }
-  return ctx
+  return ctx;
 }
 
 interface PageProviderProps {
-  initialConfig: ChronicleConfig
-  initialTree: PageTree
-  initialPage: PageData | null
-  initialApiSpecs: ApiSpec[]
-  children: ReactNode
+  initialConfig: ChronicleConfig;
+  initialTree: PageTree;
+  initialPage: PageData | null;
+  initialApiSpecs: ApiSpec[];
+  children: ReactNode;
+}
+
+async function loadMdxComponent(relativePath: string): Promise<ReactNode> {
+  const mod = await import(/* @vite-ignore */ `/.content/${relativePath}`);
+  return mod.default
+    ? React.createElement(mod.default, { components: mdxComponents })
+    : null;
 }
 
-export function PageProvider({ initialConfig, initialTree, initialPage, initialApiSpecs, children }: PageProviderProps) {
-  const { pathname } = useLocation()
-  const [tree, setTree] = useState<PageTree>(initialTree)
-  const [page, setPage] = useState<PageData | null>(initialPage)
-  const [apiSpecs, setApiSpecs] = useState<ApiSpec[]>(initialApiSpecs)
-  const [currentPath, setCurrentPath] = useState(pathname)
+export function PageProvider({
+  initialConfig,
+  initialTree,
+  initialPage,
+  initialApiSpecs,
+  children
+}: PageProviderProps) {
+  const { pathname } = useLocation();
+  const [tree] = useState<PageTree>(initialTree);
+  const [page, setPage] = useState<PageData | null>(initialPage);
+  const [apiSpecs, setApiSpecs] = useState<ApiSpec[]>(initialApiSpecs);
+  const [currentPath, setCurrentPath] = useState(pathname);
 
   useEffect(() => {
-    if (pathname === currentPath) return
-    setCurrentPath(pathname)
+    if (pathname === currentPath) return;
+    setCurrentPath(pathname);
 
-    let cancelled = false
+    const cancelled = { current: false };
 
     if (pathname.startsWith('/apis')) {
-      // Fetch API specs if not already loaded
       if (apiSpecs.length === 0) {
         fetch('/api/specs')
-          .then((res) => res.json())
-          .then((specs) => { if (!cancelled) setApiSpecs(specs) })
-          .catch(() => {})
+          .then(res => res.json())
+          .then(specs => {
+            if (!cancelled.current) setApiSpecs(specs);
+          })
+          .catch(() => {});
       }
-      return () => { cancelled = true }
+      return () => { cancelled.current = true; };
     }
 
-    async function load() {
-      const slug = pathname === '/' ? [] : pathname.slice(1).split('/').filter(Boolean)
+    const slug = pathname === '/'
+      ? []
+      : pathname.slice(1).split('/').filter(Boolean);
 
-      const [sourcePage, newTree] = await Promise.all([getPage(slug), buildPageTree()])
-      if (cancelled || !sourcePage) return
+    const apiPath = slug.length === 0 ? '/api/page/' : `/api/page/${slug.join('/')}`;
 
-      const component = await loadPageComponent(sourcePage)
-      if (cancelled) return
-
-      setTree(newTree)
-      setPage({
-        slug,
-        frontmatter: sourcePage.frontmatter,
-        content: component ? React.createElement(component, { components: mdxComponents }) : null,
+    fetch(apiPath)
+      .then(res => res.json())
+      .then(async (data: { frontmatter: Frontmatter; relativePath: string }) => {
+        if (cancelled.current) return;
+        const content = await loadMdxComponent(data.relativePath);
+        if (cancelled.current) return;
+        setPage({ slug, frontmatter: data.frontmatter, content });
       })
-    }
-    load()
-    return () => { cancelled = true }
-  }, [pathname])
+      .catch(() => {});
+
+    return () => { cancelled.current = true; };
+  }, [pathname]);
 
   return (
-    <PageContext.Provider value={{ config: initialConfig, tree, page, apiSpecs }}>
+    <PageContext.Provider
+      value={{ config: initialConfig, tree, page, apiSpecs }}
+    >
       {children}
     </PageContext.Provider>
-  )
+  );
 }

package/src/lib/source.ts

@@ -1,138 +1,186 @@
-import type { MDXContent } from 'mdx/types'
-import type { Frontmatter, PageTree, PageTreeItem } from '@/types'
-
-const meta: Record<string, Frontmatter> = import.meta.glob(
-  '@content/**/*.{mdx,md}',
-  { eager: true, import: 'frontmatter' }
-)
-
-const loaders: Record<string, () => Promise<{ default: MDXContent }>> = import.meta.glob(
-  '@content/**/*.{mdx,md}'
-)
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { loader } from 'fumadocs-core/source';
+import matter from 'gray-matter';
+import type { MDXContent } from 'mdx/types';
+import type { Frontmatter, PageTree, PageTreeItem } from '@/types';
 
 export interface SourcePage {
-  url: string
-  slugs: string[]
-  filePath: string
-  frontmatter: Frontmatter
+  url: string;
+  slugs: string[];
+  filePath: string;
+  frontmatter: Frontmatter;
 }
 
-// Compute common directory prefix of all glob keys once
-function computePrefix(keys: string[]): string {
-  if (keys.length === 0) return ''
-  const dirs = keys.map((k) => k.split('/').slice(0, -1)) // drop filename
-  const first = dirs[0]
-  let depth = 0
-  for (let i = 0; i < first.length; i++) {
-    if (dirs.every((d) => d[i] === first[i])) {
-      depth = i + 1
-    } else {
-      break
-    }
-  }
-  return first.slice(0, depth).join('/') + '/'
+function getContentDir(): string {
+  return __CHRONICLE_CONTENT_DIR__ || path.join(process.cwd(), 'content');
 }
 
-const prefix = computePrefix(Object.keys(meta))
+async function scanFiles(contentDir: string) {
+  const files: {
+    type: 'page' | 'meta';
+    path: string;
+    data: Record<string, unknown>;
+  }[] = [];
+
+  async function scan(dir: string, prefix: string[] = []) {
+    try {
+      const entries = await fs.readdir(dir, { withFileTypes: true });
+      for (const entry of entries) {
+        if (entry.name.startsWith('.') || entry.name === 'node_modules')
+          continue;
+        const fullPath = path.join(dir, entry.name);
+        const relativePath = [...prefix, entry.name].join('/');
+
+        if (entry.isDirectory()) {
+          await scan(fullPath, [...prefix, entry.name]);
+          continue;
+        }
+
+        if (entry.name.endsWith('.mdx') || entry.name.endsWith('.md')) {
+          const raw = await fs.readFile(fullPath, 'utf-8');
+          const { data } = matter(raw);
+          files.push({
+            type: 'page',
+            path: relativePath,
+            data: { ...data, _absolutePath: fullPath }
+          });
+        } else if (entry.name === 'meta.json' || entry.name === 'meta.yaml') {
+          const raw = await fs.readFile(fullPath, 'utf-8');
+          const data = entry.name.endsWith('.json')
+            ? JSON.parse(raw)
+            : matter(raw).data;
+          files.push({ type: 'meta', path: relativePath, data });
+        }
+      }
+    } catch {
+      /* directory not readable */
+    }
+  }
 
-function filePathToSlugs(filePath: string): string[] {
-  const relative = filePath.slice(prefix.length)
-  const withoutExt = relative.replace(/\.(mdx|md)$/, '')
-  const parts = withoutExt.split('/').filter(Boolean)
-  if (parts[parts.length - 1] === 'index') parts.pop()
-  return parts
+  await scan(contentDir);
+  return files;
 }
 
-function slugsToUrl(slugs: string[]): string {
-  return slugs.length === 0 ? '/' : '/' + slugs.join('/')
+let cachedSource: ReturnType<typeof loader> | null = null;
+let cachedPages: SourcePage[] | null = null;
+
+async function getSource() {
+  if (cachedSource) return cachedSource;
+  const contentDir = getContentDir();
+  const files = await scanFiles(contentDir);
+  cachedSource = loader({
+    source: { files },
+    baseUrl: '/'
+  });
+  return cachedSource;
 }
 
-let cachedPages: SourcePage[] | null = null
+export function invalidate() {
+  cachedSource = null;
+  cachedPages = null;
+}
 
 export async function getPages(): Promise<SourcePage[]> {
-  if (cachedPages) return cachedPages
+  if (cachedPages) return cachedPages;
 
-  cachedPages = Object.entries(meta).map(([filePath, fm]) => {
-    const slugs = filePathToSlugs(filePath)
-    const baseName = slugs[slugs.length - 1] ?? 'index'
+  const s = await getSource();
+  cachedPages = s.getPages().map(page => {
+    const data = page.data as Record<string, unknown>;
     return {
-      url: slugsToUrl(slugs),
-      slugs,
-      filePath,
+      url: page.url,
+      slugs: page.slugs,
+      filePath: (data._absolutePath as string) ?? '',
       frontmatter: {
-        title: fm?.title ?? baseName,
-        description: fm?.description,
-        order: fm?.order,
-        icon: fm?.icon,
-        lastModified: fm?.lastModified,
-      },
-    }
-  })
+        title:
+          (data.title as string) ??
+          page.slugs[page.slugs.length - 1] ??
+          'Untitled',
+        description: data.description as string | undefined,
+        order: data.order as number | undefined,
+        icon: data.icon as string | undefined,
+        lastModified: data.lastModified as string | undefined
+      }
+    };
+  });
 
-  return cachedPages
+  return cachedPages;
 }
 
 export async function getPage(slug?: string[]): Promise<SourcePage | null> {
-  const pages = await getPages()
-  const targetUrl = !slug || slug.length === 0 ? '/' : '/' + slug.join('/')
-  return pages.find((p) => p.url === targetUrl) ?? null
-}
-
-export async function loadPageComponent(page: SourcePage): Promise<MDXContent | null> {
-  const loader = loaders[page.filePath]
-  if (!loader) return null
-  const mod = await loader()
-  return mod.default
+  const pages = await getPages();
+  const targetUrl = !slug || slug.length === 0 ? '/' : `/${slug.join('/')}`;
+  return pages.find(p => p.url === targetUrl) ?? null;
 }
 
-export function invalidate() {
-  cachedPages = null
+export async function loadPageComponent(
+  page: SourcePage
+): Promise<MDXContent | null> {
+  if (!page.filePath) return null;
+  try {
+    await fs.access(page.filePath);
+  } catch {
+    return null;
+  }
+  const contentDir = getContentDir();
+  const relativePath = path.relative(contentDir, page.filePath);
+  const withoutExt = relativePath.replace(/\.(mdx|md)$/, '');
+  const mod = relativePath.endsWith('.md')
+    ? await import(`@content/${withoutExt}.md`)
+    : await import(`@content/${withoutExt}.mdx`);
+  return mod.default;
 }
 
 export async function buildPageTree(): Promise<PageTree> {
-  const pages = await getPages()
-  const folders = new Map<string, PageTreeItem[]>()
-  const rootPages: PageTreeItem[] = []
-
-  pages.forEach((page) => {
-    const isIndex = page.url === '/'
+  const s = await getSource();
+  const pages = s.getPages();
+  const folders = new Map<string, PageTreeItem[]>();
+  const rootPages: PageTreeItem[] = [];
+
+  for (const page of pages) {
+    const data = page.data as Record<string, unknown>;
+    const isIndex = page.url === '/';
     const item: PageTreeItem = {
       type: 'page',
-      name: page.frontmatter.title,
+      name: (data.title as string) ?? page.slugs.join('/') ?? 'Untitled',
       url: page.url,
-      order: page.frontmatter.order ?? (isIndex ? 0 : undefined),
-    }
+      order: (data.order as number | undefined) ?? (isIndex ? 0 : undefined)
+    };
 
     if (page.slugs.length > 1) {
-      const folder = page.slugs[0]
+      const folder = page.slugs[0];
       if (!folders.has(folder)) {
-        folders.set(folder, [])
+        folders.set(folder, []);
       }
-      folders.get(folder)?.push(item)
+      folders.get(folder)?.push(item);
     } else {
-      rootPages.push(item)
+      rootPages.push(item);
     }
-  })
+  }
 
   const sortByOrder = (items: PageTreeItem[]) =>
-    items.sort((a, b) => (a.order ?? Number.MAX_SAFE_INTEGER) - (b.order ?? Number.MAX_SAFE_INTEGER))
-
-  const children: PageTreeItem[] = sortByOrder(rootPages)
-
-  const folderItems: PageTreeItem[] = []
-  folders.forEach((items, folder) => {
-    const sorted = sortByOrder(items)
-    const indexPage = items.find(item => item.url === `/${folder}`)
-    const folderOrder = indexPage?.order ?? sorted[0]?.order
+    items.sort(
+      (a, b) =>
+        (a.order ?? Number.MAX_SAFE_INTEGER) -
+        (b.order ?? Number.MAX_SAFE_INTEGER)
+    );
+
+  const children: PageTreeItem[] = sortByOrder(rootPages);
+
+  const folderItems: PageTreeItem[] = [];
+  for (const [folder, items] of folders) {
+    const sorted = sortByOrder(items);
+    const indexPage = items.find(item => item.url === `/${folder}`);
+    const folderOrder = indexPage?.order ?? sorted[0]?.order;
     folderItems.push({
       type: 'folder',
-      name: folder.charAt(0).toUpperCase() + folder.slice(1),
+      name: `${folder.charAt(0).toUpperCase()}${folder.slice(1)}`,
       order: folderOrder,
-      children: sorted,
-    })
-  })
+      children: sorted
+    });
+  }
 
-  children.push(...sortByOrder(folderItems))
+  children.push(...sortByOrder(folderItems));
 
-  return { name: 'root', children }
+  return { name: 'root', children };
 }

package/src/pages/ApiLayout.tsx

@@ -1,29 +1,33 @@
-import type { ReactNode } from 'react'
-import { cx } from 'class-variance-authority'
-import { usePageContext } from '@/lib/page-context'
-import { buildApiPageTree } from '@/lib/api-routes'
-import { getTheme } from '@/themes/registry'
-import { Search } from '@/components/ui/search'
-import styles from './ApiLayout.module.css'
+import { cx } from 'class-variance-authority';
+import type { ReactNode } from 'react';
+import { Search } from '@/components/ui/search';
+import { buildApiPageTree } from '@/lib/api-routes';
+import { usePageContext } from '@/lib/page-context';
+import { getTheme } from '@/themes/registry';
+import styles from './ApiLayout.module.css';
 
 interface ApiLayoutProps {
-  children: ReactNode
+  children: ReactNode;
 }
 
 export function ApiLayout({ children }: ApiLayoutProps) {
-  const { config, apiSpecs } = usePageContext()
-  const { Layout, className } = getTheme(config.theme?.name)
-  const tree = buildApiPageTree(apiSpecs)
+  const { config, apiSpecs } = usePageContext();
+  const { Layout, className } = getTheme(config.theme?.name);
+  const tree = buildApiPageTree(apiSpecs);
 
   return (
-    <Layout config={config} tree={tree} classNames={{
-      layout: cx(styles.layout, className),
-      body: styles.body,
-      sidebar: styles.sidebar,
-      content: styles.content,
-    }}>
+    <Layout
+      config={config}
+      tree={tree}
+      classNames={{
+        layout: cx(styles.layout, className),
+        body: styles.body,
+        sidebar: styles.sidebar,
+        content: styles.content
+      }}
+    >
       <Search className={styles.hiddenSearch} />
       {children}
     </Layout>
-  )
+  );
 }