feat: add binary file warning by ShroXd · Pull Request #1959 · npmx-dev/npmx.dev

ShroXd · 2026-03-06T11:09:47Z

🔗 Linked issue

Resolves #1945

🧭 Context

The binary file is rendered directly, which is not a good user experience. Before supporting different binary file rendering (e.g. image), it would be better to show a warning and allow user to render it anyway.

📚 Description

Scenario	Screenshot
Light mode
Dark mode

vercel · 2026-03-06T11:09:52Z

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Mar 9, 2026 1:07pm
npmx.dev	Ready	Preview, Comment	Mar 9, 2026 1:07pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Mar 9, 2026 1:07pm

github-actions · 2026-03-06T11:10:35Z

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-03-06T11:12:28Z

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 · 2026-03-06T11:21:23Z

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: c71006c0-54ea-4578-88c5-8fc2304a9076

📥 Commits

Reviewing files that changed from the base of the PR and between d81687a and 0a27556.

📒 Files selected for processing (2)

i18n/locales/en.json
i18n/schema.json

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

i18n/schema.json
i18n/locales/en.json

📝 Walkthrough

Walkthrough

Adds binary-file detection and handling to the package code page. New utility app/utils/file-types.ts exports isBinaryFilePath(filePath: string): boolean backed by an internal BINARY_EXTENSIONS set. The page component computes isBinaryFile from the current path and uses it to short-circuit content fetching (returns null for binary paths) and to skip the standard file viewer. The UI now renders a binary-file warning block (including a CDN "view raw" link) and updates OG image/preview handling. Adds i18n keys common.binary_file and common.binary_rendering_warning.

Suggested reviewers

danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, explaining the context of handling binary files and showing UI screenshots.
Linked Issues check	✅ Passed	The PR successfully implements the core requirement from `#1945`: preventing binary files from displaying as raw text and showing a clear placeholder warning instead.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing binary file handling: utility function for detection, UI warning component, and i18n translations. No unrelated modifications detected.

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

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

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

coderabbitai

🧹 Nitpick comments (1)

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue (1)
547-552: Consider adding target="_blank" and rel="noopener noreferrer" for the external link.

The "View raw file" link points to an external CDN URL but doesn't include the target="_blank" attribute. This differs from the similar raw file link on line 507-515, which opens in a new tab. For consistency and better UX (users likely expect external links to open in a new tab), consider adding these attributes.
Proposed fix
             <LinkBase
               variant="button-secondary"
               :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               {{ $t('code.view_raw') }}
+              <span class="i-lucide:external-link w-3 h-3 inline-block ml-1" aria-hidden="true" />
             </LinkBase>

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4b5f336c-2b3d-46de-aaf1-d539e366668d

📥 Commits

Reviewing files that changed from the base of the PR and between 58da597 and 484e055.

📒 Files selected for processing (4)

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
app/utils/file-types.ts
i18n/locales/en.json
i18n/schema.json

43081j · 2026-03-06T15:37:06Z

I'm not sure I would have this "render anyway" option. If the user really wants to look at a binary file, they can "view raw".

This is how GitHub does it too and it does work pretty well

ShroXd · 2026-03-07T00:27:18Z

I'm not sure I would have this "render anyway" option. If the user really wants to look at a binary file, they can "view raw".

This is how GitHub does it too and it does work pretty well

Hi, thanks for the feedback!

That's a good point! I checked the behavior on Github, it does look good. I will update my code.

coderabbitai

Actionable comments posted: 1

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 698b1378-45f1-45d6-bf35-f1b53972e13f

📥 Commits

Reviewing files that changed from the base of the PR and between 484e055 and b934ca7.

📒 Files selected for processing (3)

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
i18n/locales/en.json
i18n/schema.json

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

i18n/schema.json
i18n/locales/en.json

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

43081j · 2026-03-09T14:04:36Z

app/utils/file-types.ts

+])
+
+export function isBinaryFilePath(filePath: string): boolean {
+  const ext = filePath.split('.').pop()?.toLowerCase() ?? ''


It would be more efficient to use lastIndexOf here and, if it is more than -1, slice from there to get the extension

vercel bot deployed to Preview – npmx.dev March 6, 2026 11:12 View deployment

ShroXd marked this pull request as ready for review March 6, 2026 11:17

coderabbitai bot reviewed Mar 6, 2026

View reviewed changes

vercel bot had a problem deploying to Preview – npmx.dev March 7, 2026 00:37 Failure

vercel bot deployed to Preview – docs.npmx.dev March 7, 2026 00:37 View deployment

coderabbitai bot reviewed Mar 7, 2026

View reviewed changes

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue Show resolved Hide resolved

ShroXd added 4 commits March 7, 2026 08:41

feat: add placeholder for binary file

d897191

feat: add en for binary file placeholder related text

b23cd49

fix: follow existing pattern of naming

3339d42

fix: remove render anyway button

435160b

ShroXd force-pushed the binary-file-placeholder branch from b934ca7 to 435160b Compare March 7, 2026 00:41

vercel bot had a problem deploying to Preview – npmx.dev March 7, 2026 00:43 Failure

fix: fix render condition of file viewer

d81687a

vercel bot had a problem deploying to Preview – npmx.dev March 7, 2026 00:50 Failure

Merge branch 'main' into binary-file-placeholder

0a27556

vercel bot deployed to Preview – docs.npmx.dev March 9, 2026 13:06 View deployment

vercel bot deployed to Preview – npmx.dev March 9, 2026 13:07 View deployment

43081j reviewed Mar 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add binary file warning#1959

feat: add binary file warning#1959
ShroXd wants to merge 6 commits intonpmx-dev:mainfrom
ShroXd:binary-file-placeholder

ShroXd commented Mar 6, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 6, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 6, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 6, 2026

Uh oh!

coderabbitai bot commented Mar 6, 2026 •

edited

Loading

Reviews paused

Walkthrough

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Uh oh!

43081j commented Mar 6, 2026

Uh oh!

ShroXd commented Mar 7, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

43081j Mar 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

ShroXd commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercel bot commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 6, 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 Mar 6, 2026

Codecov Report

Uh oh!

coderabbitai bot commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

43081j commented Mar 6, 2026

Uh oh!

ShroXd commented Mar 7, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

43081j Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ShroXd commented Mar 6, 2026 •

edited

Loading

vercel bot commented Mar 6, 2026 •

edited

Loading

github-actions bot commented Mar 6, 2026 •

edited

Loading

coderabbitai bot commented Mar 6, 2026 •

edited

Loading