feat(portal): add title anchors and content page table of contents#86
Draft
BatLeDev wants to merge 6 commits into
Draft
feat(portal): add title anchors and content page table of contents#86BatLeDev wants to merge 6 commits into
BatLeDev wants to merge 6 commits into
Conversation
BatLeDev
force-pushed
the
feat-content-page-toc
branch
from
d2c2b02 to
59ec325
Compare
BatLeDev
force-pushed
the
feat-content-page-toc
branch
2 times, most recently
from
b227b2e to
d37935f
Compare
BatLeDev
force-pushed
the
feat-content-page-toc
branch
4 times, most recently
from
fa918d0 to
7896f99
Compare
- title block: optional anchor (enable switch) + opt-in table-of-contents entry with a short label override - the anchor slug is generated from the title content at build and deduplicated per page, so duplicating a title just works - copiable anchor on hover with native title (RGAA) - URL hash set on click and scrolled-to on load (scroll-margin-top = header offset) - sommaire: sticky aside on lg+, collapses to a button + menu otherwise - sommaire hidden on full-width pages, shown only when a title is anchored - sommaire panel on background color with a rounded bottom-left corner so it stays readable over a banner - long titles wrap instead of being truncated (portals_v1 regression)
…ort anchor deep links
…navigation bar Keep the header and navigation bar as a single app bar (the navigation bar is the bar's extension): two stacked app bars overlap during server-side rendering because Vuetify only computes their stacked top offset after mount. Since a single bar with scroll-behavior=hide collapses the layout offset (--v-layout-top) to 0 even though the navigation bar extension stays visible, derive the navigation bar's bottom offset ourselves to position app-positioned children (the table of contents drawer/FAB and the navigation drawer) below it. A single banner landmark is preserved via the tag prop.
Use an explicit v-list-item-title with text-wrap instead of the title prop, whose default v-list-item-title truncates long titles with an ellipsis.
Give the navigation container min-width:0 so it can shrink below the tabs' content width. Without it v-tabs stretched the navigation bar and was clipped instead of overflowing internally, so Vuetify never flagged the slide group as overflowing and the swap to the drawer never triggered.
BatLeDev
force-pushed
the
feat-content-page-toc
branch
3 times, most recently
from
23dbbaa to
d431379
Compare
Full-bleed banners (banner-fluid) break out to width:100vw, which includes the vertical scrollbar width and adds a few pixels of horizontal overflow: a thin dark gutter down the right edge. It only becomes visible once scrolled past the banner, e.g. when landing on an anchor (#section), which made it look tied to the URL hash. Clip horizontal overflow at the app root, which keeps the full-bleed banner intact.
BatLeDev
force-pushed
the
feat-content-page-toc
branch
from
d431379 to
db33358
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add title anchors and a content-page table of contents to the portal.
title, RGAA) and gives the heading a stable id; the URL hash is set on click and scrolled to on load (header offset handled viascroll-margin-top)--v-layout-topto 0 in that caseconfig._tocis computed server-side from the opted-in anchored titles in document order, reusing the shared element traversal so titles nested in columns or catalog blocks are included; anchor slugs are validated server-side (canonical format + unique per page)Why: a standing TODO to let a title block carry an anchor and to display a navigable table of contents on content pages.
Heads-up:
layout-page.vueis a shared layout used by many pages — the table of contents renders only when at least one title opts into it, otherwise the layout is unchanged._tocis computed on create/patch only, so existing pages show no table of contents until their next edit + publish (the portal degrades gracefully via_toc ?? []). No backfill migration is included.