Fix/blog back button 2022 by epifaniofrancisco · Pull Request #2024 · npmx-dev/npmx.dev

epifaniofrancisco · 2026-03-10T12:14:11Z

🔗 Linked issue

resolves #2022

🧭 Context

The Blog page didn’t include the same “back” navigation that exists on other informational pages (Privacy, Accessibility, Settings, etc.), causing inconsistent UX when navigating to /blog.

This PR fixes the Blog page and standardizes the back button implementation across the app.

📚 Description

Added a reusable <BackButton /> component:
Updated the Blog page header (app/pages/blog/index.vue) to include <BackButton />
Replaced inline back button markup in the following pages with <BackButton />:
- app/pages/accessibility.vue
- app/pages/compare.vue
- app/pages/pds.vue
- app/pages/privacy.vue
- app/pages/recharging.vue
- app/pages/settings.vue

…t across multiple pages

vercel · 2026-03-10T12:14:18Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 10, 2026 0:16am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 10, 2026 0:16am
npmx-lunaria	Ignored		Mar 10, 2026 0:16am

codecov · 2026-03-10T12:16:08Z

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
2127	1	2126	6

View the top 1 failed test(s) by shortest run time

test/unit/a11y-component-coverage.spec.ts > a11y component test coverage > should have accessibility tests for all components (or be explicitly skipped)

Stack Traces | 0.0131s run time

AssertionError: Missing a11y tests for 1 component(s):
  - BackButton.vue

To fix: Add tests in test/nuxt/a11y.spec.ts or add to SKIPPED_COMPONENTS in test/unit/a11y-component-coverage.spec.ts with justification.: expected 1 to equal +0

- Expected
+ Received

- 0
+ 1

 ❯ test/unit/a11y-component-coverage.spec.ts:167:12
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-g52709db6.20260226-1136_@opentelemetry+api@1.9.0_@ty_bb345341c28e9d2b29c1797600c0d1bd/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/index.js:145:14
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-g52709db6.20260226-1136_@opentelemetry+api@1.9.0_@ty_bb345341c28e9d2b29c1797600c0d1bd/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/index.js:915:28
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-g52709db6.20260226-1136_@opentelemetry+api@1.9.0_@ty_bb345341c28e9d2b29c1797600c0d1bd/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/index.js:1243:24
 ❯ runWithTimeout node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-g52709db6.20260226-1136_@opentelemetry+api@1.9.0_@ty_bb345341c28e9d2b29c1797600c0d1bd/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/index.js:1209:12
 ❯ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-g52709db6.20260226-1136_@opentelemetry+api@1.9.0_@ty_bb345341c28e9d2b29c1797600c0d1bd/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/index.js:1653:42
 ❯ Traces.$ node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-g52709db6.20260226-1136_@opentelemetry+api@1.9.0_@ty_bb345341c28e9d2b29c1797600c0d1bd/node_modules/@.../dist/chunks/traces.CCmnQaNT.js:142:29
 ❯ trace node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-g52709db6.20260226-1136_@opentelemetry+api@1.9.0_@ty_bb345341c28e9d2b29c1797600c0d1bd/node_modules/@.../dist/chunks/test.B8ej_ZHS.js:239:23
 ❯ runTest node_modules/.pnpm/@voidzero-dev+vite-plus-test@0.0.0-g52709db6.20260226-1136_@opentelemetry+api@1.9.0_@ty_bb345341c28e9d2b29c1797600c0d1bd/node_modules/@voidzero-dev/vite-plus-test/dist/@vitest/runner/index.js:1653:17

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

coderabbitai · 2026-03-10T12:17:56Z

📝 Walkthrough

Walkthrough

This pull request introduces a new reusable BackButton component and refactors eight existing pages to use it. The component encapsulates back-navigation functionality including router usage, conditional rendering based on navigation history, and styling. Eight pages (about, accessibility, blog, compare, pds, privacy, recharging, and settings) are refactored to remove duplicate useRouter() and useCanGoBack() composable calls, replacing inline back button markup with the new component. The blog page receives its first back button implementation.

Possibly related PRs

chore(ui): consistent back navigation #1164: Introduced the useCanGoBack composable that the new BackButton component now centralises and leverages across multiple pages.
fix: add back button and centre icon on compare page #941: Previously added back button functionality to compare.vue which is now refactored to use the reusable component.
chore: consistent back button across pages #936: Added inline back buttons and router-based navigation that are now consolidated into the new BackButton component.

Suggested reviewers

danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, describing the new BackButton component and its implementation across multiple pages.
Linked Issues check	✅ Passed	The PR successfully addresses issue `#2022` by introducing a reusable BackButton component and adding it to the Blog page and other informational pages, standardising back-button implementation.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue objectives. The PR introduces the BackButton component and applies it to the specified pages without unrelated modifications.

_{✏️ 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/components/BackButton.vue (1)
16-23: Remove inline focus-visible utility; rely on global CSS.

The project applies focus-visible styling for buttons globally via main.css. The inline focus-visible:outline-accent/70 class duplicates and potentially conflicts with the global rule.
♻️ Suggested fix
   <button
     v-if="canGoBack"
     type="button"
     :class="[
-      'inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0',
+      'inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0',
       $props.class,
     ]"
     `@click`="router.back()"
   >
Based on learnings: "In the npmx.dev project, focus-visible styling for buttons and selects is applied globally via main.css... individual buttons or selects in Vue components should not rely on inline focus-visible utility classes."

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 91e60ec1-f868-4cd9-9d32-ba1262534a48

📥 Commits

Reviewing files that changed from the base of the PR and between 3712560 and 63eb4e9.

📒 Files selected for processing (9)

app/components/BackButton.vue
app/pages/about.vue
app/pages/accessibility.vue
app/pages/blog/index.vue
app/pages/compare.vue
app/pages/pds.vue
app/pages/privacy.vue
app/pages/recharging.vue
app/pages/settings.vue

epifaniofrancisco added 2 commits March 10, 2026 12:53

feat(blog): add BackButton component to blog header

5ad0c2c

refactor: replace back button implementation with BackButton componen…

63eb4e9

…t across multiple pages

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

coderabbitai bot reviewed Mar 10, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix/blog back button 2022#2024

Fix/blog back button 2022#2024
epifaniofrancisco wants to merge 2 commits intonpmx-dev:mainfrom
epifaniofrancisco:fix/blog-back-button-2022

epifaniofrancisco commented Mar 10, 2026

Uh oh!

vercel bot commented Mar 10, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 10, 2026

Uh oh!

coderabbitai bot commented Mar 10, 2026

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

epifaniofrancisco commented Mar 10, 2026

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

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

Uh oh!

Uh oh!

codecov bot commented Mar 10, 2026

❌ 1 Tests Failed:

Uh oh!

coderabbitai bot commented Mar 10, 2026

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel bot commented Mar 10, 2026 •

edited

Loading