@raystack/chronicle 0.1.0-canary.6b53016 → 0.1.0-canary.9b7d924

package/src/cli/utils/scaffold.ts

@@ -1,33 +1,7 @@
-import { execSync } from 'child_process'
-import { createRequire } from 'module'
 import fs from 'fs'
 import path from 'path'
-import chalk from 'chalk'
 import { PACKAGE_ROOT } from './resolve'
 
-const COPY_FILES = ['src', 'source.config.ts', 'tsconfig.json']
-
-function copyRecursive(src: string, dest: string) {
-  const stat = fs.statSync(src)
-  if (stat.isDirectory()) {
-    fs.mkdirSync(dest, { recursive: true })
-    for (const entry of fs.readdirSync(src)) {
-      copyRecursive(path.join(src, entry), path.join(dest, entry))
-    }
-  } else {
-    fs.copyFileSync(src, dest)
-  }
-}
-
-function ensureRemoved(targetPath: string) {
-  try {
-    fs.lstatSync(targetPath)
-    fs.rmSync(targetPath, { recursive: true, force: true })
-  } catch {
-    // nothing exists, proceed
-  }
-}
-
 export function detectPackageManager(): string {
   if (process.env.npm_config_user_agent) {
     return process.env.npm_config_user_agent.split('/')[0]
@@ -39,93 +13,8 @@ export function detectPackageManager(): string {
   return 'npm'
 }
 
-function generateNextConfig(scaffoldPath: string) {
-  const config = `import { createMDX } from 'fumadocs-mdx/next'
-
-const withMDX = createMDX()
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
-
-export default withMDX(nextConfig)
-`
-  fs.writeFileSync(path.join(scaffoldPath, 'next.config.mjs'), config)
-}
-
-function createPackageJson(): Record<string, unknown> {
-  return {
-    name: 'chronicle-docs',
-    private: true,
-    dependencies: {
-      '@raystack/chronicle': 'latest',
-    },
-    devDependencies: {
-      '@raystack/tools-config': '0.56.0',
-      'openapi-types': '^12.1.3',
-      typescript: '5.9.3',
-      '@types/react': '^19.2.10',
-      '@types/node': '^25.1.0',
-    },
-  }
-}
-
-function ensureDeps() {
-  const cwd = process.cwd()
-  const cwdPkgJson = path.join(cwd, 'package.json')
-  const cwdNodeModules = path.join(cwd, 'node_modules')
-
-  if (fs.existsSync(cwdPkgJson) && fs.existsSync(cwdNodeModules)) {
-    // Case 1: existing project with deps installed
-    return
-  }
-
-  // Case 2: no package.json — create in cwd and install
-  if (!fs.existsSync(cwdPkgJson)) {
-    fs.writeFileSync(cwdPkgJson, JSON.stringify(createPackageJson(), null, 2) + '\n')
-  }
-
-  if (!fs.existsSync(cwdNodeModules)) {
-    const pm = detectPackageManager()
-    console.log(chalk.cyan(`Installing dependencies with ${pm}...`))
-    execSync(`${pm} install`, { cwd, stdio: 'inherit' })
-  }
-}
-
-export function resolveNextCli(): string {
-  const cwdRequire = createRequire(path.join(process.cwd(), 'package.json'))
-  return cwdRequire.resolve('next/dist/bin/next')
-}
-
-export function scaffoldDir(contentDir: string): string {
-  const scaffoldPath = path.join(process.cwd(), '.chronicle')
-
-  // Create .chronicle/ if not exists
-  if (!fs.existsSync(scaffoldPath)) {
-    fs.mkdirSync(scaffoldPath, { recursive: true })
-  }
-
-  // Copy package files
-  for (const name of COPY_FILES) {
-    const src = path.join(PACKAGE_ROOT, name)
-    const dest = path.join(scaffoldPath, name)
-    ensureRemoved(dest)
-    copyRecursive(src, dest)
-  }
-
-  // Generate next.config.mjs
-  generateNextConfig(scaffoldPath)
-
-  // Symlink content dir
-  const contentLink = path.join(scaffoldPath, 'content')
-  ensureRemoved(contentLink)
-  fs.symlinkSync(path.resolve(contentDir), contentLink)
-
-  // Ensure dependencies are available
-  ensureDeps()
-
-  console.log(chalk.gray(`Scaffold: ${scaffoldPath}`))
-
-  return scaffoldPath
+export function getChronicleVersion(): string {
+  const pkgPath = path.join(PACKAGE_ROOT, 'package.json')
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
+  return pkg.version
 }

package/src/components/mdx/code.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import type { ComponentProps } from 'react'
+import { type ComponentProps, isValidElement, Children } from 'react'
+import { Mermaid } from './mermaid'
 import styles from './code.module.css'
 
 type PreProps = ComponentProps<'pre'> & {
@@ -16,6 +17,14 @@ export function MdxCode({ children, className, ...props }: ComponentProps<'code'
 }
 
 export function MdxPre({ children, title, className, ...props }: PreProps) {
+  // Detect mermaid code blocks
+  if (isValidElement(children)) {
+    const childProps = children.props as { className?: string; children?: string }
+    if (childProps.className?.includes('language-mermaid') && typeof childProps.children === 'string') {
+      return <Mermaid chart={childProps.children} />
+    }
+  }
+
   return (
     <div className={styles.codeBlock}>
       {title && <div className={styles.codeHeader}>{title}</div>}

package/src/components/mdx/details.module.css

@@ -4,32 +4,9 @@
   margin: var(--rs-space-5) 0;
 }
 
-.summary {
-  padding: var(--rs-space-4) var(--rs-space-5);
-  cursor: pointer;
+.trigger {
   font-weight: 500;
   font-size: var(--rs-font-size-small);
-  color: var(--rs-color-text-base-primary);
-  background: var(--rs-color-background-base-secondary);
-  list-style: none;
-  display: flex;
-  align-items: center;
-  gap: var(--rs-space-3);
-}
-
-.summary::-webkit-details-marker {
-  display: none;
-}
-
-.summary::before {
-  content: '▶';
-  font-size: 10px;
-  transition: transform 0.2s ease;
-  color: var(--rs-color-text-base-secondary);
-}
-
-.details[open] > .summary::before {
-  transform: rotate(90deg);
 }
 
 .content {

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,50 @@
 "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>>();
+
+  useEffect(() => {
+    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}`);
+        setResults(await res.json());
+      } catch {
+        setResults([]);
+      }
+      setIsLoading(false);
+    }, 100);
+    return () => 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 +55,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 +84,6 @@ export function Search({ className }: SearchProps) {
     return () => document.removeEventListener("keydown", down);
   }, []);
 
-  const results = deduplicateByUrl(
-    query.data === "empty" ? [] : (query.data ?? []),
-  );
-
   return (
     <>
       <Button
@@ -91,17 +111,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 +131,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 +139,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 +148,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 +162,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

@@ -51,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) }}
+        />
+      )}
+    </>
+  )
+}