@raystack/chronicle 0.1.0-canary.5a730d4 → 0.1.0-canary.6511afe

package/src/cli/utils/scaffold.ts

@@ -1,20 +1,18 @@
-import fs from 'fs'
-import path from 'path'
-import { PACKAGE_ROOT } from './resolve'
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { PACKAGE_ROOT } from './resolve';
 
-export function detectPackageManager(): string {
-  if (process.env.npm_config_user_agent) {
-    return process.env.npm_config_user_agent.split('/')[0]
+export async function linkContent(contentDir: string): Promise<void> {
+  const linkPath = path.join(PACKAGE_ROOT, '.content');
+  const target = path.resolve(contentDir);
+
+  try {
+    const existing = await fs.readlink(linkPath);
+    if (existing === target) return;
+    await fs.unlink(linkPath);
+  } catch {
+    // link doesn't exist
   }
-  const cwd = process.cwd()
-  if (fs.existsSync(path.join(cwd, 'bun.lock')) || fs.existsSync(path.join(cwd, 'bun.lockb'))) return 'bun'
-  if (fs.existsSync(path.join(cwd, 'pnpm-lock.yaml'))) return 'pnpm'
-  if (fs.existsSync(path.join(cwd, 'yarn.lock'))) return 'yarn'
-  return 'npm'
-}
 
-export function getChronicleVersion(): string {
-  const pkgPath = path.join(PACKAGE_ROOT, 'package.json')
-  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
-  return pkg.version
+  await fs.symlink(target, linkPath);
 }

package/src/components/mdx/code.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { type ComponentProps, isValidElement, Children } from 'react'
-import { Mermaid } from './mermaid'
+import type { ComponentProps } from 'react'
 import styles from './code.module.css'
 
 type PreProps = ComponentProps<'pre'> & {
@@ -17,14 +16,6 @@ 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,9 +4,32 @@
   margin: var(--rs-space-5) 0;
 }
 
-.trigger {
+.summary {
+  padding: var(--rs-space-4) var(--rs-space-5);
+  cursor: pointer;
   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,8 +1,9 @@
 import type { ComponentProps } from 'react'
+import styles from './details.module.css'
 
 export function MdxDetails({ children, className, ...props }: ComponentProps<'details'>) {
   return (
-    <details className={className} {...props}>
+    <details className={`${styles.details} ${className ?? ''}`} {...props}>
       {children}
     </details>
   )
@@ -10,7 +11,7 @@ export function MdxDetails({ children, className, ...props }: ComponentProps<'de
 
 export function MdxSummary({ children, className, ...props }: ComponentProps<'summary'>) {
   return (
-    <summary className={className} {...props}>
+    <summary className={`${styles.summary} ${className ?? ''}`} {...props}>
       {children}
     </summary>
   )

package/src/components/mdx/image.tsx

@@ -1,24 +1,9 @@
-'use client'
+import type { ComponentProps } from 'react';
 
-import type { ComponentProps } from 'react'
+type ImageProps = ComponentProps<'img'>;
 
-type ImageProps = Omit<ComponentProps<'img'>, 'src'> & {
-  src?: string
-  width?: number | string
-  height?: number | string
-}
-
-export function Image({ src, alt, width, height, ...props }: ImageProps) {
-  if (!src || typeof src !== 'string') return null
+export function Image({ src, alt, ...props }: ImageProps) {
+  if (!src) return null;
 
-  return (
-    <img
-      src={src}
-      alt={alt ?? ''}
-      width={width}
-      height={height}
-      loading="lazy"
-      {...props}
-    />
-  )
+  return <img src={src} alt={alt ?? ''} loading='lazy' {...props} />;
 }

package/src/components/mdx/index.tsx

@@ -1,6 +1,6 @@
 import type { MDXComponents } from 'mdx/types'
 import { Image } from './image'
-import { MdxLink } from './link'
+import { Link } 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: MdxLink,
+  a: Link,
   table: MdxTable,
   thead: MdxThead,
   tbody: MdxTbody,
@@ -32,4 +32,4 @@ export const mdxComponents: MDXComponents = {
 }
 
 export { Image } from './image'
-export { MdxLink } from './link'
+export { Link } from './link'

package/src/components/mdx/link.tsx

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

package/src/components/ui/footer.tsx

@@ -1,5 +1,4 @@
-import { Link } from "react-router-dom";
-import { Flex, Text } from "@raystack/apsara";
+import { Flex, Link, Text } from "@raystack/apsara";
 import type { FooterConfig } from "@/types";
 import styles from "./footer.module.css";
 
@@ -19,7 +18,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} to={link.href} className={styles.link}>
+              <Link key={link.href} href={link.href} className={styles.link}>
                 {link.label}
               </Link>
             ))}

package/src/components/ui/search.tsx

@@ -1,51 +1,19 @@
-"use client";
-
-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 { 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 };
-}
+import { DocumentIcon, HashtagIcon } from '@heroicons/react/24/outline';
+import { Button, Command, Dialog, Text } from '@raystack/apsara';
+import { cx } from 'class-variance-authority';
+import type { SortedResult } from 'fumadocs-core/search';
+import { useDocsSearch } from 'fumadocs-core/search/client';
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { MethodBadge } from '@/components/api/method-badge';
+import styles from './search.module.css';
 
 function SearchShortcutKey({ className }: { className?: string }) {
-  const [key, setKey] = useState("\u2318");
+  const [key, setKey] = useState('⌘');
 
   useEffect(() => {
-    setKey(isMacOs ? "\u2318" : "Ctrl");
+    const isMac = navigator.platform?.toUpperCase().includes('MAC');
+    setKey(isMac ? '⌘' : 'Ctrl');
   }, []);
 
   return (
@@ -62,35 +30,44 @@ interface SearchProps {
 export function Search({ className }: SearchProps) {
   const [open, setOpen] = useState(false);
   const navigate = useNavigate();
-  const [search, setSearch] = useState("");
-  const { results, isLoading } = useSearch(search);
+
+  const { search, setSearch, query } = useDocsSearch({
+    type: 'fetch',
+    api: '/api/search',
+    delayMs: 100,
+    allowEmpty: true
+  });
 
   const onSelect = useCallback(
     (url: string) => {
       setOpen(false);
       navigate(url);
     },
-    [navigate],
+    [navigate]
   );
 
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
-      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
-        setOpen((open) => !open);
+        setOpen(open => !open);
       }
     };
 
-    document.addEventListener("keydown", down);
-    return () => document.removeEventListener("keydown", down);
+    document.addEventListener('keydown', down);
+    return () => document.removeEventListener('keydown', down);
   }, []);
 
+  const results = deduplicateByUrl(
+    query.data === 'empty' ? [] : (query.data ?? [])
+  );
+
   return (
     <>
       <Button
-        variant="outline"
-        color="neutral"
-        size="small"
+        variant='outline'
+        color='neutral'
+        size='small'
         onClick={() => setOpen(true)}
         className={cx(styles.trigger, className)}
         trailingIcon={<SearchShortcutKey className={styles.kbd} />}
@@ -105,24 +82,24 @@ export function Search({ className }: SearchProps) {
           </Dialog.Title>
           <Command loop>
             <Command.Input
-              placeholder="Search"
+              placeholder='Search'
               value={search}
               onValueChange={setSearch}
               className={styles.input}
             />
 
             <Command.List className={styles.list}>
-              {isLoading && <Command.Empty>Loading...</Command.Empty>}
-              {!isLoading &&
+              {query.isLoading && <Command.Empty>Loading...</Command.Empty>}
+              {!query.isLoading &&
                 search.length > 0 &&
                 results.length === 0 && (
                   <Command.Empty>No results found.</Command.Empty>
                 )}
-              {!isLoading &&
+              {!query.isLoading &&
                 search.length === 0 &&
                 results.length > 0 && (
-                  <Command.Group heading="Suggestions">
-                    {results.slice(0, 8).map((result) => (
+                  <Command.Group heading='Suggestions'>
+                    {results.slice(0, 8).map((result: SortedResult) => (
                       <Command.Item
                         key={result.id}
                         value={result.id}
@@ -132,7 +109,9 @@ export function Search({ className }: SearchProps) {
                         <div className={styles.itemContent}>
                           {getResultIcon(result)}
                           <Text className={styles.pageText}>
-                            {result.content}
+                            <HighlightedText
+                              html={stripMethod(result.content)}
+                            />
                           </Text>
                         </div>
                       </Command.Item>
@@ -140,7 +119,7 @@ export function Search({ className }: SearchProps) {
                   </Command.Group>
                 )}
               {search.length > 0 &&
-                results.map((result) => (
+                results.map((result: SortedResult) => (
                   <Command.Item
                     key={result.id}
                     value={result.id}
@@ -149,9 +128,27 @@ export function Search({ className }: SearchProps) {
                   >
                     <div className={styles.itemContent}>
                       {getResultIcon(result)}
-                      <Text className={styles.pageText}>
-                        {result.content}
-                      </Text>
+                      <div className={styles.resultText}>
+                        {result.type === 'heading' ? (
+                          <>
+                            <Text className={styles.headingText}>
+                              <HighlightedText
+                                html={stripMethod(result.content)}
+                              />
+                            </Text>
+                            <Text className={styles.separator}>-</Text>
+                            <Text className={styles.pageText}>
+                              {getPageTitle(result.url)}
+                            </Text>
+                          </>
+                        ) : (
+                          <Text className={styles.pageText}>
+                            <HighlightedText
+                              html={stripMethod(result.content)}
+                            />
+                          </Text>
+                        )}
+                      </div>
                     </div>
                   </Command.Item>
                 ))}
@@ -163,12 +160,59 @@ export function Search({ className }: SearchProps) {
   );
 }
 
-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;
+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 HighlightedText({
+  html,
+  className
+}: {
+  html: string;
+  className?: string;
+}) {
+  return (
+    <span className={className} dangerouslySetInnerHTML={{ __html: html }} />
+  );
+}
+
+function getResultIcon(result: SortedResult): React.ReactNode {
+  if (!result.url.startsWith('/apis/')) {
+    return result.type === 'page' ? (
+      <DocumentIcon className={styles.icon} />
+    ) : (
+      <HashtagIcon className={styles.icon} />
+    );
   }
-  return <DocumentIcon className={styles.icon} />;
+  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(' ');
 }

package/src/lib/config.ts

@@ -1,56 +1,58 @@
-import fs from 'fs'
-import path from 'path'
-import { parse } from 'yaml'
-import type { ChronicleConfig } from '@/types'
+import fs from 'node:fs';
+import path from 'node:path';
+import { parse } from 'yaml';
+import type { ChronicleConfig } from '@/types';
 
-const CONFIG_FILE = 'chronicle.yaml'
+const CONFIG_FILE = 'chronicle.yaml';
 
 const defaultConfig: ChronicleConfig = {
   title: 'Documentation',
   theme: { name: 'default' },
-  search: { enabled: true, placeholder: 'Search...' },
-}
+  search: { enabled: true, placeholder: 'Search...' }
+};
 
 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
+  const projectRoot =
+    typeof __CHRONICLE_PROJECT_ROOT__ !== 'undefined'
+      ? __CHRONICLE_PROJECT_ROOT__
+      : process.cwd();
+
+  const rootPath = path.join(projectRoot, CONFIG_FILE);
+  if (fs.existsSync(rootPath)) return rootPath;
+
+  const contentDir =
+    typeof __CHRONICLE_CONTENT_DIR__ !== 'undefined'
+      ? __CHRONICLE_CONTENT_DIR__
+      : undefined;
   if (contentDir) {
-    const contentPath = path.join(contentDir, CONFIG_FILE)
-    if (fs.existsSync(contentPath)) return contentPath
+    const contentPath = path.join(contentDir, CONFIG_FILE);
+    if (fs.existsSync(contentPath)) return contentPath;
   }
-  return null
+
+  return null;
 }
 
 export function loadConfig(): ChronicleConfig {
-  const configPath = resolveConfigPath()
+  const configPath = resolveConfigPath();
 
   if (!configPath) {
-    return defaultConfig
+    return defaultConfig;
   }
 
-  const raw = fs.readFileSync(configPath, 'utf-8')
-  const userConfig = parse(raw) as Partial<ChronicleConfig>
+  const raw = fs.readFileSync(configPath, 'utf-8');
+  const userConfig = parse(raw) as Partial<ChronicleConfig>;
 
   return {
     ...defaultConfig,
     ...userConfig,
     theme: {
       name: userConfig.theme?.name ?? defaultConfig.theme!.name,
-      colors: { ...defaultConfig.theme?.colors, ...userConfig.theme?.colors },
+      colors: { ...defaultConfig.theme?.colors, ...userConfig.theme?.colors }
     },
     search: { ...defaultConfig.search, ...userConfig.search },
     footer: userConfig.footer,
     api: userConfig.api,
     llms: { enabled: false, ...userConfig.llms },
-    analytics: { enabled: false, ...userConfig.analytics },
-  }
-}
+    analytics: { enabled: false, ...userConfig.analytics }
+  };
+}

package/src/lib/get-llm-text.ts

@@ -0,0 +1,10 @@
+import { source } from '@/lib/source'
+import type { InferPageType } from 'fumadocs-core/source'
+
+export async function getLLMText(page: InferPageType<typeof source>) {
+  const processed = await page.data.getText('processed')
+
+  return `# ${page.data.title} (${page.url})
+
+${processed}`
+}