Refactor of documentation method for components (2019-0016)

sass/custom/_paulus.scss

@@ -411,6 +411,8 @@ p.note {
   .brand-logo-container {
     text-align: center;
     height: 87px;
+    margin-top: 50px;
+    margin-bottom: 25px;
 
     img {
       max-height: 67px;

source/_components/tradfri.markdown

@@ -9,9 +9,17 @@ comments: false
 sharing: true
 footer: true
 logo: ikea.svg
-ha_category: Hub
 ha_iot_class: "Local Polling"
+ha_config_flow: true
 ha_release: 0.43
+ha_category:
+  - Light
+  - Sensor
+  - Switch
+redirect_from:
+  - /components/light.tradfri/
+  - /components/sensor.tradfri/
+  - /components/switch.tradfri/
 ---
 
 The `tradfri` component support the IKEA Trådfri Gateway (a.k.a. IKEA Tradfri hub/bridge). The gateway can control compatible Zigbee-based lights (certified ZigBee Light Link products) connected to it and Home Assistant will automatically discover the gateways presence on your local network, if `discovery:` is present in your `configuration.yaml` file.

source/_includes/asides/component_navigation.html

@@ -50,6 +50,12 @@
     </div>
   {%- endif -%}
 
+  {%- if page.ha_config_flow -%}
+    <div class='section'>
+      This component is configurable via UI
+    </div>
+  {%- endif -%}
+
   {%- if is_platform -%}
     <div class='section'>
       Source:
@@ -88,7 +94,6 @@ <h1 class='title delta'>Platforms</h1>
 
   {%- endif -%}
 
-
   {%- assign related_found = false -%}
   {%- for component in components -%}
     {%- if component.url != page.url -%}
@@ -118,22 +123,14 @@ <h1 class='title delta'>Related components</h1>
     </div>
   {%- endif -%}
 
-
-
-  {%- if page.ha_category -%}
+  {%- if page.ha_category.first -%}
     <div class='section'>
-    <h1 class="title delta">Category {{page.ha_category}}</h1>
+    <h1 class="title delta">Categories</h1>
     <ul class='divided'>
-    {%- for component in components -%}
-      {%- if component.ha_category == page.ha_category -%}
-        <li>
-          {%- if component.url == page.url -%}
-            {{component.title}}
-          {%- else -%}
-            <a href='{{component.url}}'>{{component.title}}</a>
-          {%- endif -%}
-        </li>
-      {%- endif -%}
+    {%- for category in page.ha_category -%}
+      <li>
+        <a href='/components/#{{ category | slugify }}'>{{ category }}</a>
+      </li>
     {%- endfor -%}
     </ul>
     </div>

source/components/index.html

@@ -17,12 +17,16 @@
 {%- assign tot = 0 -%}
 {%- for comp in site.components -%}
   {%- if comp.ha_category -%}
-    {%- assign tot = tot | plus: 1 -%}
+    {%- if comp.ha_category.first -%}
+      {%- assign tot = tot | plus: comp.ha_category.size -%}
+    {%- else -%}
+      {%- assign tot = tot | plus: 1 -%}
+    {%- endif -%}
   {%- endif %}
 {%- endfor -%}
 
 {%- assign components = site.components | sort: 'title' -%}
-{%- assign categories = components | sort: 'ha_category' | map: 'ha_category' | uniq -%}
+{%- assign categories = components | map: 'ha_category' | join: ',' | join: ',' | split: ',' | uniq | sort -%}
 {%- capture current_version -%}{{ site.current_major_version }}.{{ site.current_minor_version }}{% endcapture -%}
 {%- assign added_one_ago_minor_version = site.current_minor_version|minus: 1 -%}
 {%- capture added_one_ago_version -%}{{ site.current_major_version }}.{{ added_one_ago_minor_version }}{% endcapture -%}
@@ -51,7 +55,7 @@
   {%- endif -%}
 {%- endfor -%}
 
-      <a href='#other' class="btn">Other</a>
+      <a href='#other' class="btn">Other ({{ components | where: 'ha_category', 'Other' | size }})</a>
     </div>
   </div>
   <div class="grid__item five-sixths lap-one-whole palm-one-whole">
@@ -100,7 +104,11 @@
 {%- assign sliced_version = component.ha_release | split: '.' -%}
 {%- assign minor_version = sliced_version[1]|plus: 0 -%}
 {%- assign major_version = sliced_version[0]|plus: 0 -%}
-{url:"{{ component.url }}", title:"{{component.title}}", cat:"{{component.ha_category | slugify}}", featured: {% if component.featured %}true{% else %}false{% endif %}, v: "{{major_version}}.{{minor_version}}", logo: "{{component.logo}}"},
+{%- assign featured_first = true -%}
+      {%- for ha_category in component.ha_category -%}
+{url:"{{ component.url }}", title:"{{component.title}}", cat:"{{ha_category | slugify}}", featured: {% if component.featured and featured_first %}true{% else %}false{% endif %}, v: "{{major_version}}.{{minor_version}}", logo: "{{component.logo}}"},
+      {%- assign featured_first = false -%}
+      {%- endfor -%}
     {% endif -%}
   {%- endfor -%}
   false