Skip to content

Comments

feat: add copy readme as markdown button on package page#1058

Merged
ghostdevv merged 10 commits intonpmx-dev:mainfrom
carwack:feat/add-pages-package-readme-button
Feb 6, 2026
Merged

feat: add copy readme as markdown button on package page#1058
ghostdevv merged 10 commits intonpmx-dev:mainfrom
carwack:feat/add-pages-package-readme-button

Conversation

@carwack
Copy link
Contributor

@carwack carwack commented Feb 5, 2026

This should solve: #1020

I did implement it the way I understood it and took my inspiration from the Ark UI docs.
This PR adds a new copy README as markdown button for the README on a package page. This makes it possible to have the README content as markdown in the users clipboard.

Screen.Recording.2026-02-06.at.00.06.26.mov

I have also added the translations for the following languages:

  • EN
  • fr-FR
  • de-DE
  • es
  • it-IT

@vercel
Copy link

vercel bot commented Feb 5, 2026

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

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Feb 5, 2026 11:42pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Feb 5, 2026 11:42pm
npmx-lunaria Ignored Ignored Feb 5, 2026 11:42pm

Request Review

@github-actions
Copy link

github-actions bot commented Feb 5, 2026

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
lunaria/files/de-DE.json Localization changed, will be marked as complete. 🔄️
lunaria/files/en-GB.json Localization changed, will be marked as complete. 🔄️
lunaria/files/en-US.json Source changed, localizations will be marked as outdated.
lunaria/files/es-419.json Localization changed, will be marked as complete. 🔄️
lunaria/files/es-ES.json Localization changed, will be marked as complete. 🔄️
lunaria/files/fr-FR.json Localization changed, will be marked as complete. 🔄️
lunaria/files/it-IT.json Localization changed, will be marked as complete. 🔄️
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
Copy link

codecov bot commented Feb 5, 2026

Codecov Report

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

Files with missing lines Patch % Lines
app/pages/package/[[org]]/[name].vue 7.69% 10 Missing and 2 partials ⚠️

📢 Thoughts on this report? Let us know!

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 5, 2026

📝 Walkthrough

Walkthrough

This PR adds functionality to copy README content as Markdown. It introduces translation strings across multiple locales for the "copy README as Markdown" action, extends the ReadmeResponse type to include the original markdown content, updates the server utility to provide this markdown, adds corresponding unit tests, and implements a new UI button with clipboard functionality on the package page component.

Possibly related PRs

Suggested reviewers

  • danielroe
🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check name Status Explanation
Description check ✅ Passed The pull request description directly relates to the changeset by explaining the addition of a copy README as markdown button with translations.

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

✨ Finishing touches
  • 📝 Generate docstrings
🧪 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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
i18n/locales/en.json (1)

213-226: ⚠️ Potential issue | 🟡 Minor

Capitalise “Markdown” in the label.
Minor copy consistency for a proper noun.

✏️ Proposed copy tweak
-      "copy_as_markdown": "Copy README as markdown"
+      "copy_as_markdown": "Copy README as Markdown"
🧹 Nitpick comments (2)
server/utils/readme.ts (1)

272-272: Consider making raw markdown lazy to avoid payload bloat.
Shipping both HTML and raw Markdown can nearly double response size for large READMEs. If this becomes a performance concern, consider fetching md on demand (or behind a flag) instead of always returning it.

Also applies to: 456-459

app/pages/package/[...package].vue (1)

1139-1172: Clean implementation of the copy button UI.

The button is correctly guarded by v-if="readmeData?.md" and integrates well alongside the existing TOC dropdown. Accessibility attributes are properly applied.

Two minor observations:

  1. Redundant disabled attribute (Line 1149): Since the parent TooltipApp already has v-if="readmeData?.md", the button only renders when md is truthy, making :disabled="!readmeData?.md" always evaluate to false. Consider removing it or keeping it for defensive coding if the structure might change.

  2. Overlapping CSS classes (Lines 1150-1153): The static class includes text-fg-subtle hover:text-fg, which duplicates the dynamic :class binding for the non-copied state. This is harmless but could be tidied up.

♻️ Optional: Remove redundant disabled and consolidate classes
               <button
                 type="button"
                 `@click`="copyReadme()"
-                :disabled="!readmeData?.md"
-                class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 text-fg-subtle hover:text-fg inline-flex items-center gap-1.5"
-                :class="
-                  copiedReadme ? 'text-accent bg-accent/10' : 'text-fg-subtle bg-bg hover:text-fg'
-                "
+                class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 inline-flex items-center gap-1.5"
+                :class="copiedReadme ? 'text-accent bg-accent/10' : 'text-fg-subtle bg-bg hover:text-fg'"
                 :aria-label="
                   copiedReadme ? $t('common.copied') : $t('package.readme.copy_as_markdown')
                 "

Based on learnings: The copy button pattern in this file is acceptable inline with the CSS-only approach for smooth animations; a reusable component may be introduced in the future.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Copy link
Contributor

@ghostdevv ghostdevv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

love it! I think your PR title needs casing correctly, I unfortunately don't have such powers

@carwack
Copy link
Contributor Author

carwack commented Feb 6, 2026

@ghostdevv happy to hear that! Yes I forgot a space I think but I can't edit the title 😅

@carwack carwack changed the title Feat:Add a copy README as markdown button on pages/package feat: add a copy readme as markdown button on pages/package Feb 6, 2026
@ghostdevv ghostdevv changed the title feat: add a copy readme as markdown button on pages/package feat: add copy readme as markdown button on package page Feb 6, 2026
@ghostdevv ghostdevv enabled auto-merge February 6, 2026 21:29
@ghostdevv ghostdevv added this pull request to the merge queue Feb 6, 2026
Merged via the queue into npmx-dev:main with commit c6e5798 Feb 6, 2026
17 of 18 checks passed
@carwack carwack deleted the feat/add-pages-package-readme-button branch February 6, 2026 21:35
@ghostdevv ghostdevv linked an issue Feb 6, 2026 that may be closed by this pull request
whitep4nth3r pushed a commit that referenced this pull request Feb 7, 2026
Co-authored-by: Willow (GHOST) <git@willow.sh>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add copy button for README

2 participants