feature/zensical-theme #4
Conversation
|
📘 Site preview available: |
There was a problem hiding this comment.
Pull request overview
This pull request implements a custom Zensical theme for the ff4j documentation site. The changes transform the documentation from a basic setup to a fully-styled landing page with custom branding, color schemes, and visual assets.
Changes:
- Configuration updates to enable custom theme with slate color scheme and custom CSS
- Custom CSS files including Bootstrap grid system and ff4j-specific styling with green color palette
- HTML template overrides for a feature-rich home page with sections for feature toggle, canary releases, custom rules, web console, REST API, and CLI
- Visual assets including SVG diagrams and PNG screenshots
Reviewed changes
Copilot reviewed 6 out of 13 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| zensical.toml | Updated configuration to use custom theme, changed navigation from "Get started" to "Home", added custom CSS files, enabled slate scheme with custom primary/accent colors |
| docs/stylesheets/theme.css | Defines custom CSS variables and styling for Material for MkDocs with green color palette (#2E8B57), home header, features sections, and layout utilities |
| docs/stylesheets/bootstrap-grid.min.css | Adds Bootstrap Grid v5.3.1 for responsive layout support |
| docs/overrides/main.html | Simple base template that extends "base.html" |
| docs/overrides/home.html | Custom landing page template with hero section and feature showcase areas |
| docs/index.md | Updated to use custom home.html template instead of showing default content |
| docs/home/img/*.svg | SVG diagrams illustrating feature toggle flow, strategy evaluation, and canary release concepts |
| docs/home/img/cli.png | Screenshot of CLI interface (binary file) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div > | ||
| <h1>Feature Flipping for Java</h1> | ||
| <p style="padding-bottom: 3rem">Make feature management effortless by turning functionality | ||
| on or off at any time. Reduce risk, support gradual rollouts, and empower both business | ||
| and engineering teams to respond quickly to user feedback and changing needs.</p> | ||
| <a href="#" class="md-button md-button--primary"> | ||
| Get started | ||
| </a> | ||
| <a href="#" class="md-button link-color"> | ||
| Learn more | ||
| </a> | ||
| </div> |
There was a problem hiding this comment.
Empty div element with no class or content. Consider removing this wrapper if it's not needed, or add appropriate classes/attributes if it serves a layout purpose.
| <div class="col-md-6 col-sm-12 d-block"> | ||
| <h2><b>RESTful API</b></h2> | ||
| <p>Operate FF4j through a WEB API. This is the way to go to use ff4j with others languages, | ||
| specially |
There was a problem hiding this comment.
Typo in "specially". Should be "especially" for grammatical correctness in the context "This is the way to go to use ff4j with others languages, specially javascript frontends."
| specially | |
| especially |
| } | ||
|
|
||
| .home-header p { | ||
| color: rgba(255, 255, 255, 0.9); |
There was a problem hiding this comment.
The home header text color uses rgba(255, 255, 255, 0.9) on what appears to be a dark gradient background. While this should provide sufficient contrast, ensure the gradient background colors used in the actual implementation provide adequate contrast ratios (at least 4.5:1 for normal text, 3:1 for large text) to meet WCAG AA accessibility standards.
| color: rgba(255, 255, 255, 0.9); | |
| color: #ffffff; |
|
|
||
| nav = [ | ||
| { "Get started" = "index.md" } | ||
| { "Home" = "index.md" } |
There was a problem hiding this comment.
The navigation item has been changed from "Get started" to "Home", but the buttons on the home page still reference "#" links with text "Get started" and "Learn more". Consider updating these links to point to actual documentation pages once they're created, or keeping the navigation label consistent with the button text.
| { "Home" = "index.md" } | |
| { "Get started" = "index.md" } |
| <a href="#" class="md-button md-button--primary"> | ||
| Get started | ||
| </a> | ||
| <a href="#" class="md-button link-color"> |
There was a problem hiding this comment.
The home page buttons use placeholder "#" links. These should be updated to link to actual documentation pages (e.g., "Get started" could link to a getting started guide, "Learn more" to an overview or features page).
| <a href="#" class="md-button md-button--primary"> | |
| Get started | |
| </a> | |
| <a href="#" class="md-button link-color"> | |
| <a href="getting-started/" class="md-button md-button--primary"> | |
| Get started | |
| </a> | |
| <a href="features/" class="md-button link-color"> |
1 participant
No description provided.