@raystack/chronicle 0.10.2 → 0.10.4

package/dist/cli/index.js

@@ -46,6 +46,15 @@ var __export = (target, all) => {
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
+// src/lib/mdx-utils.ts
+var MdxNodeType;
+var init_mdx_utils = __esm(() => {
+  MdxNodeType = {
+    JsxFlow: "mdxJsxFlowElement",
+    JsxText: "mdxJsxTextElement"
+  };
+});
+
 // src/lib/remark-resolve-images.ts
 import path4 from "node:path";
 import { visit } from "unist-util-visit";
@@ -72,16 +81,29 @@ var remarkResolveImages = () => {
       return;
     const relative = filePath.slice(contentIdx + "/content/".length);
     const dir = path4.posix.dirname(relative);
+    const seen = new Set;
+    const images = [];
+    function collect(src) {
+      if (!src || seen.has(src) || /^data:/i.test(src))
+        return;
+      seen.add(src);
+      images.push(src);
+    }
     visit(tree, "image", (node) => {
       if (!node.url)
         return;
       node.url = resolveUrl(node.url, dir);
+      collect(node.url);
     });
     visit(tree, "html", (node) => {
-      node.value = node.value.replace(/(<img\b[^>]*\bsrc=["'])([^"']+)(["'])/gi, (_, before, src, after) => `${before}${resolveUrl(src, dir)}${after}`);
+      node.value = node.value.replace(/(<img\b[^>]*\bsrc=["'])([^"']+)(["'])/gi, (_, before, src, after) => {
+        const resolved = resolveUrl(src, dir);
+        collect(resolved);
+        return `${before}${resolved}${after}`;
+      });
     });
     visit(tree, (node) => {
-      if (node.type !== "mdxJsxFlowElement" && node.type !== "mdxJsxTextElement")
+      if (node.type !== MdxNodeType.JsxFlow && node.type !== MdxNodeType.JsxText)
         return;
       const jsx = node;
       if (jsx.name !== "img")
@@ -90,6 +112,7 @@ var remarkResolveImages = () => {
       if (!srcAttr?.value || typeof srcAttr.value !== "string")
         return;
       srcAttr.value = resolveUrl(srcAttr.value, dir);
+      collect(srcAttr.value);
     });
     visit(tree, "element", (node) => {
       if (node.tagName !== "img")
@@ -98,10 +121,13 @@ var remarkResolveImages = () => {
       if (typeof src !== "string")
         return;
       node.properties.src = resolveUrl(src, dir);
+      collect(node.properties.src);
     });
+    file.data.images = images;
   };
 }, remark_resolve_images_default;
 var init_remark_resolve_images = __esm(() => {
+  init_mdx_utils();
   remark_resolve_images_default = remarkResolveImages;
 });
 
@@ -360,7 +386,7 @@ async function createViteConfig(options) {
         default: defineFumadocsConfig({
           mdxOptions: {
             remarkImageOptions: false,
-            valueToExport: ["readingTime"],
+            valueToExport: ["readingTime", "images"],
             remarkPlugins: [
               remarkDirective,
               [remarkDirectiveAdmonition, {
@@ -433,6 +459,7 @@ async function createViteConfig(options) {
     },
     nitro: {
       logLevel: 2,
+      errorHandler: path6.resolve(packageRoot, "src/server/error.ts"),
       publicAssets: [{ dir: path6.resolve(projectRoot, "public") }],
       output: {
         dir: resolveOutputDir(projectRoot, preset)
@@ -808,14 +835,14 @@ var buildCommand = new Command("build").description("Build for production").opti
 // src/cli/commands/dev.ts
 import chalk3 from "chalk";
 import { Command as Command2 } from "commander";
-var devCommand = new Command2("dev").description("Start development server").option("-p, --port <port>", "Port number", "3000").option("--config <path>", "Path to chronicle.yaml").option("--host <host>", "Host address", "localhost").action(async (options) => {
+var devCommand = new Command2("dev").description("Start development server").option("-p, --port <port>", "Port number", "3000").option("--config <path>", "Path to chronicle.yaml").option("--host <host>", "Host address", "localhost").option("--preset <preset>", "Deploy preset (bun, node-server, etc.)").action(async (options) => {
   const { config: config2, projectRoot, configPath } = await loadCLIConfig(options.config);
   const port = parseInt(options.port, 10);
   await linkContent(projectRoot, config2);
   console.log(chalk3.cyan("Starting dev server..."));
   const { createServer } = await import("vite");
   const { createViteConfig: createViteConfig2 } = await Promise.resolve().then(() => (init_vite_config(), exports_vite_config));
-  const viteConfig = await createViteConfig2({ packageRoot: PACKAGE_ROOT, projectRoot, configPath });
+  const viteConfig = await createViteConfig2({ packageRoot: PACKAGE_ROOT, projectRoot, configPath, preset: options.preset });
   const server = await createServer({
     ...viteConfig,
     server: { ...viteConfig.server, port, host: options.host }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/chronicle",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Config-driven documentation framework",
   "license": "Apache-2.0",
   "type": "module",

package/src/cli/commands/dev.ts

@@ -9,6 +9,7 @@ export const devCommand = new Command('dev')
   .option('-p, --port <port>', 'Port number', '3000')
   .option('--config <path>', 'Path to chronicle.yaml')
   .option('--host <host>', 'Host address', 'localhost')
+  .option('--preset <preset>', 'Deploy preset (bun, node-server, etc.)')
   .action(async options => {
     const { config, projectRoot, configPath } = await loadCLIConfig(options.config);
     const port = parseInt(options.port, 10);
@@ -20,7 +21,7 @@ export const devCommand = new Command('dev')
     const { createServer } = await import('vite');
     const { createViteConfig } = await import('@/server/vite-config');
 
-    const viteConfig = await createViteConfig({ packageRoot: PACKAGE_ROOT, projectRoot, configPath });
+    const viteConfig = await createViteConfig({ packageRoot: PACKAGE_ROOT, projectRoot, configPath, preset: options.preset });
     const server = await createServer({
       ...viteConfig,
       server: { ...viteConfig.server, port, host: options.host }

package/src/components/mdx/paragraph.tsx

@@ -1,7 +1,7 @@
 import { Children, isValidElement, type ComponentProps } from 'react'
 import styles from './paragraph.module.css'
 
-const BLOCK_ELEMENTS = new Set(['summary', 'details', 'div', 'table', 'ul', 'ol'])
+const BLOCK_ELEMENTS = new Set(['summary', 'details', 'div', 'table', 'ul', 'ol', 'p'])
 
 function hasBlockChild(children: React.ReactNode): boolean {
   return Children.toArray(children).some(

package/src/components/ui/PrefetchProvider.tsx

@@ -1,6 +1,8 @@
 import { useEffect } from 'react';
 import { prefetchPageData } from '@/lib/preload';
 
+const NO_PREFETCH_ATTR = 'data-no-prefetch';
+
 function resolvePathname(href: string | null): string | null {
   if (!href) return null;
   try {
@@ -16,14 +18,14 @@ export function PrefetchProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     const handleMouseOver = (e: MouseEvent) => {
       const anchor = (e.target as HTMLElement).closest?.('a[href]');
-      if (!anchor) return;
+      if (!anchor || anchor.hasAttribute(NO_PREFETCH_ATTR)) return;
       const pathname = resolvePathname(anchor.getAttribute('href'));
       if (pathname) prefetchPageData(pathname);
     };
 
     const handleFocusIn = (e: FocusEvent) => {
       const anchor = (e.target as HTMLElement).closest?.('a[href]');
-      if (!anchor) return;
+      if (!anchor || anchor.hasAttribute(NO_PREFETCH_ATTR)) return;
       const pathname = resolvePathname(anchor.getAttribute('href'));
       if (pathname) prefetchPageData(pathname);
     };
@@ -45,7 +47,7 @@ export function PrefetchProvider({ children }: { children: React.ReactNode }) {
     );
 
     const observeLinks = () => {
-      document.querySelectorAll('a[href]:not([data-prefetch-observed])').forEach((link) => {
+      document.querySelectorAll(`a[href]:not([data-prefetch-observed]):not([${NO_PREFETCH_ATTR}])`).forEach((link) => {
         const pathname = resolvePathname(link.getAttribute('href'));
         if (pathname) {
           link.setAttribute('data-prefetch-observed', '');

package/src/lib/mdx-utils.ts

@@ -0,0 +1,4 @@
+export const MdxNodeType = {
+  JsxFlow: 'mdxJsxFlowElement',
+  JsxText: 'mdxJsxTextElement',
+} as const

package/src/lib/page-context.tsx

@@ -110,6 +110,7 @@ export function PageProvider({
     frontmatter: Frontmatter;
     relativePath: string;
     originalPath?: string;
+    images?: string[];
     prev?: PageNavLink | null;
     next?: PageNavLink | null;
   }
@@ -132,6 +133,12 @@ export function PageProvider({
     try {
       const data = await fetchPageData(slug);
       if (cancelled.current) return;
+      if (data.images?.length) {
+        for (const src of data.images) {
+          const img = new Image();
+          img.src = src;
+        }
+      }
       const { content, toc } = await loadMdx(data.originalPath || data.relativePath);
       if (cancelled.current) return;
       setErrorStatus(null);

package/src/lib/preload.ts

@@ -28,8 +28,13 @@ function isApisRoute(pathname: string): boolean {
   return pathname === '/apis' || pathname.startsWith('/apis/');
 }
 
+function hasFileExtension(pathname: string): boolean {
+  const lastSegment = pathname.split('/').pop() ?? '';
+  return lastSegment.includes('.');
+}
+
 export function prefetchPageData(pathname: string) {
-  if (isApisRoute(pathname)) return;
+  if (isApisRoute(pathname) || hasFileExtension(pathname)) return;
   queryClient.prefetchQuery({
     queryKey: pageDataQueryKey(pathname),
     queryFn: () => fetchPageDataByPathname(pathname),

package/src/lib/remark-resolve-images.ts

@@ -4,6 +4,7 @@ import type { Plugin } from 'unified'
 import type { Image, Html } from 'mdast'
 import type { Element } from 'hast'
 import type { MdxJsxFlowElement, MdxJsxTextElement, MdxJsxAttribute } from 'mdast-util-mdx-jsx'
+import { MdxNodeType } from './mdx-utils'
 
 function resolveUrl(src: string, dir: string): string {
   if (/^[a-z][a-z0-9+\-.]*:/i.test(src)) return src
@@ -26,25 +27,40 @@ const remarkResolveImages: Plugin = () => {
     const relative = filePath.slice(contentIdx + '/content/'.length)
     const dir = path.posix.dirname(relative)
 
+    const seen = new Set<string>()
+    const images: string[] = []
+
+    function collect(src: string) {
+      if (!src || seen.has(src) || /^data:/i.test(src)) return
+      seen.add(src)
+      images.push(src)
+    }
+
     visit(tree, 'image', (node: Image) => {
       if (!node.url) return
       node.url = resolveUrl(node.url, dir)
+      collect(node.url)
     })
 
     visit(tree, 'html', (node: Html) => {
       node.value = node.value.replace(
         /(<img\b[^>]*\bsrc=["'])([^"']+)(["'])/gi,
-        (_, before, src, after) => `${before}${resolveUrl(src, dir)}${after}`
+        (_, before, src, after) => {
+          const resolved = resolveUrl(src, dir)
+          collect(resolved)
+          return `${before}${resolved}${after}`
+        }
       )
     })
 
     visit(tree, (node) => {
-      if (node.type !== 'mdxJsxFlowElement' && node.type !== 'mdxJsxTextElement') return
+      if (node.type !== MdxNodeType.JsxFlow && node.type !== MdxNodeType.JsxText) return
       const jsx = node as MdxJsxFlowElement | MdxJsxTextElement
       if (jsx.name !== 'img') return
       const srcAttr = jsx.attributes.find((a): a is MdxJsxAttribute => a.type === 'mdxJsxAttribute' && a.name === 'src')
       if (!srcAttr?.value || typeof srcAttr.value !== 'string') return
       srcAttr.value = resolveUrl(srcAttr.value, dir)
+      collect(srcAttr.value)
     })
 
     visit(tree, 'element', (node: Element) => {
@@ -52,7 +68,10 @@ const remarkResolveImages: Plugin = () => {
       const src = node.properties?.src
       if (typeof src !== 'string') return
       node.properties.src = resolveUrl(src, dir)
+      collect(node.properties.src as string)
     })
+
+    file.data.images = images
   }
 }
 

package/src/lib/source.ts

@@ -37,6 +37,11 @@ const readingTimeGlob: Record<string, { text: string; minutes: number; words: nu
   { eager: true, import: 'readingTime' }
 );
 
+const imagesGlob: Record<string, string[] | undefined> = import.meta.glob(
+  '../../.content/**/*.{mdx,md}',
+  { eager: true, import: 'images' }
+);
+
 const metaGlob: Record<string, Record<string, unknown>> = import.meta.glob(
   '../../.content/**/meta.json',
   { eager: true }
@@ -54,10 +59,11 @@ function buildFiles() {
     const relativePath = originalPath.replace(/readme\.(mdx?)$/i, 'index.$1');
     const rt = readingTimeGlob[key];
     const _readingTime = rt?.minutes != null ? Math.max(1, Math.round(rt.minutes)) : undefined;
+    const _images = imagesGlob[key] ?? [];
     files.push({
       type: 'page',
       path: relativePath,
-      data: { ...data, _readingTime, _relativePath: relativePath, _originalPath: originalPath }
+      data: { ...data, _readingTime, _images, _relativePath: relativePath, _originalPath: originalPath }
     });
   }
 
@@ -285,6 +291,10 @@ export function getOriginalPath(page: { data: unknown }): string {
   return ((page.data as Record<string, unknown>)._originalPath as string) ?? '';
 }
 
+export function getPageImages(page: { data: unknown }): string[] {
+  return ((page.data as Record<string, unknown>)._images as string[]) ?? [];
+}
+
 export async function getPageSearchContent(page: { data: unknown }): Promise<{ headings: string; body: string }> {
   const originalPath = getOriginalPath(page);
   if (!originalPath) return { headings: '', body: '' };

package/src/server/api/page.ts

@@ -1,5 +1,5 @@
 import { defineHandler, HTTPError } from 'nitro';
-import { getPage, getPageNav, extractFrontmatter, getRelativePath, getOriginalPath, isDraft } from '@/lib/source';
+import { getPage, getPageNav, extractFrontmatter, getRelativePath, getOriginalPath, getPageImages, isDraft } from '@/lib/source';
 
 export default defineHandler(async event => {
   const slugParam = event.url.searchParams.get('slug') ?? '';
@@ -16,6 +16,7 @@ export default defineHandler(async event => {
     frontmatter: extractFrontmatter(page, slug[slug.length - 1]),
     relativePath: getRelativePath(page),
     originalPath: getOriginalPath(page),
+    images: getPageImages(page),
     prev: nav.prev,
     next: nav.next,
   });

package/src/server/api/ready.ts

@@ -1,15 +1,19 @@
 import { defineHandler } from 'nitro';
-import { isSearchReady } from './search';
+import { ensureIndex, isSearchReady } from './search';
+import { LATEST_CONTEXT } from '@/lib/version-source';
 
-export default defineHandler(() => {
-  const searchReady = isSearchReady();
+export default defineHandler(async () => {
+  ensureIndex(LATEST_CONTEXT).catch(e => console.error('[search:index]', e));
 
-  if (!searchReady) {
-    return Response.json(
-      { status: 'not_ready', search: false },
-      { status: 503 },
-    );
+  if (!isSearchReady()) {
+    return new Response(JSON.stringify({ status: 'not_ready', search: false }), {
+      status: 503,
+      headers: { 'Content-Type': 'application/json' },
+    });
   }
 
-  return Response.json({ status: 'ready', search: true });
+  return new Response(JSON.stringify({ status: 'ready', search: true }), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' },
+  });
 });

package/src/server/entry-server.tsx

@@ -9,7 +9,7 @@ import { getApiConfigsForVersion, loadConfig } from '@/lib/config';
 import { loadApiSpecs } from '@/lib/openapi';
 import { PageProvider } from '@/lib/page-context';
 import { resolveRoute, RouteType } from '@/lib/route-resolver';
-import { getPageTree, getPage, getPageNav, loadPageModule, extractFrontmatter, getRelativePath, getOriginalPath, isDraft } from '@/lib/source';
+import { getPageTree, getPage, getPageNav, loadPageModule, extractFrontmatter, getRelativePath, getOriginalPath, getPageImages, isDraft } from '@/lib/source';
 import { getFirstApiUrl } from '@/lib/api-routes';
 import { StatusCodes } from 'http-status-codes';
 import { resolveDocsRedirect } from '@/lib/tree-utils';
@@ -79,6 +79,7 @@ export default {
     const relativePath = page ? getRelativePath(page) : null;
     const originalPath = page ? getOriginalPath(page) : null;
     const mdxModule = (originalPath || relativePath) ? await loadPageModule(originalPath || relativePath!) : null;
+    const pageImages = page ? getPageImages(page) : [];
 
     const pageData = page
       ? {
@@ -125,6 +126,9 @@ export default {
           {assets.js.map((attr: { href: string }) => (
             <link key={attr.href} rel="modulepreload" {...attr} />
           ))}
+          {pageImages.map((src: string) => (
+            <link key={src} rel="preload" as="image" href={src} />
+          ))}
           <script type="module" src={assets.entry} />
           <script dangerouslySetInnerHTML={{ __html: `window.__PAGE_DATA__ = ${safeJson}` }} />
         </head>

package/src/server/error.ts

@@ -0,0 +1,11 @@
+import { defineErrorHandler, HTTPError } from 'nitro';
+
+export default defineErrorHandler((error, _event) => {
+  const status = HTTPError.isError(error) ? error.status : 500;
+  const message = error.message || 'Internal Server Error';
+
+  return new Response(JSON.stringify({ error: true, status, message }), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+});

package/src/server/vite-config.ts

@@ -72,7 +72,7 @@ export async function createViteConfig(
         default: defineFumadocsConfig({
           mdxOptions: {
             remarkImageOptions: false,
-            valueToExport: ['readingTime'],
+            valueToExport: ['readingTime', 'images'],
             remarkPlugins: [
               remarkDirective,
               [remarkDirectiveAdmonition, {
@@ -145,6 +145,7 @@ export async function createViteConfig(
     },
     nitro: {
       logLevel: 2,
+      errorHandler: path.resolve(packageRoot, 'src/server/error.ts'),
       publicAssets: [{ dir: path.resolve(projectRoot, 'public') }],
       output: {
         dir: resolveOutputDir(projectRoot, preset),

package/src/themes/default/Layout.tsx

@@ -138,7 +138,7 @@ export function Layout({
                         <DocumentTextIcon width={16} height={16} />
                       )}
                       classNames={{ root: styles.topLinkItem, text: styles.topLinkText }}
-                      render={<RouterLink to={entry.href} />}
+                      render={<RouterLink to={entry.href} data-no-prefetch />}
                     >
                       {entry.label}
                     </Sidebar.Item>
@@ -154,7 +154,7 @@ export function Layout({
                         <CodeBracketSquareIcon width={16} height={16} />
                       )}
                       classNames={{ root: styles.topLinkItem, text: styles.topLinkText }}
-                      render={<RouterLink to={api.basePath} />}
+                      render={<RouterLink to={api.basePath} data-no-prefetch />}
                     >
                       {api.name} API
                     </Sidebar.Item>