Extract app metadata into dedicated files and add OG image tests#2446
Open
andrew-bierman wants to merge 1 commit into
Open
Extract app metadata into dedicated files and add OG image tests#2446andrew-bierman wants to merge 1 commit into
andrew-bierman wants to merge 1 commit into
Conversation
Contributor
Deploying packrat-guides with
|
| Latest commit: |
3565de0
|
| Status: | 🚫 Build failed. |
Contributor
WalkthroughMetadata object configurations are extracted from guides and landing layout files into dedicated modules. Each app receives a new metadata.ts file defining SEO, Open Graph, Twitter, and icon settings with absolute URLs computed from siteConfig. Layout files simplify to import and re-export the new modules. Tests validate image URL construction. ChangesMetadata extraction across guides and landing apps
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
🚥 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)
⚔️ Resolve 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. Comment |
Contributor
Deploying packrat-landing with
|
| Latest commit: |
3565de0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://470932f5.packrat-landing.pages.dev |
| Branch Preview URL: | https://codex-fix-open-graph-images.packrat-landing.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/landing/app/metadata.ts`:
- Line 42: The manifest URL is built via string interpolation which can produce
double slashes; replace the interpolated manifest:
`${siteConfig.url}/site.webmanifest` with construction using new URL so it
correctly resolves regardless of trailing slash (e.g., use new
URL('/site.webmanifest', siteConfig.url).toString() or .href), mirroring the
approach used elsewhere in this file (see other usages referencing
siteConfig.url).
🪄 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: ASSERTIVE
Plan: Pro
Run ID: 7a1b9a6a-2599-4882-a21b-b68dbd9e2530
📒 Files selected for processing (6)
apps/guides/app/layout.og-metadata.test.tsapps/guides/app/layout.tsxapps/guides/app/metadata.tsapps/landing/app/layout.og-metadata.test.tsapps/landing/app/layout.tsxapps/landing/app/metadata.ts
| shortcut: '/favicon-16x16.png', | ||
| apple: '/apple-touch-icon.png', | ||
| }, | ||
| manifest: `${siteConfig.url}/site.webmanifest`, |
Contributor
There was a problem hiding this comment.
Use new URL() for consistent URL construction.
String interpolation can produce malformed URLs if siteConfig.url has a trailing slash (resulting in //site.webmanifest). Use the same pattern as lines 23 and 35 for consistency and correctness.
🔧 Proposed fix
- manifest: `${siteConfig.url}/site.webmanifest`,
+ manifest: new URL('/site.webmanifest', siteConfig.url).toString(),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| manifest: `${siteConfig.url}/site.webmanifest`, | |
| manifest: new URL('/site.webmanifest', siteConfig.url).toString(), |
🤖 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/landing/app/metadata.ts` at line 42, The manifest URL is built via
string interpolation which can produce double slashes; replace the interpolated
manifest: `${siteConfig.url}/site.webmanifest` with construction using new URL
so it correctly resolves regardless of trailing slash (e.g., use new
URL('/site.webmanifest', siteConfig.url).toString() or .href), mirroring the
approach used elsewhere in this file (see other usages referencing
siteConfig.url).
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the Next.js metadata definitions for the Landing and Guides apps by extracting them into dedicated app/metadata.ts modules, and adds Vitest checks intended to assert absolute Open Graph / Twitter image URLs.
Changes:
- Added
app/metadata.tsmodules for Landing and Guides and re-exported them fromlayout.tsx. - Added explicit
openGraph.imagesandtwitter.imagesentries (now absolute URLs). - Added Vitest unit tests asserting OG/Twitter image metadata structure and URLs.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/landing/app/metadata.ts | New centralized Landing metadata (now includes explicit OG/Twitter image URLs). |
| apps/landing/app/layout.tsx | Re-exports extracted Landing metadata. |
| apps/landing/app/layout.og-metadata.test.ts | Adds Landing metadata assertions for OG/Twitter image URLs. |
| apps/guides/app/metadata.ts | New centralized Guides metadata (includes explicit OG/Twitter image URLs). |
| apps/guides/app/layout.tsx | Re-exports extracted Guides metadata. |
| apps/guides/app/layout.og-metadata.test.ts | Adds Guides metadata assertions for OG/Twitter image URLs. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+21
to
+26
| images: [ | ||
| { | ||
| url: new URL(siteConfig.ogImage, siteConfig.url).toString(), | ||
| width: 1200, | ||
| height: 630, | ||
| alt: siteConfig.name, |
Comment on lines
+30
to
+36
| twitter: { | ||
| card: 'summary_large_image', | ||
| title: siteConfig.name, | ||
| description: siteConfig.description, | ||
| creator: siteConfig.twitterHandle, | ||
| images: [new URL(siteConfig.ogImage, siteConfig.url).toString()], | ||
| }, |
Comment on lines
+6
to
+8
| it('sets absolute og/twitter image metadata', () => { | ||
| const expected = new URL(siteConfig.ogImage, siteConfig.url).toString(); | ||
| expect(metadata.openGraph?.images?.[0]).toMatchObject({ |
Comment on lines
+1
to
+3
| import { describe, expect, it } from 'vitest'; | ||
| import { siteConfig } from '../config/site'; | ||
| import { metadata } from './metadata'; |
Comment on lines
+1
to
+3
| import { describe, expect, it } from 'vitest'; | ||
| import { siteConfig } from '../lib/config'; | ||
| import { metadata } from './metadata'; |
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
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.
Motivation
metadataby moving large inline metadata objects out oflayout.tsxinto dedicatedmetadata.tsmodules.Description
apps/landing/app/metadata.tsandapps/guides/app/metadata.tsthat export themetadata: Metadataobjects and define absolute OG/Twitter image URLs usingnew URL(..., siteConfig.url).toString().apps/landing/app/layout.tsxandapps/guides/app/layout.tsxto import the metadata asappMetadataand re-export it viaexport const metadata = appMetadata;, removing the previous inline metadata definitions.layout.og-metadata.test.tsin bothapps/landing/appandapps/guides/appto assert the OG image object contains the expected absoluteurl,width,height, andalt, and thattwitter.imagesequals the absolute URL.Testing
apps/landing/app/layout.og-metadata.test.tsandapps/guides/app/layout.og-metadata.test.tsto validate absolute OG/Twitter image metadata, and the tests passed.Codex Task
Summary by CodeRabbit
Tests
Chores