perf(docs): load OG image fonts from disk instead of Google Fonts#7887
perf(docs): load OG image fonts from disk instead of Google Fonts#7887aidankmcalister wants to merge 2 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughThis PR rewires OG image font loading from Google Fonts HTTP fetch to local file I/O. Font metadata and type definitions shift to ChangesFont Loading Migration
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 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. Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Comment |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/docs/src/app/og/[...slug]/route.tsx (1)
280-294:⚠️ Potential issue | 🔴 Critical | 🏗️ Heavy liftFix: Serverless functions cannot access
public/files at runtime on Vercel.The fonts directory exists in
public/fonts/, but here's the critical issue: because this route usesexport const revalidate = false(on-demand ISR), it reads fonts at request time, not build time. In Vercel's serverless environment, thepublic/folder is deployed to CDN and is not available on the function's filesystem—readFile()will fail withENOENTin production.Move font files to a location bundled with the route handler. The recommended pattern for Next.js app router:
Example fix
- data: await readFile(path.join(process.cwd(), "public", "fonts", file)), + data: await readFile(new URL(`./fonts/${file}`, import.meta.url)),This requires moving fonts to
apps/docs/src/app/og/fonts/so they're bundled with the route file.🤖 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 `@apps/docs/src/app/og/`[...slug]/route.tsx around lines 280 - 294, getFonts currently reads from process.cwd()/public which fails in Vercel serverless because public/ is served from the CDN and not available at runtime; move the font files into the route bundle (e.g., apps/docs/src/app/og/fonts/) and update getFonts to load them from the bundled relative folder instead of process.cwd() (stop using "public" path and process.cwd()); keep the same FONT_DEFINITIONS entries but change their file paths to reference the new bundled filenames and read them via path.join(__dirname or the route file directory, "fonts", file) or import them so they are included at build time, ensuring fontCache logic remains the same but now reads from the bundled assets rather than public/.
🤖 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.
Inline comments:
In `@apps/docs/src/app/og/`[...slug]/route.tsx:
- Around line 63-68: The LoadedFont type's data field must be ArrayBuffer (not
Buffer) to match next/og ImageResponse expectations; change LoadedFont { data:
Buffer } to { data: ArrayBuffer } and when loading fonts (where you currently
call fs.readFile or similar that returns a Buffer) convert the Buffer to an
ArrayBuffer (e.g., Buffer.toArrayBuffer()) before assigning to LoadedFont.data;
also update any usages of LoadedFont.data (e.g., where fonts are passed into
ImageResponse or stored) to accept an ArrayBuffer.
---
Outside diff comments:
In `@apps/docs/src/app/og/`[...slug]/route.tsx:
- Around line 280-294: getFonts currently reads from process.cwd()/public which
fails in Vercel serverless because public/ is served from the CDN and not
available at runtime; move the font files into the route bundle (e.g.,
apps/docs/src/app/og/fonts/) and update getFonts to load them from the bundled
relative folder instead of process.cwd() (stop using "public" path and
process.cwd()); keep the same FONT_DEFINITIONS entries but change their file
paths to reference the new bundled filenames and read them via
path.join(__dirname or the route file directory, "fonts", file) or import them
so they are included at build time, ensuring fontCache logic remains the same
but now reads from the bundled assets rather than public/.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 79bf4f89-0d28-48b7-b764-8ef3c3c3f784
⛔ Files ignored due to path filters (3)
apps/docs/public/fonts/Barlow-Bold.ttfis excluded by!**/*.ttfapps/docs/public/fonts/Inter-Regular.ttfis excluded by!**/*.ttfapps/docs/public/fonts/JetBrainsMono-Regular.ttfis excluded by!**/*.ttf
📒 Files selected for processing (1)
apps/docs/src/app/og/[...slug]/route.tsx
1 participant
What & why
apps/docs/src/app/og/[...slug]/route.tsxfetched Barlow, Inter, and JetBrains Mono from Google Fonts on every cold start (6 network calls per cold start). Bundle the TTFs inapps/docs/public/fonts/and read them withnode:fs/promisesinstead.Tested
pnpm checkpasses forapps/docs.Linear: DR-8019
Summary by CodeRabbit