feat: use i18n for hardcoded strings in components and pages

[Sigmabrogz]

Closes #2128

Replaced hardcoded strings with i18n translations across the following files:

• app/pages/blog/index.vue
• app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
• app/components/diff/ViewerPanel.vue
• app/components/Package/SkillsModal.vue

Added missing keys to en.json.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 18, 2026 6:13pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 18, 2026 6:13pm
npmx-lunaria	Ignored		Mar 18, 2026 6:13pm

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

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/diff/ViewerPanel.vue	66.66%	1 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request replaces hardcoded user-facing text strings with localised translation keys across multiple Vue components and pages. Specifically, it updates the blog index, package comparison pages, diff viewer panel, and skills modal to reference i18n translation keys instead of static English strings. The English locale file is expanded with new translation entries for blog content, diff viewer controls, file comparison messaging, and npm/CLI method labels. No logic, data flow, or structural changes are introduced.

Possibly related PRs

• chore(i18n): sync pt-BR key order and formatting #2104: Synchronises Portuguese (pt-BR) locale file with the same set of newly introduced translation keys, directly complementing this PR's localisation additions.
• feat(i18n): detect missing and dynamic translation keys #1046: Introduces i18n validation and CI checks to ensure components correctly reference valid translation keys, providing infrastructure support for the translation wiring added here.
• fix(i18n): add missing pt-BR translations #2090: Adds Portuguese translations for overlapping UI keys across blog, diff viewer, and skills components introduced in this PR.

Suggested reviewers

• danielroe
• graphieros
• userquin

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description accurately describes the changes made: replacing hardcoded strings with i18n translations across four specific files and adding missing keys to en.json.
Linked Issues check	✅ Passed	All requirements from issue #2128 are met: hardcoded strings in the four specified files (blog/index.vue, diff viewer page, ViewerPanel.vue, SkillsModal.vue) have been replaced with i18n translations and corresponding keys added to en.json.
Out of Scope Changes check	✅ Passed	All changes are within scope: modifications are limited to replacing hardcoded strings with i18n translations in the specified files and updating the translation file, with no unrelated alterations introduced.

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

[coderabbitai]

Caution

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

⚠️ Outside diff range comments (1)

app/components/diff/ViewerPanel.vue (1)

148-148: ⚠️ Potential issue | 🟡 Minor

Several strings remain hardcoded despite having i18n keys available.

The following strings should be localised to complete the i18n work for this component:

Line	Current	Suggested
148	Options	{{ $t('compare.viewer.options') }}
301	View file	{{ $t('compare.viewer.view_file') }}
338	View in code browser	{{ $t('compare.viewer.view_in_code_browser') }}
348	No content changes detected	{{ $t('compare.viewer.no_content_changes') }}

These keys already exist in i18n/locales/en.json (lines 1219, 1225, 1228, 1229).

🔧 Proposed fix

             <span class="i-lucide:settings w-3.5 h-3.5" />
-            Options
+            {{ $t('compare.viewer.options') }}
             <span

           class="px-2 py-1 text-xs text-fg-muted hover:text-fg bg-bg-muted border border-border rounded transition-colors"
           target="_blank"
         >
-          View file
+          {{ $t('compare.viewer.view_file') }}
         </NuxtLink>

           class="text-xs text-fg-muted hover:text-fg underline"
         >
-            View in code browser
+            {{ $t('compare.viewer.view_in_code_browser') }}
           </NuxtLink>

       <div
         v-else-if="diff && diff.hunks.length === 0"
         class="py-8 text-center text-fg-muted text-sm"
       >
-        No content changes detected
+        {{ $t('compare.viewer.no_content_changes') }}
       </div>

Also applies to: 301-301, 338-338, 348-348

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8c3bd668-6049-407a-bf86-541c8f6aa8a9

📥 Commits

Reviewing files that changed from the base of the PR and between 77c4570 and ae0348f.

📒 Files selected for processing (5)

• app/components/Package/SkillsModal.vue
• app/components/diff/ViewerPanel.vue
• app/pages/blog/index.vue
• app/pages/diff/[[org]]/[packageName]/v/[versionRange].vue
• i18n/locales/en.json