📚 Improve documentation with sidebar navigation and better code formatting

6 months ago · 0596d534f0
--- a/docs/_config.yml
+++ b/docs/_config.yml
@ -9,7 +9,7 @@ baseurl: "/Adminator-admin-dashboard"
 # Build settings
 markdown: kramdown
 highlighter: rouge
 theme: minima
 remote_theme: just-the-docs/just-the-docs

 # Plugin settings
 plugins:
@ -17,20 +17,45 @@ plugins:
  - jekyll-sitemap
  - jekyll-seo-tag

 # Navigation
 navigation:
  - title: "Getting Started"
    url: "/getting-started/"
  - title: "Components"
    url: "/components/"
  - title: "Dark Mode & Theming"
    url: "/customization/"
  - title: "API Reference"
    url: "/api/"
  - title: "Examples"
    url: "/examples/"
  - title: "Deployment"
    url: "/deployment/"
 # Just the Docs theme configuration
 color_scheme: nil
 search_enabled: true
 search:
  heading_level: 2
  previews: 2
  preview_words_before: 3
  preview_words_after: 3
  tokenizer_separator: /[\s/]+/
  rel_url: true
  button: false

 # Enable custom CSS
 sass:
  sass_dir: _sass
  style: compressed

 # Heading anchor links appear on hover over h1-h6 tags
 heading_anchors: true

 # Footer
 footer_content: "Copyright &copy; 2024 Colorlib. Distributed by an <a href=\"https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/LICENSE\">MIT license.</a>"

 # Back to top link
 back_to_top: true
 back_to_top_text: "Back to top"

 # Navigation Structure
 nav_sort: case_insensitive

 # Aux links for the upper right navigation
 aux_links:
  "GitHub Repository":
    - "//github.com/puikinsh/Adminator-admin-dashboard"
  "Live Demo":
    - "//adminator.colorlib.com"

 # Makes Aux links open in a new tab
 aux_links_new_tab: true

 # SEO
 author: "Colorlib"
@ -52,6 +77,15 @@ exclude:
  - vendor/gems/
  - vendor/ruby/

 # Code highlighting
 kramdown:
  syntax_highlighter: rouge
  syntax_highlighter_opts:
    css_class: 'highlight'
    block:
      line_numbers: false
      start_line: 1

 # Include
 include:
  - _pages
@ -72,14 +106,4 @@ defaults:
  - scope:
      path: ""
    values:
      layout: "default"

 # Code highlighting
 kramdown:
  syntax_highlighter: rouge
  syntax_highlighter_opts:
    css_class: 'highlight'
    span:
      line_numbers: false
    block:
      line_numbers: true 
      layout: "default" 
--- a/docs/_sass/custom.scss
+++ b/docs/_sass/custom.scss
@ -0,0 +1,182 @@
 // Custom styles for Adminator Documentation

 // Fix code block formatting
 .highlight {
  .language-javascript,
  .language-css,
  .language-html,
  .language-bash {
    &:before {
      content: attr(class);
      display: block;
      font-size: 0.75rem;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.5rem;
      padding-bottom: 0.25rem;
      border-bottom: 1px solid #e5e7eb;
    }
  }
 }

 // Better code block styling
 pre.highlight {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-x: auto;
  
  code {
    background: transparent !important;
    border: none !important;
    font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  }
 }

 // Inline code styling
 code:not(.highlighter-rouge) {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  padding: 0.125rem 0.25rem !important;
  border-radius: 3px !important;
  font-size: 0.875em !important;
  border: 1px solid #e2e8f0 !important;
 }

 // Feature cards styling
 .feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
 }

 .feature-card {
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  
  h3 {
    margin-top: 0;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    
    &:before {
      content: "✨";
      font-size: 1.25em;
    }
  }
 }

 // Button improvements
 .btn {
  &.btn-outline {
    border: 1px solid #d1d5db;
    color: #374151;
    text-decoration: none;
    
    &:hover {
      background-color: #f9fafb;
      border-color: #9ca3af;
    }
  }
  
  &.btn-green {
    background-color: #059669;
    color: white;
    border: 1px solid #059669;
    
    &:hover {
      background-color: #047857;
      border-color: #047857;
    }
  }
 }

 // Table styling improvements
 table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  
  th, td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
  }
  
  th {
    background-color: #f9fafb;
    font-weight: 600;
    color: #374151;
  }
  
  tr:hover {
    background-color: #f9fafb;
  }
 }

 // Navigation improvements
 .site-nav {
  .nav-list {
    .nav-list-item {
      &.active {
        > .nav-list-link {
          background-color: #eff6ff;
          color: #1d4ed8;
        }
      }
    }
  }
 }

 // Custom alert boxes
 .alert {
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 6px;
  border-left: 4px solid;
  
  &.alert-info {
    background-color: #eff6ff;
    border-left-color: #3b82f6;
    color: #1e40af;
  }
  
  &.alert-warning {
    background-color: #fffbeb;
    border-left-color: #f59e0b;
    color: #92400e;
  }
  
  &.alert-success {
    background-color: #f0fdf4;
    border-left-color: #10b981;
    color: #065f46;
  }
 }

 // Dark mode improvements for code
@media (prefers-color-scheme: dark) {
  pre.highlight {
    background-color: #1f2937 !important;
    border-color: #374151;
    
    code {
      color: #e5e7eb !important;
    }
  }
  
  code:not(.highlighter-rouge) {
    background-color: #374151 !important;
    color: #d1d5db !important;
    border-color: #4b5563 !important;
  }
 } 
--- a/docs/api.md
+++ b/docs/api.md
@ -0,0 +1,12 @@
 ---
 layout: default
 title: API Reference
 nav_order: 4
 has_children: true
 ---

 # API Reference

 Complete JavaScript API documentation for Adminator.

 This section provides detailed documentation for all JavaScript APIs, utility functions, and integration methods. 
--- a/docs/api/theme-api.md
+++ b/docs/api/theme-api.md
@ -1,4 +1,18 @@
 ---
 layout: default
 title: Theme API
 nav_order: 1
 parent: API Reference
 ---

 # Theme API Reference
 {: .no_toc }

 ## Table of contents
 {: .no_toc .text-delta }

 1. TOC
 {:toc}

 Complete API documentation for the Adminator Theme utility system.

--- a/docs/customization.md
+++ b/docs/customization.md
@ -0,0 +1,12 @@
 ---
 layout: default
 title: Customization
 nav_order: 3
 has_children: true
 ---

 # Customization

 Learn how to customize Adminator's appearance and behavior.

 This section covers the dark mode system, theming, CSS variables, and custom component creation. 
--- a/docs/customization/theme-system.md
+++ b/docs/customization/theme-system.md
@ -1,4 +1,18 @@
 ---
 layout: default
 title: Theme System
 nav_order: 1
 parent: Customization
 ---

 # Theme System Overview
 {: .no_toc }

 ## Table of contents
 {: .no_toc .text-delta }

 1. TOC
 {:toc}

 Adminator v2.6.0 introduces a comprehensive dark mode system with intelligent theme switching and component integration.

--- a/docs/examples.md
+++ b/docs/examples.md
@ -0,0 +1,12 @@
 ---
 layout: default
 title: Examples
 nav_order: 5
 has_children: true
 ---

 # Examples

 Practical examples and integration guides.

 This section provides real-world examples of using Adminator in various scenarios and frameworks. 
--- a/docs/examples/theme-integration.md
+++ b/docs/examples/theme-integration.md
@ -1,4 +1,18 @@
 ---
 layout: default
 title: Theme Integration
 nav_order: 1
 parent: Examples
 ---

 # Theme Integration Examples
 {: .no_toc }

 ## Table of contents
 {: .no_toc .text-delta }

 1. TOC
 {:toc}

 Practical examples for integrating custom components with Adminator's theme system.

--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@ -0,0 +1,12 @@
 ---
 layout: default
 title: Getting Started
 nav_order: 2
 has_children: true
 ---

 # Getting Started

 Everything you need to know to start building with Adminator.

 This section covers installation, project setup, development workflow, and deployment options. 
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@ -1,4 +1,20 @@
 ---
 layout: default
 title: Installation
 nav_order: 1
 parent: Getting Started
 ---

 # Installation Guide
 {: .no_toc }

 ## Table of contents
 {: .no_toc .text-delta }

 1. TOC
 {:toc}

 ---

 This guide will help you get Adminator up and running on your local machine.

--- a/docs/index.md
+++ b/docs/index.md
@ -1,19 +1,30 @@
 ---
 title: Adminator Documentation
 description: Complete guide for the Adminator Bootstrap 5 Admin Dashboard Template
 layout: default
 title: Home
 nav_order: 1
 description: "Adminator Bootstrap 5 Admin Dashboard with Dark Mode"
 permalink: /
 ---

 # Adminator Documentation
 {: .fs-9 }

 Welcome to the comprehensive documentation for **Adminator**, a modern Bootstrap 5 admin dashboard template with dark mode support.
 Complete guide for the Bootstrap 5 Admin Dashboard Template with comprehensive Dark Mode system
 {: .fs-6 .fw-300 }

 ## 🌟 Overview
 [Get Started Now](getting-started/installation){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 }
 [View on GitHub](https://github.com/puikinsh/Adminator-admin-dashboard){: .btn .fs-5 .mb-4 .mb-md-0 }

 Adminator is a responsive, feature-rich admin template built with:
 - **Bootstrap 5.3.6** - Latest CSS framework
 - **Dark Mode System** - Complete theme switching with OS detection
 - **Modern Components** - Charts, calendars, maps, and interactive elements
 - **Performance Optimized** - Webpack build system with modern tooling
 ---

 ## ✨ What's New in v2.6.0

 🌗 **Complete Dark Mode System** - Intelligent theme switching with OS preference detection  
 ⚡ **Smart Theme Toggle** - Bootstrap-based switch with instant updates  
 🎨 **CSS Variables Architecture** - Semantic color system for easy customization  
 📊 **Component Integration** - All charts, calendars, and maps are theme-aware  

 ---

 ## 🚀 Quick Start

@ -28,99 +39,72 @@ npm install
 npm start
 ```

 Visit `http://localhost:4000` to see Adminator in action.

 ## 📖 Documentation Sections

 ### 🏁 [Getting Started](getting-started/)
 - [Installation Guide](getting-started/installation.md)
 - [Project Structure](getting-started/project-structure.md)
 - [Development Workflow](getting-started/development.md)
 - [Build & Deployment](getting-started/build-deployment.md)

 ### 🎨 [Components](components/)
 - [Charts & Data Visualization](components/charts.md)
 - [Forms & Input Elements](components/forms.md)
 - [Tables & Data Display](components/tables.md)
 - [Navigation & Layout](components/navigation.md)
 - [Modals & Overlays](components/modals.md)

 ### 🌙 [Dark Mode & Theming](customization/)
 - [Theme System Overview](customization/theme-system.md)
 - [CSS Variables Reference](customization/css-variables.md)
 - [Custom Theme Creation](customization/custom-themes.md)
 - [Component Theming](customization/component-theming.md)

 ### 🔧 [API Reference](api/)
 - [Theme API](api/theme-api.md)
 - [Component APIs](api/component-apis.md)
 - [Utility Functions](api/utilities.md)
 - [Event System](api/events.md)

 ### 💡 [Examples](examples/)
 - [Basic Setup](examples/basic-setup.md)
 - [Custom Components](examples/custom-components.md)
 - [Theme Integration](examples/theme-integration.md)
 - [Advanced Patterns](examples/advanced-patterns.md)

 ### 🚀 [Deployment](deployment/)
 - [Production Build](deployment/production-build.md)
 - [Static Hosting](deployment/static-hosting.md)
 - [CDN Integration](deployment/cdn-integration.md)
 - [Performance Optimization](deployment/performance.md)

 ### 🤝 [Contributing](contributing/)
 - [Development Setup](contributing/development-setup.md)
 - [Code Standards](contributing/code-standards.md)
 - [Pull Request Process](contributing/pull-requests.md)
 - [Issue Templates](contributing/issues.md)

 ## ✨ Key Features

 ### 🌗 Dark Mode System
 - **Smart Toggle**: Bootstrap-based switch with visual indicators
 - **OS Detection**: Automatically respects user's system preference
 - **Persistent Storage**: Remembers theme choice across sessions
 - **Component Integration**: All elements are theme-aware

 ### 📊 Rich Components
 - **Chart.js Integration**: Line, bar, pie, and radar charts
 - **FullCalendar**: Interactive calendar with event management
 - **DataTables**: Advanced table features with search and pagination
 - **Vector Maps**: Interactive world and regional maps
 - **Google Maps**: Custom styled maps with markers

 ### 🛠️ Developer Experience
 - **Modern Tooling**: Webpack 5, ESLint 9.x, Sass, PostCSS
 - **Hot Reload**: Instant development feedback
 - **Code Quality**: Automated linting and formatting
 - **Performance**: Optimized builds with code splitting

 ## 🔗 Quick Links

 - **[Live Demo](https://colorlib.com/polygon/adminator/index.html)** - See Adminator in action
 - **[GitHub Repository](https://github.com/puikinsh/Adminator-admin-dashboard)** - Source code and issues
 - **[Changelog](https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/CHANGELOG.md)** - Version history
 - **[License](https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/LICENSE)** - MIT License

 ## 🆕 What's New in v2.6.0

 The latest release introduces a comprehensive dark mode system:

 - **🌙 Complete Dark Theme** with automatic OS detection
 - **🎨 Theme-Aware Components** for charts, calendars, and maps
 - **⚡ Instant Switching** without page reload
 - **🎯 CSS Variables Architecture** for consistent theming
 - **📱 Responsive Design** across all screen sizes

 [View Full Changelog →](https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/CHANGELOG.md)

 ## 💬 Support

 - **Issues**: [GitHub Issues](https://github.com/puikinsh/Adminator-admin-dashboard/issues)
 - **Discussions**: [GitHub Discussions](https://github.com/puikinsh/Adminator-admin-dashboard/discussions)
 - **Documentation**: You're here! 📖
 Visit `http://localhost:4000` to see your dashboard!

 ---

 ## 📚 Documentation Sections

 ### Getting Started
 Learn how to install, configure, and deploy Adminator with our comprehensive setup guides.

 [Installation Guide →](getting-started/installation){: .btn .btn-outline }

 ### Dark Mode & Theming
 Discover the powerful dark mode system with CSS variables and theme switching capabilities.

 [Theme System →](customization/theme-system){: .btn .btn-outline }

 ### API Reference
 Complete JavaScript API documentation for theme management and component integration.

 [API Documentation →](api/theme-api){: .btn .btn-outline }

 ### Examples & Integration
 Real-world examples and integration guides for popular frameworks and use cases.

 [View Examples →](examples/theme-integration){: .btn .btn-outline }

 ---

 ## 🎯 Key Features

 | Feature | Description |
 |:--------|:------------|
 | **Bootstrap 5** | Latest Bootstrap framework with modern components |
 | **Dark Mode** | Comprehensive dark theme with intelligent switching |
 | **Responsive** | Mobile-first design that works on all devices |
 | **Chart Integration** | Chart.js with theme-aware color schemes |
 | **Calendar Support** | FullCalendar with dark mode styling |
 | **Vector Maps** | Interactive maps with custom color palettes |
 | **Clean Code** | Well-organized, documented, and maintainable |

 ---

 ## 🌟 Live Demo

 Experience Adminator's features in action:

 ### Light Mode
 ![Adminator Light Mode](https://github.com/user-attachments/assets/24c5a0df-ae77-4826-9ef5-4a6b4a8ea6c7)

 ### Dark Mode  
 ![Adminator Dark Mode](https://github.com/user-attachments/assets/9c2b9e3b-b67e-4d5c-9ec4-5d9d8e1c7a8f)

 [Try Live Demo](https://adminator.colorlib.com){: .btn .btn-green .fs-5 }

 ---

 ## 🤝 Contributing

 We welcome contributions! Please read our [contributing guidelines](contributing/) before submitting pull requests.

 ---

 ## 📄 License

 Adminator is released under the [MIT License](https://github.com/puikinsh/Adminator-admin-dashboard/blob/master/LICENSE).

 ---

 **Happy coding with Adminator!** 🚀 
 **Ready to build amazing dashboards?** Start with our [installation guide](getting-started/installation) or explore the [dark mode features](customization/theme-system)!