added new flag to telegraf plugins page

assets/js/telegraf-filters.js

@@ -28,11 +28,11 @@ $("#plugin-filters input").click(function() {
   // Actions for filter select
   if ( $(this).is(':checked') ) {
     $.each( tagArray, function( index, value ) {
-      $(".plugin-card.visible:not([data-tags~='" + value + "'])").removeClass('visible').hide()
+      $(".plugin-card.visible:not([data-tags~='" + value + "'])").removeClass('visible').fadeOut()
     })
   } else {
     $.each( restoreArray, function( index, value ) {
-      $(".plugin-card:not(.visible)[data-tags~='" + value + "']").addClass('visible').show()
+      $(".plugin-card:not(.visible)[data-tags~='" + value + "']").addClass('visible').fadeIn()
     })
     $.each( tagArray, function( index, value ) {
       $(".plugin-card.visible:not([data-tags~='" + value + "'])").removeClass('visible').hide()

assets/styles/layouts/article/_telegraf-plugins.scss

@@ -14,6 +14,15 @@
     margin-top: .25rem;
   }
 
+  &.new h3:after {
+    content: "New";
+    margin-left: .3rem;
+    padding: .25rem .5rem;
+    font-style: italic;
+    color: $nav-active;
+    font-size: 1.2rem;
+  }
+
   p {
     &.meta {
       margin: .75rem 0;
@@ -90,8 +99,9 @@
   flex-wrap: wrap;
 
   .filter-category {
-    flex-grow: 1;
+    flex: 1 1 0;
     max-width: 33%;
+    margin: 0 1.25rem 1.25rem 0 ;
   }
 
   input[type='checkbox'] {

data/telegraf_plugin_filters.yml

@@ -10,6 +10,9 @@ filters:
       - Linux
       - macOS
       - Windows
+  - category: Recently added
+    values:
+      - New
   - category: Placeholder
     values:
       - Placeholder

layouts/shortcodes/telegraf/plugins.html

@@ -1,8 +1,10 @@
 {{ $type := .Get "type" }}
+{{ $telegrafVersion := replaceRE `\.[^.]*$` "" .Site.Data.versions.telegraf_version }}
 
 {{ range (index .Site.Data.telegraf_plugins $type ) }}
   {{ $pluginTags := delimit .tags " " }}
-  <div class="plugin-card visible" id="{{ .id }}" data-tags="{{ $type }} {{ lower $pluginTags }}">
+  {{ $minorVer := replaceRE `\.[^.]*$` "" .introduced }}
+  <div class="plugin-card visible{{ if eq $minorVer $telegrafVersion }} new{{ end }}" id="{{ .id }}" data-tags="{{ $type }} {{ lower $pluginTags }} {{ if eq $minorVer $telegrafVersion }}new{{ end }}">
     <div class="info">
       <h3 id="{{ .id }}">{{ .name }}</h3>
       <p class="meta">