fix(docs): prevent 404 on eclair demo link by NTCoding · Pull Request #93 · NTCoding/living-architecture

NTCoding · 2026-01-09T22:42:37Z

User description

Fixes the 404 error when clicking the "View Demo" link from the docs homepage.

The issue was that VitePress's internal router was intercepting clicks in the bubbling phase before our eclair link handler could run. Changed the event listener to use the capture phase (third argument true) so our handler executes before VitePress can intercept the click.

This is a one-line fix that adds the capture phase flag to both addEventListener and removeEventListener calls in apps/docs/.vitepress/theme/Layout.vue.

PR Type

Bug fix

Description

Fix 404 error on eclair demo link click
Use capture phase for event listener to prevent VitePress router interception
Ensure eclair link handler executes before VitePress intercepts click event

Diagram Walkthrough

flowchart LR
  A["Click on eclair link"] --> B["Event listener in capture phase"]
  B --> C["Eclair handler executes first"]
  C --> D["Prevent VitePress interception"]
  D --> E["Navigate to correct URL"]

File Walkthrough

Relevant files

Bug fix

Layout.vue `Enable capture phase for eclair link handler` apps/docs/.vitepress/theme/Layout.vue Added capture phase flag `true` to `document.addEventListener` call Added capture phase flag `true` to `document.removeEventListener` call Ensures eclair link handler runs before VitePress router can intercept clicks	+2/-2

Summary by CodeRabbit

Bug Fixes
- Fixes inconsistent click behavior in docs links so modifier keys and non-left clicks behave as expected.
Chores
- Prevents duplicate click handlers and ensures link clicks intended for the external app perform a full-page navigation for more reliable behavior.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

The "View Demo" link was causing a 404 because VitePress's internal router intercepted clicks in the bubbling phase before our handler could run. Changed to capture phase (third argument true) so our eclair link handler runs before VitePress can intercept. Co-Authored-By: Claude Opus 4.5 <[email protected]>

coderabbitai · 2026-01-09T22:42:46Z

📝 Walkthrough

Walkthrough

The document-level click handler in apps/docs/.vitepress/theme/Layout.vue was modified: it now runs in the capture phase, omits the defaultPrevented check, only bypasses navigation for modifier keys or left-click, calls event.stopImmediatePropagation() after preventDefault(), and forces full-page navigation to the Eclair URL (bypassing the VitePress router).

Changes

Cohort / File(s)	Summary
Layout click handler `apps/docs/.vitepress/theme/Layout.vue`	Listener moved to capture phase (registered/removed with `true`); removed `defaultPrevented` check; navigation decision now based on modifier keys and `button === 0`; added `event.stopImmediatePropagation()` after `preventDefault()`; comment/logic to force full-page navigation to Eclair (bypasses VitePress router).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 I hopped on the capture, quick and spry,
Catching clicks before they fly,
No defaults to block my pace,
I stop the noise and steer the race,
Full-page bound — a rabbit's sly sky! 🥕

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(docs): prevent 404 on eclair demo link' directly addresses the main issue being fixed - preventing a 404 error on the eclair demo link navigation.

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

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0b1e976 and 806bc89.

📒 Files selected for processing (1)

apps/docs/.vitepress/theme/Layout.vue

🧰 Additional context used

🧠 Learnings (3)

📓 Common learnings

Learnt from: NTCoding
Repo: NTCoding/living-architecture PR: 58
File: apps/docs/.vitepress/theme/Layout.vue:18-21
Timestamp: 2026-01-06T18:04:54.841Z
Learning: In `apps/docs/.vitepress/theme/Layout.vue`, NTCoding prefers keeping explicit path-checking conditions in `isEclairPath()` even when technically redundant, as they improve clarity and readability over minimal optimization.

Learnt from: CR
Repo: NTCoding/living-architecture PR: 0
File: apps/eclair/CLAUDE.md:0-0
Timestamp: 2026-01-07T08:55:23.513Z
Learning: Applies to apps/eclair/**/*.vue : When adding document/window event listeners in Vue components, always clean up on unmount using `onUnmounted` to prevent memory leaks

📚 Learning: 2026-01-06T18:04:54.841Z

Learnt from: NTCoding
Repo: NTCoding/living-architecture PR: 58
File: apps/docs/.vitepress/theme/Layout.vue:18-21
Timestamp: 2026-01-06T18:04:54.841Z
Learning: In `apps/docs/.vitepress/theme/Layout.vue`, NTCoding prefers keeping explicit path-checking conditions in `isEclairPath()` even when technically redundant, as they improve clarity and readability over minimal optimization.

Applied to files:

apps/docs/.vitepress/theme/Layout.vue

📚 Learning: 2026-01-07T08:55:23.513Z

Learnt from: CR
Repo: NTCoding/living-architecture PR: 0
File: apps/eclair/CLAUDE.md:0-0
Timestamp: 2026-01-07T08:55:23.513Z
Learning: Applies to apps/eclair/**/*.vue : When adding document/window event listeners in Vue components, always clean up on unmount using `onUnmounted` to prevent memory leaks

Applied to files:

apps/docs/.vitepress/theme/Layout.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: main

🔇 Additional comments (5)

apps/docs/.vitepress/theme/Layout.vue (5)

25-26: LGTM! Clear and accurate comment.

The updated comment accurately describes the condition that lets the browser handle modifier keys and middle-click events.

37-37: LGTM! Helpful comment explaining the intent.

The comment clearly explains that the full-page navigation is intentional to bypass the VitePress router.

43-44: LGTM! This is the core fix for the 404 issue.

Switching to the capture phase (third argument true) ensures this handler runs before VitePress's router handler, which prevents the 404. Both addEventListener and removeEventListener consistently use true, ensuring proper cleanup.

24-41: Remove this review comment — the concern is unfounded.

The search for other capture-phase click handlers found none. Only the handler in Layout.vue at line 43 exists in the codebase. Since there are no other capture-phase handlers that could have called preventDefault() before this one runs, the omission of the defaultPrevented check is not problematic. The handler can safely proceed with its navigation logic without this check.

Likely an incorrect or invalid review comment.

39-39: The stopImmediatePropagation() call is necessary and correctly implemented.

The handler is scoped to /eclair paths only and runs in capture phase. It deliberately prevents the VitePress router from intercepting these links to enable full-page navigation. No analytics, logging, or other handlers in the docs app would be affected by this change.

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

qodo-code-review · 2026-01-09T22:42:57Z

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

cloudflare-workers-and-pages · 2026-01-09T22:43:13Z

Deploying living-architecture with Cloudflare Pages

Latest commit:	`806bc89`
Status:	✅ Deploy successful!
Preview URL:	https://425e0bfc.living-architecture.pages.dev
Branch Preview URL:	https://fix-eclair-demo-404.living-architecture.pages.dev

View logs

qodo-code-review · 2026-01-09T22:43:53Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Use options object for event listener Use an options object with `{ capture: true }` for `addEventListener` and `removeEventListener` to improve code clarity. apps/docs/.vitepress/theme/Layout.vue [42-43] -document.addEventListener('click', handler, true) -return () => document.removeEventListener('click', handler, true) +const listenerOptions = { capture: true } +document.addEventListener('click', handler, listenerOptions) +return () => document.removeEventListener('click', handler, listenerOptions) Apply / Chat Suggestion importance[1-10]: 3 __ Why: This is a minor improvement for code clarity and maintainability. Using `{ capture: true }` is more explicit than `true`, but the current code is functionally correct.	Low
Update

Remove defaultPrevented check and add stopImmediatePropagation to ensure our handler forces full page navigation before VitePress can intercept and render its 404 page. Co-Authored-By: Claude Opus 4.5 <[email protected]>

sonarqubecloud · 2026-01-09T22:54:10Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

NTCoding and others added 2 commits January 9, 2026 22:41

Merge remote-tracking branch 'origin/main' into fix-eclair-demo-404

0b1e976

qodo-code-review Bot added the Review effort 1/5 label Jan 9, 2026

coderabbitai Bot approved these changes Jan 9, 2026

View reviewed changes

fix(docs): bypass VitePress router for eclair links

806bc89

Remove defaultPrevented check and add stopImmediatePropagation to ensure our handler forces full page navigation before VitePress can intercept and render its 404 page. Co-Authored-By: Claude Opus 4.5 <[email protected]>

NTCoding merged commit 587a8d9 into main Jan 9, 2026
17 checks passed

This was referenced Jan 10, 2026

fix(docs): fix eclair demo 404 by bypassing VitePress router #96

Merged

docs: add debugging patterns from eclair 404 fix learnings #100

Closed

docs: add debugging patterns from eclair 404 fix learnings #103

Merged

Navigation Menu

Repository navigation

fix(docs): prevent 404 on eclair demo link - #93

fix(docs): prevent 404 on eclair demo link#93
NTCoding merged 3 commits into
mainfrom
fix-eclair-demo-404

NTCoding commented Jan 9, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jan 9, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

qodo-code-review Bot commented Jan 9, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Jan 9, 2026 •

edited

Loading

Uh oh!

qodo-code-review Bot commented Jan 9, 2026 •

edited

Loading

Uh oh!

sonarqubecloud Bot commented Jan 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

NTCoding commented Jan 9, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

PR Type

Description

Diagram Walkthrough

File Walkthrough

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

qodo-code-review Bot commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Compliance Guide 🔍

Uh oh!

cloudflare-workers-and-pages Bot commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying living-architecture with Cloudflare Pages

Uh oh!

qodo-code-review Bot commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Code Suggestions ✨

Uh oh!

sonarqubecloud Bot commented Jan 9, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

NTCoding commented Jan 9, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jan 9, 2026 •

edited

Loading

qodo-code-review Bot commented Jan 9, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Jan 9, 2026 •

edited

Loading

qodo-code-review Bot commented Jan 9, 2026 •

edited

Loading