Skip to content

Conversation

@dannon
Copy link
Member

@dannon dannon commented Jan 19, 2026

Summary

  • Adds automatic table of contents (TOC) sidebar for article pages, matching the old Gridsome behavior
  • Adds clickable anchor links to all headings for easy section linking

Features

Table of Contents:

  • Displays on the right sidebar (desktop) or as a collapsible section (mobile)
  • Shows h2-h4 headings with proper indentation
  • Only appears when page has 2+ headings
  • Controlled via autotoc frontmatter field (opt-in, matching old behavior)

Linkable Headers:

  • All headings now have anchor links that appear on hover
  • Clicking copies the section URL to the address bar
  • Uses # symbol, styled to be unobtrusive

Technical Changes

  • Added rehype-slug and rehype-autolink-headings plugins
  • Created TableOfContents.astro component
  • Updated ArticleLayout.astro and event pages to support TOC
  • Page templates now extract and pass headings from rendered content

Fixes #3569

import rehypeAutolinkHeadings from 'rehype-autolink-headings';

const autolinkConfig = {
behavior: 'prepend',
Copy link
Member

@bgruening bgruening Jan 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Imho, this does not look good. All headers have an indentation that looks off. Unfortunately also the append looks not good as it is on the far right of the site.

Playing around with it, I think append could work. I would prefer that over prepand

@bgruening
Copy link
Member

I rebased, some test where failing for me locally, so I fixed that as well.

For me the prepand option does not look good, see my comment above.
The TOC is great!

bgruening and others added 6 commits January 20, 2026 08:43
rehype-autolink-headings requires heading IDs to already exist. Added rehype-slug to run first in the plugin chain to generate them.
Matches the old Gridsome behavior and avoids competing with the main left navigation.
Addresses PR feedback - prepend caused odd indentation on headers.
Append places the # link after the heading text instead.
Moves the TOC logic (mobile collapsible + desktop sidebar) into a shared
component used by both ArticleLayout and the events page template.
@dannon dannon force-pushed the toc-linkable-headers branch from b7f3566 to f942d81 Compare January 20, 2026 14:22
@bgruening bgruening merged commit 378f700 into galaxyproject:master Jan 20, 2026
4 checks passed
@bgruening
Copy link
Member

Cool!

@dannon
Copy link
Member Author

dannon commented Jan 20, 2026

Thanks for the suggestions and merge!

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.

sub-headers should be linkable

2 participants