Reduce weight of integrations page + list everything once (#12260)

* Reduce weight of integrations page + list everything once

* Empty commit to re-trigger build

* Empty commit to re-trigger build

sass/custom/_component_page.scss

@@ -35,8 +35,8 @@
         margin-bottom: 8px;
 
         &.current {
-          background-color: #3A5561;
+          background-color: #3a5561;
-          background-image: linear-gradient(to bottom, #3A5561,#3F6B7D);
+          background-image: linear-gradient(to bottom, #3a5561, #3f6b7d);
         }
       }
     }
@@ -100,18 +100,20 @@
     background-color: #fefefe;
     margin: 4px;
     border-radius: 2px;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
+      0 3px 1px -2px rgba(0, 0, 0, 0.2);
     padding: 8px;
     text-align: center;
     text-decoration: none;
 
     .img-container {
       height: 50px;
-      margin: 8px 0;
+      margin: 12px 0;
       font: 0/0 a;
 
-      &:before {    /* create a full-height inline block pseudo=element */
+      &:before {
-        content: ' ';
+        /* create a full-height inline block pseudo=element */
+        content: " ";
         display: inline-block;
         vertical-align: middle; /* vertical alignment of the inline element */
         height: 100%;
@@ -132,27 +134,26 @@
       color: #000;
       line-height: 1.3em;
       height: 2.6em;
-    }
+      margin-top: 20px;
-
-    .category {
-      font-size: 14px;
-      color: #AAA;
     }
   }
 
   // fade-in animation
   &.show-items .option-card {
     opacity: 0;
-    -webkit-animation:new-item-animation .2s linear forwards;
+    -webkit-animation: new-item-animation 0.2s linear forwards;
-    -o-animation:new-item-animation .2s linear forwards;
+    -o-animation: new-item-animation 0.2s linear forwards;
-    animation:new-item-animation .2s linear forwards;
+    animation: new-item-animation 0.2s linear forwards;
   }
 
   // fade-out animation
   &.remove-items .option-card {
-    -webkit-animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards;
+    -webkit-animation: removed-item-animation 0.2s
-    -o-animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards;
+      cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
-    animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards
+    -o-animation: removed-item-animation 0.2s
+      cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
+    animation: removed-item-animation 0.2s cubic-bezier(0.55, -0.04, 0.91, 0.94)
+      forwards;
   }
 }
 
@@ -163,56 +164,56 @@
     -webkit-transform: scale(0);
     -ms-transform: scale(0);
     -o-transform: scale(0);
-    transform:scale(0)
+    transform: scale(0);
   }
   to {
     opacity: 1;
     -webkit-transform: scale(1);
     -ms-transform: scale(1);
     -o-transform: scale(1);
-    transform:scale(1)
+    transform: scale(1);
   }
 }
 @-webkit-keyframes new-item-animation {
   from {
     opacity: 0;
     -webkit-transform: scale(0);
-    transform:scale(0)
+    transform: scale(0);
   }
   to {
     opacity: 1;
     -webkit-transform: scale(1);
-    transform:scale(1)
+    transform: scale(1);
   }
 }
 @-o-keyframes new-item-animation {
   from {
     opacity: 0;
     -o-transform: scale(0);
-    transform:scale(0)
+    transform: scale(0);
   }
   to {
     opacity: 1;
     -o-transform: scale(1);
-    transform:scale(1)
+    transform: scale(1);
   }
 }
 
 // space blocker animation
 @keyframes openspace {
   to {
-    height:auto
+    height: auto;
   }
 }
 
 @-webkit-keyframes openspace {
   to {
-    height:auto
+    height: auto;
   }
 }
 @-o-keyframes openspace {
   to {
-    height:auto
+    height: auto;
   }
 }
 
@@ -223,37 +224,37 @@
     -webkit-transform: scale(1);
     -ms-transform: scale(1);
     -o-transform: scale(1);
-    transform:scale(1)
+    transform: scale(1);
   }
   to {
     -webkit-transform: scale(0);
     -ms-transform: scale(0);
     -o-transform: scale(0);
     transform: scale(0);
-    opacity:0
+    opacity: 0;
   }
 }
 @-webkit-keyframes removed-item-animation {
   from {
     opacity: 1;
     -webkit-transform: scale(1);
-    transform:scale(1)
+    transform: scale(1);
   }
   to {
     -webkit-transform: scale(0);
     transform: scale(0);
-    opacity:0
+    opacity: 0;
   }
 }
 @-o-keyframes removed-item-animation {
   from {
     opacity: 1;
     -o-transform: scale(1);
-    transform:scale(1)
+    transform: scale(1);
   }
   to {
     -o-transform: scale(0);
     transform: scale(0);
-    opacity:0
+    opacity: 0;
   }
 }

source/integrations/index.html

@@ -74,7 +74,6 @@ regenerate: false
   <a href="{{url}}" class="option-card">
     <div class="img-container">{{{image}}}</div>
     <div class='title'>{{title}}</div>
-    <div class='category'>{{cat}}</div>
   </a>
 {{/components}}
 {{^components}}
@@ -91,11 +90,12 @@ var allComponents = [
       {%- assign sliced_version = component.ha_release | split: '.' -%}
       {%- assign minor_version = sliced_version[1]|plus: 0 -%}
       {%- assign major_version = sliced_version[0]|plus: 0 -%}
-{%- assign featured_first = true -%}
+      {% assign categories = "" | split: ',' %}
       {%- 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}}"},
+        {% capture category %}"{{ ha_category | slugify | downcase }}"{% endcapture %}
-      {%- assign featured_first = false -%}
+        {% assign categories = categories | push: category %}
       {%- endfor -%}
+      {url:"{{ component.url }}", title:"{{component.title}}", cat: [{{categories|join: ","}}], featured: {% if component.featured %}true{% else %}false{% endif %}, v: "{{major_version}}.{{minor_version}}", logo: "{{component.logo}}"},
     {% endif -%}
   {%- endfor -%}
   false
@@ -112,7 +112,6 @@ allComponents.pop(); // remove placeholder element at the end
       // do the lowerCase transformation once
       for (i = 0; i < (allComponents.length); i++) {
         allComponents[i].titleLC = allComponents[i].title.toLowerCase();
-        allComponents[i].catLC = allComponents[i].cat.toLowerCase();
       }
 
       // sort the components alphabetically
@@ -169,7 +168,7 @@ allComponents.pop(); // remove placeholder element at the end
           search = decodeURIComponent(hash).substring(8).toLowerCase();
           filter = function (comp) {
             return (comp.titleLC.indexOf(search) !== -1) ||
-              (comp.catLC.indexOf(search) !== -1);
+              (comp.cat.find(c => c.includes("#")) != undefined);
           };
 
         } else if (hash === '#featured' || hash === '') {
@@ -190,7 +189,7 @@ allComponents.pop(); // remove placeholder element at the end
           // regular filter categories
           search = hash.substring(1);
           filter = function (comp) {
-            return comp.catLC === search;
+            return comp.cat.includes(search);
           };
         }