Add tag pages

index.liquid

@@ -0,0 +1,21 @@
+---
+title: index
+layout: layout.liquid
+---
+
+<h1>Posts</h1>
+
+<ul class="post-list">
+{%- for post in collections.post reversed -%}
+    <li>
+        <a class="post-link" href="{{ post.url }}">{{ post.data.title }}</a>
+        <time>{{ post.data.date | date: "%B %e, %Y"}}</time>
+        <ul class="tag-list">
+        <li aria-hidden="true">🔖</li>
+        {%- for tag in post.data.tags -%}
+            <li><a href="/tags/{{ tag }}">{{ tag }}</a></li>
+        {%- endfor %}
+        </ul>
+    </li>
+{%- endfor %}
+</ul>

posts/make-node-list-an-array.md

@@ -1,6 +1,6 @@
 ---
 date: 2019-12-07
-tags: ['JavaScript']
+tags: javascript
 title: Make node list into an array
 description: "Make iterating through a set of DOM nodes easy by turning a Node List into an array."
 ---

posts/nested-destructuring.md

@@ -1,7 +1,7 @@
 ---
 title: Nested Destructuring
 date: 2019-06-22
-tags: JavaScript
+tags: javascript
 description: "I always forget the syntax for nested object destructuring. So I wrote this article so that I don't forget again."
 ---
 

posts/visual-studio-code-setup/visual-studio-code-setup.md

@@ -1,6 +1,6 @@
 ---
 date: 2020-03-02
-tags: ['VSCode', 'Setup', 'Productivity']
+tags: ['vscode', 'setup', 'productivity']
 title: Visual Studio Code Setup
 description: "I've been using Visual studio code since 2017, I decided to look through my set up and document what I use."
 ---

styles/style.css

@@ -218,17 +218,27 @@ nav {
     padding: 0;
     text-wrap: balance;
 
-    li {
+    > li {
         display: flex;
         flex-direction: column;
     }
 
-    a {
+    > li + li {
+        margin-block-start: 1.5rem;
+    }
+
+    .post-link {
         font-size: clamp(2rem, 5vi, 4rem);
         font-weight: 800;
         letter-spacing: -0.08rem;
         text-decoration-thickness: 7%;
-        text-decoration-color: light-dark(var(--dark-red), var(--yellow));
+        text-decoration-color: LinkText;
+        color: currentColor;
+
+        &:visited {
+            text-decoration-color: VisitedText;
+            color: currentColor;
+        }
 
         /* TODO: Decide on hover styling */
         &:hover,
@@ -238,7 +248,21 @@ nav {
     }
 
     time {
-        font-size: 1rem;
+        font-size: 0.8rem;
+        /* color: light-dark(var(--dark-red), var(--yellow)); */
+        font-style: italic;
+    }
+}
+
+.tag-list {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    padding: 0;
+    text-wrap: balance;
+
+    > li + li {
+        margin-inline-start: 0.5rem;
     }
 }
 

tags/tags.liquid

@@ -0,0 +1,17 @@
+---
+pagination:
+  data: collections
+  size: 1
+  alias: tag
+permalink: /tags/{{ tag }}/
+layout: layout.liquid
+---
+
+<h1>Tagged "{{ tag }}"</h1>
+
+<ul>
+    {% assign taglist = collections[tag] %}
+    {% for post in taglist reversed %}
+        <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
+    {% endfor %}
+</ul>