Wrap core instructions in details block (#16611)

plugins/details.rb

@@ -1,24 +1,19 @@
 module Jekyll
   class DetailsBlock < Liquid::Block
 
-    def render_details_block(vars:, converter:, classes: nil, parent_type: nil)
+    def initialize(tag_name, title, tokens)
-      result = Array.new
+      super
-      result << vars.map do |entry|
+      @title = title
-        markup = Array.new
-        markup << "<div class='details-block-item' onclick='showDetails(this)'>"
-        markup << "<div class='details-block-title'>#{entry['title']}"
-        markup << '<svg id="down" style="display: block;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>'
-        markup << '<svg id="up" style="display: none;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>'
-        markup << "</div>"
-        markup << "<div class='details-block-content' hidden onclick>#{converter.convert(entry['content'].to_s)}</div>"
-        markup << "</div>"
-      end
-      result.join
     end
 
     def render(context)
       contents = super(context)
-      vars = SafeYAML.load(contents)
+      if @title.nil? || @title.empty? then
+        title = "More info"
+      else
+        title = @title
+      end
+      title = title.to_s.delete("\"")
 
       site = context.registers[:site]
       converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
@@ -26,16 +21,23 @@ module Jekyll
       <<~MARKUP
         <script>
         function showDetails(el) {
-          const content = el.querySelector(".details-block-content");
+          const content = el.parentElement.querySelector(".details-block-content");
-          const up = el.querySelector(".details-block-title").querySelector("svg#up");
+          const up = el.querySelector("svg#up");
-          const down = el.querySelector(".details-block-title").querySelector("svg#down");
+          const down = el.querySelector("svg#down");
           up.style.display = up.style.display === "none" ? "block" : "none";
           down.style.display = down.style.display === "none" ? "block" : "none";
           content.hidden = !content.hidden;
         }
         </script>
         <div class="details-block">
-          #{render_details_block(vars: vars, converter: converter)}
+          <div class='details-block-item'>
+            <div class='details-block-title' onclick='showDetails(this)'>
+              #{title}
+              <svg id="down" style="display: block;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+              <svg id="up" style="display: none;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>
+            </div>
+            <div class='details-block-content' hidden>#{converter.convert(contents.to_s)}</div>
+          </div>
         </div>
       MARKUP
     end

sass/custom/_details.scss

@@ -6,7 +6,6 @@ div.details-block {
     background-color: white;
     padding: 4px 16px;
     margin: 8px;
-    cursor: pointer;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
     border-radius: 16px;
 
@@ -14,6 +13,7 @@ div.details-block {
       font-weight: bold;
       font-size: 18px;
       line-height: 21px;
+      cursor: pointer;
       height: 54px;
       justify-content: space-between;
       display: flex;

source/_integrations/bluetooth_le_tracker.markdown

@@ -58,7 +58,7 @@ Enabling the battery tracking might slightly decrease the duration of the batter
 
 For additional configuration variables check the [Device tracker page](/integrations/device_tracker/).
 
-## Home Assistant Core installs
+{% details "Notes for Home Assistant Core Installations" %}
 
 On Debian based Home Assistant Core installations, run:
 
@@ -68,8 +68,8 @@ sudo apt install bluetooth
 
 Before you get started with this platform, please note that:
 
- - This platform is incompatible with Windows
+- This platform is incompatible with Windows
- - This platform requires access to the Bluetooth stack, see [Rootless Setup section](#rootless-setup) for further information
+- This platform requires access to the Bluetooth stack, see [Rootless Setup section](#rootless-setup) for further information
 
 ### Rootless Setup on Core installs
 
@@ -82,3 +82,5 @@ sudo setcap 'cap_net_raw+ep' $(readlink -f $(which hcitool))
 ```
 
 A restart of Home Assistant is required.
+
+{% enddetails %}

source/_integrations/bluetooth_tracker.markdown

@@ -12,12 +12,16 @@ ha_platforms:
 
 This tracker discovers new devices on boot and tracks Bluetooth devices periodically based on `interval_seconds` value. It is not required to pair the devices with each other! Devices discovered are stored with 'bt_' as the prefix for device MAC addresses in `known_devices.yaml`.
 
-This platform requires pybluez to be installed. On Debian based installs, run
+{% details "Notes for Home Assistant Core Installations" %}
+
+This platform requires `pybluez` to be installed. On Debian based installs, run
 
 ```bash
 sudo apt install bluetooth libbluetooth-dev
 ```
 
+{% enddetails %}
+
 To use the Bluetooth tracker in your installation, add the following to your `configuration.yaml` file:
 
 ```yaml

source/_integrations/kulersky.markdown

@@ -17,7 +17,7 @@ This integration connects Brightech Kuler Sky floor lamps to Home Assistant.
 
 {% include integrations/config_flow.md %}
 
-## Additional information for Home Assistant Core on Python environments
+{% details "Notes for Home Assistant Core Installations" %}
 
 This integration requires `pybluez` to be installed. On Debian based installs, run:
 
@@ -38,3 +38,5 @@ sudo apt-get install libcap2-bin
 sudo setcap 'cap_net_raw,cap_net_admin+eip' `readlink -f \`which python3\``
 sudo setcap 'cap_net_raw+ep' `readlink -f \`which hcitool\``
 ```
+
+{% enddetails %}

source/_integrations/seven_segments.markdown

@@ -13,9 +13,7 @@ ha_codeowners:
 
 The `seven_segments` image processing platform allows you to read physical seven segments displays through Home Assistant. [`ssocr`](https://www.unix-ag.uni-kl.de/~auerswal/ssocr/) is used to extract the value shown on the display which is observed by a [camera](/integrations/camera/).
 
-## Home Assistant Core Requirements
+{% details "Notes for Home Assistant Core Installations" %}
-
-If you are running Home Assistant Core in a Python virtual environment, you need to ensure the following requirements are met.
 
 `ssocr` needs to be available on your system. Check the installation instruction below:
 
@@ -30,6 +28,8 @@ sudo make PREFIX=/usr install # On most systems
 make deb # (Optional) This allows you to make a deb so that you apt is aware of ssocr
 ```
 
+{% enddetails %}
+
 ## Configuration
 
 To enable the OCR of a seven segment display in your installation, add the following to your `configuration.yaml` file:

source/_integrations/tensorflow.markdown

@@ -10,10 +10,7 @@ ha_domain: tensorflow
 
 The `tensorflow` image processing platform allows you to detect and recognize objects in a camera image using [TensorFlow](https://www.tensorflow.org/). The state of the entity is the number of objects detected, and recognized objects are listed in the `summary` attribute along with quantity. The `matches` attribute provides the confidence `score` for recognition and the bounding `box` of the object for each detection category.
 
-## Home Assistant Core
+{% details "Notes for Home Assistant Core Installations" %}
-
-If you are using the Home Assistant Core installation type, some additional requirements and steps apply.
-For all other installation types, this section can be skipped.
 
 The following packages must be installed on Debian before following the setup for the integration to work:
 `sudo apt-get install libatlas-base-dev libopenjp2-7 libtiff5`
@@ -27,6 +24,8 @@ See [the official install guide](https://www.tensorflow.org/install/) for other
 Furthermore, the official Python TensorFlow wheels by Google, require your CPU to support the `avx` extension.
 If your CPU lacks those capabilities, Home Assistant will crash when using TensorFlow, without any message.
 
+{% enddetails %}
+
 ## Preparation
 
 This integration requires files to be downloaded, compiled on your computer, and added to the Home Assistant configuration directory. These steps can be performed by cloning [this repository](https://github.com/hunterjm/hass-tensorflow) into your configuration directory. Alternatively, if you wish to perform the process manually, the process is as follows:

source/_integrations/totalconnect.markdown

@@ -47,7 +47,15 @@ automation:
         entity_id: scene.OnArmedAway
 ```
 
-If you have issues running this component, you may require `libxml2-dev` and `libxmlsec1-dev` packages. To install these on Raspbian, run the command `apt install libxml2-dev libxmlsec1-dev` with sudo.
+{% details "Notes for Home Assistant Core Installations" %}
+
+If you have issues running this component, you may require `libxml2-dev` and `libxmlsec1-dev` packages. To install these on Raspbian, run the command:
+
+```bash
+sudo apt install libxml2-dev libxmlsec1-dev
+```
+
+{% enddetails %}
 
 ## Alarm Control Panel
 

source/blue/index.html

@@ -578,31 +578,36 @@ og_image: /images/blue/blue_hero.jpg
 
   <h1 class="sub-title">FAQs</h1>
   <div class="faq-list">
-{% details %}
+{% details "I already run Home Assistant. Is this for me?" %}
-  - title: I already run Home Assistant. Is this for me?
-    content: | 
-      If your Home Assistant installation has outgrown your Raspberry
-      Pi or if you want a well supported, dedicated system, Home Assistant Blue is
-      for you.
-      <br /><br />
-      Or if you are still looking for a present for friends and family.
 
-  - title: What is limited about the bundle?
+If your Home Assistant installation has outgrown your Raspberry
-    content: | 
+Pi or if you want a well supported, dedicated system, Home Assistant Blue is
-      We have only created a limited amount of cases. Once they are sold out,
+for you.
-      we don't currently have plans to make more. 
+<br /><br />
-      All other parts of the bundle will remain available for purchase.
+Or if you are still looking for a present for friends and family.
 
-  - title: I already own an ODROID-N2+. Do I run the same software?
-    content: |
-      Yes! Home Assistant Blue runs the exact same software as that you're
-      currently using and you're benefitting from all the improvements.
-
-  - title: Will Home Assistant drop support for the Raspberry Pi?
-    content: | 
-      Nope! We are committed to keep supporting all platforms that are currently available.
 {% enddetails %}
-  </div>
+{% details "What is limited about the bundle?" %}
+
+We have only created a limited amount of cases. Once they are sold out,
+we don't currently have plans to make more. 
+All other parts of the bundle will remain available for purchase.
+
+{% enddetails %}
+
+{% details "I already own an ODROID-N2+. Do I run the same software?" %}
+
+Yes! Home Assistant Blue runs the exact same software as that you're
+currently using and you're benefitting from all the improvements.
+
+{% enddetails %}
+
+{% details "Will Home Assistant drop support for the Raspberry Pi?" %}
+
+Nope! We are committed to keep supporting all platforms that are currently available.
+
+{% enddetails %}
+</div>
 
 <a class="blue3d" href="https://www.thingiverse.com/thing:4684826" target="_blank">
   <div class="material-card text blue3d-container">