From bd65e43d0807c70998d5e0070037eae0012137e5 Mon Sep 17 00:00:00 2001
From: Robbie Trencheny <me@robbiet.us>
Date: Mon, 24 Oct 2016 02:33:26 -0700
Subject: [PATCH] Group components by version released

---
 sass/custom/_paulus.scss     | 10 +++++++++-
 source/components/index.html | 16 ++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/sass/custom/_paulus.scss b/sass/custom/_paulus.scss
index c070e2cb0ac..80c157622e0 100644
--- a/sass/custom/_paulus.scss
+++ b/sass/custom/_paulus.scss
@@ -398,6 +398,14 @@ p.note {
         margin: 12px 0;
       }
 
+      .added_in_current_version {
+        margin-top: 12px;
+      }
+
+      .added_two_versions_ago {
+        margin-bottom: 12px;
+      }
+
       .btn {
         display: block;
         background: 0;
@@ -472,4 +480,4 @@ a code {
 twitterwidget {
   margin-left: auto;
   margin-right: auto;
-}
\ No newline at end of file
+}
diff --git a/source/components/index.html b/source/components/index.html
index 1dd28d43c85..13912441baa 100644
--- a/source/components/index.html
+++ b/source/components/index.html
@@ -18,17 +18,27 @@ regenerate: true
 {% assign tot = count | minus: nocat %}
 {% assign components = site.components | sort: 'title' %}
 {% assign categories = components | sort: 'ha_category' | map: 'ha_category' | uniq %}
+{% 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 %}
+{% assign added_two_ago_minor_version = site.current_minor_version|minus: 2 %}
+{% capture added_two_ago_version %}{{ site.current_major_version }}.{{ added_two_ago_minor_version }}{% endcapture %}
+{% assign current_version_components_count = site.components | where: 'ha_release', current_version | size %}
+{% assign one_ago_version_components_count = site.components | where: 'ha_release', added_one_ago_version | size %}
+{% assign two_ago_version_components_count = site.components | where: 'ha_release', added_two_ago_version | size %}
 
 <p class='note'>
 Support for these components is provided by the Home Assistant community.
 </p>
-
 <div class="grid">
   <div class="grid__item one-sixth lap-one-whole palm-one-whole">
 
     <div class="filter-button-group">
       <a href='#all' class="btn">All ({{tot}})</a>
       <a href='#featured' class="btn featured">Featured</a>
+      <a href='#added_in_current_version' class="btn added_in_current_version">Added in {{ current_version }} ({{ current_version_components_count }})</a>
+      <a href='#added_one_version_ago' class="btn added_one_version_ago">Added in {{ added_one_ago_version }} ({{ one_ago_version_components_count }})</a>
+      <a href='#added_two_versions_ago' class="btn added_two_versions_ago">Added in {{ added_two_ago_version }} ({{ two_ago_version_components_count }})</a>
 
       {% for category in categories %}
         {% if category and category != 'Other' %}
@@ -45,8 +55,10 @@ Support for these components is provided by the Home Assistant community.
   <div class="grid__item five-sixths lap-one-whole palm-one-whole" id="componentContainer">
     {% for component in components %}
       {% if component.ha_category %}
+      {% assign sliced_version = component.ha_release | split: '.' %}
+      {% assign minor_version = sliced_version[1]|plus: 0 %}
         <a href='{{ component.url }}'
-           class='{{ component.ha_category | slugify }}{% if component.featured %} featured{% endif %}'
+           class='{{ component.ha_category | slugify }}{% if minor_version == site.current_minor_version %} added_in_current_version{% elsif minor_version == added_one_ago_minor_version %} added_one_version_ago{% elsif minor_version == added_two_ago_minor_version %} added_two_versions_ago{% endif %}{% if component.featured %} featured{% endif %}'
            {% unless component.featured %}style='display: none'{% endunless %}>
           <div class='img-container'>
             {% if component.logo %}