fix: configure name scale in package og

[alexdln]

Configured the font-size scale for the name in open-graph preview for packages. The maximum characters count is 40, with a gradual decrease

I also changed the font everywhere to mono, as it is more brand-focused for us

Screenshots

Default - before / after

before / after

before / after

before / after

Closes #1410
Based on #570

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 13, 2026 2:46pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 13, 2026 2:46pm
npmx-lunaria	Ignored		Feb 13, 2026 2:46pm

[codecov]

Codecov Report

❌ Patch coverage is 92.30769% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/OgImage/Package.vue	92.30%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR updates OG image components to truncate and scale package titles dynamically (adds MAX_LOGO_SYMBOLS, titleTruncated, titleScale), tweaks title and container spacing/typography (switch to Geist Mono for OG images, adjusted tracking and margins), reduces package icon inner padding (p-4 → p-3.5), and changes version display to resolvedVersion ?? version. It also adds an ogImage.defaults.fonts configuration in nuxt.config.ts listing Geist and Geist Mono font files. Data fetching and error handling remain unchanged.

Possibly related PRs

• fix: only show stars/likes in package OG image when there are any #1215: Modifies the same OgImage Package.vue template's package info blocks and conditional rendering for stars/likes, overlapping template changes.
• fix: finish getting star metadata when rendering og images #933: Touches how the OG Package component derives/renders package/version data, related to the resolvedVersion ?? version change.
• feat: improvements for og-image-package #953: Adjusts OG image UI (including avatar/icon padding and layout), overlapping the padding change from p-4 to p-3.5.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Merge Conflict Detection	⚠️ Warning	❌ Merge conflicts detected (7 files): ⚔️ app/components/OgImage/Default.vue (content) ⚔️ app/components/OgImage/Package.vue (content) ⚔️ nuxt.config.ts (content) ⚔️ test/e2e/og-image.spec.ts-snapshots/og-image-for--.png (content) ⚔️ test/e2e/og-image.spec.ts-snapshots/og-image-for--package-nuxt-v-3-20-2.png (content) ⚔️ uno-preset-a11y.ts (content) ⚔️ uno-preset-rtl.ts (content) These conflicts must be resolved before merging into main.	Resolve conflicts locally and push changes to this branch.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, explaining font-size scaling for package names and monospace font implementation across OG images.
Linked Issues check	✅ Passed	The PR successfully implements the core objective from #1410: reducing package name font size on OG images when text exceeds a certain length via dynamic scaling.
Out of Scope Changes check	✅ Passed	All changes directly support the stated objectives: font configuration additions, monospace styling, dynamic title truncation/scaling, and minor layout adjustments align with the PR intent.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

⚔️ Resolve merge conflicts (beta)

• Auto-commit resolved conflicts to branch fix/og-name-size
• Post resolved changes as copyable diffs in a comment

---

No actionable comments were generated in the recent review. 🎉

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[danielroe]

👌