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.
swiftlang · Jan 29, 2024 · 2a38a32 · 2a38a32
1 parent 0126d8c
commit 2a38a32
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 }}