Skip to content

feat(theme): add id attribute to group/category section headings#3100

Merged
Gerrit0 merged 3 commits into
TypeStrong:masterfrom
Metbcy:fix/group-heading-id-attrs
May 31, 2026
Merged

feat(theme): add id attribute to group/category section headings#3100
Gerrit0 merged 3 commits into
TypeStrong:masterfrom
Metbcy:fix/group-heading-id-attrs

Conversation

@Metbcy

@Metbcy Metbcy commented May 3, 2026

Copy link
Copy Markdown
Contributor

Closes #3029.

Summary

Adds an id attribute to the <h2> group/category section headings rendered by the default theme's members and moduleReflection partials so that section headers can be linked to directly via fragment URLs (e.g. …/MyClass.html#methods).

Changes

  • src/lib/output/themes/default/partials/members.tsx — slug section.title via context.slugger.slug(...) and pass it to the heading <h2> as id.
  • src/lib/output/themes/default/partials/moduleReflection.tsx — same treatment for the module-reflection sections (skipped for the unnamed/none section, which has no title to slug).
  • CHANGELOG.md — Unreleased note under Features.
  • Snapshot specs regenerated with pnpm rebuild_specs (only the new id attribute is added to the h2 tag — no other changes).

The slugger is the existing per-page Slugger instance, which already tracks heading collisions for member anchors, so section anchors will be deduplicated against everything else on the page automatically.

Testing

  • pnpm lint — clean.
  • pnpm build — clean.
  • pnpm test — 1046 passing.
  • pnpm rebuild_specs — snapshot diff is exclusively the new id attributes.

Closes TypeStrong#3029.

Adds an `id` attribute (slugged via `context.slugger`) to the `<h2>`
section headings produced by the default theme's `members` and
`moduleReflection` partials so that section headers can be linked to
directly via fragment URLs.
@Gerrit0

Gerrit0 commented May 3, 2026

Copy link
Copy Markdown
Collaborator

Thank you! This is a good start, however these ID attributes are only usable if someone goes and figures out what they'll be with developer tools. We should also add an index link like #3072 did, before becoming abandoned.

Mirrors the anchor-icon treatment introduced in TypeStrong#3072 so the new
heading IDs added in this PR are actually discoverable by users.

- members.tsx h2: add tsd-anchor-link class + anchorIcon
- moduleReflection.tsx h2: same treatment
- index.tsx h3: slug each section title via context.slugger and
  attach id + tsd-anchor-link class + anchorIcon (None sections
  remain unanchored)

Snapshots regenerated. Slug collisions between the index h3 and the
later members h2 are handled naturally by the per-page slugger
(e.g. #methods on the index entry, #methods-1 on the section heading).

Addresses review feedback on TypeStrong#3100.
@Metbcy

Metbcy commented May 3, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for the review @Gerrit0! Pushed dfab33f to address the feedback:

  • Added the visible anchor icon + tsd-anchor-link class to the section <h2> in members.tsx and moduleReflection.tsx, mirroring feat(theme): add id attributes to group headings for linking #3072.
  • Extended the same treatment to the <h3> section headings in index.tsx so the in-page index entries are also linkable. None sections remain unanchored.
  • The per-page slugger naturally disambiguates collisions between the index entry and the later member section (e.g. #methods on the index, #methods-1 on the heading).

Snapshots regenerated; full test suite (1046) + lint pass locally. Let me know if you'd like the index/members slugs swapped (members getting the bare slug, index the -1 suffix) or any other tweak.

@Gerrit0

Gerrit0 commented May 24, 2026

Copy link
Copy Markdown
Collaborator

My apologies for the delay here, life has been busy.

The anchors do not seem to display correctly now within the page:

image

Otherwise, this looks good to me

@Metbcy

Metbcy commented May 24, 2026

Copy link
Copy Markdown
Contributor Author

My apologies for the delay here, life has been busy.

The anchors do not seem to display correctly now within the page:

image Otherwise, this looks good to me

No worries man, life gets busy. Let me dig in and see if I can fix the anchoring.

The .tsd-accordion-summary a rule (width: calc(100% - 1.5rem)) was
written for the navigation accordion's direct-child <a>, but it also
matched the new <a.tsd-anchor-icon> nested inside <h2> in member/module
section summaries (added in this PR). That forced the icon to fill the
row and wrap onto a second line.

Tighten the selector to a direct-child combinator so it only targets
the nav-accordion case. The anchor icon now falls back to its normal
.tsd-anchor-icon styling (inline-flex, 1em SVG, hidden until hover),
matching the existing behavior on member-name anchors.

Verified via headless Chrome: anchor <a> computes to 24px wide
(was 163px), heading height 28.8px (was 57.6px, wrapped).
@Metbcy

Metbcy commented May 25, 2026

Copy link
Copy Markdown
Contributor Author

Fixed in 21159e7. Root cause was a stale rule in static/style.css:

.tsd-accordion-summary a { width: calc(100% - 1.5rem); }

That was written for the nav accordion's direct-child <a>, but the descendant selector also matched the new <a.tsd-anchor-icon> nested inside the <h2> in section summaries, stretching it to fill the row and wrapping it to a second line.

Tightened to a direct-child combinator (.tsd-accordion-summary > a) so the nav case is unaffected and the anchor icon falls back to its normal .tsd-anchor-icon styling (inline-flex, 1em SVG, hidden until hover).

Anchor <a> is now 24px wide (was 163px), heading 28.8px tall (was 57.6px, wrapped). 1046 tests passing.

@Gerrit0 Gerrit0 merged commit 4350aec into TypeStrong:master May 31, 2026
8 checks passed
@Gerrit0

Gerrit0 commented May 31, 2026

Copy link
Copy Markdown
Collaborator

Thanks!

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.

Group headings in HTML output don't have id attributes for linking

2 participants