From df75293fb5a7ef4eea033bd9891644b9b2cebb6f Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Tue, 19 May 2026 10:19:30 +0530
Subject: [PATCH 1/8] feat: add remark plugin to collect image URLs from MDX
 content

Extracts all image sources (markdown, HTML, JSX, HAST) into a
file.data.images array for downstream export. Runs after
remark-resolve-images so URLs are already resolved.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/lib/remark-collect-images.ts          | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 packages/chronicle/src/lib/remark-collect-images.ts

diff --git a/packages/chronicle/src/lib/remark-collect-images.ts b/packages/chronicle/src/lib/remark-collect-images.ts
new file mode 100644
index 0000000..564c3a8
--- /dev/null
+++ b/packages/chronicle/src/lib/remark-collect-images.ts
@@ -0,0 +1,53 @@
+import { visit } from 'unist-util-visit'
+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'
+
+const remarkCollectImages: Plugin = () => {
+  return (tree, file) => {
+    const images: string[] = []
+    const seen = new Set<string>()
+
+    function add(src: string) {
+      if (!src || seen.has(src)) return
+      if (/^data:/i.test(src)) return
+      seen.add(src)
+      images.push(src)
+    }
+
+    visit(tree, 'image', (node: Image) => {
+      add(node.url)
+    })
+
+    visit(tree, 'html', (node: Html) => {
+      const re = /<img\b[^>]*\bsrc=["']([^"']+)["']/gi
+      let match: RegExpExecArray | null
+      while ((match = re.exec(node.value))) {
+        add(match[1])
+      }
+    })
+
+    visit(tree, (node) => {
+      if (node.type !== 'mdxJsxFlowElement' && node.type !== 'mdxJsxTextElement') 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') {
+        add(srcAttr.value)
+      }
+    })
+
+    visit(tree, 'element', (node: Element) => {
+      if (node.tagName !== 'img') return
+      const src = node.properties?.src
+      if (typeof src === 'string') add(src)
+    })
+
+    file.data.images = images
+  }
+}
+
+export default remarkCollectImages

From dc9417b32874da00400e2180f09f3ed43cd4574c Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Tue, 19 May 2026 10:20:28 +0530
Subject: [PATCH 2/8] feat: wire image collection into build pipeline

Register remarkCollectImages after remarkResolveImages in Vite MDX
config, export 'images' from MDX modules, and add imagesGlob +
getPageImages helper in source.ts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/lib/source.ts         | 22 ++++++++++++++------
 packages/chronicle/src/server/vite-config.ts |  4 +++-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/chronicle/src/lib/source.ts b/packages/chronicle/src/lib/source.ts
index 9819745..47dca7b 100644
--- a/packages/chronicle/src/lib/source.ts
+++ b/packages/chronicle/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: '' };
@@ -321,21 +331,21 @@ interface ReadingTime {
   time: number;
 }
 
-const ssrModules = import.meta.glob<{ default?: MDXContent; toc?: TableOfContents; readingTime?: ReadingTime }>(
+const ssrModules = import.meta.glob<{ default?: MDXContent; toc?: TableOfContents; readingTime?: ReadingTime; images?: string[] }>(
   '../../.content/**/*.{mdx,md}'
 );
 
 export async function loadPageModule(
   relativePath: string
-): Promise<{ default: MDXContent | null; toc: TableOfContents; _readingTime?: number }> {
-  if (!relativePath || relativePath.includes('..')) return { default: null, toc: [] };
+): Promise<{ default: MDXContent | null; toc: TableOfContents; _readingTime?: number; images: string[] }> {
+  if (!relativePath || relativePath.includes('..')) return { default: null, toc: [], images: [] };
   const withoutExt = relativePath.replace(/\.(mdx|md)$/, '');
   const key = relativePath.endsWith('.md')
     ? `../../.content/${withoutExt}.md`
     : `../../.content/${withoutExt}.mdx`;
   const loader = ssrModules[key];
-  if (!loader) return { default: null, toc: [] };
+  if (!loader) return { default: null, toc: [], images: [] };
   const mod = await loader();
   const minutes = mod.readingTime?.minutes;
-  return { default: mod.default ?? null, toc: mod.toc ?? [], _readingTime: minutes != null ? Math.max(1, Math.round(minutes)) : undefined };
+  return { default: mod.default ?? null, toc: mod.toc ?? [], _readingTime: minutes != null ? Math.max(1, Math.round(minutes)) : undefined, images: mod.images ?? [] };
 }
diff --git a/packages/chronicle/src/server/vite-config.ts b/packages/chronicle/src/server/vite-config.ts
index 18689b0..de5ce15 100644
--- a/packages/chronicle/src/server/vite-config.ts
+++ b/packages/chronicle/src/server/vite-config.ts
@@ -8,6 +8,7 @@ import path from 'node:path';
 import remarkDirective from 'remark-directive';
 import { type InlineConfig } from 'vite';
 import remarkResolveImages from '../lib/remark-resolve-images';
+import remarkCollectImages from '../lib/remark-collect-images';
 import remarkResolveLinks from '../lib/remark-resolve-links';
 import remarkReadingTime from 'remark-reading-time';
 import remarkUnusedDirectives from '../lib/remark-unused-directives';
@@ -72,7 +73,7 @@ export async function createViteConfig(
         default: defineFumadocsConfig({
           mdxOptions: {
             remarkImageOptions: false,
-            valueToExport: ['readingTime'],
+            valueToExport: ['readingTime', 'images'],
             remarkPlugins: [
               remarkDirective,
               [remarkDirectiveAdmonition, {
@@ -95,6 +96,7 @@ export async function createViteConfig(
               remarkUnusedDirectives,
               remarkResolveLinks,
               remarkResolveImages,
+              remarkCollectImages,
               remarkMdxMermaid,
               remarkReadingTime,
             ],

From f88844f55ef9d6fd0867e8ee5c2bad8fca662f41 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Tue, 19 May 2026 10:20:41 +0530
Subject: [PATCH 3/8] feat: return images array in /api/page response

Includes all resolved image URLs from page content in the API
response for downstream preloading.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/server/api/page.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/chronicle/src/server/api/page.ts b/packages/chronicle/src/server/api/page.ts
index 7c5ba9b..7f958b4 100644
--- a/packages/chronicle/src/server/api/page.ts
+++ b/packages/chronicle/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,
   });

From d8d57dd1b39612f6ec6f3feba1a35b592c48c409 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Tue, 19 May 2026 10:20:56 +0530
Subject: [PATCH 4/8] feat: inject image preload links in SSR HTML head

Adds <link rel="preload" as="image"> tags for all page images
during server-side rendering for faster initial page load.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/server/entry-server.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/chronicle/src/server/entry-server.tsx b/packages/chronicle/src/server/entry-server.tsx
index d8220bb..4cd1938 100644
--- a/packages/chronicle/src/server/entry-server.tsx
+++ b/packages/chronicle/src/server/entry-server.tsx
@@ -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 = mdxModule?.images ?? [];
 
     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>

From 68d96bbfc93cf0b21f47e6d3ecd5fd42085578f6 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Tue, 19 May 2026 10:21:13 +0530
Subject: [PATCH 5/8] feat: prefetch page images on client-side navigation

After fetching page data from /api/page, preloads all images via
new Image() so they're cached by the browser before MDX renders.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/lib/page-context.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/chronicle/src/lib/page-context.tsx b/packages/chronicle/src/lib/page-context.tsx
index f49180d..0464a88 100644
--- a/packages/chronicle/src/lib/page-context.tsx
+++ b/packages/chronicle/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);

From 9ffe2197a24abefa86fb9ec25339e3a32b918352 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Tue, 19 May 2026 10:43:49 +0530
Subject: [PATCH 6/8] refactor: extract MdxNodeType const to shared mdx-utils
 module

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/lib/mdx-utils.ts             | 4 ++++
 packages/chronicle/src/lib/remark-collect-images.ts | 3 ++-
 packages/chronicle/src/lib/remark-resolve-images.ts | 3 ++-
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 packages/chronicle/src/lib/mdx-utils.ts

diff --git a/packages/chronicle/src/lib/mdx-utils.ts b/packages/chronicle/src/lib/mdx-utils.ts
new file mode 100644
index 0000000..d88dc7a
--- /dev/null
+++ b/packages/chronicle/src/lib/mdx-utils.ts
@@ -0,0 +1,4 @@
+export const MdxNodeType = {
+  JsxFlow: 'mdxJsxFlowElement',
+  JsxText: 'mdxJsxTextElement',
+} as const
diff --git a/packages/chronicle/src/lib/remark-collect-images.ts b/packages/chronicle/src/lib/remark-collect-images.ts
index 564c3a8..7f4ad22 100644
--- a/packages/chronicle/src/lib/remark-collect-images.ts
+++ b/packages/chronicle/src/lib/remark-collect-images.ts
@@ -3,6 +3,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'
 
 const remarkCollectImages: Plugin = () => {
   return (tree, file) => {
@@ -29,7 +30,7 @@ const remarkCollectImages: Plugin = () => {
     })
 
     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(
diff --git a/packages/chronicle/src/lib/remark-resolve-images.ts b/packages/chronicle/src/lib/remark-resolve-images.ts
index eceb4fe..0b394c2 100644
--- a/packages/chronicle/src/lib/remark-resolve-images.ts
+++ b/packages/chronicle/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
@@ -39,7 +40,7 @@ const remarkResolveImages: Plugin = () => {
     })
 
     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')

From 92310da205532d99fad6de81331c4890b581fd19 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Tue, 19 May 2026 10:46:16 +0530
Subject: [PATCH 7/8] refactor: merge image collection into
 remark-resolve-images

Single tree traversal now both resolves and collects image URLs,
eliminating the separate remark-collect-images plugin.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/lib/remark-collect-images.ts          | 54 -------------------
 .../src/lib/remark-resolve-images.ts          | 20 ++++++-
 packages/chronicle/src/server/vite-config.ts  |  2 -
 3 files changed, 19 insertions(+), 57 deletions(-)
 delete mode 100644 packages/chronicle/src/lib/remark-collect-images.ts

diff --git a/packages/chronicle/src/lib/remark-collect-images.ts b/packages/chronicle/src/lib/remark-collect-images.ts
deleted file mode 100644
index 7f4ad22..0000000
--- a/packages/chronicle/src/lib/remark-collect-images.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { visit } from 'unist-util-visit'
-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'
-
-const remarkCollectImages: Plugin = () => {
-  return (tree, file) => {
-    const images: string[] = []
-    const seen = new Set<string>()
-
-    function add(src: string) {
-      if (!src || seen.has(src)) return
-      if (/^data:/i.test(src)) return
-      seen.add(src)
-      images.push(src)
-    }
-
-    visit(tree, 'image', (node: Image) => {
-      add(node.url)
-    })
-
-    visit(tree, 'html', (node: Html) => {
-      const re = /<img\b[^>]*\bsrc=["']([^"']+)["']/gi
-      let match: RegExpExecArray | null
-      while ((match = re.exec(node.value))) {
-        add(match[1])
-      }
-    })
-
-    visit(tree, (node) => {
-      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') {
-        add(srcAttr.value)
-      }
-    })
-
-    visit(tree, 'element', (node: Element) => {
-      if (node.tagName !== 'img') return
-      const src = node.properties?.src
-      if (typeof src === 'string') add(src)
-    })
-
-    file.data.images = images
-  }
-}
-
-export default remarkCollectImages
diff --git a/packages/chronicle/src/lib/remark-resolve-images.ts b/packages/chronicle/src/lib/remark-resolve-images.ts
index 0b394c2..d67fbff 100644
--- a/packages/chronicle/src/lib/remark-resolve-images.ts
+++ b/packages/chronicle/src/lib/remark-resolve-images.ts
@@ -27,15 +27,29 @@ 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}`
+        }
       )
     })
 
@@ -46,6 +60,7 @@ const remarkResolveImages: Plugin = () => {
       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) => {
@@ -53,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
   }
 }
 
diff --git a/packages/chronicle/src/server/vite-config.ts b/packages/chronicle/src/server/vite-config.ts
index de5ce15..f9e80e3 100644
--- a/packages/chronicle/src/server/vite-config.ts
+++ b/packages/chronicle/src/server/vite-config.ts
@@ -8,7 +8,6 @@ import path from 'node:path';
 import remarkDirective from 'remark-directive';
 import { type InlineConfig } from 'vite';
 import remarkResolveImages from '../lib/remark-resolve-images';
-import remarkCollectImages from '../lib/remark-collect-images';
 import remarkResolveLinks from '../lib/remark-resolve-links';
 import remarkReadingTime from 'remark-reading-time';
 import remarkUnusedDirectives from '../lib/remark-unused-directives';
@@ -96,7 +95,6 @@ export async function createViteConfig(
               remarkUnusedDirectives,
               remarkResolveLinks,
               remarkResolveImages,
-              remarkCollectImages,
               remarkMdxMermaid,
               remarkReadingTime,
             ],

From e6f06772375d0b2804031fa79e04434a3fd0a287 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Tue, 19 May 2026 11:40:52 +0530
Subject: [PATCH 8/8] refactor: use getPageImages(page) in SSR instead of
 loadPageModule

Images are already available from the eager imagesGlob via page
data, so no need to load them again from ssrModules.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/chronicle/src/lib/source.ts           | 10 +++++-----
 packages/chronicle/src/server/entry-server.tsx |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/chronicle/src/lib/source.ts b/packages/chronicle/src/lib/source.ts
index 47dca7b..7311df2 100644
--- a/packages/chronicle/src/lib/source.ts
+++ b/packages/chronicle/src/lib/source.ts
@@ -331,21 +331,21 @@ interface ReadingTime {
   time: number;
 }
 
-const ssrModules = import.meta.glob<{ default?: MDXContent; toc?: TableOfContents; readingTime?: ReadingTime; images?: string[] }>(
+const ssrModules = import.meta.glob<{ default?: MDXContent; toc?: TableOfContents; readingTime?: ReadingTime }>(
   '../../.content/**/*.{mdx,md}'
 );
 
 export async function loadPageModule(
   relativePath: string
-): Promise<{ default: MDXContent | null; toc: TableOfContents; _readingTime?: number; images: string[] }> {
-  if (!relativePath || relativePath.includes('..')) return { default: null, toc: [], images: [] };
+): Promise<{ default: MDXContent | null; toc: TableOfContents; _readingTime?: number }> {
+  if (!relativePath || relativePath.includes('..')) return { default: null, toc: [] };
   const withoutExt = relativePath.replace(/\.(mdx|md)$/, '');
   const key = relativePath.endsWith('.md')
     ? `../../.content/${withoutExt}.md`
     : `../../.content/${withoutExt}.mdx`;
   const loader = ssrModules[key];
-  if (!loader) return { default: null, toc: [], images: [] };
+  if (!loader) return { default: null, toc: [] };
   const mod = await loader();
   const minutes = mod.readingTime?.minutes;
-  return { default: mod.default ?? null, toc: mod.toc ?? [], _readingTime: minutes != null ? Math.max(1, Math.round(minutes)) : undefined, images: mod.images ?? [] };
+  return { default: mod.default ?? null, toc: mod.toc ?? [], _readingTime: minutes != null ? Math.max(1, Math.round(minutes)) : undefined };
 }
diff --git a/packages/chronicle/src/server/entry-server.tsx b/packages/chronicle/src/server/entry-server.tsx
index 4cd1938..a7509c4 100644
--- a/packages/chronicle/src/server/entry-server.tsx
+++ b/packages/chronicle/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,7 +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 = mdxModule?.images ?? [];
+    const pageImages = page ? getPageImages(page) : [];
 
     const pageData = page
       ? {