Fix configuration descriptions (#5721)

* Fix configuration descriptions

* Fix syntax

* Minor changes

* Other fixes

* Update configuration description

* Check syntax

* Remove {% configuration %}

source/_lovelace/entities.markdown

@@ -12,8 +12,6 @@ footer: true
 
 Entities will be the most common type of card that will also be the most familiar to people using the standard interface. It groups items together very close to how groups used to do.
 
-## {% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
@@ -21,32 +19,28 @@ type:
   type: string
 entities:
   required: true
-  description: "Entity id's or an `entity` object (see structure below)."
+  description: "A list of entity IDs or an `entity` object."
   type: list
+  keys:
+    entity:
+      required: true
+      description: "An `entity_id` to use in the frontend."
+      type: string
+    name:
+      required: true
+      description: "The name for the `entity_id` to use in the frontend."
+      type: string
 title:
   required: false
-  description: Card title
+  description: The card title.
   type: string
 show_header_toggle:
   required: false
-  description: Button to turn on/off all entities
+  description: Button to turn on/off all entities.
   type: boolean
   default: true
 {% endconfiguration %}
 
-`entity` object
-
-{% configuration %}
-entity:
-  required: true
-  description: "An entity_id. Example: 'device_tracker.demo_paulus'."
-  type: string
-name:
-  required: true
-  description: A new name for the entity_id
-  type: string
-{% endconfiguration %}
-
 ## {% linkable_title Example %}
 
 ```yaml

source/_lovelace/entity-filter.markdown

@@ -19,8 +19,6 @@ This type of card can also be used together with rest of cards that allow multip
 Screenshot of the entity filter card.
 </p>
 
-## {% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
@@ -28,11 +26,20 @@ type:
   type: string
 entities:
   required: true
-  description: Array of entity_ids
+  description: "List of entities to show."
-  type: array
+  type: list
+  keys:
+    name:
+      required: false
+      description: The name to use in the front for the entity.
+      type: string
+    entity:
+      required: false
+      description: "The `entity_id` to show in the frontend."
+      type: string
 state_filter:
   required: true
-  description: Array of strings representing states
+  description: Array of strings representing states.
   type: array
 card:
   required: false

source/_lovelace/glance.markdown

@@ -17,8 +17,6 @@ Glance cards are very compact. Very useful to group together multiple sensors fo
 Screenshot of the glance card.
 </p>
 
-## {% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
@@ -26,8 +24,17 @@ type:
   type: string
 entities:
   required: true
-  description: "Entity id's or an `entity` object (see structure below)."
+  description: "A list of entity IDs or an `entity` object."
   type: list
+  keys:
+    entity:
+      required: true
+      description: "The `entity_id` to show."
+      type: string
+    name:
+      required: true
+      description: "A name for `the entity_id`."
+      type: string
 title:
   required: false
   description: Card title
@@ -35,19 +42,6 @@ title:
   default: none
 {% endconfiguration %}
 
-`entity` object type
-
-{% configuration %}
-entity:
-  required: true
-  description: "An entity_id. Example: 'device_tracker.demo_paulus'."
-  type: string
-name:
-  required: true
-  description: A new name for the entity_id
-  type: string
-{% endconfiguration %}
-
 ## {% linkable_title Examples %}
 
 Basic example:

source/_lovelace/history-graph.markdown

@@ -17,8 +17,6 @@ History graph is a basic card, allowing you to display a graph for each of the e
 Screenshot of the history graph card.
 </p>
 
-## {% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
@@ -30,19 +28,18 @@ entities:
   type: list
 hours_to_show:
   required: false
-  description: Hours to show
+  description: Hours to show.
   type: integer
   default: 24
 refresh_interval:
   required: false
-  description: Refresh interval in seconds
+  description: Refresh interval in seconds.
   type: integer
   default: 0
 title:
   required: false
-  description: Card title
+  description: The card title.
   type: string
-  default: none
 {% endconfiguration %}
 
 ## {% linkable_title Example %}

source/_lovelace/horizontal-stack.markdown

@@ -12,8 +12,6 @@ footer: true
 
 Horizontal stack card will allow you to stack together multiple cards, so they always sit next to each other in the space of one column.
 
-## {% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
@@ -21,8 +19,21 @@ type:
   type: string
 cards:
   required: true
-  description: List of cards
+  description: List of cards.
   type: list
+  keys:
+    type:
+      required: true
+      description: The type of the card to stack.
+      type: string
+    entity:
+      required: true
+      description: "An `entity_id` to use in the frontend."
+      type: string
+    image:
+      required: true
+      description: The URL to an image.
+      type: string
 {% endconfiguration %}
 
 ## {% linkable_title Example %}

source/_lovelace/iframe.markdown

@@ -21,6 +21,8 @@ Make sure the URL you're embedding has the right protocol and allows to be embed
 
 ## {% linkable_title Options %}
 
+Create a new file `<config>/ui-lovelace.yaml` and add the following content. Adjust the entity names to entities that exist in your Home Assistant installation.
+
 {% configuration %}
 type:
   required: true
@@ -28,16 +30,16 @@ type:
   type: string
 url:
   required: true
-  description: iframe source url
+  description: The iframe source URL.
   type: string
 aspect_ratio:
   required: false
-  description: Iframe height-width-ratio
+  description: The iframe height-width-ratio.
   type: string
   default: "50%"
 title:
   required: false
-  description: Card title
+  description: The card title.
   type: string
   default: none
 {% endconfiguration %}
@@ -53,7 +55,7 @@ title:
 Local HTML for custom content. Place `example.html` in your `config/www` folder and reference it as below:
 
 ```yaml
-      - type: iframe
+- type: iframe
   url: /local/example.html
   title: Sample local file
 ```

source/_lovelace/map.markdown

@@ -17,42 +17,35 @@ A card that allows you to display entities on a map.
 Screenshot of the map card.
 </p>
 
-## {% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
-  description: "`map`"
+  description: map
   type: string
 entities:
   required: true
-  description: "Entity id's or an `entity` object (see structure below)."
+  description: List of entity IDs.
   type: list
+  keys:
+    entity:
+      required: true
+      description: "An `entity_id` to use."
+      type: string
 title:
   required: false
-  description: Card title
+  description: The card title.
   type: string
 aspect_ratio: 
   required: false
-  description: "Map height:width ratio"
+  description: "The map's height:width ratio."
-  type: string
-  default: 100%
-{% endconfiguration %}
-
-`entity` object:
-
-{% configuration %}
-entity:
-  required: true
-  description: "An entity_id. Example: 'device_tracker.demo_paulus'."
   type: string
+  default: "100%"
 {% endconfiguration %}
 
 <p class='note'>
-  Only entities that have latitude and longitude attributes will be displayed on the map
+  Only entities that have latitude and longitude attributes will be displayed on the map.
 </p>
 
-
 ## {% linkable_title Examples %}
 
 ```yaml

source/_lovelace/markdown.markdown

@@ -17,8 +17,6 @@ Markdown card is used to render [markdown](http://commonmark.org/help/).
 Screenshot of the markdown card.
 </p>
 
-## {% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
@@ -26,11 +24,11 @@ type:
   type: string
 content:
   required: true
-  description: Content to render as [markdown](http://commonmark.org/help/).
+  description: "Content to render as [markdown](http://commonmark.org/help/)."
   type: string
 title:
   required: false
-  description: Card title
+  description: The card title.
   type: string
   default: none
 {% endconfiguration %}

source/_lovelace/media-control.markdown

@@ -17,8 +17,6 @@ The media control card is used to display [Media Player](/components/#search/med
 Screenshot of the media player control card.
 </p>
 
-## {% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
@@ -26,7 +24,7 @@ type:
   type: string
 entity:
   required: true
-  description: "Entity id of `media_player` domain"
+  description: "A media player `entity_id`."
   type: string
 {% endconfiguration %}
 

source/_lovelace/picture-elements.markdown

@@ -12,7 +12,7 @@ footer: true
 
 Picture elements card is one of the most versatile type of cards.
 
-The cards allows you to position icons or text and even services! on an image based on coordinates. Imagine floor plan, imagine [picture-glance](/lovelace/picture-glance/) with no restrictions!
+The cards allows you to position icons or text and even services! On an image based on coordinates. Imagine floor plan, imagine [picture-glance](/lovelace/picture-glance/) with no restrictions!
 
 You can customize tap action and even icon color.
 
@@ -21,8 +21,6 @@ You can customize tap action and even icon color.
 Screenshot of the picture elements card.
 </p>
 
-## {% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
@@ -30,7 +28,7 @@ type:
   type: string
 image:
   required: true
-  description: URL of an image
+  description: The URL of an image.
   type: string
 elements:
   required: true
@@ -40,132 +38,178 @@ title:
   required: false
   description: Card title
   type: string
-  default: none
 {% endconfiguration %}
 
-Element types:
+Different `elements` types:
 
 {% configuration %}
-type:
+elements:
+  required: true
+  description: List of elements
+  type: list
+  keys:
+    type:
       required: true
       description: navigation
       type: string
-navigation_path:
+    navigation_path:
       required: true
-  description: navigation_path of URL to navigate to
+      description: "The `navigation_path` of URL to navigate to."
       type: string
-icon:
+    icon:
       required: false
       description: Icon
       type: string
-  default: none
 {% endconfiguration %}
 
 {% configuration %}
-type:
+elements:
+  required: true
+  description: List of elements
+  type: list
+  keys:
+    type:
       required: true
       description: state-badge
       type: string
-entity:
+    entity:
       required: true
       description: Entity id
       type: string
-style:
+    style:
       required: true
       description: See "Style options"
       type: object
 {% endconfiguration %}
 
 {% configuration %}
-type:
+elements:
+  required: true
+  description: List of elements
+  type: list
+  keys:
+    type:
       required: true
       description: state-icon
       type: string
-entity:
+    entity:
       required: true
-  description: Entity id
+      description: The entity id to use.
       type: string
-style:
+    style:
       required: true
-  description: See "Style options"
+      description: Additional style options to use.
-  type: object
+      type: list
-tap_action:
+      keys:
+        left:
+          required: true
+          description: Position from left, "25%".
+          type: string
+        top:
+          required: true
+          description: Position from top, "50%".
+          type: string
+        ...:
+          required: inherit
+          description: ...
+          type: string
+        "--paper-item-icon-color":
+          required: inherit
+          description: "Badge-icon off-color, `green`"
+          type: string
+    tap_action:
       required: false
       description: "Set to `toggle` to change state"
       type: string
       default: more-info
+      tap_action:
 {% endconfiguration %}
 
 {% configuration %}
-type:
+elements:
+  required: true
+  description: List of elements
+  type: list
+  keys:
+    type:
       required: true
       description: state-label
       type: string
-entity:
+    entity:
       required: true
       description: Entity id
       type: string
-style:
+    style:
       required: true
-  description: See "Style options"
+      description: Additional style options to use.
-  type: object
+      type: list
-{% endconfiguration %}
+      keys:
-
+        left:
-{% configuration %}
-type:
           required: true
-  description: service-button
+          description: Position from left, "25%".
           type: string
-service:
+        top:
           required: true
-  description: light.turn_on
+          description: Position from top, "50%".
           type: string
-service_data:
+        ...:
-  required: false
-  description: "See `service_data` object structure."
-  type: object
-  default: none
-style:
-  required: true
-  description: See "Style options"
-  type: object
-title:
-  required: false
-  description: Button label
-  type: string
-  default: none
-{% endconfiguration %}
-
-`service_data` object structure
-
-{% configuration %}
-entity_id:
-  required: true
-  description: light.floor
-  type: string
-{% endconfiguration %}
-
-Style options (CSS):
-
-{% configuration %}
-left:
-  required: true
-  description: Position from left, "25%"
-  type: string
-top:
-  required: true
-  description: Position from top, "50%"
-  type: string
-...:
           required: inherit
           description: ...
           type: string
-  default: none
+        "--paper-item-icon-color":
-"--paper-item-icon-color":
           required: inherit
           description: "Badge-icon off-color, `green`"
           type: string
-  default: none
+{% endconfiguration %}
+
+{% configuration %}
+elements:
+  required: true
+  description: List of elements
+  type: list
+  keys:
+    type:
+      required: true
+      description: service-button
+      type: string
+    service:
+      required: true
+      description: light.turn_on
+      type: string
+    service_data:
+      required: false
+      description: The service data to use."
+      type: list
+      keys:
+        entity_id:
+          required: true
+          description: light.floor
+          type: string
+    style:
+      required: true
+      description: Additional style options to use.
+      type: object
+      keys:
+        left:
+          required: true
+          description: Position from left, "25%".
+          type: string
+        top:
+          required: true
+          description: Position from top, "50%".
+          type: string
+        ...:
+          required: inherit
+          description: ...
+          type: string
+        "--paper-item-icon-color":
+          required: inherit
+          description: "Badge-icon off-color, `green`"
+          type: string
+    title:
+      required: false
+      description: Button label
+      type: string
 {% endconfiguration %}
 
 ## {% linkable_title Example %}

source/_lovelace/picture-entity.markdown

@@ -21,8 +21,6 @@ You can also use `camera` domain entities to use that as `camera_image`.
 Screenshot of the picture entity card.
 </p>
 
-{% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
@@ -30,11 +28,11 @@ type:
   type: string
 entity:
   required: true
-  description: Entity id to control via picture.
+  description: "An `entity_id` to control via picture."
   type: string
 camera_image:
   required: false
-  description: "Camera domain entity_id 'camera.demo_camera'"
+  description: "Camera `entity_id` to use."
   type: string
   default: None
 image:
@@ -46,55 +44,47 @@ state_image:
   required: false
   description: "See `state_image` object structure."
   type: object
-  default: None
+  keys:
-name:
+    "on":
-  required: false
-  description: Custom name for entity
-  type: string
-  default: None
-show_info:
-  required: false
-  description: Set to false to hide infobar
-  type: boolean
-  default: True
-tap_action:
-  required: false
-  description: "Set to `toggle` for turning entity on/off without opening a dialog"
-  type: string
-  default: dialog
-{% endconfiguration %}
-
-`state_image` object structure
-
-{% configuration %}
-"on":
       required: true
       description: URL of an image used for on state.
       type: string
-  default: None
+    "off":
-"off":
       required: true
       description: URL of an image used for off state.
       type: string
       default: None
-home:
+    home:
       required: false
       description: URL of an image used for home state.
       type: string
-  default: None
+    not_home:
-not_home:
       required: false
       description: URL of an image used for not_home state.
       type: string
       default: None
-any:
+    any:
       required: false
-  description: Any state that is supported by the entity works
+      description: Any state that is supported by the entity works.
       type: object
+name:
+  required: false
+  description: Custom name for entity.
+  type: string
   default: None
+show_info:
+  required: false
+  description: Set to false to hide infobar.
+  type: boolean
+  default: true
+tap_action:
+  required: false
+  description: "Set to `toggle` for turning entity on/off without opening a dialog."
+  type: string
+  default: dialog
 {% endconfiguration %}
 
-{% linkable_title Examples %}
+## {% linkable_title Examples %}
 
 Basic example:
 

source/_lovelace/picture-glance.markdown

@@ -23,28 +23,65 @@ Picture glance supports a display of maximum 10 items.
 Screenshot of the picture glance card.
 </p>
 
-## {% linkable_title Options %}
+{% configuration %}
-
+type:
-| Name | Type | Default | Description
+  required: true
-| ---- | ---- | ------- | -----------
+  description: picture-glance
-| type | string | **Required** | `picture-glance`
+  type: string
-| image | string | **Required** | URL of an image
+image:
-| entities | list | **Required** | Entity id's
+  required: true
-| navigation_path | string | Optional | Path of URL to use in navigation
+  description: The URL of an image.
-| camera_image | string | Optional | camera domain entity_id 'camera.demo_camera'
+  type: string
-| state_image | object | Optional| See `state_image` object structure.
+navigation_path:
-| entity | list | Optional | An entity to use for state_image state.
+  required: false
-| title | string | Optional | Card title.
+  description: Path of URL to use in navigation.
-
+  type: string
-`state_image` object structure
+entities:
-
+  required: true
-| Name | Type | Default | Description
+  description: A list of entity IDs.
-| ---- | ---- | ------- | -----------
+  type: list
-| on | string | Optional | URL of an image used for on state.
+navigation_path:
-| off | string | Optional | URL of an image used for off state.
+  required: false
-| home | string | Optional | URL of an image used for home state.
+  description: Path of URL to use in navigation.
-| not_home | string | Optional | URL of an image used for not_home state.
+  type: string
-| ... | string | Optional | Any state that is supported by the entity works.
+camera_image:
+  required: false
+  description: The entity ID of a camera.
+  type: string
+state_image:
+  required: false
+  description: Path of URL to use in navigation.
+  type: list
+  keys:
+    "on":
+      type: string
+      required: false
+      description: URL of an image used for on state.
+    "off":
+      type: string
+      required: false
+      description: URL of an image used for off state.
+    home:
+      type: string
+      required: false
+      description: URL of an image used for home state.
+    not_home:
+      type: string
+      required: false
+      description: URL of an image used for not_home state.
+    ANYTHING:
+      type: string
+      required: false
+      description: Any state that is supported by the entity works.
+entity:
+  required: false
+  description: "An entity to use for state_image state."
+  type: list
+title:
+  required: false
+  description: The card title.
+  type: string
+{% endconfiguration %}
 
 ## {% linkable_title Examples %}
 

source/_lovelace/picture.markdown

@@ -17,8 +17,6 @@ A very simple card that allows you to set an image to use for navigation to vari
 Screenshot of the picture card.
 </p>
 
-## {% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
@@ -26,31 +24,24 @@ type:
   type: string
 image:
   required: true
-  description: URL of an image
+  description: The URL of an image.
   type: string
 navigation_path:
   required: false
-  description: Path of URL to navigate to
+  description: Path of URL to navigate to.
   type: string
-  default: None
 service:
   required: false
-  description: "`light.toggle`"
+  description: The service to call.
   type: string
-  default: None
 service_data:
   required: false
-  description: See service_data object
+  description: The service data.
   type: object
-  default: None
+  keys:
-{% endconfiguration %}
+    entity_id:
-
-`service_data` object structure
-
-{% configuration %}
-entity_id:
       required: true
-  description: light.floor
+      description: The ID of the entity to use.
       type: string
 {% endconfiguration %}
 

source/_lovelace/plant-status.markdown

@@ -17,8 +17,6 @@ A card for all the lovely botanists out there.
 Screenshot of the plant status card.
 </p>
 
-## {% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
@@ -33,6 +31,7 @@ entity:
 ## {% linkable_title Example %}
 
 ```yaml
+cards:
 - type: plant-status
   entity: plant.bonsai
 ```

source/_lovelace/vertical-stack.markdown

@@ -23,6 +23,19 @@ cards:
   required: true
   description: List of cards
   type: list
+  keys:
+    type:
+      required: true
+      description: The type of the card to stack.
+      type: string
+    entity:
+      required: true
+      description: "An `entity_id` to use in the frontend."
+      type: string
+    image:
+      required: true
+      description: The URL to an image.
+      type: string
 {% endconfiguration %}
 
 ## {% linkable_title Example %}

source/_lovelace/weather-forecast.markdown

@@ -17,8 +17,6 @@ The weather forecast is a card to display the weather. Very useful to include on
 Screenshot of the weather card.
 </p>
 
-{% linkable_title Options %}
-
 {% configuration %}
 type:
   required: true
@@ -26,7 +24,7 @@ type:
   type: string
 entity:
   required: true
-  description: "Entity id of `weather` domain"
+  description: "The `entity_id` of the `weather` platform to use."
   type: string
 {% endconfiguration %}
 

source/lovelace/views.markdown

@@ -9,7 +9,7 @@ sharing: true
 footer: true
 ---
 
-These are exactly as before, tab views with icons or text that help you manage large dashboards with many entities. The views have now deep links like `/lovelace/0`. You can also assign your own [custom ids](/lovelace/views/#custom-id).
+These are exactly as before, tab views with icons or text that help you manage large dashboards with many entities. The views have now deep-links like `/lovelace/0`. You can also assign your own [custom IDs](/lovelace/views/#custom-id).
 
 - Using custom id in view, for [nicer navigation paths](/lovelace/views/#custom-id) in URLs.
 - Using [icons](/lovelace/views/#icons) instead of text.
@@ -36,19 +36,19 @@ You can use icons instead of text for your view tabs. The title in the example w
 
 ```yaml
 views:
-- icon: mdi:settings
+  - icon: mdi:settings
     title: Debugging
 ```
 
 ## {% linkable_title Panel view %}
 
-This type of view uses the first card in the `cards` array to expand it to occupy the complete view space, similar to panels. One very good practical use will be for floor plan type of cards.
+This type of view uses the first card in the `cards` list to expand it to ocuppy the complete view space, similar to panels. One very good practical use will be for floor plan type of cards.
 
 ### {% linkable_title Example %}
 
 ```yaml
 views:
-- icon: mdi:settings
+  - icon: mdi:settings
     id: debug
     title: Floorplan
     panel: true
@@ -59,20 +59,15 @@ views:
             - type: state-icon
               tap_action: toggle
               entity: light.ceiling_lights
-            style:
-              top: 47%
-              left: 42%
 ```
 
 ## {% linkable_title Themes %}
 
-You can also set a [theme](/frontend/#themes) per view.
+You can also set a [theme](/frontend/#themes) per view. Theme is currently only partially usable (font color works).
-
-> Theme is currently only partially usable (font color works)
 
 ```yaml
 views:
-- icon: mdi:heart
+  - icon: mdi:heart
     id: debug
     title: Home
     theme: dark-mode
@@ -80,7 +75,7 @@ views:
 
 ## {% linkable_title Custom ID %}
 
-You can now assign a custom id to a view, for nicer navigation paths in URLs. This id allows you to deep-link navigation to this view from cards that allow `navigation_path`.
+You can now assign a custom ID to a view, for nicer navigation paths in URLs. This id allows you to deep-link navigation to this view from cards that allow `navigation_path`. 
 
 ### {% linkable_title Example %}
 
@@ -88,7 +83,7 @@ View:
 
 ```yaml
 views:
-- icon: mdi:settings
+  - icon: mdi:settings
     id: debugging
 ```