Implement handling "related" key for related information (#32372)

source/_docs/blueprint.markdown

@@ -1,6 +1,17 @@
 ---
 title: "About blueprints"
 description: "Introduction to blueprints."
+related:
+  - docs: /docs/blueprint/schema/
+    title: About the blueprint schema
+  - docs: /docs/blueprint/selectors/
+    title: About the blueprint selectors
+  - docs: /docs/automation/using_blueprints/
+    title: Using blueprints in automations
+  - docs: /docs/blueprint/tutorial/
+    title: "Tutorial: Create an automation blueprint"
+  - title: "Blueprint community forum"
+    url: /get-blueprints
 ---
 
 This section gives a high-level introduction to blueprints. To view a description of the YAML-schema used to create a valid blueprint, refer to the section [About the blueprint schema](/docs/blueprint/schema/).
@@ -12,13 +23,3 @@ A blueprint is a {% term script %} or {% term automation %} configuration with c
 Imagine you want to control lights based on motion. A blueprint provides the generic {% term automation %} framework, while letting you select one specific motion sensor as a {% term trigger %}, and the exact light to control. This blueprint makes it possible to create two automations. Each automation has their own configuration and act completely independently. Yet, they share some basic automation configuration so that you do not have to set this up every time.
 
 Blueprints are shared by the community in the [blueprint community forum][blueprint-forums].
-
-### Related information
-
-- [About the blueprint schema](/docs/blueprint/schema/)
-- [About the blueprint selectors](/docs/blueprint/selectors/)
-- [Using blueprints in automations](/docs/automation/using_blueprints/)
-- [Tutorial: Create an automation blueprint](/docs/blueprint/tutorial/)
-- [Blueprint community forum][blueprint-forums]
-
-[blueprint-forums]: /get-blueprints

source/_docs/blueprint/schema.markdown

@@ -1,6 +1,17 @@
 ---
 title: "About the blueprint schema"
 description: "Introduction to the blueprint schema."
+related:
+  - docs: /docs/blueprint/
+    title: About blueprints
+  - docs: /docs/blueprint/selectors/
+    title: Blueprint selectors
+  - docs: /docs/automation/using_blueprints/
+    title: Using blueprints in automations
+  - docs: /docs/blueprint/tutorial/
+    title: "Tutorial: Create an automation blueprint"
+  - title: "Blueprint community forum"
+    url: /get-blueprints
 ---
 
 ## The blueprint schema
@@ -202,12 +213,4 @@ action:
     target: !input light_target
 ```
 
-### Related information
-- [About blueprints](/docs/blueprint/)
-- [Blueprint selectors](/docs/blueprint/selectors/)
-- [Using blueprints in automations](/docs/automation/using_blueprints/)
-- [Tutorial: Create an automation blueprint »](/docs/blueprint/tutorial/)
-- [Blueprint community forum][blueprint-forums]
-
 [blueprint-built-in]: https://github.com/home-assistant/core/tree/dev/homeassistant/components/automation/blueprints
-[blueprint-forums]: /get-blueprints

source/_docs/blueprint/tutorial.markdown

@@ -1,6 +1,22 @@
 ---
 title: "Creating an automation blueprint"
 description: "Tutorial on creating an automation blueprint."
+related:
+  - docs: /docs/configuration/
+    title: "Editing the configuration file"
+  - docs: /docs/configuration/yaml/
+  - docs: /docs/automation/yaml/
+    title: "YAML used in automations"
+  - docs: /docs/scripts/
+    title: Scripts
+  - docs: /docs/blueprint/selectors/
+    title: Blueprint selectors
+  - docs: /docs/blueprint/schema/
+    title: Blueprint schema
+  - docs: /docs/blueprint/
+    title: About blueprints
+  - docs: /docs/automation/using_blueprints/
+    title: Using automation blueprints
 ---
 
 <div class='note'>
@@ -273,17 +289,3 @@ For this tutorial, we're going to share it on GitHub Gists. This is a good optio
 ### Share on the Blueprint Exchange
 
 If you follow the [Rules and format for posting](/get-blueprints), you can share your blueprint on the Home Assistant Blueprint Exchange forum. This option is accessible to the general Home Assistant community but recommended only for your original blueprints. Please don't post this tutorial to the Blueprint Exchange, but instead, remember this as an option for releasing your real blueprints.
-
-## Related topics
-
-**Prerequisites**
-- [Editing the configuration file](/docs/configuration/)
-- [YAML](/docs/configuration/yaml/), and specifically, [YAML used in automations](/docs/automation/yaml/)
-- [Scripts](/docs/scripts/)
-
-**Blueprints**
-
-- [Blueprint selectors](/docs/blueprint/selectors/)
-- [Blueprint schema](/docs/blueprint/schema/)
-- [About blueprints](/docs/blueprint/)
-- [Using automation blueprints](/docs/automation/using_blueprints/)

source/_includes/related.html

@@ -0,0 +1,44 @@
+{% assign related_topics = "" | split: ',' %}
+{% assign related_links = "" | split: ',' %}
+{%- for entry in page.related -%}
+{%- if entry.url -%}
+{% assign related_links = related_links | push: entry %}
+{% else %}
+{% assign related_topics = related_topics | push: entry %}
+{% endif %}
+{%- endfor -%}
+{% if related_topics and related_topics.size != 0 %}
+<div class="text related-topics" id="related-topics">
+  <h2>Related topics</h2>
+  <ul>
+    {% assign site_part = "pages,documents" | split: "," %}
+    {%- for related in related_topics -%}
+    {%- for part in site_part -%}
+    {%- for entry in site[part] -%}
+    {% assign computed = related.docs | split: "#" %}
+    {% assign link_target = computed[1] %}
+    {% assign suggested_title = related.title | default: link_target | split: "-" | join: " " | capitalize %}
+    {%- if computed[0] == entry.url -%}
+    <li>
+      <a href="{{ entry.url | relative_url }}{% if link_target %}#{{link_target}}{% endif %}" class="topic">
+        {{ suggested_title | default: entry.title}}
+      </a>
+    </li>
+    {% break %}{% break %}
+    {%- endif -%}
+    {%- endfor -%}
+    {%- endfor -%}
+    {%- endfor -%}
+  </ul>
+</div>
+{% endif %}
+{% if related_links and related_links.size != 0 %}
+<div class="text related-links" id="related-links">
+  <h2>Related links</h2>
+  <ul>
+    {% for link in related_links %}
+    <li><a href="{{ link.url }}" class="link" target="_blank">{{ link.title | default: link.url }}</a></li>
+    {% endfor %}
+  </ul>
+</div>
+{% endif %}

source/_layouts/page.html

@@ -35,5 +35,6 @@ layout: default
   {% endif %}
   {{ content }}
 
+  {% include related.html %}
   {% include feedback.html %}
 </article>