Revamp documentation page for improved readability and visuals

[dhananjay6561]

Docs Page Revamp – Visual & UX Improvements

Overview

This PR delivers a comprehensive visual and UX revamp of the documentation site with a focus on:

• Cleaner, modern layout and improved sidebar
• Better responsiveness across devices (desktop, tablet, mobile)
• Enhanced dark mode experience
• Improved Table of Contents (TOC) usability and configuration

---

Key Changes

Visual Overhaul

• Refined layout in src/theme/DocItem/styles.module.css for a cleaner documentation experience
• Applied DM Sans font across the site for improved readability
• Enhanced sidebar and TOC styling for clearer navigation

Responsiveness

• Optimized layouts for desktop, tablet, and mobile screens
• Adjusted paddings, margins, and typography for consistency across breakpoints

Dark Mode Enhancements

• Improved dark mode styling in:
  • ProductTier.js
  • TierCallout.js
• Enhanced contrast, chips, and note components for better visibility

TOC Improvements

• Added min/max heading level configuration in docusaurus.config.js
• Improved TOC styling and readability

Miscellaneous

• Removed hash symbols after headings (src/theme/Heading/styles.module.css)
• Minor content and metadata update in docs/gsoc/contribution-guide.md

---

Files Changed

• src/css/custom.css
• src/theme/DocItem/styles.module.css
• src/theme/Heading/styles.module.css
• src/components/ProductTier.js
• src/components/TierCallout.js
• docusaurus.config.js
• docs/gsoc/contribution-guide.md
• src/theme/DocItem/index.js

Total: 603 additions, 264 deletions

---

Screenshots

Desktop Responsiveness

Before vs After

---

Tablet View

Before vs After

---

Mobile View

Before vs After

---

Dark Mode

Before vs After

---

Build Verification

Successful production build

[github-actions]

Thank you and congratulations 🎉 for opening your very first pull request in keploy

[Copilot]

Pull request overview

This PR revamps the Docusaurus docs UI (layout, typography, sidebar/TOC, dark mode styling) to improve readability and navigation across breakpoints.

Changes:

• Applies a new visual system (DM Sans typography, updated spacing, refreshed sidebar/TOC styling).
• Improves dark-mode styling for tier chips/callouts and code/inline-code presentation.
• Adjusts TOC configuration globally (min/max heading levels) and per-doc metadata.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/css/custom.css	Global typography enforcement, code/TOC/sidebar/pagination styling refinements, dark-mode adjustments.
src/theme/DocItem/styles.module.css	Adds DocItem-level styling overrides (layout/sidebar/TOC/typography).
src/theme/Heading/styles.module.css	Removes visible # marker from heading anchor links.
src/components/ProductTier.js	Updates dark-mode chip appearance.
src/components/TierCallout.js	Improves dark-mode note/chip contrast.
docusaurus.config.js	Sets global TOC heading-level configuration.
docs/gsoc/contribution-guide.md	Adds TOC front-matter configuration for the page.
src/theme/DocItem/index.js	Minor formatting change; DocItem/TOC rendering remains the same.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[kilo-code-bot]

Code Review Summary

Status: Previously Flagged Issues Remain | Recommendation: Address outstanding feedback before merge

Overview

This PR makes comprehensive visual and UX improvements to the documentation pages. The CSS changes are primarily stylistic and don't introduce runtime bugs. However, several issues flagged in previous reviews appear to still be present in the codebase.

Outstanding Issues From Previous Reviews

File	Issue	Status
src/theme/DocItem/styles.module.css	CSS Modules scoping issue - selectors like .menu__list, .col.col--3, .table-of-contents won't match global Docusaurus classes without :global() wrapper	Still present (lines 6-98)
src/theme/DocItem/styles.module.css	Duplicate @import for DM Sans font (also in custom.css line 8)	Still present (line 91)

Review Notes

• No new critical issues found in this review pass
• The CSS styling changes are primarily visual enhancements with no security or runtime concerns
• Previous reviewer comments have author responses claiming fixes, but the code still contains the flagged issues

Recommendation

The author should:

1. Either wrap global selectors in styles.module.css with :global() or move them to custom.css
2. Remove the duplicate font @import from styles.module.css since it's already in custom.css

Files Reviewed (8 files)

• docs/gsoc/contribution-guide.md - TOC heading level config ✓
• docusaurus.config.js - TOC min/max heading levels ✓
• src/components/ProductTier.js - Dark mode chip styling ✓
• src/components/TierCallout.js - Dark mode adjustments ✓
• src/css/custom.css - Major styling overhaul ✓
• src/theme/DocItem/index.js - Minor whitespace change ✓
• src/theme/DocItem/styles.module.css - Has issues noted above
• src/theme/Heading/styles.module.css - Hash link removal ✓

---

_{Reviewed by claude-4.5-opus-20251124 · 398,712 tokens}