Add support for tags to blog posts

Adds simple tag bubbles that can be added to blog posts. In the future
we may want to make these selectable for filtering and include a search
bar as was done for swift-evolution.

Author: rauhul

_layouts/post.html

@@ -5,8 +5,17 @@
 <article class="post">
   <header>
     <h1>{{ page.title }}</h1>
+    <div class="subtitle">
+      <time pubdate datetime="{{ page.date | date_to_xmlschema }}">
+        {{ page.date | date: "%B %-d, %Y" }}
+      </time>
 
-    <time pubdate datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time>
+      <div class="tags">
+        {% for tag in page.tag %}
+          <div class="tag"><span>{{ tag }}</span></div>
+        {% endfor %}
+      </div>
+    </div>
     {% include authors.html authors=page.author compact=true %}
   </header>
 

assets/stylesheets/_screen.scss

@@ -570,21 +570,41 @@ article {
       padding-top: 0em;
     }
 
-    time {
-      display: block;
-      text-transform: uppercase;
-      font-size: 14px;
-      font-weight: 400;
-      color: var(--color-figure-gray-tertiary);
-      margin-right: 3em;
-      margin-bottom: 1.25em;
-    }
+    .subtitle {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 1em;
 
-    .tags {
-      display: block;
-      font-size: 12px;
-      font-weight: 400;
-      margin-top: 0;
+      time {
+        flex-shrink: 0;
+        margin-top: 0.2em + 0.15em;
+        text-transform: uppercase;
+        font-size: 0.8em;
+        font-weight: 400;
+        color: var(--color-figure-gray-tertiary);
+      }
+
+      .tags {
+        display: flex;
+        flex-direction: row;
+        /* Allow tags to wrap to additional lines */
+        flex-wrap: wrap;
+        /* Add a small gap between additional lines */
+        gap: 0.4em;
+        /* Align to trailing edge */
+        justify-content: flex-end;
+
+        .tag {
+          text-transform: uppercase;
+          font-size: 0.8em;
+          font-weight: 400;
+          margin-left: 0.5em; /* Adjust margin as needed for spacing between tags */
+          color: var(--color-figure-gray-tertiary);
+          border: 0.15em solid var(--color-nav-rule);
+          border-radius: 0.5rem;
+          padding: 0.15em 0.4em;
+        }
+      }
     }
   }
 

blog/index.html

@@ -8,7 +8,17 @@
   <article id="{{ post.id }}" class="summary">
     <header>
       <h2 class="title"><a href="{{ post.url }}">{{ post.title }}</a></h2>
-      <time pubdate datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %-d, %Y" }}</time>
+      <div class="subtitle">
+        <time pubdate datetime="{{ post.date | date_to_xmlschema }}">
+          {{ post.date | date: "%B %-d, %Y" }}
+        </time>
+
+        <div class="tags">
+          {% for tag in post.tag %}
+            <div class="tag"><span>{{ tag }}</span></div>
+          {% endfor %}
+        </div>
+      </div>
     </header>
     <section class="excerpt">
       {{ post.excerpt }}