@raystack/chronicle 0.1.0-canary.e11f924 → 0.1.0-canary.f0d9bde

package/src/components/mdx/details.tsx

@@ -1,9 +1,8 @@
 import type { ComponentProps } from 'react'
-import styles from './details.module.css'
 
 export function MdxDetails({ children, className, ...props }: ComponentProps<'details'>) {
   return (
-    <details className={`${styles.details} ${className ?? ''}`} {...props}>
+    <details className={className} {...props}>
       {children}
     </details>
   )
@@ -11,7 +10,7 @@ export function MdxDetails({ children, className, ...props }: ComponentProps<'de
 
 export function MdxSummary({ children, className, ...props }: ComponentProps<'summary'>) {
   return (
-    <summary className={`${styles.summary} ${className ?? ''}`} {...props}>
+    <summary className={className} {...props}>
       {children}
     </summary>
   )

package/src/components/mdx/image.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import NextImage from 'next/image'
 import type { ComponentProps } from 'react'
 
 type ImageProps = Omit<ComponentProps<'img'>, 'src'> & {
@@ -12,27 +11,14 @@ type ImageProps = Omit<ComponentProps<'img'>, 'src'> & {
 export function Image({ src, alt, width, height, ...props }: ImageProps) {
   if (!src || typeof src !== 'string') return null
 
-  const isExternal = src.startsWith('http://') || src.startsWith('https://')
-
-  if (isExternal) {
-    return (
-      // eslint-disable-next-line @next/next/no-img-element
-      <img
-        src={src}
-        alt={alt ?? ''}
-        width={width}
-        height={height}
-        {...props}
-      />
-    )
-  }
-
   return (
-    <NextImage
+    <img
       src={src}
       alt={alt ?? ''}
-      width={typeof width === 'string' ? parseInt(width, 10) : (width ?? 800)}
-      height={typeof height === 'string' ? parseInt(height, 10) : (height ?? 400)}
+      width={width}
+      height={height}
+      loading="lazy"
+      {...props}
     />
   )
 }

package/src/components/mdx/index.tsx

@@ -1,6 +1,6 @@
 import type { MDXComponents } from 'mdx/types'
 import { Image } from './image'
-import { Link } from './link'
+import { MdxLink } from './link'
 import { MdxTable, MdxThead, MdxTbody, MdxTr, MdxTh, MdxTd } from './table'
 import { MdxPre, MdxCode } from './code'
 import { MdxDetails, MdxSummary } from './details'
@@ -12,7 +12,7 @@ import { Tabs } from '@raystack/apsara'
 export const mdxComponents: MDXComponents = {
   p: MdxParagraph,
   img: Image,
-  a: Link,
+  a: MdxLink,
   table: MdxTable,
   thead: MdxThead,
   tbody: MdxTbody,
@@ -32,4 +32,4 @@ export const mdxComponents: MDXComponents = {
 }
 
 export { Image } from './image'
-export { Link } from './link'
+export { MdxLink } from './link'

package/src/components/mdx/link.tsx

@@ -1,12 +1,11 @@
 'use client'
 
-import NextLink from 'next/link'
-import { Link as ApsaraLink } from '@raystack/apsara'
+import { Link } from 'react-router-dom'
 import type { ComponentProps } from 'react'
 
 type LinkProps = ComponentProps<'a'>
 
-export function Link({ href, children, ...props }: LinkProps) {
+export function MdxLink({ href, children, ...props }: LinkProps) {
   if (!href) {
     return <span {...props}>{children}</span>
   }
@@ -14,25 +13,25 @@ export function Link({ href, children, ...props }: LinkProps) {
   const isExternal = href.startsWith('http://') || href.startsWith('https://')
   const isAnchor = href.startsWith('#')
 
-  if (isAnchor) {
+  if (isExternal) {
     return (
-      <ApsaraLink href={href} {...props}>
+      <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
         {children}
-      </ApsaraLink>
+      </a>
     )
   }
 
-  if (isExternal) {
+  if (isAnchor) {
     return (
-      <ApsaraLink href={href} target="_blank" rel="noopener noreferrer" {...props}>
+      <a href={href} {...props}>
         {children}
-      </ApsaraLink>
+      </a>
     )
   }
 
   return (
-    <NextLink href={href} className={props.className}>
+    <Link to={href} className={props.className}>
       {children}
-    </NextLink>
+    </Link>
   )
 }

package/src/components/ui/footer.tsx

@@ -1,4 +1,5 @@
-import { Flex, Link, Text } from "@raystack/apsara";
+import { Link } from "react-router-dom";
+import { Flex, Text } from "@raystack/apsara";
 import type { FooterConfig } from "@/types";
 import styles from "./footer.module.css";
 
@@ -18,7 +19,7 @@ export function Footer({ config }: FooterProps) {
         {config?.links && config.links.length > 0 && (
           <Flex gap="medium" className={styles.links}>
             {config.links.map((link) => (
-              <Link key={link.href} href={link.href} className={styles.link}>
+              <Link key={link.href} to={link.href} className={styles.link}>
                 {link.label}
               </Link>
             ))}

package/src/components/ui/search.module.css

@@ -102,3 +102,10 @@
 .item[data-selected="true"] .icon {
   color: var(--rs-color-foreground-accent-primary-hover);
 }
+
+.pageText :global(mark),
+.headingText :global(mark) {
+  background: transparent;
+  color: var(--rs-color-foreground-accent-primary);
+  font-weight: 600;
+}

package/src/components/ui/search.tsx

@@ -1,21 +1,54 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
-import { useRouter } from "next/navigation";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useNavigate } from "react-router-dom";
 import { Button, Command, Dialog, Text } from "@raystack/apsara";
 import { cx } from "class-variance-authority";
-import { useDocsSearch } from "fumadocs-core/search/client";
-import type { SortedResult } from "fumadocs-core/search";
 import { DocumentIcon, HashtagIcon } from "@heroicons/react/24/outline";
-import { isMacOs } from "react-device-detect";
 import { MethodBadge } from "@/components/api/method-badge";
 import styles from "./search.module.css";
 
+interface SearchResult {
+  id: string;
+  url: string;
+  type: "page" | "api";
+  content: string;
+}
+
+function useSearch(query: string) {
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(async () => {
+      setIsLoading(true);
+      try {
+        const params = new URLSearchParams();
+        if (query) params.set("query", query);
+        const res = await fetch(`/api/search?${params}`);
+        if (!cancelled) setResults(await res.json());
+      } catch {
+        if (!cancelled) setResults([]);
+      }
+      if (!cancelled) setIsLoading(false);
+    }, 100);
+    return () => {
+      cancelled = true;
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [query]);
+
+  return { results, isLoading };
+}
+
 function SearchShortcutKey({ className }: { className?: string }) {
-  const [key, setKey] = useState("⌘");
+  const [key, setKey] = useState("\u2318");
 
   useEffect(() => {
-    setKey(isMacOs ? "⌘" : "Ctrl");
+    setKey(navigator.platform?.startsWith("Mac") ? "\u2318" : "Ctrl");
   }, []);
 
   return (
@@ -26,26 +59,21 @@ function SearchShortcutKey({ className }: { className?: string }) {
 }
 
 interface SearchProps {
-  className?: string
+  className?: string;
 }
 
 export function Search({ className }: SearchProps) {
   const [open, setOpen] = useState(false);
-  const router = useRouter();
-
-  const { search, setSearch, query } = useDocsSearch({
-    type: "fetch",
-    api: "/api/search",
-    delayMs: 100,
-    allowEmpty: true,
-  });
+  const navigate = useNavigate();
+  const [search, setSearch] = useState("");
+  const { results, isLoading } = useSearch(search);
 
   const onSelect = useCallback(
     (url: string) => {
       setOpen(false);
-      router.push(url);
+      navigate(url);
     },
-    [router],
+    [navigate],
   );
 
   useEffect(() => {
@@ -60,10 +88,6 @@ export function Search({ className }: SearchProps) {
     return () => document.removeEventListener("keydown", down);
   }, []);
 
-  const results = deduplicateByUrl(
-    query.data === "empty" ? [] : (query.data ?? []),
-  );
-
   return (
     <>
       <Button
@@ -91,17 +115,17 @@ export function Search({ className }: SearchProps) {
             />
 
             <Command.List className={styles.list}>
-              {query.isLoading && <Command.Empty>Loading...</Command.Empty>}
-              {!query.isLoading &&
+              {isLoading && <Command.Empty>Loading...</Command.Empty>}
+              {!isLoading &&
                 search.length > 0 &&
                 results.length === 0 && (
                   <Command.Empty>No results found.</Command.Empty>
                 )}
-              {!query.isLoading &&
+              {!isLoading &&
                 search.length === 0 &&
                 results.length > 0 && (
                   <Command.Group heading="Suggestions">
-                    {results.slice(0, 8).map((result: SortedResult) => (
+                    {results.slice(0, 8).map((result) => (
                       <Command.Item
                         key={result.id}
                         value={result.id}
@@ -111,7 +135,7 @@ export function Search({ className }: SearchProps) {
                         <div className={styles.itemContent}>
                           {getResultIcon(result)}
                           <Text className={styles.pageText}>
-                            {stripMethod(result.content)}
+                            {result.content}
                           </Text>
                         </div>
                       </Command.Item>
@@ -119,7 +143,7 @@ export function Search({ className }: SearchProps) {
                   </Command.Group>
                 )}
               {search.length > 0 &&
-                results.map((result: SortedResult) => (
+                results.map((result) => (
                   <Command.Item
                     key={result.id}
                     value={result.id}
@@ -128,23 +152,9 @@ export function Search({ className }: SearchProps) {
                   >
                     <div className={styles.itemContent}>
                       {getResultIcon(result)}
-                      <div className={styles.resultText}>
-                        {result.type === "heading" ? (
-                          <>
-                            <Text className={styles.headingText}>
-                              {stripMethod(result.content)}
-                            </Text>
-                            <Text className={styles.separator}>-</Text>
-                            <Text className={styles.pageText}>
-                              {getPageTitle(result.url)}
-                            </Text>
-                          </>
-                        ) : (
-                          <Text className={styles.pageText}>
-                            {stripMethod(result.content)}
-                          </Text>
-                        )}
-                      </div>
+                      <Text className={styles.pageText}>
+                        {result.content}
+                      </Text>
                     </div>
                   </Command.Item>
                 ))}
@@ -156,47 +166,12 @@ export function Search({ className }: SearchProps) {
   );
 }
 
-function deduplicateByUrl(results: SortedResult[]): SortedResult[] {
-  const seen = new Set<string>();
-  return results.filter((r) => {
-    const base = r.url.split("#")[0];
-    if (seen.has(base)) return false;
-    seen.add(base);
-    return true;
-  });
-}
-
-const API_METHODS = new Set(["GET", "POST", "PUT", "DELETE", "PATCH"]);
-
-function extractMethod(content: string): string | null {
-  const first = content.split(" ")[0];
-  return API_METHODS.has(first) ? first : null;
-}
-
-function stripMethod(content: string): string {
-  const first = content.split(" ")[0];
-  return API_METHODS.has(first) ? content.slice(first.length + 1) : content;
-}
-
-function getResultIcon(result: SortedResult): React.ReactNode {
-  if (!result.url.startsWith("/apis/")) {
-    return result.type === "page" ? (
-      <DocumentIcon className={styles.icon} />
-    ) : (
-      <HashtagIcon className={styles.icon} />
-    );
+function getResultIcon(result: SearchResult): React.ReactNode {
+  if (result.type === "api") {
+    const method = result.content.split(" ")[0];
+    return ["GET", "POST", "PUT", "DELETE", "PATCH"].includes(method)
+      ? <MethodBadge method={method} size="micro" />
+      : null;
   }
-  const method = extractMethod(result.content);
-  return method ? <MethodBadge method={method} size="micro" /> : null;
-}
-
-function getPageTitle(url: string): string {
-  const path = url.split("#")[0];
-  const segments = path.split("/").filter(Boolean);
-  const lastSegment = segments[segments.length - 1];
-  if (!lastSegment) return "Home";
-  return lastSegment
-    .split("-")
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(" ");
+  return <DocumentIcon className={styles.icon} />;
 }

package/src/lib/config.ts

@@ -12,8 +12,16 @@ const defaultConfig: ChronicleConfig = {
 }
 
 function resolveConfigPath(): string | null {
+  // Check project root via env var
+  const projectRoot = process.env.CHRONICLE_PROJECT_ROOT
+  if (projectRoot) {
+    const rootPath = path.join(projectRoot, CONFIG_FILE)
+    if (fs.existsSync(rootPath)) return rootPath
+  }
+  // Check cwd
   const cwdPath = path.join(process.cwd(), CONFIG_FILE)
   if (fs.existsSync(cwdPath)) return cwdPath
+  // Check content dir
   const contentDir = process.env.CHRONICLE_CONTENT_DIR
   if (contentDir) {
     const contentPath = path.join(contentDir, CONFIG_FILE)
@@ -43,5 +51,6 @@ export function loadConfig(): ChronicleConfig {
     footer: userConfig.footer,
     api: userConfig.api,
     llms: { enabled: false, ...userConfig.llms },
+    analytics: { enabled: false, ...userConfig.analytics },
   }
 }

package/src/lib/head.tsx

@@ -0,0 +1,45 @@
+import type { ChronicleConfig } from '@/types'
+
+export interface HeadProps {
+  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)
+
+  return (
+    <>
+      <title>{fullTitle}</title>
+      {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 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"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd, null, 2) }}
+        />
+      )}
+    </>
+  )
+}

package/src/lib/page-context.tsx

@@ -0,0 +1,95 @@
+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'
+
+interface PageData {
+  slug: string[]
+  frontmatter: Frontmatter
+  content: ReactNode
+}
+
+interface PageContextValue {
+  config: ChronicleConfig
+  tree: PageTree
+  page: PageData | null
+  apiSpecs: ApiSpec[]
+}
+
+const PageContext = createContext<PageContextValue | null>(null)
+
+export function usePageContext(): PageContextValue {
+  const ctx = useContext(PageContext)
+  if (!ctx) {
+    console.error('usePageContext: no context found!')
+    return {
+      config: { title: 'Documentation' },
+      tree: { name: 'root', children: [] },
+      page: null,
+      apiSpecs: [],
+    }
+  }
+  return ctx
+}
+
+interface PageProviderProps {
+  initialConfig: ChronicleConfig
+  initialTree: PageTree
+  initialPage: PageData | null
+  initialApiSpecs: ApiSpec[]
+  children: ReactNode
+}
+
+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)
+
+  useEffect(() => {
+    if (pathname === currentPath) return
+    setCurrentPath(pathname)
+
+    let cancelled = 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(() => {})
+      }
+      return () => { cancelled = true }
+    }
+
+    async function load() {
+      const slug = pathname === '/' ? [] : pathname.slice(1).split('/').filter(Boolean)
+
+      const [sourcePage, newTree] = await Promise.all([getPage(slug), buildPageTree()])
+      if (cancelled || !sourcePage) return
+
+      const component = await loadPageComponent(sourcePage)
+      if (cancelled) return
+
+      setTree(newTree)
+      setPage({
+        slug,
+        frontmatter: sourcePage.frontmatter,
+        content: component ? React.createElement(component, { components: mdxComponents }) : null,
+      })
+    }
+    load()
+    return () => { cancelled = true }
+  }, [pathname])
+
+  return (
+    <PageContext.Provider value={{ config: initialConfig, tree, page, apiSpecs }}>
+      {children}
+    </PageContext.Provider>
+  )
+}

package/src/lib/source.ts

@@ -1,35 +1,106 @@
-import { docs } from '../../.source/server'
-import { loader } from 'fumadocs-core/source'
-import type { PageTree, PageTreeItem, Frontmatter } from '@/types'
-
-export const source = loader({
-  baseUrl: '/',
-  source: docs.toFumadocsSource(),
-})
-
-export function sortByOrder<T extends { frontmatter?: Frontmatter }>(
-  items: T[]
-): T[] {
-  return [...items].sort((a, b) => {
-    const orderA = a.frontmatter?.order ?? Number.MAX_SAFE_INTEGER
-    const orderB = b.frontmatter?.order ?? Number.MAX_SAFE_INTEGER
-    return orderA - orderB
+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}'
+)
+
+export interface SourcePage {
+  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('/') + '/'
+}
+
+const prefix = computePrefix(Object.keys(meta))
+
+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
+}
+
+function slugsToUrl(slugs: string[]): string {
+  return slugs.length === 0 ? '/' : '/' + slugs.join('/')
+}
+
+let cachedPages: SourcePage[] | null = null
+
+export async function getPages(): Promise<SourcePage[]> {
+  if (cachedPages) return cachedPages
+
+  cachedPages = Object.entries(meta).map(([filePath, fm]) => {
+    const slugs = filePathToSlugs(filePath)
+    const baseName = slugs[slugs.length - 1] ?? 'index'
+    return {
+      url: slugsToUrl(slugs),
+      slugs,
+      filePath,
+      frontmatter: {
+        title: fm?.title ?? baseName,
+        description: fm?.description,
+        order: fm?.order,
+        icon: fm?.icon,
+        lastModified: fm?.lastModified,
+      },
+    }
   })
+
+  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
+}
+
+export function invalidate() {
+  cachedPages = null
 }
 
-export function buildPageTree(): PageTree {
-  const pages = source.getPages()
+export async function buildPageTree(): Promise<PageTree> {
+  const pages = await getPages()
   const folders = new Map<string, PageTreeItem[]>()
   const rootPages: PageTreeItem[] = []
 
   pages.forEach((page) => {
-    const data = page.data as { title?: string; order?: number }
     const isIndex = page.url === '/'
     const item: PageTreeItem = {
       type: 'page',
-      name: data.title ?? page.slugs.join('/') ?? 'Untitled',
+      name: page.frontmatter.title,
       url: page.url,
-      order: data.order ?? (isIndex ? 0 : undefined),
+      order: page.frontmatter.order ?? (isIndex ? 0 : undefined),
     }
 
     if (page.slugs.length > 1) {