containers / containers/podman.io

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

Open
#583 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
108
Forks
188
Avg merge
9d 15h
Merged PRs (30d)
11

Description

## Summary

This issue proposes two related improvements to the documentation site:

1. A visual modernization pass (dark mode, depth, micro-interactions)
2. A fix for a TOC auto-scroll usability bug on long doc pages

---

## Why This Matters

Documentation is often the first touchpoint a new user or contributor has with a project, sometimes even before they try the CLI or read any source code. For a project like Podman, the docs site plays a significant role in shaping that first impression and in helping people learn the tool effectively.

I came across both of these issues while reading through the documentation myself, working through a longer page on installation/configuration. A TOC that's hard to track and a visual style that feels a little dated don't take away from the quality of the content itself, but they do add small amounts of friction to an otherwise great documentation experience. Given how central docs are to onboarding and day-to-day reference, I think even small improvements here are worth making.

Both issues below are also relatively low-risk, low-effort fixes, mostly CSS with one small client module, so I wanted to raise them here before starting work on a PR.

---

## Problem 1: Outdated Aesthetic & Weak Dark Mode Contrast

The current docs layout feels flat relative to modern documentation sites:

- Dark mode uses flat, low-contrast grays with no sense of depth
- No micro-animations or hover states — the UI feels static rather than interactive
- Typography scale and spacing leave room for better readability

## Problem 2: TOC Auto-Scroll Bug

Docusaurus highlights the active section in the right-side Table of Contents as the user scrolls. On long pages, once the TOC itself grows taller than the viewport, the active item can scroll out of view — the TOC never repositions itself, so users lose track of where they are and have to scroll the TOC manually to re-orient.

---

## Proposed Solution

The plan is to address both issues with minimal footprint — primarily CSS, plus one small client module — to avoid fighting future Docusaurus upgrades.

### 1. UI Modernization (CSS-first)

| Area | Change |
|---|---|
| **Depth** | Glassmorphism — translucent backgrounds + `backdrop-filter` blur on sidebar/TOC |
| **Dark mode** | Replace flat grays with a midnight-blue base (`#0f172a`) + high-contrast gradient accents |
| **Motion** | Subtle fade-in on page load, hover-lift on code blocks, slide transitions on nav links |

### 2. TOC Auto-Scroll Fix

- Inject a lightweight client module (`tocAutoScroll.js`) via `docusaurus.config.js`
- Use a `MutationObserver` to watch for the `--active` class on TOC links
- When the active link falls outside the visible container bounds, smoothly `scrollBy` the TOC to re-center it

---

## Additional Context

A local implementation of both fixes is complete and ready. A PR will be linked to this issue shortly.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with docusaurus.config.js and the proposed tocAutoScroll.js client module, then reproduce the issue on a long documentation page. Review the existing documentation styles and verify that dark mode, depth, motion, and typography changes remain usable; done means the active TOC entry stays visible while scrolling and the visual updates work across themes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
design, documentation, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.