From 2a38a32e04284133515f2f3e6098eade876a4190 Mon Sep 17 00:00:00 2001
From: Rauhul Varma <rauhul@apple.com>
Date: Sat, 27 Jan 2024 15:32:44 -0800
Subject: [PATCH] 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.
---
 _layouts/post.html                        | 11 +++++-
 _posts/2023-11-06-swift-5.9-backtraces.md |  1 +
 assets/stylesheets/_screen.scss           | 48 ++++++++++++++++-------
 blog/index.html                           | 12 +++++-
 4 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index ad872a49d..d12e6d974 100644
--- a/_layouts/post.html
+++ b/_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 %}
   </header>
 
diff --git a/_posts/2023-11-06-swift-5.9-backtraces.md b/_posts/2023-11-06-swift-5.9-backtraces.md
index 219f3d80f..38ba17b2a 100644
--- a/_posts/2023-11-06-swift-5.9-backtraces.md
+++ b/_posts/2023-11-06-swift-5.9-backtraces.md
@@ -4,6 +4,7 @@ published: true
 date: 2023-11-08 10:00:00
 title: On-Crash Backtraces in Swift
 author: [al45tair]
+tag: [swift 5.9, linux, debugging]
 ---
 
 The new Swift 5.9 release contains a number of helpful, new features for debugging code, including an out-of-process, interactive
diff --git a/assets/stylesheets/_screen.scss b/assets/stylesheets/_screen.scss
index b875715c4..092554941 100644
--- a/assets/stylesheets/_screen.scss
+++ b/assets/stylesheets/_screen.scss
@@ -490,21 +490,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: 2em;
-    }
+    .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: .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: .5rem;
+          padding: .15em .4em;
+        }
+      }
     }
   }
 
diff --git a/blog/index.html b/blog/index.html
index 279279d3a..08133fb35 100644
--- a/blog/index.html
+++ b/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 }}