@raystack/chronicle 0.1.0-canary.5a2be79 → 0.1.0-canary.5a730d4

package/src/server/handlers/search.ts

@@ -0,0 +1,140 @@
+import fs from 'fs/promises'
+import path from 'path'
+import matter from 'gray-matter'
+import MiniSearch from 'minisearch'
+import type { OpenAPIV3 } from 'openapi-types'
+import { loadConfig } from '@/lib/config'
+import { loadApiSpecs, type ApiSpec } from '@/lib/openapi'
+import { getSpecSlug } from '@/lib/api-routes'
+
+interface SearchDocument {
+  id: string
+  url: string
+  title: string
+  content: string
+  type: 'page' | 'api'
+}
+
+let searchIndex: MiniSearch<SearchDocument> | null = null
+
+function getContentDir(): string {
+  return process.env.CHRONICLE_CONTENT_DIR || path.join(process.cwd(), 'content')
+}
+
+async function scanContent(): Promise<SearchDocument[]> {
+  const contentDir = getContentDir()
+  const docs: SearchDocument[] = []
+
+  async function scan(dir: string, prefix: string[] = []) {
+    let entries
+    try { entries = await fs.readdir(dir, { withFileTypes: true }) }
+    catch { return }
+
+    for (const entry of entries) {
+      if (entry.name.startsWith('.') || entry.name === 'node_modules') continue
+      const fullPath = path.join(dir, entry.name)
+
+      if (entry.isDirectory()) {
+        await scan(fullPath, [...prefix, entry.name])
+        continue
+      }
+
+      if (!entry.name.endsWith('.mdx') && !entry.name.endsWith('.md')) continue
+
+      const raw = await fs.readFile(fullPath, 'utf-8')
+      const { data: fm, content } = matter(raw)
+      const baseName = entry.name.replace(/\.(mdx|md)$/, '')
+      const slugs = baseName === 'index' ? prefix : [...prefix, baseName]
+      const url = slugs.length === 0 ? '/' : '/' + slugs.join('/')
+
+      docs.push({
+        id: url,
+        url,
+        title: fm.title ?? baseName,
+        content: content.slice(0, 5000),
+        type: 'page',
+      })
+    }
+  }
+
+  await scan(contentDir)
+  return docs
+}
+
+function buildApiDocs(): SearchDocument[] {
+  const config = loadConfig()
+  if (!config.api?.length) return []
+
+  const docs: SearchDocument[] = []
+  const specs = loadApiSpecs(config.api)
+
+  for (const spec of specs) {
+    const specSlug = getSpecSlug(spec)
+    const paths = spec.document.paths ?? {}
+    for (const [pathStr, pathItem] of Object.entries(paths)) {
+      if (!pathItem) continue
+      for (const method of ['get', 'post', 'put', 'delete', 'patch'] as const) {
+        const op = pathItem[method] as OpenAPIV3.OperationObject | undefined
+        if (!op?.operationId) continue
+        const url = `/apis/${specSlug}/${encodeURIComponent(op.operationId)}`
+        docs.push({
+          id: url,
+          url,
+          title: `${method.toUpperCase()} ${op.summary ?? op.operationId}`,
+          content: op.description ?? '',
+          type: 'api',
+        })
+      }
+    }
+  }
+
+  return docs
+}
+
+async function getIndex(): Promise<MiniSearch<SearchDocument>> {
+  if (searchIndex) return searchIndex
+
+  const [contentDocs, apiDocs] = await Promise.all([
+    scanContent(),
+    Promise.resolve(buildApiDocs()),
+  ])
+
+  searchIndex = new MiniSearch<SearchDocument>({
+    fields: ['title', 'content'],
+    storeFields: ['url', 'title', 'type'],
+    searchOptions: {
+      boost: { title: 2 },
+      fuzzy: 0.2,
+      prefix: true,
+    },
+  })
+
+  searchIndex.addAll([...contentDocs, ...apiDocs])
+  return searchIndex
+}
+
+export async function handleSearch(req: Request): Promise<Response> {
+  const url = new URL(req.url)
+  const query = url.searchParams.get('query') ?? ''
+  const index = await getIndex()
+
+  if (!query) {
+    const contentDocs = await scanContent()
+    const suggestions = contentDocs.slice(0, 8).map((d) => ({
+      id: d.id,
+      url: d.url,
+      type: d.type,
+      content: d.title,
+    }))
+    return Response.json(suggestions)
+  }
+
+  const results = index.search(query).map((r) => ({
+    id: r.id,
+    url: r.url,
+    type: r.type,
+    content: r.title,
+  }))
+
+  return Response.json(results)
+}

package/src/server/handlers/sitemap.ts

@@ -0,0 +1,39 @@
+import { loadConfig } from '@/lib/config'
+import { getPages } from '@/lib/source'
+import { loadApiSpecs } from '@/lib/openapi'
+import { buildApiRoutes } from '@/lib/api-routes'
+
+export async function handleSitemap(): Promise<Response> {
+  const config = loadConfig()
+  if (!config.url) {
+    return new Response('<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"/>', {
+      headers: { 'Content-Type': 'application/xml' },
+    })
+  }
+
+  const baseUrl = config.url.replace(/\/$/, '')
+
+  const pages = await getPages()
+  const docPages = pages.map((page) => {
+    const lastmod = page.frontmatter.lastModified
+      ? `<lastmod>${new Date(page.frontmatter.lastModified).toISOString()}</lastmod>`
+      : ''
+    return `<url><loc>${baseUrl}/${page.slugs.join('/')}</loc>${lastmod}</url>`
+  })
+
+  const apiPages = config.api?.length
+    ? buildApiRoutes(loadApiSpecs(config.api)).map((route) =>
+        `<url><loc>${baseUrl}/apis/${route.slug.join('/')}</loc></url>`
+      )
+    : []
+
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+<url><loc>${baseUrl}</loc></url>
+${[...docPages, ...apiPages].join('\n')}
+</urlset>`
+
+  return new Response(xml, {
+    headers: { 'Content-Type': 'application/xml' },
+  })
+}

package/src/server/handlers/specs.ts

@@ -0,0 +1,9 @@
+import { loadConfig } from '@/lib/config'
+import { loadApiSpecs } from '@/lib/openapi'
+
+export function handleSpecs(): Response {
+  const config = loadConfig()
+  const specs = config.api?.length ? loadApiSpecs(config.api) : []
+
+  return Response.json(specs)
+}

package/src/server/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!--head-outlet-->
+  </head>
+  <body>
+    <div id="root"><!--ssr-outlet--></div>
+    <script type="module" src="/src/server/entry-client.tsx"></script>
+  </body>
+</html>

package/src/server/prod.ts

@@ -0,0 +1,18 @@
+import path from 'path'
+import chalk from 'chalk'
+
+export interface ProdServerOptions {
+  port: number
+  root: string
+  distDir: string
+}
+
+export async function startProdServer(options: ProdServerOptions) {
+  const { port, distDir } = options
+
+  const serverEntry = path.resolve(distDir, 'server/entry-prod.js')
+  const { startServer } = await import(serverEntry)
+
+  console.log(chalk.cyan('Starting production server...'))
+  return startServer({ port, distDir })
+}

package/src/server/router.ts

@@ -0,0 +1,42 @@
+import { handleHealth } from './handlers/health'
+import { handleSearch } from './handlers/search'
+import { handleApisProxy } from './handlers/apis-proxy'
+import { handleOg } from './handlers/og'
+import { handleLlms } from './handlers/llms'
+import { handleSitemap } from './handlers/sitemap'
+import { handleRobots } from './handlers/robots'
+import { handleSpecs } from './handlers/specs'
+
+export type RouteHandler = (req: Request) => Response | Promise<Response>
+
+interface Route {
+  pattern: URLPattern
+  handler: RouteHandler
+}
+
+const routes: Route[] = []
+
+function addRoute(path: string, handler: RouteHandler) {
+  routes.push({
+    pattern: new URLPattern({ pathname: path }),
+    handler,
+  })
+}
+
+addRoute('/api/health', handleHealth)
+addRoute('/api/search', handleSearch)
+addRoute('/api/apis-proxy', handleApisProxy)
+addRoute('/api/specs', handleSpecs)
+addRoute('/og', handleOg)
+addRoute('/llms.txt', handleLlms)
+addRoute('/sitemap.xml', handleSitemap)
+addRoute('/robots.txt', handleRobots)
+
+export function matchRoute(url: string): RouteHandler | null {
+  for (const route of routes) {
+    if (route.pattern.test(url)) {
+      return route.handler
+    }
+  }
+  return null
+}

package/src/server/vite-config.ts

@@ -0,0 +1,65 @@
+import path from 'path'
+import { type InlineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import mdx from '@mdx-js/rollup'
+import remarkDirective from 'remark-directive'
+import remarkGfm from 'remark-gfm'
+import remarkFrontmatter from 'remark-frontmatter'
+import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
+import rehypeShiki from '@shikijs/rehype'
+
+export interface ViteConfigOptions {
+  root: string
+  contentDir: string
+  isDev?: boolean
+}
+
+export async function createViteConfig(options: ViteConfigOptions): Promise<InlineConfig> {
+  const { root, contentDir, isDev = false } = options
+
+  return {
+    root,
+    configFile: false,
+    resolve: {
+      alias: {
+        '@': path.resolve(root, 'src'),
+        '@content': contentDir,
+      },
+    },
+    plugins: [
+      mdx({
+        remarkPlugins: [
+          remarkFrontmatter,
+          remarkMdxFrontmatter,
+          remarkGfm,
+          remarkDirective,
+        ],
+        rehypePlugins: [
+          [rehypeShiki, { themes: { light: 'github-light', dark: 'github-dark' } }],
+        ],
+        mdExtensions: ['.md'],
+        mdxExtensions: ['.mdx'],
+      }),
+      react(),
+    ],
+    define: {
+      'process.env.CHRONICLE_CONTENT_DIR': JSON.stringify(contentDir),
+      'process.env.CHRONICLE_PROJECT_ROOT': JSON.stringify(root),
+    },
+    css: {
+      modules: {
+        localsConvention: 'camelCase',
+      },
+    },
+    ssr: {
+      noExternal: ['@raystack/apsara'],
+    },
+    build: {
+      rolldownOptions: {
+        input: isDev ? undefined : {
+          client: path.resolve(root, 'src/server/index.html'),
+        },
+      },
+    },
+  }
+}

package/src/themes/default/Layout.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import { useMemo, useEffect, useRef } from "react";
-import { usePathname } from "next/navigation";
-import NextLink from "next/link";
+import { useLocation, Link } from "react-router-dom";
 import { cx } from "class-variance-authority";
-import { Flex, Navbar, Headline, Link, Sidebar, Button } from "@raystack/apsara";
+import { Flex, Navbar, Headline, Sidebar, Button } from "@raystack/apsara";
 import { RectangleStackIcon } from "@heroicons/react/24/outline";
 import { ClientThemeSwitcher } from "@/components/ui/client-theme-switcher";
 import { Search } from "@/components/ui/search";
@@ -25,7 +24,7 @@ const iconMap: Record<string, React.ReactNode> = {
 let savedScrollTop = 0;
 
 export function Layout({ children, config, tree, classNames }: ThemeLayoutProps) {
-  const pathname = usePathname();
+  const { pathname } = useLocation();
   const scrollRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -45,21 +44,21 @@ export function Layout({ children, config, tree, classNames }: ThemeLayoutProps)
     <Flex direction="column" className={cx(styles.layout, classNames?.layout)}>
       <Navbar className={styles.header}>
         <Navbar.Start>
-          <NextLink href="/" style={{ textDecoration: 'none', color: 'inherit' }}>
+          <Link to="/" style={{ textDecoration: 'none', color: 'inherit' }}>
             <Headline size="small" weight="medium" as="h1">
               {config.title}
             </Headline>
-          </NextLink>
+          </Link>
         </Navbar.Start>
         <Navbar.End>
           <Flex gap="medium" align="center" className={styles.navActions}>
             {config.api?.map((api) => (
-              <NextLink key={api.basePath} href={api.basePath} className={styles.navButton}>
+              <Link key={api.name} to={api.basePath} className={styles.navButton}>
                 {api.name} API
-              </NextLink>
+              </Link>
             ))}
             {config.navigation?.links?.map((link) => (
-              <Link key={link.href} href={link.href}>
+              <Link key={link.href} to={link.href}>
                 {link.label}
               </Link>
             ))}
@@ -118,7 +117,7 @@ function SidebarNode({
 
   const isActive = pathname === item.url;
   const href = item.url ?? "#";
-  const link = useMemo(() => <NextLink href={href} scroll={false} />, [href]);
+  const link = useMemo(() => <Link to={href} />, [href]);
 
   return (
     <Sidebar.Item

package/src/themes/default/Page.module.css

@@ -38,9 +38,65 @@
   margin-bottom: var(--rs-space-3);
 }
 
+.content :global(pre code span) {
+  color: var(--shiki-light);
+}
+
+:global([data-theme="dark"]) .content :global(pre code span) {
+  color: var(--shiki-dark);
+}
+
+:global([data-theme="dark"]) .content :global(pre) {
+  background-color: var(--shiki-dark-bg, #24292e);
+}
+
+.content img {
+  max-width: 100%;
+  height: auto;
+}
+
 .content table {
   display: block;
   max-width: 100%;
   overflow-x: auto;
   margin-bottom: var(--rs-space-5);
 }
+
+.content details {
+  border: 1px solid var(--rs-color-border-base-primary);
+  border-radius: var(--rs-radius-2);
+  margin: var(--rs-space-5) 0;
+  overflow: hidden;
+}
+
+.content details 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);
+}
+
+.content details summary::-webkit-details-marker {
+  display: none;
+}
+
+.content details summary::before {
+  content: '▶';
+  font-size: 10px;
+  transition: transform 0.2s ease;
+  color: var(--rs-color-text-base-secondary);
+}
+
+.content details[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+.content details > :not(summary) {
+  padding: var(--rs-space-4) var(--rs-space-5);
+}

package/src/themes/default/font.ts

@@ -1,6 +1,4 @@
-import { Inter } from 'next/font/google'
-
-export const inter = Inter({
-  subsets: ['latin'],
-  display: 'swap',
-})
+export const inter = {
+  className: 'chronicle-inter',
+  style: { fontFamily: "'Inter', system-ui, -apple-system, sans-serif" },
+}

package/src/themes/paper/ChapterNav.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { usePathname } from 'next/navigation'
-import NextLink from 'next/link'
+import { useLocation, Link } from 'react-router-dom'
 import { MethodBadge } from '@/components/api/method-badge'
 import type { PageTree, PageTreeItem } from '@/types'
 import styles from './ChapterNav.module.css'
@@ -31,7 +30,7 @@ function buildChapterIndices(children: PageTreeItem[]): Map<PageTreeItem, number
 }
 
 export function ChapterNav({ tree }: ChapterNavProps) {
-  const pathname = usePathname()
+  const { pathname } = useLocation()
   const chapterIndices = buildChapterIndices(tree.children)
 
   return (
@@ -84,13 +83,13 @@ function ChapterItem({ item, pathname }: { item: PageTreeItem; pathname: string
 
   return (
     <li>
-      <NextLink
-        href={item.url ?? '#'}
+      <Link
+        to={item.url ?? '#'}
         className={`${styles.link} ${isActive ? styles.active : ''}`}
       >
         {icon && <span className={styles.icon}>{icon}</span>}
         <span>{item.name}</span>
-      </NextLink>
+      </Link>
     </li>
   )
 }

package/src/themes/paper/Page.tsx

@@ -1,8 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import { usePathname } from 'next/navigation'
-import NextLink from 'next/link'
+import { useLocation, Link } from 'react-router-dom'
 import { Flex } from '@raystack/apsara'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
 import type { ThemePageProps, PageTreeItem } from '@/types'
@@ -41,7 +40,7 @@ function findInTree(items: PageTreeItem[], path: string): PageTreeItem | undefin
 }
 
 export function Page({ page, config, tree }: ThemePageProps) {
-  const pathname = usePathname()
+  const { pathname } = useLocation()
 
   const { prev, next, crumbs } = useMemo(() => {
     const pages = flattenTree(tree.children)
@@ -59,18 +58,18 @@ export function Page({ page, config, tree }: ThemePageProps) {
         <Flex align="center" className={styles.navbar}>
           <Flex align="center" gap="small" className={styles.navLeft}>
             {prev ? (
-              <NextLink href={prev.url!} className={styles.arrow} aria-label="Previous page">
+              <Link to={prev.url!} className={styles.arrow} aria-label="Previous page">
                 <ChevronLeftIcon width={14} height={14} />
-              </NextLink>
+              </Link>
             ) : (
               <button disabled className={styles.arrowDisabled} aria-label="Previous page">
                 <ChevronLeftIcon width={14} height={14} />
               </button>
             )}
             {next ? (
-              <NextLink href={next.url!} className={styles.arrow} aria-label="Next page">
+              <Link to={next.url!} className={styles.arrow} aria-label="Next page">
                 <ChevronRightIcon width={14} height={14} />
-              </NextLink>
+              </Link>
             ) : (
               <button disabled className={styles.arrowDisabled} aria-label="Next page">
                 <ChevronRightIcon width={14} height={14} />
@@ -83,9 +82,9 @@ export function Page({ page, config, tree }: ThemePageProps) {
                   {i === crumbs.length - 1 ? (
                     <span className={styles.crumbActive}>{crumb.label}</span>
                   ) : (
-                    <NextLink href={crumb.href} className={styles.crumbLink}>
+                    <Link to={crumb.href} className={styles.crumbLink}>
                       {crumb.label}
-                    </NextLink>
+                    </Link>
                   )}
                 </span>
               ))}

package/src/types/config.ts

@@ -1,6 +1,7 @@
 export interface ChronicleConfig {
   title: string
   description?: string
+  url?: string
   logo?: LogoConfig
   theme?: ThemeConfig
   navigation?: NavigationConfig
@@ -8,12 +9,22 @@ export interface ChronicleConfig {
   footer?: FooterConfig
   api?: ApiConfig[]
   llms?: LlmsConfig
+  analytics?: AnalyticsConfig
 }
 
 export interface LlmsConfig {
   enabled?: boolean
 }
 
+export interface AnalyticsConfig {
+  enabled?: boolean
+  googleAnalytics?: GoogleAnalyticsConfig
+}
+
+export interface GoogleAnalyticsConfig {
+  measurementId: string
+}
+
 export interface ApiConfig {
   name: string
   spec: string

package/src/types/content.ts

@@ -5,6 +5,7 @@ export interface Frontmatter {
   description?: string
   order?: number
   icon?: string
+  lastModified?: string
 }
 
 export interface Page {

package/tsconfig.json

@@ -21,10 +21,9 @@
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "moduleResolution": "bundler",
     "paths": {
-      "@/*": ["./src/*"],
-      "@/.source/*": ["./.source/*"]
+      "@/*": ["./src/*"]
     }
   },
-  "include": ["src", ".source", "source.config.ts"],
+  "include": ["src"],
   "exclude": ["node_modules", "dist"]
 }

package/next.config.mjs

@@ -1,10 +0,0 @@
-import { createMDX } from 'fumadocs-mdx/next'
-
-const withMDX = createMDX()
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
-
-export default withMDX(nextConfig)

package/source.config.ts

@@ -1,50 +0,0 @@
-import { defineDocs, defineConfig, frontmatterSchema } from 'fumadocs-mdx/config'
-import { z } from 'zod'
-import remarkDirective from 'remark-directive'
-import { remarkDirectiveAdmonition, remarkMdxMermaid } from 'fumadocs-core/mdx-plugins'
-import remarkUnusedDirectives from './src/lib/remark-unused-directives'
-
-const contentDir = process.env.CHRONICLE_CONTENT_DIR || './content'
-
-export const docs = defineDocs({
-  dir: contentDir,
-  docs: {
-    schema: frontmatterSchema.extend({
-      order: z.number().optional(),
-    }),
-    postprocess: {
-      includeProcessedMarkdown: true,
-    },
-    files: ['**/*.mdx', '**/*.md', '!**/node_modules/**'],
-  },
-})
-
-export default defineConfig({
-  mdxOptions: {
-    remarkPlugins: [
-      remarkDirective,
-      [
-        remarkDirectiveAdmonition,
-        {
-          tags: {
-            CalloutContainer: 'Callout',
-            CalloutTitle: 'CalloutTitle',
-            CalloutDescription: 'CalloutDescription',
-          },
-          types: {
-            note: 'accent',
-            tip: 'accent',
-            info: 'accent',
-            warn: 'attention',
-            warning: 'attention',
-            danger: 'alert',
-            caution: 'alert',
-            success: 'success',
-          },
-        },
-      ],
-      remarkUnusedDirectives,
-      remarkMdxMermaid,
-    ],
-  },
-})