mkdocs.yml

# History
# 2024.12.30
# - Update to MkDocs Material 9.5.49
# - Add support for dark/light themes
# - Move the examples under design to functional-cards/series1, so examples are under a single menu item!
# 2023.04.20
# - New server installation and configuration
# - Using latest MkDocs Material 9.1.8 with MkDocs 1.4.2
# 2022.04.13
# - Docker container update to MkDocs Material 8.2.9 with MkDocs 1.3.0

# Project information
site_name: Swiss Army Knife Card for Home Assistant
site_url: https://swiss-army-knife-card-manual.amoebelabs.com/
site_author: Marco
site_description: >-
  The versatile custom Swiss Army Knife Card for Home Assistant allows you to create your unique visualization using several graphical tools and styling options.

# Repository
repo_name: Swiss Army Knife Card
repo_url: https://github.com/amoebelabs/swiss-army-knife-card
edit_uri: ""

copyright: Copyright © 2020 - 2025 Marco @AmoebeLabs

theme:
  name: material
  palette:
    # primary: blue grey
    #primary: amoebelabs
    #accent: amoebelabs
    # Palette toggle for automatic mode
    - media: "(prefers-color-scheme)"
      primary: amoebelabs-light
      accent: amoebelabs-light
      toggle:
        icon: material/brightness-auto
        name: Switch to light mode

    # Palette toggle for light mode
    - media: "(prefers-color-scheme: light)"
      primary: amoebelabs-light
      accent: amoebelabs-light
#      scheme: default 
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode
    # Palette toggle for dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      primary: amoebelabs-dark
      accent: amoebelabs-dark
      toggle:
        icon: material/brightness-4
        name: Switch to system preference
  logo: assets/logo/sak-logo.svg
  custom_dir: overrides
  features:
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.expand
    - navigation.top
    - search.suggest
    - search.highlight

plugins:
  - search
  - tags
  - blog
  - minify:
      minify_html: true
  # Redirect pages pages that I want to rename etc. without loosing Google / Bing indexing...
  # And users getting a 404 while clicking on an old link of course!
  # This is using a HTML refresh with 0 seconds and contains a "no-index" for the old page.
  - redirects:
      redirect_maps:
        'start/introduction.md': 'start/preface.md'
        'start/designing-your-card.md': 'design/how-to-design-your-card.md'
        'basics/interactions.md': 'basics/user-interactions.md'
        'basics/svg-as-basis.md': 'basics/tools-and-toolsets.md'

        # @2024.12.30 Move from design to series1 under the 'functional card menu'
        'design/functional-card-airvisual1-card.md': 'functional-cards/series1/functional-card-airvisual1-card.md'
        'design/functional-card-airvisual2-card.md': 'functional-cards/series1/functional-card-airvisual2-card.md'
        'design/functional-card-battery-sensor2-card.md': 'functional-cards/series1/functional-card-battery-sensor2-card.md'
        'design/functional-card-binary-sensor1-card.md': 'functional-cards/series1/functional-card-binary-sensor1-card.md'
        'design/functional-card-binary-sensor-alert1-card.md': 'functional-cards/series1/functional-card-binary-sensor-alert1-card.md'
        'design/functional-card-binary-sensor-alert2-card.md': 'functional-cards/series1/functional-card-binary-sensor-alert2-card.md'
        'design/functional-card-binary-sensor-alert3-card.md': 'functional-cards/series1/functional-card-binary-sensor-alert3-card.md'
        'design/functional-card-binary-sensor-alert4-card.md': 'functional-cards/series1/functional-card-binary-sensor-alert4-card.md'
        'design/functional-card-environment-card.md': 'functional-cards/series1/functional-card-environment-card.md'
        'design/functional-card-header-card.md': 'functional-cards/series1/functional-card-header-card.md'
        'design/functional-card-input-boolean-card.md': 'functional-cards/series1/functional-card-input-boolean-card.md'
        'design/functional-card-light-card.md': 'functional-cards/series1/functional-card-light-card.md'
        'design/functional-card-light-slider-card.md': 'functional-cards/series1/functional-card-light-slider-card.md'
        'design/functional-card-navigate-card.md': 'functional-cards/series1/functional-card-navigate-card.md'
        'design/functional-card-person-card.md': 'functional-cards/series1/functional-card-person-card.md'
        'design/functional-card-power-outlet1-card.md': 'functional-cards/series1/functional-card-power-outlet1-card.md'
        'design/functional-card-power-outlet2-card.md': 'functional-cards/series1/functional-card-power-outlet2-card.md'
        'design/functional-card-power-outlet3-card.md': 'functional-cards/series1/functional-card-power-outlet3-card.md'
        'design/functional-card-power-outlet4-card.md': 'functional-cards/series1/functional-card-power-outlet4-card.md'
        'design/functional-card-scene-card.md': 'functional-cards/series1/functional-card-scene-card.md'
        'design/functional-card-sensor1-card.md': 'functional-cards/series1/functional-card-sensor1-card.md'
        'design/functional-card-sensor2-card.md': 'functional-cards/series1/functional-card-sensor2-card.md'
        'design/functional-card-server-statistics-card.md': 'functional-cards/series1/functional-card-server-statistics-card.md'
        'design/functional-card-switch1-card.md': 'functional-cards/series1/functional-card-switch1-card.md'
        'design/functional-card-switch2-card.md': 'functional-cards/series1/functional-card-switch2-card.md'
        'design/functional-card-switch3-card.md': 'functional-cards/series1/functional-card-switch3-card.md'
        'design/functional-card-tomorrow-pollen-card.md': 'functional-cards/series1/functional-card-tomorrow-pollen-card.md'
        'design/functional-card-tomorrow-pollen-all-card.md': 'functional-cards/series1/functional-card-tomorrow-pollen-all-card.md'
        'design/functional-card-tomorrow-pollen-all-aqi-card.md': 'functional-cards/series1/functional-card-tomorrow-pollen-all-aqi-card.md'
extra_css:
  - assets/stylesheets/extra.css

extra_javascript:
  - assets/javascripts/extra.js

extra:
  social:
    - icon: bmc/bmc-logo
      link: https://www.buymeacoffee.com/amoebelabs/
    - icon: amoebelabs/al-logo-social
      link: https://amoebelabs.com/
    - icon: m3/m3-logo-social
      link: https://material3-themes-manual.amoebelabs.com/
    - icon: fontawesome/brands/github
      link: https://github.com/amoebelabs/
    - icon: fontawesome/brands/instagram
      link: https://www.instagram.com/amoebelabs/
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/amoebelabs/

  analytics:
    provider: google
    property: G-YH4P44GYYJ

markdown_extensions:
  - admonition
  - abbr
  - def_list
  - footnotes
  - meta
  - toc:
      permalink: true
  - pymdownx.arithmatex:
      generic: true
  - pymdownx.betterem:
      smart_enable: all
  # Formatting
  - pymdownx.critic
  - pymdownx.caret
  - pymdownx.keys
  - pymdownx.mark
  - pymdownx.tilde
  # Grids
  - attr_list
  - md_in_html
  - pymdownx.details
  - pymdownx.emoji:
      emoji_index: !!python/name:material.extensions.emoji.twemoji
      emoji_generator: !!python/name:material.extensions.emoji.to_svg
      options:
        custom_icons:
          - overrides/.icons
  - pymdownx.highlight
  - pymdownx.inlinehilite
  - pymdownx.magiclink:
      repo_url_shorthand: true
      user: squidfunk
      repo: mkdocs-material
  - pymdownx.smartsymbols
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid-experimental
          format: !!python/name:pymdownx.superfences.fence_code_format
  - pymdownx.snippets
  - pymdownx.tabbed:
      alternate_style: true
  - pymdownx.tasklist:
      custom_checkbox: true

  
# Page tree
nav:
  - Home: index.md
  - Getting started:
    - Preface: start/preface.md
    - What is this card, for whom is it?: start/what-is-this-card-and-for-whom-is-it.md
    - Installation: start/installation.md
    # - Older versions:
    #   - Version 0.9.0-b2: start/installation-0.9.0-b2.md
    #   - Version 0.9.0-b1: start/installation-0.9.0-b1.md
    - Changelog: changelog/changelog.md
  - How to design/create cards:
    - How to design your card: design/how-to-design-your-card.md
    - The step to Functional Cards:
      - How to create functional cards: design/how-to-create-functional-cards.md
      - Functional card examples: design/example-set-functional-cards.md
#      - Examples:
#        - "Airvisual Card #1": design/functional-card-airvisual1-card.md
#        - "Airvisual Card #2": design/functional-card-airvisual2-card.md
#        - Battery Card: design/functional-card-battery-sensor2-card.md
#        - "Binary Card": design/functional-card-binary-sensor1-card.md
#        - "Binary Card with Alert #1": design/functional-card-binary-sensor-alert1-card.md
#        - "Binary Card with Alert #2": design/functional-card-binary-sensor-alert2-card.md
#        - "Binary Card with Alert #3": design/functional-card-binary-sensor-alert3-card.md
#        - "Binary Card with Alert #4": design/functional-card-binary-sensor-alert4-card.md
#        - Environment Card: design/functional-card-environment-card.md
#        - Header Card: design/functional-card-header-card.md
#        - Input Boolean Card: design/functional-card-input-boolean-card.md
#        - Light Card: design/functional-card-light-card.md
#        - Light Card with slider: design/functional-card-light-slider-card.md
#        - Navigate Card: design/functional-card-navigate-card.md
#        - Person Card: design/functional-card-person-card.md
#        - "Power Outlet Card #1": design/functional-card-power-outlet1-card.md
#        - "Power Outlet Card #2": design/functional-card-power-outlet2-card.md
#        - "Power Outlet Card #3": design/functional-card-power-outlet3-card.md
#        - "Power Outlet Card #4": design/functional-card-power-outlet4-card.md
#        - Scene Card: design/functional-card-scene-card.md
#        - "Sensor Card #1": design/functional-card-sensor1-card.md
#        - "Sensor Card #2": design/functional-card-sensor2-card.md
#        # - "Sensor Card #3": design/functional-card-sensor3-card.md
#        # - "Sensor Card #4": design/functional-card-sensor4-card.md
#        - Server Card: design/functional-card-server-statistics-card.md
#        - "Switch Card #1": design/functional-card-switch1-card.md
#        - "Switch Card #2": design/functional-card-switch2-card.md
#        - "Switch Card #3": design/functional-card-switch3-card.md
#        - Tomorrow Pollen Card: design/functional-card-tomorrow-pollen-card.md
#        - Tomorrow Pollen All Card: design/functional-card-tomorrow-pollen-all-card.md
#        - Tomorrow Pollen All with AQI Card: design/functional-card-tomorrow-pollen-all-aqi-card.md
#        # - Weather Card: design/functional-card-weather-card.md
  - Basics:
    - Tools and Entities: basics/tools-and-entities.md
    - Tools and Toolsets: basics/tools-and-toolsets.md
    - Coordinate system: basics/coordinate-system.md
    - Card structure: basics/card-structure.md
    - Templates and Snippets:
      - Overview: basics/templates/overview.md
      - YAML built-in: basics/templates/yaml-built-in.md
      - SAK templates: basics/templates/sak-templates.md
      - Javascript snippets: basics/templates/javascript-snippets.md
    - User Interactions: basics/user-interactions.md
    - Entity State Converters: basics/entity-state-converters.md
    - Localization and Formatters: basics/localization-and-formatters.md
    - Haptic Feedback: basics/haptics.md
    - Styling:
      - Overview: basics/styling/overview.md
      - CSS Classes: basics/styling/classes.md
      - CSS Styles: basics/styling/styles.md
    - Animations:
      - CSS Animations: basics/animations/css-animations.md
      - Colorstop Animations: basics/animations/colorstops.md
      - State Operator Animations: basics/animations/state-operators.md
    - Theming:
      - Overview: basics/theming/overview.md
      - Per card Theming: basics/theming/per-card-theme.md
      - Swatches and Palettes: basics/theming/color-swatches-and-color-palettes.md
  - Tools:
    - Basic tools:
      - Circle: tools/circle-tool.md
      - Ellipse: tools/ellipse-tool.md
      - Line: tools/line-tool.md
      - Rectangle: tools/rectangle-tool.md
      - RectangleEx: tools/rectangle-ex-tool.md
      - Regular Poly: tools/regular-poly-tool.md
      - Text: tools/text-tool.md
    - Advanced tools:
      - Circular Slider: tools/circular-slider-tool.md
      - Horse Shoe: tools/horseshoe-tool.md
      - Progress Path *(new)*: tools/progpath-tool.md
      - Segmented Arc: tools/segarc-tool.md
      - Slider: tools/slider-tool.md
      - Sparkline *(new)*: tools/sparkline-tool.md
      - Switch: tools/switch-tool.md
      - User SVG: tools/usersvg-tool.md
    - HA Entity tools:
      - Entity Area: tools/entity-area-tool.md
      - Entity Icon: tools/entity-icon-tool.md
      - Entity Name: tools/entity-name-tool.md
      - Entity State: tools/entity-state-tool.md
      - Entity History: tools/entity-barchart-tool.md
  - 10 Step Tutorials:
    - 10 step or less tutorials: tutorials/10-step-tutorial-introduction.md
    - "Tutorial #1":
      - From simple card to template: tutorials/10-step-tutorial-01-intro.md
      - Part 1 - One Sensor/1: tutorials/10-step-tutorial-01-part1.md
      - Part 2 - Two Sensors/1: tutorials/10-step-tutorial-01-part2.md
      - Part 3 - One Sensor/2: tutorials/10-step-tutorial-01-part3.md
      - Part 4 - Two Sensors/2: tutorials/10-step-tutorial-01-part4.md
      # - 1.1 - Create Card with circle, icon, state and name: tutorials/10-step-tutorial-01-part1.md
      # - 1.2 - Duplicate toolset: tutorials/10-step-tutorial-01-part2.md
      # - 1.3 - Create toolset template from 1.1: tutorials/10-step-tutorial-01-part3.md
      # - 1.4 - Use toolset template to create 1.2 again: tutorials/10-step-tutorial-01-part4.md
    - "Tutorial #2":
      - Wide cards Example 12: tutorials/10-step-tutorial-02-intro.md
      - Part 1 - Server Card: tutorials/10-step-tutorial-02-part1.md
      # - 2.1 - Create wide card with server statistics using Material 3 theme: tutorials/10-step-tutorial-02-part1.md
    - "Tutorial #3":
      - Simple card Example 4: tutorials/10-step-tutorial-03-intro.md
      - Part 1 - Sensor Card: tutorials/10-step-tutorial-03-part1.md
      # - 3.1 - Create card with entity data and history: tutorials/10-step-tutorial-03-part1.md
    
  - Example Mix:
    - Introduction: examples/introduction.md
    - 1. Airvisual & Weather forecast: examples/example-1.md
    - 2. Lights: examples/example-2.md
    - 3. Sensors: examples/example-3.md
    - 4. More sensors: examples/example-4.md
    - 5. Car dashboard alike: examples/example-5.md
    - 6. Weather on SVG background: examples/example-6.md
    - 7. Servers: examples/example-7.md
    - 8. Homekit alike: examples/example-8.md
    - 9. High Contrast: examples/example-9.md
    - 10. Colorful mix: examples/example-10.md
    - 11. Boiler and electricity (m3): examples/example-11.md
    - 12. Wide cards (m3): examples/example-12.md
    - 99. Material 3 converter and theme viewer (m3): examples/example-99.md
  - Functional Card Examples:
    - Series 1:
      - Overview: design/example-set-functional-cards.md
      - Examples:
        - "Airvisual Card #1": functional-cards/series1/functional-card-airvisual1-card.md
        - "Airvisual Card #2": functional-cards/series1/functional-card-airvisual2-card.md
        - Battery Card: functional-cards/series1/functional-card-battery-sensor2-card.md
        - "Binary Card": functional-cards/series1/functional-card-binary-sensor1-card.md
        - "Binary Card with Alert #1": functional-cards/series1/functional-card-binary-sensor-alert1-card.md
        - "Binary Card with Alert #2": functional-cards/series1/functional-card-binary-sensor-alert2-card.md
        - "Binary Card with Alert #3": functional-cards/series1/functional-card-binary-sensor-alert3-card.md
        - "Binary Card with Alert #4": functional-cards/series1/functional-card-binary-sensor-alert4-card.md
        - Environment Card: functional-cards/series1/functional-card-environment-card.md
        - Header Card: functional-cards/series1/functional-card-header-card.md
        - Input Boolean Card: functional-cards/series1/functional-card-input-boolean-card.md
        - Light Card: functional-cards/series1/functional-card-light-card.md
        - Light Card with slider: functional-cards/series1/functional-card-light-slider-card.md
        - Navigate Card: functional-cards/series1/functional-card-navigate-card.md
        - Person Card: functional-cards/series1/functional-card-person-card.md
        - "Power Outlet Card #1": functional-cards/series1/functional-card-power-outlet1-card.md
        - "Power Outlet Card #2": functional-cards/series1/functional-card-power-outlet2-card.md
        - "Power Outlet Card #3": functional-cards/series1/functional-card-power-outlet3-card.md
        - "Power Outlet Card #4": functional-cards/series1/functional-card-power-outlet4-card.md
        - Scene Card: functional-cards/series1/functional-card-scene-card.md
        - "Sensor Card #1": functional-cards/series1/functional-card-sensor1-card.md
        - "Sensor Card #2": functional-cards/series1/functional-card-sensor2-card.md
        # - "Sensor Card #3": functional-cards/series1/functional-card-sensor3-card.md
        # - "Sensor Card #4": functional-cards/series1/functional-card-sensor4-card.md
        - Server Card: functional-cards/series1/functional-card-server-statistics-card.md
        - "Switch Card #1": functional-cards/series1/functional-card-switch1-card.md
        - "Switch Card #2": functional-cards/series1/functional-card-switch2-card.md
        - "Switch Card #3": functional-cards/series1/functional-card-switch3-card.md
        - Tomorrow Pollen Card: functional-cards/series1/functional-card-tomorrow-pollen-card.md
        - Tomorrow Pollen All Card: functional-cards/series1/functional-card-tomorrow-pollen-all-card.md
        - Tomorrow Pollen All with AQI Card: functional-cards/series1/functional-card-tomorrow-pollen-all-aqi-card.md
        # - Weather Card: functional-cards/series1/functional-card-weather-card.md
    - Series 2:
      - Overview: functional-cards/series2/example-set-s2-functional-cards.md
      - Examples:
        - "Awair Element Cards #1": functional-cards/series2/functional-card-awair1-card.md
        - "Awair Element Cards #3": functional-cards/series2/functional-card-awair3-card.md
        - "Binary Card with Alert #1": functional-cards/series2/functional-card-binary-sensor-alert1-card.md
        - Electricity Cards (Big!): functional-cards/series2/functional-card-electricity-big-card.md
        - Person Card: functional-cards/series2/functional-card-person-card.md
        - "Sensor Card #4": functional-cards/series2/functional-card-sensor4-card.md

  - Helpers:
    - Pallette generators: helpers/palette-generators.md
    - Gradient generator / converter: helpers/gradient-generator-converter.md