feat(ui): show maintainers avatars

[bluwy]

🔗 Linked issue

n/a

🧭 Context

I think it would be nice if the maintainers section showed the avatars.

It seems from #435 we're ok with displaying the avatar, but it was only implemented in the user/org pages.

📚 Description

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 17, 2026 1:36am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 17, 2026 1:36am
npmx-lunaria	Ignored		Mar 17, 2026 1:36am

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

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: 64008338-b79c-4df7-8086-0da8f3953b23

📥 Commits

Reviewing files that changed from the base of the PR and between 1d310bf and 13178b9.

📒 Files selected for processing (4)

• app/components/Package/Maintainers.vue
• i18n/locales/en.json
• i18n/schema.json
• test/nuxt/a11y.spec.ts

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

• test/nuxt/a11y.spec.ts

---

📝 Walkthrough

Walkthrough

Adds a size prop ('xs' | 'lg') to the UserAvatar component with computed helpers for pixel size, CSS class and text class; avatar markup now supports dynamic sizing and an SVG fallback. Maintainers.vue replaces the plain maintainer link with an i18n-t wrapper that injects a UserAvatar in an avatar slot, a char126 slot for the tilde, and a name slot for the maintainer name. Two user pages now pass size="lg" to UserAvatar. Tests updated to include size: 'lg' and a new accessibility test covers both sizes. New i18n key and schema entry maintainer_template added.

Possibly related PRs

• fix(i18n): various rtl and arabic fixes #760: Modifies app/components/Package/Maintainers.vue (related changes to maintainer link rendering and text direction), likely overlapping the same component adjustments.

Suggested reviewers

• danielroe
• zeucapua
• alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description directly relates to the changeset, explaining the motivation to add avatars to the maintainers section and providing visual evidence of the intended outcome.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 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.}

Tip

CodeRabbit can use your project's `biome` configuration to improve the quality of JS/TS/CSS/JSON code reviews.

Add a configuration file to your project to customize how CodeRabbit runs biome.

[bluwy]

I couldn't figure out how to remove the underline style if wrapped in an anchor tag, so I used an SVG here. Seems like you need block or inline-block in order to override it, but the parent div is a flex which seems to make anything under not work.

[coderabbitai]

Actionable comments posted: 2

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 812011a8-23c3-45be-9c32-904fbc5a5f41

📥 Commits

Reviewing files that changed from the base of the PR and between d2744e7 and ba54e09.

📒 Files selected for processing (2)

• app/components/Package/Maintainers.vue
• app/components/User/Avatar.vue

[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]

🧹 Nitpick comments (1)

test/nuxt/a11y.spec.ts (1)

2854-2878: Consider adding accessibility tests for size: 'xs'.

All three UserAvatar tests now use size: 'lg', but the xs variant is also used in the codebase (e.g., in the maintainers section). Adding at least one test with size: 'xs' would ensure both size variants are covered by accessibility audits.

🧪 Suggested addition for xs size coverage

+    it('should have no accessibility violations with xs size', async () => {
+      const component = await mountSuspended(UserAvatar, {
+        props: { username: 'testuser', size: 'xs' },
+      })
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(UserAvatar, {
         props: { username: 'testuser', size: 'lg' },

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a55b1986-1c31-4e7f-b07f-4fec3efc6b35

📥 Commits

Reviewing files that changed from the base of the PR and between ba54e09 and 4260601.

📒 Files selected for processing (1)

• test/nuxt/a11y.spec.ts

[github-actions]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

implemented ✅