Skip to content

feat: modernize documentation UI and fix TOC auto-scroll - #584

Open
Pranav-IIITM wants to merge 1 commit into
containers:mainfrom
Pranav-IIITM:feat/docs-ui-modernization-toc-scroll
Open

feat: modernize documentation UI and fix TOC auto-scroll#584
Pranav-IIITM wants to merge 1 commit into
containers:mainfrom
Pranav-IIITM:feat/docs-ui-modernization-toc-scroll

Conversation

@Pranav-IIITM

Copy link
Copy Markdown
Contributor

Overview

This PR modernizes the visual design of the Podman documentation site and fixes a usability bug in the Table of Contents (TOC) navigation on long doc pages.

What Changed

UI Modernization

  • Glassmorphism — translucent backgrounds with backdrop-filter blur applied to the sidebar and TOC for visual depth
  • Dark mode overhaul — replaced flat gray tones with a midnight-blue base (#0f172a) and high-contrast gradient accents
  • Micro-animations — fade-in on page load, hover-lift on code blocks, slide transitions on nav links
  • Typography & spacing — refined scale for improved readability across doc pages

TOC Auto-Scroll Fix

  • Added tocAutoScroll.js, injected as a lightweight client module via docusaurus.config.js
  • Uses a MutationObserver to detect when the --active class moves to a new TOC link
  • If the active link falls outside the visible bounds of the TOC container, it's smoothly scrolled (scrollBy) back into view
  • No changes to Docusaurus core behavior — implemented as an additive client module to stay upgrade-safe

Why

  • The existing dark mode and static layout feel dated next to comparable documentation sites
  • On long pages, the TOC's active-section indicator can scroll out of view with no way to auto re-center, forcing manual scrolling to stay oriented

Testing

  • Verified dark mode contrast and glass effects across Chrome, Firefox, Safari
  • Confirmed animations don't impact page load performance
  • Tested TOC auto-scroll on long pages (e.g. docs/installation) in both light and dark mode
  • Verified no regressions on mobile / narrow viewports

Screenshots

Before

Before.1.mp4

After

After.1.mp4

Related Issue

Closes #583

Signed-off-by: Pranav-IIITM <jogdandpranav2007@gmail.com>
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.

[Enhancement] Modernize Documentation UI & Fix TOC Auto-Scroll UX

1 participant