Add Tags Page

_includes/navbar.html

@@ -11,9 +11,9 @@
       {% assign pages = site.html_pages | sort: 'weight' %}
       {% for site_page in pages %}
         {% if site_page.title %}
-        {% unless site_page.url contains 'page' %}
-          <a class="nav-item nav-link {% if page.url contains site_page.url %} active {% endif %}" href="{% if site_page.external_url %} {{ site_page.external_url }} {% else %} {{ site_page.url | relative_url }} {% endif %}">{{ site_page.title }}</a>
-        {% endunless %}
+          {% unless site_page.url contains 'page' or site_page.url contains 'tags' %}
+            <a class="nav-item nav-link {% if page.url contains site_page.url %} active {% endif %}" href="{% if site_page.external_url %} {{ site_page.external_url }} {% else %} {{ site_page.url | relative_url }} {% endif %}">{{ site_page.title }}</a>
+          {% endunless %}
         {% endif %}
       {% endfor %}
     </div>

_includes/search.html

@@ -3,8 +3,13 @@
 <div class="input-group mt-5 px-3">
   <input id="search-input" type="text" class="form-control search-box" placeholder="Search articles..">
   <div class="input-group-append">
-    <span class="input-group-text border border-primary bg-primary text-white"><i class="fas fa-search"></i></span>
+    <span class="input-group-text border border-primary bg-primary text-white">
+      <i class="fas fa-search"></i>
+    </span>
   </div>
+  <button class="btn btn-outline-primary ml-1" onclick="location.href = '{{ '/articles/tags' | relative_url }}';">
+    <i class="fas fa-tags"></i>
+  </button>
 </div>
 <ul class="px-3" id="results-container"></ul>
 

_layouts/post.html

@@ -20,7 +20,9 @@ <h1><b>{{ page.title }}</b></h1>
   {% if page.tags != empty %}
     Tags: 
     {% for tag in page.tags %}
-      <span class="badge badge-pill text-primary border border-primary">{{ tag }}</span>
+    <a class="text-decoration-none no-underline" href="{{ tag | slugify | prepend:'/articles/tags#' | relative_url }}">
+      <span class="tag badge badge-pill text-primary border border-primary">{{ tag }}</span>
+    </a>
     {% endfor %}
   {% endif %}
 

_sass/_articles.scss

@@ -22,6 +22,11 @@
         margin-top: -6px;
     }
 
+    .tag:hover {
+        background-color: $primary;
+        color: white !important;
+    }
+
     footer {
         font-size: 10px;
         color: #6c757d;
@@ -56,7 +61,7 @@
         }
     }
 
-    a:not(.btn):not([class^="carousel-"]):not([class^="list-"]) {
+    a:not(.btn):not([class^="carousel-"]):not([class^="list-"]):not(.no-underline)  {
         display: inline-block;
         text-decoration: none;
 

articles/tags.html

@@ -0,0 +1,37 @@
+---
+layout: page
+title: Tags
+permalink: /articles/tags
+---
+
+<!-- Collect tags from all posts -->
+{% assign tags = blank %}
+{% for post in site.posts %}
+  {% assign post_tags = post.tags | join:'|' | append:'|' %}
+  {% if post_tags != '|' %}
+    {% assign tags = tags | append:post_tags %}
+  {% endif %}
+{% endfor %}
+{% assign tags = tags | split:'|' | uniq | sort %}
+
+<!-- List tags & related posts -->
+{% for tag in tags %}
+<div class="py-3">
+  <h4 id="{{ tag | slugify }}">{{ tag }}</h4>
+  <ol>
+  {% for post in site.posts %}
+    {% if post.tags contains tag %}
+      {% if post.external_url %}
+        {% assign url = post.external_url %}
+      {% else %}
+        {% assign url = post.url | relative_url %}
+      {% endif %}
+    <a href="{{ url }}"><li>{{ post.title }}</li></a>
+    <small class="text-muted"> - {{ post.date | date_to_long_string }}</small>
+    <br/>
+    {% endif %}
+  {% endfor %}
+  </ol>
+</div>
+<hr class="bg-light">
+{% endfor %}