[HugoRCD]

Written by an AI agent on behalf of @HugoRCD, who shaped the solution. @HugoRCD has reviewed it.

Template links currently use the generic docs social image. Give the gallery its own image and each template a preview with its screenshot, category and source. Long titles and descriptions fit within the image, and starters have a code preview when no screenshot exists.

The OG component uses normal column layout, three title sizes and native two-line clamping. No custom Nuxt module or server layout hook is needed.

The font module update supplies the approved Outfit typography to the OG renderer. Images render at 1200 × 630.

Before and after

Before: current production. After: the local PR branch. Both captured at a 1200 × 630 viewport; the old images are 1200 × 600.

Templates gallery

Before	After

Individual template

Before	After

Long title, description and source

Validation

• Production build and ESLint on the changed files passed.
• Visually checked rendered gallery, normal title, long title/description/source and unbroken title previews. Removed the tests for the deleted measurement utility.
• Unit suite: 704 passed; one translation test exceeded its five-second timeout. Its 29-test file passed when rerun with a 15-second timeout.
• CI is rerunning for this update. Local type checking reports the existing layers/nuxi/nuxt.config.ts:10 error: eve is not a known Nuxt configuration property.
• The initial Vercel preview failed in 0014_l10n_saves.sql: table l10n_saves already exists. This migration is unchanged by this PR.

When someone shares a template link, the preview now shows what that template looks like. Sharing the gallery shows a selection of templates instead.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
nuxt	Error		Nov 4, 2026 3:09pm UTC

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​nuxt/​fonts@​1.2.0

View full report

[coderabbitai]

No actionable comments were generated in the recent review.

Walkthrough

The change adds index and detail Open Graph layouts for template pages. The pages now pass template-specific content and dimensions to these layouts. Server-side code registers fonts, fits text to size limits, and positions layout elements. A Nuxt module registers the server plugin unless Open Graph images are disabled. Unit tests cover text fitting and layout positioning.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: Minimal · up to 591e1

Template pages gain dedicated social previews; no merge-blocking regression was established.

Pre-merge checks: 5

Check name	Status	Explanation
Title check		The title clearly identifies the main change: custom social preview images for templates.
Docstring Coverage		No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description check		The description is related to the changeset. It explains that template links used the generic docs social image, and that the PR adds a gallery image, per-template previews with screenshot, category a…

Full details: Docstring Coverage

Explanation

No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 1 files. (1 skipped: 1 unsupported.)

Full details: Description check

Explanation

The description is related to the changeset. It explains that template links used the generic docs social image, and that the PR adds a gallery image, per-template previews with screenshot, category and source, long-content fitting, starter code previews, the Outfit font module update, and 1200 × 630 rendering. It also lists validation steps and before/after images. The description is specific and on-topic, so it passes.

Finishing Touches

Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

Share

• X
• Mastodon
• Reddit
• LinkedIn

Recent review info

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: d0e1c257-4930-4da3-ac6d-79e05ada83ba

Commits

Reviewing files that changed from the base of the PR and between d4dc235 and 591e1a9.

Files selected for processing: 1

• app/components/OgImage/Templates.takumi.vue

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 0 remain after this review.

[nuxt-com-bundle-report]

Production bundle

Explore the comparison online →

Client JS 1.71 MiB $\color{red}\textsf{(+75 B, +0.0}\%\textsf{)}$ · CSS 33.5 KiB $\color{green}\textsf{(-2.1 KiB, -6.0}\%\textsf{)}$ · Brotli

Initial page load	PR JS	Δ JS	Δ CSS	Δ files
/	558.8 KiB	-150 B (-0.0%)	-2.1 KiB (-6.4%)	—
/docs/4.x/getting-started/introduction	617.6 KiB	-161 B (-0.0%)	-2.1 KiB (-6.4%)	—
/modules/ui	549.3 KiB	-132 B (-0.0%)	-2.1 KiB (-6.4%)	—
/updates	454.2 KiB	-147 B (-0.0%)	-2.1 KiB (-6.4%)	—
/blog/v4-6	577.6 KiB	-148 B (-0.0%)	-2.1 KiB (-6.4%)	—
/templates	452.9 KiB	-101 B (-0.0%)	-2.1 KiB (-6.4%)	—

All client assets

Metric	Base (Brotli)	PR (Brotli)	Δ Brotli	Δ gzip
Client JavaScript	1.71 MiB	1.71 MiB	+75 B (+0.0%)	+181 B (+0.0%)
Client CSS	35.6 KiB	33.5 KiB	-2.1 KiB (-6.0%)	-2.9 KiB (-6.3%)
Other client assets	339.3 KiB	827.5 KiB	+488.2 KiB (+143.9%)	+488.5 KiB (+124.4%)
Total client assets	2.08 MiB	2.55 MiB	+486.1 KiB (+22.8%)	+485.8 KiB (+19.3%)

Largest module increases

Module	Base (Brotli)	PR (Brotli)	Δ Brotli
virtual:nuxt-workers.mjs?source=%2Fhome%2Frunner%2Fwork%2Fnuxt.com%2Fnuxt.com%2Fapp%2Fworkers%2Fsearch.ts	0 B	408 B	+408 B
/app/pages/nuxters/async-data-chunk-18.js	0 B	239 B	+239 B
/app/pages/modules/[slug]/async-data-chunk-1.js	0 B	213 B	+213 B
/app/async-data-chunk-25.js	0 B	187 B	+187 B
/app/pages/docs/async-data-chunk-15.js	0 B	162 B	+162 B
/app/composables/async-data-chunk-26.js	0 B	158 B	+158 B
/app/pages/modules/[slug]/async-data-chunk-2.js	0 B	144 B	+144 B
/app/pages/templates/[slug].vue?vue&type=script&setup=true&lang.ts	1.6 KiB	1.7 KiB	+138 B (+8.4%)
/app/pages/async-data-chunk-19.js	0 B	122 B	+122 B
/app/pages/blog/async-data-chunk-14.js	0 B	121 B	+121 B

_{Initial page load counts the entry script, modulepreload chunks and stylesheets referenced by the prerendered HTML. Module values are attribution estimates from Nuxt’s analyzer. This workflow is report-only. 1d3e71e7 → 9246bbe3}