Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Codecov Report❌ Patch coverage is 📢 Thoughts on this report? Let us know! |
|
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 (12)
✅ Files skipped from review due to trivial changes (5)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughSummary by CodeRabbitRelease Notes
WalkthroughAdds a shareable OpenGraph package card system: new ShareCard OG component and types, OG image page and API redirect, package ShareModal and header button, ISR routeRules, utilities (formatDate, withAlpha, truncate), accent/theme constants, tests, and minor date formatting refactor in BlogPost component. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Browser as Browser
participant API as /api/card/... (redirect)
participant OG as /__og-image__/image/... (OG renderer)
participant Share as ShareCard component (server)
participant Registry as Package metadata APIs
Browser->>API: GET /api/card/nuxt.png?theme=dark&color=sky
API->>API: validate package, theme, color\nbuild OG-image URL
API-->>Browser: 302 Redirect -> /__og-image__/image/share-card/nuxt/og.png?...
Browser->>OG: GET redirected OG-image URL
OG->>Share: render ShareCard with props (name, theme, color)
Share->>Registry: fetch package metadata, downloads, repo meta
Registry-->>Share: package data
Share-->>OG: return rendered image bytes (PNG)
OG-->>Browser: 200 image/png
Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
test/unit/a11y-component-coverage.spec.ts (1)
31-34: Avoid long-term a11y skip forPackage/ShareModal.vue.Line 32 skips an interactive modal in a core user flow; that can mask regressions. Consider keeping this as a short-lived skip with a tracked follow-up to add at least one focused modal a11y smoke test.
app/components/Package/ShareModal.vue (2)
68-79: Theasynckeyword is unnecessary here.
downloadCardis declaredasyncbut contains noawaitexpressions. Thetry/finallyblock handles synchronous operations only.♻️ Proposed simplification
-async function downloadCard() { +function downloadCard() { const a = document.createElement('a') a.href = cardUrl.value a.download = `${props.packageName.replace('/', '-')}-card.png` document.body.appendChild(a) try { a.click() } finally { document.body.removeChild(a) } showAlt.value = true }
31-33: Alt text may be redundant for non-latest versions.When
isLatestis false, the tag falls back toresolvedVersion, producing alt text like"nuxt 4.4.2 (4.4.2)"which duplicates the version. Consider omitting the parenthetical for non-latest versions, or showing the actual dist-tag if available.♻️ Proposed improvement
const altText = computed(() => { - const tag = props.isLatest ? 'latest' : props.resolvedVersion - const parts: string[] = [`${props.packageName} ${props.resolvedVersion} (${tag})`] + const versionPart = props.isLatest + ? `${props.resolvedVersion} (latest)` + : props.resolvedVersion + const parts: string[] = [`${props.packageName} ${versionPart}`]
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 56dab79f-1b89-43a9-acfd-ce896de2de51
⛔ Files ignored due to path filters (3)
test/e2e/og-image.spec.ts-snapshots/og-image-for--package-nuxt-v-3-20-2.pngis excluded by!**/*.pngtest/e2e/og-image.spec.ts-snapshots/share-card-nuxt-dark.pngis excluded by!**/*.pngtest/e2e/og-image.spec.ts-snapshots/share-card-nuxt-light.pngis excluded by!**/*.png
📒 Files selected for processing (16)
app/components/OgImage/BlogPost.vueapp/components/OgImage/ShareCard.d.vue.tsapp/components/OgImage/ShareCard.vueapp/components/Package/Header.vueapp/components/Package/ShareModal.vueapp/components/Package/Skeleton.vueapp/pages/package/[[org]]/[name].vueapp/pages/share-card/[[org]]/[name].vueapp/utils/colors.tsapp/utils/formatters.tsapp/utils/string.tsnuxt.config.tsserver/api/card/[...pkg].get.tsshared/utils/constants.tstest/e2e/og-image.spec.tstest/unit/a11y-component-coverage.spec.ts
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 768e278c-0830-4137-959a-4d5dd790c78a
📒 Files selected for processing (3)
app/components/Package/Header.vuenuxt.config.tstest/unit/a11y-component-coverage.spec.ts
✅ Files skipped from review due to trivial changes (1)
- test/unit/a11y-component-coverage.spec.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- nuxt.config.ts
ghostdevv
left a comment
ghostdevv
left a comment
There was a problem hiding this comment.
could you take a look at the code rabbit comments?
| '/__og-image__/**': { | ||
| isr: { | ||
| expiration: 3600, | ||
| passQuery: true, | ||
| allowQuery: ['theme', 'color'], | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Since the share card supports custom themes and accent colors, these need to be included as query params so the og image can be cached correctly.
|
|
||
| // Strip .png extension from the final segment (e.g. /api/card/nuxt.png) | ||
| if (segments.length > 0) { | ||
| const last = segments[segments.length - 1]! |
There was a problem hiding this comment.
You can use segments.at(-1), should probably do the null check
| const color = | ||
| rawColor && (ACCENT_COLOR_IDS as readonly string[]).includes(rawColor) | ||
| ? `&color=${rawColor}` | ||
| : '' | ||
|
|
||
| return sendRedirect( | ||
| event, | ||
| `/__og-image__/image/share-card/${packageName}/og.png?theme=${theme}${color}`, | ||
| 302, | ||
| ) |
There was a problem hiding this comment.
you could use URLSearchParams rather than manually concat-ing strings to be a bit more readable
| async function downloadCard() { | ||
| const a = document.createElement('a') | ||
| a.href = cardUrl.value | ||
| a.download = `${props.packageName.replace('/', '-')}-card.png` | ||
| document.body.appendChild(a) | ||
| try { | ||
| a.click() | ||
| } finally { | ||
| document.body.removeChild(a) | ||
| } | ||
| showAlt.value = true | ||
| } |
There was a problem hiding this comment.
there's a download link util now you can use!
Hey, thanks for the code review, sorry for the late reply. I have refactored the code according to the comments. Since there were a lot of merge conflicts, I merged the latest main branch and force pushed the branch. |
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
2 participants
🔗 Linked issue
Resolves #2146
🧭 Context
Add a share button to help user generate a well-designed, shareable card and post it on social media or send it to friends.
📚 Description
Some implementation details need to be mentioned here:
nuxt-og-image, inline styles and hard code icon are used to ensure rendering compatibilityACCENT_COLORSis widely used, a temporaryACCENT_COLOR_TOKENSis introduced in this PR — refactoring will be completed once mergedDemo
PixPin_2026-03-29_23-08-00.mp4
ALT of nuxt
Screenshot