feat: extract and preload page images#87
Merged
Conversation
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>
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>
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>
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>
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>
📝 WalkthroughSummary by CodeRabbit
WalkthroughAdded end-to-end image preloading infrastructure by extending the MDX build pipeline to collect image URLs, configuring the source loader to inject metadata per page, including images in the API response, and implementing browser preload and SSR preload link emission. ChangesImage preloading infrastructure
Sequence DiagramsequenceDiagram
participant BuildTime as Build Time<br/>Remark Plugin
participant Runtime as Runtime<br/>Source Loader
participant API as /api/page<br/>Handler
participant Client as Browser<br/>PageProvider
participant SSR as SSR<br/>entry-server
BuildTime->>BuildTime: collect image URLs<br/>from MDAST/HTML/JSX/HAST
BuildTime->>Runtime: write file.data.images<br/>to vite manifest
Runtime->>Runtime: load images metadata<br/>inject _images per page
API->>API: getPageImages(page)<br/>build response
Client->>API: fetch /api/page?slug
API->>Client: {images: [urls], ...}
Client->>Client: instantiate Image()<br/>preload URLs
SSR->>SSR: getPageImages(page)<br/>compute pageImages
SSR->>SSR: render <link rel=preload><br/>as=image href
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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>
rohanchkrabrty
approved these changes
May 19, 2026
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>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/chronicle/src/lib/remark-resolve-images.ts (1)
7-7: ⚡ Quick winUse the configured
@/*alias for this import.Line 7 should use the project alias instead of a relative path for consistency with repo standards.
♻️ Suggested change
-import { MdxNodeType } from './mdx-utils' +import { MdxNodeType } from '`@/lib/mdx-utils`'As per coding guidelines,
**/*.{ts,tsx}: Use path alias@/*→./src/*configured in tsconfig and vite.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/chronicle/src/lib/remark-resolve-images.ts` at line 7, Replace the relative import of MdxNodeType with the project path alias: change the import of MdxNodeType from './mdx-utils' to use the configured alias that maps src to @ (i.e., import from '`@/lib/mdx-utils`') so the file remark-resolve-images.ts follows the repo's `@/`* import convention.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/chronicle/src/lib/remark-resolve-images.ts`:
- Line 7: Replace the relative import of MdxNodeType with the project path
alias: change the import of MdxNodeType from './mdx-utils' to use the configured
alias that maps src to @ (i.e., import from '`@/lib/mdx-utils`') so the file
remark-resolve-images.ts follows the repo's `@/`* import convention.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: f0d79967-40d7-418c-88ff-9d3c7855d6a1
📒 Files selected for processing (7)
packages/chronicle/src/lib/mdx-utils.tspackages/chronicle/src/lib/page-context.tsxpackages/chronicle/src/lib/remark-resolve-images.tspackages/chronicle/src/lib/source.tspackages/chronicle/src/server/api/page.tspackages/chronicle/src/server/entry-server.tsxpackages/chronicle/src/server/vite-config.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
remark-collect-imagesplugin that extracts all image URLs (markdown, HTML, JSX, HAST) from MDX content after path resolutionimages[]in/api/pageresponse for each page<link rel="preload" as="image">in SSR HTML<head>for initial page loadnew Image()on client-side navigation before MDX rendersTest plan
bun run dev:examples:basic, verify pages with images have<link rel="preload" as="image">in page source/api/page?slug=<page-with-images>returnsimagesarray with resolved URLsimages: []/_content/...URLs🤖 Generated with Claude Code