아직 다크모드가 안 된다고? 2025년 맞나?
싶을 수도 있지만… 사실 Apache Airflow의 공식 문서는 오랫동안 레거시 그 자체였습니다ㅠ
저희 Airflow 한국 사용자 모임 초창기 때, @cpprhtn 님, @mscho 님과 크리스마스에 솔로톤을 하며 문서를 빌드하기 위해 고군분투했던 기억이 아직도 생생하네요.
그때는 Hugo 버전 문제도 있었고, Airflow의 모든 버전 문서가 airflow-site 레포지토리에 함께 들어 있어서 도커 환경에서 빌드하는 게 거의 불가능했어요
결국 문서들을 버전 별로 슬라이싱하고, 문서 빌드와 사이트 빌드를 따로 돌리면서 온몸 비틀기를 했던 기억이 납니다 ㅋㅋ
그런데 최근 아래 PR을 통해 Node.js와 Hugo 버전이 대폭 현대화되었고,
문서들은 별도의 레포지토리 airflow-site-archive 로 분리되었습니다.
덕분에 이제 빌드나 기여가 훨씬 수월해졌어요!
main ← modernize-deps
열림 11:41PM - 24 Sep 25 UTC
## Major Updates
- Node.js: 10.x/16.x → 22.x LTS (latest stable)
- Hugo: 0.58.… 3/0.91.2 → 0.150.0 (latest version)
- Webpack: 4.x → 5.x (major version upgrade)
- ESLint: 6.x → 9.x with modern flat config
- All dependencies updated to latest stable versions
## Infrastructure Changes
- CI/CD: Updated GitHub Actions to use Node.js 22
- Docker: Updated base image to Debian bookworm + Node.js 22
- Pre-commit: Updated to Node.js 22.13.0 + latest hook versions
## Build System Modernization
- Webpack 5: Updated configs for asset modules and modern optimizations
- Babel: Simplified config, removed deprecated plugins
- ESLint: Migrated to flat config format (eslint.config.js)
- Hugo: Fixed template compatibility issues for modern version
## Security & Performance
- Zero vulnerabilities (npm audit clean)
- Added package-lock.json for dependency integrity
- Modern browser targeting with ES2020+ support
- Improved build performance and asset optimization
## Template Fixes
- Updated Hugo templates: .Site.IsServer → hugo.IsServer
- Removed deprecated Google Analytics template references
- Fixed webpack-dev-server configuration for Webpack 5
All functionality preserved - no user-facing changes expected. Build system fully tested and operational.
Closes: https://github.com/apache/airflow/issues/45620
그리고 다크모드는 아래와 같이 나올 것 같네요ㅎㅎ
아직 디자인은 다듬을 부분이 많지만, 점점 예뻐지는 모습을 기대해봅니다
main ← feat-modernize-theme-5qPcf
열림 03:00AM - 07 Nov 25 UTC
**Preview**:
- Homepage: https://airflow-dark.surge.sh/
- Airflow Core: http… s://airflow-dark.surge.sh/docs/apache-airflow/stable/
This PR upgrades the Docsy theme from v0.2.0-pre (from 2019 !!) to v0.12.0 (latest) and implements Bootstrap 5 dark mode support for both the landing pages and Sphinx documentation. Used https://www.docsy.dev/docs/adding-content/lookandfeel/ and https://www.docsy.dev/docs/updating/ for Upgrading -- it wasn't straight-forward unfortunately but I think I have covered everything that I could find/identify. (including Confetti :D )
### Key Changes
* **Theme Upgrade**: Docsy v0.2.0-pre → v0.12.0
* **Bootstrap**: Upgraded from Bootstrap 4 to Bootstrap 5.3.3
* **Dark Mode**: Added theme toggle with light/dark/auto modes
### Visual Changes
<img width="1714" height="831" alt="image" src="https://github.com/user-attachments/assets/cd32fb1f-27d5-420d-bc37-c9e02ec4b871" />
<img width="1366" height="806" alt="image" src="https://github.com/user-attachments/assets/2b2556e3-7678-436d-b5bc-63a5f719e4b0" />
<img width="1718" height="833" alt="image" src="https://github.com/user-attachments/assets/1fd91888-14ae-4046-820c-c00fb5a6ede7" />
<img width="1716" height="737" alt="image" src="https://github.com/user-attachments/assets/f11624fb-2bf6-4ae2-af5f-e2e2b6361348" />
<img width="1726" height="833" alt="image" src="https://github.com/user-attachments/assets/88c72100-2e95-4311-899d-094b2ae46b82" />
<img width="1720" height="740" alt="image" src="https://github.com/user-attachments/assets/34715a1d-f2ea-444d-bdbc-08eb8f73894d" />
<img width="1717" height="741" alt="image" src="https://github.com/user-attachments/assets/3e86b057-5944-49a1-b0f7-dd0e9ad77b3a" />
<img width="1306" height="831" alt="image" src="https://github.com/user-attachments/assets/226d1b4d-1d41-4fbf-8f22-562ebf6a3f03" />
<img width="1667" height="731" alt="image" src="https://github.com/user-attachments/assets/8da2cbaf-bb87-49c8-b453-02b165aed26e" />
### Implementation Details
#### Landing Pages (Hugo/Docsy)
- Enable `showLightDarkModeMenu = true` in config.toml
- Add theme toggle component to navbar (light/dark/auto modes)
- Store user preference in localStorage
- Use Bootstrap 5 CSS variables for all UI elements
#### Sphinx Documentation
- Add Bootstrap 5 theme toggle to header
- Style all elements (sidebar, tables, admonitions, forms) for dark mode
- Use Pygments-generated GitHub Dark theme for syntax highlighting
#### Technical Requirements
- Added `$td-sidebar-tree-root-color` variable (required by Docsy v0.2.0+)
- Added `$font-awesome-font-name` variable (required by Docsy v0.6.0+)
- Added `.-bg-orange` utility class (required by Docsy v0.6.0+)
- Created `pygments/_dark.scss` (generated via: `pygmentize -S github-dark`)
- Use `hooks/body-end.html` for webpack scripts (proper Docsy pattern)
### Testing
- [x] Verified dark mode toggle works on landing pages
- [x] Confirmed confetti animation adapts to theme changes
- [x] Tested all admonition types in light and dark modes
- [x] Verified code syntax highlighting in Sphinx documentation
- [x] Checked sidebar contrast in dark mode
- [x] Tested theme persistence across page navigation
- [x] Verified font consistency (Open Sans) across Hugo and Sphinx pages
1개의 좋아요