refactor(ui): move package external links to component

[MatteoGabriele]

🧭 Context

Smaller components are easier to work with and help prevent unrelated merge conflicts.

📚 Description

This PR extracts code from the Package into an individual PackageExternalLinks component to decrease the component's size.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 14, 2026 4:20pm

2 Skipped Deployments

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 71585f84-826c-4656-80cb-17f007cc9bdd

📥 Commits

Reviewing files that changed from the base of the PR and between d0b20ec and 5509b4a.

📒 Files selected for processing (1)

• app/components/Package/ExternalLinks.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/components/Package/ExternalLinks.vue

---

📝 Walkthrough

Walkthrough

This PR adds a new Vue 3 component app/components/Package/ExternalLinks.vue (script setup, TypeScript) that centralises rendering of package external links. It accepts props pkg: SlimPackument and optional jsrInfo: JsrPackageInfo, derives displayVersion, repositoryUrl via useRepositoryUrl, and repo metadata via useRepoMeta, computes homepage and funding URLs, maps repository providers to icon classes, and renders repository, stars, forks, homepage, issues, npm, JSR and funding links. The package page app/pages/package/[[org]]/[name].vue is refactored to replace inline external-link rendering with the new PackageExternalLinks component and related provider/icon/homepage/funding logic is removed. An accessibility test for PackageExternalLinks is added (test/nuxt/a11y.spec.ts).

Possibly related PRs

• refactor: move duplicated repositoryUrl in composable #2060: Changes repository URL derivation to use the shared useRepositoryUrl composable used by ExternalLinks.vue.
• feat: copy compare table as markdown #1533: Modifies the package page UI and introduces/updates standalone components and a11y tests similar to this refactor.

Suggested labels

idea

Suggested reviewers

• alexdln
• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, describing the extraction of external links code into a standalone component to reduce Package component size.

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

📝 Coding Plan

• Generate coding plan for human review comments

---

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

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

[coderabbitai]

Actionable comments posted: 2

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 36158c33-aab6-49a4-b89d-6e80d591ab92

📥 Commits

Reviewing files that changed from the base of the PR and between a170292 and d0b20ec.

📒 Files selected for processing (3)

• app/components/Package/ExternalLinks.vue
• app/pages/package/[[org]]/[name].vue
• test/nuxt/a11y.spec.ts

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

file="app/components/Link/Base.vue"

echo "== $file =="
sed -n '1,220p' "$file"

echo
echo "== title-related lines =="
rg -n -C2 '\btitle\b|v-bind="props"|<NuxtLink|<span' "$file"

Repository: npmx-dev/npmx.dev

Length of output: 5693

---

🏁 Script executed:

# Verify ExternalLinks.vue uses title attribute in the mentioned lines
sed -n '85,100p' app/components/Package/ExternalLinks.vue | cat -n

Repository: npmx-dev/npmx.dev

Length of output: 632

---

Add title prop to LinkBase and forward it to both template branches.

The title attribute passed on lines 89 and 96 is not declared as a prop in app/components/Link/Base.vue and will be silently dropped at runtime. The component uses a v-if/v-else fragment with a disabled <span> and <NuxtLink> branch; Vue 3 does not automatically apply fallthrough attributes in this pattern, and v-bind="props" only forwards declared props. Add title to defineProps and bind :title="title" on both the <span> and <NuxtLink> branches to ensure the hover text appears.

[codecov]

Codecov Report

❌ Patch coverage is 88.63636% with 5 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/ExternalLinks.vue	90.69%	4 Missing ⚠️
app/pages/package/[[org]]/[name].vue	0.00%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[graphieros]

Looks good to me :)