enh: added template as dynamic code and added a announcement bar

damianeickhoff · Feb 6, 2024 · 739221f · 739221f
1 parent 5f1af58
commit 739221f
Show file tree

Hide file tree

Showing 19 changed files with 302 additions and 69 deletions.
diff --git a/dashboard/HaCasa/templates/custom_card_camera/custom_card_camera.yaml b/dashboard/HaCasa/templates/custom_card_camera/custom_card_camera.yaml
@@ -0,0 +1,42 @@
+custom_card_camera:
+  show_state: true
+  show_label: true
+  label: Live
+  icon: mdi:record
+  show_icon: true
+  styles:
+    grid:
+      - grid-template-areas: |
+          's i l'
+          'n n n'
+          'camera camera camera'
+      - grid-template-rows: min-content min-content min-content
+      - row-gap: 3px
+    card:
+      - padding: 20px
+    name:
+      - justify-self: start
+      - font-family: montserrat
+      - padding-bottom: 20px
+      - font-size: 12px
+      - font-weight: 500px
+      - color: var(--color-dark-gray)
+    label:
+      - font-family: montserrat
+      - font-weight: 500
+    icon:
+      - width: 15px
+      - color: var(--color-red)
+    state:
+      - justify-self: start
+      - font-family: montserrat
+      - font-size: 1.5rem
+      - font-weight: 600
+  custom_fields:
+    camera:
+      card:
+        show_state: false
+        show_name: false
+        camera_view: auto
+        type: picture-entity
+        entity: camera.wifi_videodeurbel
diff --git a/dashboard/HaCasa/templates/custom_card_chip/custom_card_chip.yaml b/dashboard/HaCasa/templates/custom_card_chip/custom_card_chip.yaml
@@ -0,0 +1,30 @@
+custom_card_chip:
+  show_name: false
+  show_state: true
+  show_label: false
+  styles:
+    grid:
+      - grid-template-areas: |
+          'i s'
+      - grid-template-columns: min-content min-content
+      - grid-template-rows: 1fr
+      - column-gap: 0.3rem
+    icon:
+      - width: 18px
+    img_cell:
+      - width: 18px
+      - justify-self: start
+    state:
+      - font-family: montserrat
+      - font-weight: 600
+      - font-size: 10px
+    card:
+      - border-radius: 12px
+      - width: auto
+      - height: auto
+      - border-radius: 8px
+      - padding: 10px
+      - margin-bottom: 10px
+  state:
+    - value: 'on'
+      icon: fapro:door-open
diff --git a/docs/cards/alarm-card.md b/docs/cards/alarm-card.md
diff --git a/docs/cards/alarm-card.mdx b/docs/cards/alarm-card.mdx
@@ -0,0 +1,21 @@
+---
+hide_table_of_contents: true
+title: Security Card
+---
+
+The Alarm Card is used for enabling or disabling your alarm. It's configured to set the `Arm Away`, `Arm Home` or `Disarmed`.
+
+There is a small spinning icon animation when the alarm is enabled.
+
+![Alarm Light](/img/cards/alarm/alarm.png)
+![Alarm Dark](/img/cards/alarm/alarm-dark.png)
+
+## Template
+
+import CodeBlock from '@theme/CodeBlock';
+import MyComponentSource from '!!raw-loader!/dashboard/HaCasa/templates/custom_card_security/custom_card_security.yaml';
+
+<details>
+  <summary>Template</summary>
+  <CodeBlock language="yaml" title="/dashboard/HaCasa/templates/custom_card_security/custom_card_security.yaml">{MyComponentSource}</CodeBlock>
+</details>
diff --git a/docs/cards/camera-card.md b/docs/cards/camera-card.md
diff --git a/docs/cards/camera-card.mdx b/docs/cards/camera-card.mdx
@@ -0,0 +1,17 @@
+---
+hide_table_of_contents: true
+title: Camera Card
+---
+
+The `Camera Card` is a fairly easy card. Just shows a live camera view and the state.
+
+![Camera Light](/img/cards/camera/camera.png)
+![Camera Dark](/img/cards/camera/camera-dark.png)
+
+import CodeBlock from '@theme/CodeBlock';
+import MyComponentSource from '!!raw-loader!/dashboard/HaCasa/templates/custom_card_camera/custom_card_camera.yaml';
+
+<details>
+  <summary>Template</summary>
+  <CodeBlock language="yaml" title="/dashboard/HaCasa/templates/custom_card_camera/custom_card_camera.yaml">{MyComponentSource}</CodeBlock>
+</details>
diff --git a/docs/cards/chip-card.md → docs/cards/chip-card.mdx b/docs/cards/chip-card.md → docs/cards/chip-card.mdx
@@ -2,7 +2,7 @@
 hide_table_of_contents: true
 title: Chip Card
 ---
-<!-- markdownlint-disable MD033 -->
+
 # Chip Card <span class="badge-danger">Not ready Yet</span>
 
 The `Chip Card` can be used to have a quick view on a certain sensor or light counts, but you can also use it to navigate.
@@ -11,3 +11,11 @@ Its important that you put multiple chips inside a `horizontal-stack`.
 
 ![chip Light](/img/cards/chip/chip.png)
 ![Chip Dark](/img/cards/chip/chip-dark.png)
+
+import CodeBlock from '@theme/CodeBlock';
+import MyComponentSource from '!!raw-loader!/dashboard/HaCasa/templates/custom_card_chip/custom_card_chip.yaml';
+
+<details>
+  <summary>Template</summary>
+  <CodeBlock language="yaml" title="/dashboard/HaCasa/templates/custom_card_chip/custom_card_chip.yaml">{MyComponentSource}</CodeBlock>
+</details>
diff --git a/docs/cards/climate-card.mdx b/docs/cards/climate-card.mdx
@@ -0,0 +1,25 @@
+---
+icon: flame
+hide_table_of_contents: true
+title: Climate
+---
+The `climate-card`, used for a climate entity, displays the current temperature (if available) and the set temperature. With the buttons on the right the temperature can be set higher or lower.
+
+![Thermostat Light](/img/cards/thermostat/thermostat.png)
+![Thermostat Dark](/img/cards/thermostat/thermostat-dark.png)
+
+## Usage
+
+```yaml
+type: custom:button-card
+template: custom_card_climate
+entity: climate.hvac
+```
+
+import CodeBlock from '@theme/CodeBlock';
+import MyComponentSource from '!!raw-loader!/dashboard/HaCasa/templates/custom_card_climate/custom_card_climate.yaml';
+
+<details>
+  <summary>Template</summary>
+  <CodeBlock language="yaml" title="/dashboard/HaCasa/templates/custom_card_climate/custom_card_climate.yaml">{MyComponentSource}</CodeBlock>
+</details>
diff --git a/docs/cards/fan-card.md → docs/cards/fan-card.mdx b/docs/cards/fan-card.md → docs/cards/fan-card.mdx
@@ -2,7 +2,7 @@
 hide_table_of_contents: true
 title: Fan Card
 ---
-<!-- markdownlint-disable MD033 -->
+
 The `Fan Card` is a modified `light card` turning on and off your `fan entity`. It also provides a toggle for turning on and off the oscillation of the fan.
 
 ![Fan Light](/img/cards/fan/fan.png)
@@ -18,4 +18,10 @@ template:
   - custom_card_fan
 ```
 
-<a href="https://github.com/damianeickhoff/HaCasa/blob/main/dashboard/HaCasa/templates/custom_card_fan/custom_card_fan.yaml" class="template-button" target="_blank" >Template</a>
+import CodeBlock from '@theme/CodeBlock';
+import MyComponentSource from '!!raw-loader!/dashboard/HaCasa/templates/custom_card_fan/custom_card_fan.yaml';
+
+<details>
+  <summary>Template</summary>
+  <CodeBlock language="yaml" title="/dashboard/HaCasa/templates/custom_card_fan/custom_card_fan.yaml">{MyComponentSource}</CodeBlock>
+</details>
diff --git a/docs/cards/light-card.md → docs/cards/light-card.mdx b/docs/cards/light-card.md → docs/cards/light-card.mdx
@@ -18,6 +18,11 @@ label: Bedroom
 template:
   - custom_card_light
 ```
-<!-- markdownlint-disable MD033 -->
 
-<a href="https://github.com/damianeickhoff/HaCasa/blob/main/dashboard/HaCasa/templates/custom_card_light/custom_card_light.yaml" class="template-button" target="_blank" >Template</a>
+import CodeBlock from '@theme/CodeBlock';
+import MyComponentSource from '!!raw-loader!/dashboard/HaCasa/templates/custom_card_light/custom_card_light.yaml';
+
+<details>
+  <summary>Template</summary>
+  <CodeBlock language="yaml" title="/dashboard/HaCasa/templates/custom_card_light/custom_card_light.yaml">{MyComponentSource}</CodeBlock>
+</details>
diff --git a/docs/cards/mediaplayer-music-card.md → docs/cards/mediaplayer-music-card.mdx b/docs/cards/mediaplayer-music-card.md → docs/cards/mediaplayer-music-card.mdx
@@ -16,6 +16,11 @@ template:
   - custom_card_mediaplayer
 entity: media_player.spotify_damian_eickhoff
 ```
-<!-- markdownlint-disable MD033 -->
 
-<a href="https://github.com/damianeickhoff/HaCasa/blob/main/dashboard/HaCasa/templates/custom_card_mediaplayer_music/custom_card_mediaplayer_music.yaml" class="template-button" target="_blank" >Template</a>
+import CodeBlock from '@theme/CodeBlock';
+import MyComponentSource from '!!raw-loader!/dashboard/HaCasa/templates/custom_card_mediaplayer/custom_card_mediaplayer_music.yaml';
+
+<details>
+  <summary>Template</summary>
+  <CodeBlock language="yaml" title="/dashboard/HaCasa/templates/custom_card_mediaplayer/custom_card_mediaplayer_music.yaml">{MyComponentSource}</CodeBlock>
+</details>
diff --git a/docs/cards/mediaplayer-tv-card.md → docs/cards/mediaplayer-tv-card.mdx b/docs/cards/mediaplayer-tv-card.md → docs/cards/mediaplayer-tv-card.mdx
@@ -16,6 +16,11 @@ template:
   - custom_card_mediaplayer_tv
 entity: media_player.bedroom
 ```
-<!-- markdownlint-disable MD033 -->
 
-<a href="https://github.com/damianeickhoff/HaCasa/blob/main/dashboard/HaCasa/templates/custom_card_mediaplayer_tv/custom_card_mediaplayer_tv.yaml" class="template-button" target="_blank" >Template</a>
+import CodeBlock from '@theme/CodeBlock';
+import MyComponentSource from '!!raw-loader!/dashboard/HaCasa/templates/custom_card_mediaplayer/custom_card_mediaplayer_tv.yaml';
+
+<details>
+  <summary>Template</summary>
+  <CodeBlock language="yaml" title="/dashboard/HaCasa/templates/custom_card_mediaplayer/custom_card_mediaplayer_tv.yaml">{MyComponentSource}</CodeBlock>
+</details>
diff --git a/docs/cards/room-card.md → docs/cards/room-card.mdx b/docs/cards/room-card.md → docs/cards/room-card.mdx
@@ -23,6 +23,11 @@ variables:
   hc_entity_2: media_player.bedroom_tv
   hc_entity_3: binary_sensor.bedroom_motion
 ```
-<!-- markdownlint-disable MD033 -->
 
-<a href="https://github.com/damianeickhoff/HaCasa/blob/main/dashboard/HaCasa/templates/custom_card_room/custom_card_room.yaml" class="template-button" target="_blank" >Template</a>
+import CodeBlock from '@theme/CodeBlock';
+import MyComponentSource from '!!raw-loader!/dashboard/HaCasa/templates/custom_card_room/custom_card_room.yaml';
+
+<details>
+  <summary>Template</summary>
+  <CodeBlock language="yaml" title="/dashboard/HaCasa/templates/custom_card_room/custom_card_room.yaml">{MyComponentSource}</CodeBlock>
+</details>
diff --git a/docs/cards/thermostat-card.md b/docs/cards/thermostat-card.md
diff --git a/docs/cards/weather-card.md → docs/cards/weather-card.mdx b/docs/cards/weather-card.md → docs/cards/weather-card.mdx
@@ -3,7 +3,7 @@ icon: cloud
 hide_table_of_contents: true
 title: Weather Card
 ---
-<!-- markdownlint-disable MD033 -->
+
 The weather card shows you the current outside temperature with a matching image depending on the weather state. Those images are all animated and are included in this theme. They are made by [Bas Milius](https://bas.dev/work/meteocons).
 
 The card also shows the rain anticipation but later on it will be customizable.
@@ -32,4 +32,10 @@ tap_action:
   navigation_path: 'weather'
 ```
 
-<a href="https://github.com/damianeickhoff/HaCasa/blob/main/dashboard/HaCasa/templates/custom_card_weather/custom_card_weather_forecast.yaml" class="template-button" target="_blank">Template</a>
+import CodeBlock from '@theme/CodeBlock';
+import MyComponentSource from '!!raw-loader!/dashboard/HaCasa/templates/custom_card_weather/custom_card_weather_forecast.yaml';
+
+<details>
+  <summary>Template</summary>
+  <CodeBlock language="yaml" title="/dashboard/HaCasa/templates/custom_card_weather/custom_card_weather_forecast.yaml">{MyComponentSource}</CodeBlock>
+</details>
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -57,6 +57,7 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+
       // Replace with your project's social card
       navbar: {
         title: '',
@@ -74,11 +75,20 @@ const config = {
           {to: 'https://github.com/damianeickhoff/HaCasa/issues', label: 'Issues', position: 'left'},
           {
             href: 'https://github.com/damianeickhoff/HaCasa',
-            label: 'GitHub',
             position: 'right',
+            className: "header-github-link",
+            "aria-label": "GitHub repository",
           },
         ],
       },
+      announcementBar: {
+        id: 'project_development',
+        content:
+          'This project and the documentation are still in development.',
+        backgroundColor: '#C4AA87',
+        textColor: '#fff',
+        isCloseable: true,
+      },
       prism: {
         theme: prismThemes.github,
         darkTheme: prismThemes.dracula,