Skip to content

Comments

Modernize docs/v3: Update dependencies, add JavaScript bundler, and implement dark mode#4869

Merged
johha merged 5 commits intomainfrom
update-docs-v3-dependencies
Feb 25, 2026
Merged

Modernize docs/v3: Update dependencies, add JavaScript bundler, and implement dark mode#4869
johha merged 5 commits intomainfrom
update-docs-v3-dependencies

Conversation

@johha
Copy link
Contributor

@johha johha commented Feb 23, 2026

Summary

This PR modernizes the docs/v3 folder by updating outdated dependencies, replacing the deprecated Sprockets build system with a modern JavaScript bundler, and adding a dark mode feature.

Changes

1. Dependency Updates

  • Updated middleman from 4.5.1 to 4.6.3
  • Updated middleman-livereload from 3.4.7 to 3.5.0
  • Updated thor from 1.2.2 to 1.5.0
  • Added webrick gem for Rack 3 compatibility
  • Updated ~25 transitive dependencies (rack, activesupport, etc.)

2. JavaScript Build System

  • Removed middleman-sprockets (conflicted with Middleman 4.6's Sass renderer)
  • Created build-js.mjs script to concatenate JavaScript files in dependency order
  • Integrated JavaScript bundling into npm scripts (npm run build:js)
  • Updated npm start to automatically rebuild JavaScript before starting server
  • Individual source files maintained in lib/ and app/ directories for maintainability
  • Documented build system in README

3. Dark Mode Implementation

  • Added automatic dark mode detection via prefers-color-scheme media query
  • Created theme toggle button (cycles: Auto → Light → Dark → Auto)
  • Theme preference persisted in localStorage
  • Converted colors to CSS custom properties for seamless theme switching
  • Updated all UI elements: sidebar, navigation, tables, version dropdown, search
  • Logo inverts in dark mode for visibility
  • Code syntax highlighting preserved in both themes

Technical Details

Build System:

  • JavaScript bundling now happens via Node.js instead of Ruby Sprockets
  • Eliminates conflict between Sprockets and Middleman's native Sass renderer
  • Cleaner separation of concerns: Ruby for templates/CSS, Node for JavaScript

Dark Mode:

  • Respects system preference by default
  • Manual toggle allows users to override system setting
  • All color changes use CSS custom properties for maintainability
  • No breaking changes to existing functionality

Testing

  • ✅ Production build succeeds: bundle exec middleman build
  • ✅ Development server works: npm start
  • ✅ CSS compiles correctly
  • ✅ JavaScript bundling works automatically
  • ✅ Dark mode toggles correctly
  • ✅ Sidebar collapsible functionality preserved
  • ✅ Version dropdown works in both themes
  • ✅ Code syntax highlighting intact

Breaking Changes

None. All existing functionality is preserved.

Migration Notes

Developers need to be aware:

  • npm run build:js must be run if editing individual JS files (automatic with npm start)
  • source/javascripts/all.js is now auto-generated - edit source files in lib/ or app/ instead
  • See updated README for details

This PR was developed with AI assistance (Claude Code).

@johha johha requested a review from a team February 24, 2026 15:20
moleske
moleske previously approved these changes Feb 25, 2026
This commit updates all outdated dependencies in docs/v3 and fixes
compatibility issues with Middleman 4.6+.

Key changes:
- middleman: 4.5.1 → 4.6.3
- middleman-livereload: 3.4.7 → 3.5.0
- thor: 1.2.2 → 1.5.0
- rack: 2.2.22 → 3.1.20 (required by Middleman 4.6)
- Plus ~25 other dependency updates

Technical changes:
- Removed middleman-sprockets gem due to conflicts with Middleman 4.6's
  built-in Sass renderer
- Disabled Sprockets activation in config.rb
- Manually concatenated JavaScript files into all.js with proper
  semicolons to fix IIFE syntax errors
- Pinned autoprefixer-rails to ~> 10.4.7 for stability

The site now builds successfully with properly compiled CSS and working
JavaScript functionality including the sidebar collapsible behavior.
Replace Sprockets-based JavaScript concatenation with a custom Node.js
build script that handles bundling during development and build time.

Changes:
- Add webrick gem for Rack 3 / Middleman 4.6 compatibility
- Create build-js.mjs script to concatenate JavaScript files in
  dependency order
- Update package.json to add build:js script and integrate it into
  the start command
- Regenerate all.js with proper file markers and comments
- Update config.rb comment to reference new build system

Benefits:
- Cleaner separation of concerns (Ruby for templates, Node for JS)
- No conflict between Sprockets and Middleman's Sass renderer
- Maintainable individual source files in lib/ and app/ directories
- Automatic bundling on npm start and can be run manually with
  npm run build:js

This completes the Option 4 implementation for long-term maintainability.
Add section explaining the new JavaScript build workflow:
- How the build script concatenates individual source files
- When developers need to run npm run build:js
- Warning not to edit all.js directly since it's auto-generated
- Where to modify the build configuration if needed

This helps future contributors understand the build system.
Implement a complete dark mode solution with automatic system preference
detection and manual toggle control.

Features:
- Automatic dark mode detection via prefers-color-scheme media query
- Manual theme toggle button (cycles: Auto → Light → Dark → Auto)
- Theme preference persisted in localStorage
- Minimal icon-only toggle button (sun/moon) below logo

CSS changes:
- Convert colors to CSS custom properties for theme switching
- Add dark color palette with proper contrast ratios
- Update all UI elements: sidebar, navigation, tables, borders,
  version dropdown, search, and inline code
- Logo inverts colors in dark mode for visibility
- Code blocks (JSON examples) maintain their Monokai syntax
  highlighting in both themes

JavaScript:
- New theme_toggle.js module handles theme switching logic
- Detects system preference changes automatically
- Updates toggle icon based on current theme
- Integrated into build-js.mjs bundle

The implementation respects user system preferences by default while
allowing manual override for flexibility.
Remove verbose comments explaining why changes were made - this
information belongs in git history (commit messages and PR description)
rather than cluttering the source code.

Changes:
- Remove Sprockets removal explanation from Gemfile
- Remove Sprockets comments from config.rb
- Simplify build-js.mjs header comments
- Remove redundant inline comments from SCSS files

The code is now cleaner while maintaining necessary documentation
(section headers, generated file warnings, etc.)
@johha johha merged commit 46d4400 into main Feb 25, 2026
6 checks passed
@johha johha deleted the update-docs-v3-dependencies branch February 25, 2026 07:49
ari-wg-gitbot added a commit to cloudfoundry/capi-release that referenced this pull request Feb 25, 2026
Changes in cloud_controller_ng:

- fix rubocop issues
    PR: cloudfoundry/cloud_controller_ng#4875
    Author: Johannes Haass <johannes.haass@sap.com>

- Modernize docs/v3: Update dependencies, add JavaScript bundler, and implement dark mode
    PR: cloudfoundry/cloud_controller_ng#4869
    Author: Johannes Haass <johannes.haass@sap.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants