Show version badge on recently-added tags

_filters/at_least.md

@@ -1,6 +1,7 @@
 ---
 title: at_least
 description: Liquid filter that limits a number to a minimum value.
+version-badge: 4.0.1
 ---
 
 Limits a number to a minimum value.

_filters/at_most.md

@@ -1,6 +1,7 @@
 ---
 title: at_most
 description: Liquid filter that limits a number to a maximum value.
+version-badge: 4.0.1
 ---
 
 Limits a number to a maximum value.

_filters/compact.md

@@ -1,6 +1,7 @@
 ---
 title: compact
 description: Liquid filter that removes nil values from an array.
+version-badge: 4.0.0
 ---
 
 Removes any `nil` values from an array.

_filters/concat.md

@@ -1,6 +1,7 @@
 ---
 title: concat
 description: Liquid filter that concatenates arrays.
+version-badge: 4.0.0
 ---
 
 Concatenates (joins together) multiple arrays. The resulting array contains all the items from the input arrays.

_filters/sort_natural.md

@@ -1,6 +1,7 @@
 ---
 title: sort_natural
 description: Liquid filter that sorts an array in case-insensitive order.
+version-badge: 4.0.0
 ---
 
 Sorts items in an array in case-insensitive order.

_filters/url_decode.md

@@ -1,6 +1,7 @@
 ---
 title: url_decode
 description: Liquid filter that decodes percent-encoded characters in a string.
+version-badge: 4.0.0
 ---
 
 Decodes a string that has been encoded as a URL or by [url_encode]({{ "/filters/url_encode/" | prepend: site.baseurl }}).

_filters/where.md

@@ -1,6 +1,7 @@
 ---
 title: where
 description: Liquid filter that selects from arrays.
+version-badge: 4.0.2
 ---
 
 Creates an array including only the objects with a given property value, or any [truthy]({{ "/basics/truthy-and-falsy/#truthy" | prepend: site.baseurl }}) value by default.

_includes/version-badge.html

@@ -0,0 +1 @@
+<span class="version-badge" title="This feature is available since version {{ include.version }}" data-version="{{ include.version }}"></span>

_layouts/default.html

@@ -55,7 +55,12 @@
           <span aria-hidden="true">{% include icons/three-bars.svg %}</span>
           <span>Menu</span>
         </button>
-        {% if page.title %}<h1>{{ page.title }}</h1>{% endif %}
+        {% if page.title -%}
+          <h1>{{ page.title }}
+          {%- if page.version-badge -%}
+            {%- include version-badge.html version=page.version-badge -%}
+          {%- endif -%}</h1>
+        {%- endif %}
         {{ content }}
       </div>
     </main>

_sass/modules/_content-area.scss

@@ -20,3 +20,18 @@
   border-top: none;
   border-radius: 0 0 3px 3px;
 }
+
+.version-badge {
+  padding: 4px;
+  margin-left: 10px;
+  font-size: 12px;
+  font-weight: 300;
+  background: lighten($color-blue-1, 1);
+  border: 1px solid $color-blue-2;
+  border-radius: 3px;
+  vertical-align: middle;
+}
+
+.version-badge:before {
+  content: attr(data-version);
+}