Table of Contents Stress Test

Section 1: Orientation

Section 1.1: What This Fixture Measures

The heading tree is intentionally uneven so that indentation and active-link behavior can be inspected without relying on a perfectly regular outline.

Section 1.2: The First Long Heading for a Narrow Panel

This heading is long enough to wrap in a compact table-of-contents column.

Section 2: Architecture

Section 2.1: A Small Structural Decision

Every level should remain identifiable even when the text is short.

Section 2.2: A Second Structural Decision

The paragraph is short because the hierarchy, not the prose, is the test.

Section 2.2.1: A Fourth-Level Detail

This level checks whether deeper content is included, hidden, or styled according to the theme’s existing TOC behavior.

Section 3: Content Models

Section 3.1: Meaningful Fields

Clear fields make headings and links easier to understand.

Section 3.2: Optional Fields

Optional metadata should not create empty visual gaps.

Section 4: Rendering Rules

Section 4.1: Markdown to HTML

The generated IDs should be stable enough for anchored navigation.

Section 4.2: Whitespace and Line Height

Long titles should wrap without making neighboring links collide.

Section 4.2.1: The Detail Beneath Spacing

This small fourth-level section creates another branch in the outline.

Section 5: Responsive Behavior

Section 5.1: Desktop Sidebar

On a wide screen the TOC can remain visible beside the article.

Section 5.2: Mobile Disclosure

On a narrow screen a disclosure control should remain reachable and understandable.

Section 6: Long Titles

Section 6.1: Understanding the Architectural Trade-offs of Building Maintainable User Interfaces for Long-Lived Software Projects

This is the deliberately long title used to inspect wrapping, overflow, and active-state truncation.

Section 6.2: When a Navigation Label Is Longer Than the Content It Represents

The TOC should preserve meaning even when the label takes multiple lines.

Section 6.2.1: Another Deep Label with a Useful Difference

Deep nesting should be visually quieter, not invisible.

Section 7: Interaction States

Section 7.1: The Resting State

Links need enough contrast before they are active.

Section 7.2: The Active State

An active indicator should not depend on color alone.

Section 8: Reading Rhythm

Section 8.1: Headings and Paragraphs

The space after an entry should match the content it introduces.

Section 8.2: Headings and Code

The relationship remains visible when the next block is a code sample.

Section 8.2.1: A Code-Oriented Subsection

This fourth-level entry is short by design.

Section 9: Taxonomy Context

Section 9.1: Categories

The article belongs to Development, Design, and Hugo.

Section 9.2: Tags

Tags provide another route into the same collection of content.

Section 10: Performance

Section 10.1: A Tall TOC

Many links should remain usable without pushing the rest of the page into an awkward position.

Section 10.2: A Scrollable TOC

If the panel scrolls, its scrollbar and focus behavior should remain clear.

Section 10.2.1: A Small Scroll Boundary

This entry helps reveal where a scroll container begins and ends.

Section 11: Accessibility

Section 11.1: Focus Order

Keyboard users should be able to reach each navigation link in a sensible order.

Section 11.2: Link Names

Repeated words should still be distinguishable from their context.

Section 12: Maintenance

Section 12.1: Stable Anchors

Anchor names should not change unexpectedly when a paragraph is edited.

Section 12.2: New Headings

Adding one heading should not break the visual hierarchy of the other entries.

Section 12.2.1: A Maintained Detail

This branch is here to test future additions against a known shape.

Section 13: Editorial Choices

Section 13.1: Short Names

Short names create useful contrast with the long names above.

Section 13.2: Names with Punctuation: What Happens?

Punctuation should be represented consistently in both the heading and its link.

Section 14: Regression Review

Section 14.1: Before a Theme Change

Capture the page at desktop and mobile widths before changing layout or typography.

Section 14.2: After a Theme Change

Compare wrapping, indentation, sticky position, and keyboard focus afterward.

Section 14.2.1: A Final Review Detail

Small, explicit fixtures are easier to compare than vague impressions.

Section 15: Closing the Outline

Section 15.1: What Good Navigation Feels Like

The reader should always know where they are and what lies nearby.

Section 15.2: The Last Link

The final link should look intentional rather than stranded at the bottom of a very tall list.

Section 15.2.1: The End of the Stress Test

The article ends with a complete branch so that the TOC has a clear final boundary.