Skip to content

fix(docs): render the Copy page button on real docs pages and fix hydration 404s#740

Merged
binaryk merged 1 commit into
10.xfrom
fix/docs-copy-page-placement
Jul 11, 2026
Merged

fix(docs): render the Copy page button on real docs pages and fix hydration 404s#740
binaryk merged 1 commit into
10.xfrom
fix/docs-copy-page-placement

Conversation

@binaryk

@binaryk binaryk commented Jul 8, 2026

Copy link
Copy Markdown
Collaborator

Follow-up to #739 — the Copy page button never rendered in production, and the audit uncovered two hydration bugs.

Root cause

  • The button was wired into pages/[...slug].vue, but every /docs/* URL is rendered by the more specific catch-all pages/docs/[...slug].vue — dead code.
  • It was referenced as <CopyPageDropdown />, but the auto-import name for components/docs/CopyPageDropdown.vue is DocsCopyPageDropdown.

Changes

  • Render DocsCopyPageDropdown in the title row (top-right, Forge-style) of the real docs renderer.
  • Delete the root catch-all pages/[...slug].vue: the content collection only contains /docs/**, so it served nothing — and its competing route caused client-side 404s after hydration when a docs URL was hard-loaded with a trailing slash.
  • Remove the nested <article> (layout + page both emitted one) that logged a hydration mismatch on every docs page.
  • Fix doubled item descriptions in the dropdown (UDropdownMenu renders item.description natively; the custom slot duplicated it).
  • Delete dead layouts/default.vue + TheHeader/TheSidebar/TheTableOfContents (unused since the docs layout took over) and add the ⌘K badge to the active search button.

Verification (full static build + headless Chromium against dist/)

  • npm run generate passes, 77 routes prerendered; .md twins + llms.txt/llms-full.txt regression-checked
  • Split button in the title row, light and dark mode
  • Dropdown: Copy page / View as Markdown (/docs/api/getters.md) / Open in ChatGPT / Open in Claude, each caption rendered once
  • Copy page fetches the .md twin and shows the Copied state; clipboard receives real markdown
  • Search modal via header button: fuzzy section-level results ("gettr" matches Getter pages), grouped with highlights, AI-tip footer
  • Hard-loading /docs/api/getters and /docs/api/getters/ both hydrate without the 404 collapse

…ration 404s

The Copy page split button shipped in #739 never rendered: it was wired
into pages/[...slug].vue while all /docs/* routes are handled by the
more specific pages/docs/[...slug].vue, and it was referenced as
<CopyPageDropdown /> while the auto-import name is DocsCopyPageDropdown.

- Render DocsCopyPageDropdown in the title row of pages/docs/[...slug].vue
- Delete the root catch-all pages/[...slug].vue: it served no content
  (only /docs/** exists in the content collection) and its competing
  route caused client-side 404s after hydration on trailing-slash docs
  URLs
- Drop the redundant nested <article> that caused hydration mismatches
  on every docs page
- Fix doubled item descriptions in the copy dropdown (UDropdownMenu
  renders item.description natively)
- Remove dead layouts/default.vue + TheHeader/TheSidebar/TheTableOfContents
  (unused since the docs layout took over) and add the ⌘K hint to the
  active search button

Verified with a full static build + headless-browser checks: button in
the title row in light/dark, 4-item dropdown with correct .md/ChatGPT/
Claude targets, fuzzy section-level search with the AI-tip footer, and
no hydration 404s on slash/no-slash hard loads.
@what-the-diff

what-the-diff Bot commented Jul 8, 2026

Copy link
Copy Markdown

PR Summary

  • Removal of three components
    These components have been entirely removed from the codebase:
    • TheHeader.vue
    • TheSidebar.vue
    • TheTableOfContents.vue

This can be seen as an effort for simplifying the overall structure of the project.

  • Updates in CopyPageDropdown.vue
    Alterations to this component have been made for more streamlined and cleaned-up code. This chiefly includes removing an unneeded container div.

  • Enhancements in WebsiteNavbar.vue
    In this component, improvements have been made to the UContentSearchButton - providing it with extra properties for better accessibility and greater design flexibility.

  • Removal of layout file
    The ‘default.vue’ layout file has been totally removed. Again, this might signal an initiative towards code simplification.

  • Removal of documentation page file
    The main documentation page file '[...slug].vue' has been completely removed.

  • Updates in documentation page for specific slugs
    Critically, the layout and structure of the documentation pages has been modified. This involves incorporating the DocsCopyPageDropdown and updating the way documentation content is rendered. This could have been done for a superior user experience or for easier content management.

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying laravel-restify with  Cloudflare Pages  Cloudflare Pages

Latest commit: 4c4b398
Status: ✅  Deploy successful!
Preview URL: https://1ed064c8.laravel-restify.pages.dev
Branch Preview URL: https://fix-docs-copy-page-placement.laravel-restify.pages.dev

View logs

@binaryk binaryk merged commit 782f15b into 10.x Jul 11, 2026
34 checks passed
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.

1 participant