Fix blog post TOC: sticky scroll, active section highlight with left border indicator, and separator line#1667
Merged
Merged
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…or line on blog posts - Add align-self: stretch to TOC column so sticky works for full page height - Add sticky positioning to inner TOC div (position: sticky with max-height + overflow) - Style table-of-contents__link--active with primary color and bold weight - Add hover color transition for TOC links - Add left border separator between content and TOC columns - Disable sticky and border on mobile layout Agent-Logs-Url: https://github.com/recodehive/recode-website/sessions/4aa3db4e-b68f-4f90-9097-425a59ce5d85
Copilot
AI
changed the title
[WIP] Fix table of content on blog post pages
Fix blog post TOC: sticky scroll, active section highlight, and separator line
May 23, 2026
Member
|
need some changes refernce image: |
- Add left border highlight on the active TOC link matching reference design - Make separator line between content and TOC more prominent (2px) - Add vertical track line on TOC list for visual continuity - Adjust padding/margins for left border indicator alignment Agent-Logs-Url: https://github.com/recodehive/recode-website/sessions/7e16fff0-8b1c-4f04-b52d-06ac60d246d8
Contributor
Author
Updated in 0faa377. The TOC now has:
Here's how it looks after scrolling — "2. Dataset: The Pointer" is highlighted with the left border indicator matching the reference design. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Copilot
AI
changed the title
Fix blog post TOC: sticky scroll, active section highlight, and separator line
Fix blog post TOC: sticky scroll, active section highlight with left border indicator, and separator line
May 23, 2026
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
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.
Description
Blog post TOC was not sticky during scroll, had no active-section highlighting, and lacked a visual separator between content and TOC columns. Updated to match the reference design with a left border indicator for the active section.
Type of Change
Changes Made
src/css/custom.css— Section 15 (blog layout)Sticky TOC: Added
align-self: stretchto.col.col--2so the column spans full page height (prerequisite forstickyto work past the TOC's natural height). Inner div getsposition: sticky,top: navbar-height + 1rem,max-height, andoverflow-y: auto.Active highlighting with left border indicator: Styled
.table-of-contents__link--activewithvar(--ifm-color-primary)+font-weight: 600+ a2px solidleft border in the primary color. This creates a visual bar indicator beside the active section, matching the reference design. Docusaurus already manages the active class via IntersectionObserver — only the styles were missing.Vertical track line: Added
border-left: 2px solid var(--ifm-toc-border-color)to the.table-of-contentslist itself, creating a continuous vertical track that the active indicator overlays.Separator line: Added
border-left: 2px solid var(--ifm-toc-border-color)to the TOC column for a clear visual separation between content and TOC.Hover transition: Non-active TOC links transition to primary color on hover.
Mobile: Sticky and border-left are disabled at
≤996pxwhere the layout stacks vertically.Dependencies
Checklist
npm run buildand attached screenshot(s) in this PR.