@raystack/chronicle 0.1.0-canary.6b53016 → 0.1.0-canary.c5d277e

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

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>
+  )
+}