feat: improvements for og-image-package

[alexdln]

Design improvements and likes addition to og-image for package pages

Screenshots

Before / After

Improved the icons, colors, margins, and the box has been centered within the container. Added likes

For testing, open the path /__og-image__/image/package/{PACKAGE_NAME}/og.png

Closes #907

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 4, 2026 4:29pm

2 Skipped Deployments

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This change updates the open graph package image component to display package likes alongside existing metadata. The modification introduces a data fetching operation for likes information with default fallback values and integrates it into the server-side refresh flow. The UI has been enhanced with new icon-based elements including a heart icon for the likes count, updated download metrics display, conditional license badge rendering, and refined star/score presentation. These changes involve adjustments to spacing, typography, and colour theming throughout the component.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description directly relates to the changeset, mentioning design improvements, likes addition, and icon/colour updates that align with the code changes.
Linked Issues check	✅ Passed	The PR implements the core requirement from issue #907 by adding likes data fetching and displaying the totalLikes value in the OG image component.
Out of Scope Changes check	✅ Passed	All changes are scoped to the og-image package component; icon updates, styling adjustments, and likes addition align with stated PR objectives.

_{✏️ 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

---

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

[mikouaji]

I think the icon would look better a bit to the top, more like this:

It's 2px closer to the top