fix(ui): skip README badge markdown in package card summaries by Adebesin-Cell · Pull Request #2775 · npmx-dev/npmx.dev

Adebesin-Cell · 2026-05-20T12:41:15Z

Closes #2767.

Problem

When a package has no description in its package.json, npm's search API falls back to the README's leading content. For READMEs that start with badge markdown, the raw markdown leaks into the card (e.g. @nuxtjs/opencollective shows [![npm version][npm-v-src]][npm-v-href] ...).

Fix

Extend stripMarkdownImages in useMarkdown to also handle reference-style image badges (![alt][ref], [![alt][ref]][ref], [![alt](url)][ref], etc.) and orphan reference link definitions ([ref]: url). Refactored to one alternation + fixed-point loop so any nesting collapses without a per-shape regex.
When the description ends up empty after stripping, the card now just shows the metadata row underneath the name with no awkward gap.
Restructured Card.vue metadata into a single flex-wrap row (version → provenance → publisher → date → license → downloads with sm:ms-auto pinning downloads to the right). Removed the duplicated mobile downloads row.

Test plan

50 unit tests pass (pnpm test test/nuxt/composables/use-markdown.spec.ts), including 4 new regression tests for Package summary falls back to raw README markdown (badges/images) when no description is set #2767
Full suite green (123 files / 2490 tests)
Verified locally at /search?q=@nuxtjs/opencollective, /search?q=vite, /org/nuxtjs
Mobile responsive check on preview deploy

Closes npmx-dev#2767. npm's search API sometimes returns the README's leading badge markdown as the package description (e.g. @nuxtjs/opencollective). Extends the markdown stripper to handle reference-style image badges and collapses the side-column metadata into a single flex-wrap row so the card layout stays consistent when the description ends up empty. Also drops the duplicated mobile downloads row.

vercel · 2026-05-20T12:41:21Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	May 22, 2026 11:55am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	May 22, 2026 11:55am
npmx-lunaria	Ignored		May 22, 2026 11:55am

coderabbitai · 2026-05-20T12:41:24Z

📝 Walkthrough

Summary by CodeRabbit

Bug Fixes
- Improved markdown image handling to reliably remove reference-style images, badges and nested combinations.
Style
- Consolidated package card into a single unified metadata row across devices (version, publisher provenance badge, publication date, licence, weekly downloads).
Localisation
- Added a translatable label for "Version" in the package card.
Tests
- Added tests covering reference-style image/badge stripping regressions.

Walkthrough

Refactors markdown image stripping to remove reference-style badge and image markdown, adds regression tests, and consolidates the Package Card metadata into a single definition list with a new package.card.version translation and schema entry.

Changes

Package Card Summary and Layout

Layer / File(s)	Summary
Markdown image stripping with reference-style badge handling `app/composables/useMarkdown.ts`, `test/nuxt/composables/use-markdown.spec.ts`	`stripMarkdownImages` now uses a single precompiled alternation regex covering inline images, empty link wrappers, and reference link definition lines, applied iteratively until the text stabilises. New regression tests verify reference-style linked badges and standalone reference-style images are stripped and that reference link definitions are removed from output.
Unified package card definition list with version label `app/components/Package/Card.vue`, `i18n/locales/en.json`, `i18n/schema.json`	Replaces the prior split desktop/mobile metadata layout with a shared flex wrapper and a single `<dl class="contents">`. The list conditionally shows version, trusted publisher `ProvenanceBadge`, publisher username, published date, license, and weekly downloads (now using `common.per_week`). Adds `package.card.version` i18n key and a `version` string entry in the i18n schema.

Suggested reviewers

ghostdevv
serhalp
43081j

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing UI by skipping README badge markdown in package card summaries, directly addressing issue `#2767`.
Description check	✅ Passed	The description is detailed and directly related to the changeset, explaining the problem, fixes, and test plan for handling README badge markdown in package cards.
Linked Issues check	✅ Passed	The pull request fully addresses the requirements from issue `#2767` by refactoring stripMarkdownImages to handle reference-style badges and restructuring Card.vue metadata layout.
Out of Scope Changes check	✅ Passed	All changes are scoped to the stated objectives: markdown image stripping, package card metadata layout, i18n translations, and corresponding tests for issue `#2767`.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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

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

github-actions · 2026-05-20T12:42:04Z

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.

codecov · 2026-05-20T12:43:14Z

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!

…18n schema

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/components/Package/Card.vue`:
- Line 113: The template currently uses a truthy check on
result.downloads?.weekly in the div's v-if which hides a valid 0 value; update
the v-if on that div (the element referencing result.downloads?.weekly) to use a
null/undefined check (i.e., render when weekly is not null/undefined) so that 0
will still display.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b26355cf-2c9f-4bb1-8961-a9cb36a5ed69

📥 Commits

Reviewing files that changed from the base of the PR and between db974ce and 070d5ad.

📒 Files selected for processing (2)

app/components/Package/Card.vue
i18n/schema.json

coderabbitai · 2026-05-21T21:07:53Z

+          <dt class="sr-only">{{ $t('package.card.license') }}</dt>
+          <dd>{{ result.package.license }}</dd>
+        </div>
+        <div v-if="result.downloads?.weekly" class="flex items-center gap-1.5 sm:ms-auto">


⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Render weekly downloads when the value is 0

v-if="result.downloads?.weekly" hides a valid 0 value. Use a nullish check so zero still renders.

Suggested patch

- <div v-if="result.downloads?.weekly" class="flex items-center gap-1.5 sm:ms-auto"> + <div v-if="result.downloads?.weekly != null" class="flex items-center gap-1.5 sm:ms-auto">

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

<div v-if="result.downloads?.weekly" class="flex items-center gap-1.5 sm:ms-auto">

<div v-if="result.downloads?.weekly != null" class="flex items-center gap-1.5 sm:ms-auto">

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/components/Package/Card.vue` at line 113, The template currently uses a truthy check on result.downloads?.weekly in the div's v-if which hides a valid 0 value; update the v-if on that div (the element referencing result.downloads?.weekly) to use a null/undefined check (i.e., render when weekly is not null/undefined) so that 0 will still display.

coderabbitai

♻️ Duplicate comments (1)

app/components/Package/Card.vue (1)

113-113: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Render weekly downloads when the value is 0.

The current truthy check hides valid zero downloads. Use a nullish check to ensure zero still renders.

🔧 Proposed fix

-        <div v-if="result.downloads?.weekly" class="flex items-center gap-1.5 sm:ms-auto">
+        <div v-if="result.downloads?.weekly != null" class="flex items-center gap-1.5 sm:ms-auto">

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/components/Package/Card.vue` at line 113, The v-if currently hides valid
zero values because it checks truthiness on result.downloads?.weekly; change the
condition to a nullish check so 0 still renders, e.g. replace the v-if on the
element that references result.downloads?.weekly with a check like
result.downloads?.weekly != null (or result.downloads && result.downloads.weekly
!= null) so the node renders when weekly is 0 but stays hidden when weekly is
null/undefined.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Duplicate comments:
In `@app/components/Package/Card.vue`:
- Line 113: The v-if currently hides valid zero values because it checks
truthiness on result.downloads?.weekly; change the condition to a nullish check
so 0 still renders, e.g. replace the v-if on the element that references
result.downloads?.weekly with a check like result.downloads?.weekly != null (or
result.downloads && result.downloads.weekly != null) so the node renders when
weekly is 0 but stays hidden when weekly is null/undefined.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a598e92e-6174-4379-9a05-7a8bdc0236de

📥 Commits

Reviewing files that changed from the base of the PR and between 070d5ad and 66177bf.

📒 Files selected for processing (1)

app/components/Package/Card.vue

vercel Bot deployed to Preview – npmx.dev May 20, 2026 12:43 View deployment

Adebesin-Cell marked this pull request as ready for review May 21, 2026 19:18

fix(ui): move ProvenanceBadge out of dl to satisfy a11y, regenerate i…

070d5ad

…18n schema

coderabbitai Bot reviewed May 21, 2026

View reviewed changes

vercel Bot deployed to Preview – npmx.dev May 21, 2026 21:08 View deployment

fix(ui): place publish date next to version in package card

66177bf

vercel Bot deployed to Preview – npmx.dev May 22, 2026 11:55 View deployment

coderabbitai Bot reviewed May 22, 2026

View reviewed changes

gameroman added the needs review This PR is waiting for a review from a maintainer label May 22, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ui): skip README badge markdown in package card summaries#2775

fix(ui): skip README badge markdown in package card summaries#2775
Adebesin-Cell wants to merge 3 commits into
npmx-dev:mainfrom
Adebesin-Cell:fix/readme-summary-skip-badges

Adebesin-Cell commented May 20, 2026 •

edited

Loading

Uh oh!

vercel Bot commented May 20, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 20, 2026 •

edited

Loading

Summary by CodeRabbit

Walkthrough

Changes

Suggested reviewers

Uh oh!

github-actions Bot commented May 20, 2026 •

edited

Loading

Uh oh!

codecov Bot commented May 20, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot May 21, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<div v-if="result.downloads?.weekly" class="flex items-center gap-1.5 sm:ms-auto">
	<div v-if="result.downloads?.weekly != null" class="flex items-center gap-1.5 sm:ms-auto">

Uh oh!

Conversation

Adebesin-Cell commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Fix

Test plan

Uh oh!

vercel Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Suggested reviewers

Uh oh!

github-actions Bot commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

codecov Bot commented May 20, 2026

Codecov Report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot May 21, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Adebesin-Cell commented May 20, 2026 •

edited

Loading

vercel Bot commented May 20, 2026 •

edited

Loading

coderabbitai Bot commented May 20, 2026 •

edited

Loading

github-actions Bot commented May 20, 2026 •

edited

Loading