Feat: Added Style Guide Page. #4039
Conversation
WalkthroughThe pull request introduces a style guide feature into the application. It defines a new URL route and corresponding view for the style guide page, adds an HTML template detailing the design system, and updates the sidebar navigation to include a link to this new page. These changes extend the routing and presentation layers without affecting existing functionality, ensuring that users can access comprehensive style guide information through a dedicated endpoint. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant DjangoRouter
participant StyleGuideView
participant TemplateRenderer
User->>Browser: Click "Style Guide" link
Browser->>DjangoRouter: GET request to /style-guide/
DjangoRouter->>StyleGuideView: Dispatch request to StyleGuideView
StyleGuideView->>TemplateRenderer: Render "style_guide.html"
TemplateRenderer-->>StyleGuideView: Rendered HTML content
StyleGuideView-->>Browser: Return HTML response
Browser-->>User: Display Style Guide page
Assessment against linked issues
Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (2)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
website/templates/style_guide.html (1)
22-926: Comprehensive Style Guide Content
The remainder of the template provides very thorough content on the design system, including sections on design principles, colors, typography, components, layout, icons, responsive design, accessibility, and links to Figma files. The structured use of Tailwind CSS classes and semantic HTML helps in maintaining visual consistency and clarity.As the file is quite extensive, you might consider modularizing some of the content into partials (for example, separating individual sections into their own include files) if further expansion is anticipated. This would enhance maintainability in the long run.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
blt/urls.py(2 hunks)website/templates/includes/sidenav.html(1 hunks)website/templates/style_guide.html(1 hunks)website/views/core.py(1 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
blt/urls.py (1)
website/views/core.py (1)
StyleGuideView(2837-2838)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Run Tests
- GitHub Check: docker-test
- GitHub Check: Analyze (python)
🔇 Additional comments (6)
website/views/core.py (1)
2837-2838: Looks good - properly implemented view for style guide page.The
StyleGuideViewclass correctly inherits from Django's built-inTemplateViewand specifies the template to render. This follows Django best practices for simple template rendering.blt/urls.py (2)
87-87: Import correctly added.The StyleGuideView import is properly added to the existing imports from the core module.
1100-1100: URL route properly configured.The URL pattern for the style guide is correctly implemented:
- Uses Django's path function with appropriate parameters
- URL path uses kebab-case ("style-guide/") following web conventions
- URL name uses snake_case ("style_guide") following Python conventions
- View is properly referenced using the as_view() method
This route will make the style guide accessible at
/style-guide/in the application.website/templates/includes/sidenav.html (1)
672-679: New "Style Guide" Navigation Link Added
The new anchor element for the Style Guide is well integrated into the sidebar. The conditional classes correctly toggle the active state based on whether the current request path contains/style-guide/. Please verify that the corresponding URL pattern named"style_guide"is defined and that the view renders the Style Guide page as expected.website/templates/style_guide.html (2)
1-14: Template Header and Meta Blocks
The template correctly extends the base layout, loads static assets, and sets up the title, description, keywords, and extra CSS (including the Font Awesome stylesheet). This configuration provides a solid foundation for the style guide page.
15-20: Content Block and Sidebar Inclusion
The{% block content %}is defined appropriately and the inclusion of the sidebar via{% include "includes/sidenav.html" %}ensures consistent navigation. Confirm that having the sidebar on the style guide page is intentional for your design requirements.
* style-guide page completed * nav-link added * icon section added * pre-commit error
Fixes #4038
Description:
This PR adds a Style Guide page to ensure design consistency across the project. The guide includes typography, colors, buttons, icons, and menu headers. Additionally, Figma links for all pages are provided for easy reference and collaboration.
Preview:
2025-03-24.02-18-59.mp4
Summary by CodeRabbit