Create a page for each tag (closes #24)

Merge pull request #26 from Samasaur1/tag-pages. This PR also: - extracts the HTML for a post in the list of posts to an include, so it can now be used on other pages - shows the "last updated date" for posts that have it - removes the list of "posts by tag" (superseded by the tag pages) and replaces it with a list of tags, showing the number of posts tagged with that tag
Samasaur1 · Jul 19, 2023 · 27427e5 · 27427e5
2 parents 80f6add + 24d7deb
commit 27427e5
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 45 deletions.
diff --git a/Gemfile b/Gemfile
@@ -10,3 +10,4 @@ gem "jekyll"
 gem "webrick", "~> 1.7"
 gem 'jekyll-feed'
 gem 'jekyll-seo-tag'
+gem 'jekyll-datapage-generator'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -31,6 +31,7 @@ GEM
       safe_yaml (~> 1.0)
       terminal-table (>= 1.8, < 4.0)
       webrick (~> 1.7)
+    jekyll-datapage-generator (1.4.0)
     jekyll-feed (0.17.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-sass-converter (3.0.0)
@@ -69,6 +70,7 @@ PLATFORMS
 
 DEPENDENCIES
   jekyll
+  jekyll-datapage-generator
   jekyll-feed
   jekyll-seo-tag
   webrick (~> 1.7)

diff --git a/_config.yml b/_config.yml
@@ -5,6 +5,7 @@ collections:
 plugins:
   - jekyll-feed
   - jekyll-seo-tag
+  - jekyll-datapage-generator
 
 defaults:
   - 
@@ -16,3 +17,12 @@ defaults:
       # layout: default
 
 #excerpt_separator: <!--more-->
+
+page_gen_dirs: false
+page_gen:
+  - data: tags
+    template: tag
+    dir: tags
+    name: name
+    title_expr: |-
+      record.fetch("displayname", record["name"])
diff --git a/_data/tags.yml b/_data/tags.yml
@@ -2,6 +2,8 @@
   class: badge-swift
 - name: jekyll
   class: badge-danger
+  description: |-
+    the static site generator that powers this site. <a href="https://jekyllrb.com">jekyllrb.com</a>
 - name: java
   class: badge-java
 - name: rust
@@ -18,3 +20,30 @@
   class: badge-python
 - name: nixos
   class: badge-nix
+- name: frc
+- name: the blog
+- name: swift package manager
+- name: macos
+  displayname: macOS
+  description: |-
+    apple's desktop platform. my posts about it generally fall into one of two categories: tracking down bugs or doing complex configuration
+- name: neovim
+- name: sudo
+- name: shell
+- name: discord
+- name: rss
+- name: rssbot
+  description: |-
+    a discord bot that watches RSS/Atom feeds. find it on GitHub <a href="https://github.com/Samasaur1/rssbot">here</a>
+- name: refind
+- name: catppuccin
+- name: svg
+- name: imagemagick
+- name: ssh
+- name: gnupg
+- name: tailscale
+- name: wireguard
+- name: vpn
+- name: homebrew
+- name: macports
+- name: alacritty
diff --git a/_includes/post.html b/_includes/post.html
@@ -0,0 +1,29 @@
+<{{ include.tag | default: "h3" }}>
+  <a href="{{ post.url }}">{{ post.title }}</a>&nbsp;
+  <span style="font-size: 50%;">
+    <span class="text-muted">{{ post.date | date_to_string }}&nbsp;</span>
+  </span>
+  <span style="font-size: 55%;">
+    {% if post.tags[0] %}
+      {% for tag in post.tags %}
+        {% assign css-class = "badge-secondary" %}
+        {% for site_tag in site.data.tags %}
+          {% if site_tag.name == tag %}
+            {% if site_tag.class %}
+              {% assign css-class = site_tag.class %}
+            {% endif %}
+          {% endif %}
+        {% endfor %}
+        {% capture link %}/tags/{{ tag | replace: " ", "-" }}{% endcapture %}
+        <a href="{{ link | relative_url }}" class="badge {{ css-class }}">{{ tag }}</a>
+      {% endfor %}
+    {% endif %}
+  </span>
+  {% if post.last_updated %}
+    <span style="font-size: 50%;">
+      <span class="text-muted">&nbsp;updated {{ post.last_updated | date_to_string }}</span>
+    </span>
+  {% endif %}
+</{{ include.tag | default: "h3" }}>
+
+{{ post.excerpt }}
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -2,22 +2,28 @@
 layout: default
 ---
 <div id="post-main-content">
-<h1 class="mb-0 pb-0">{{ page.title }}</h1>
-<p class="mt-0 pt-0 text-muted">
-{{ page.date | date_to_string }}
+  <h1 class="mb-0 pb-0">{{ page.title }}</h1>
+  <p class="mt-0 pt-0 text-muted">
+  {{ page.date | date_to_string }}
   {% if page.tags[0] %}
     &nbsp;&nbsp;
     {% for tag in page.tags %}
       {% assign css-class = "badge-info" %}
       {% for site_tag in site.data.tags %}
         {% if site_tag.name == tag %}
-          {% assign css-class = site_tag.class %}
+          {% if site_tag.class %}
+            {% assign css-class = site_tag.class %}
+          {% endif %}
         {% endif %}
       {% endfor %}
-      <a href="{{ "/tags/" | append: tag | relative_url }}" class="badge {{ css-class }}">{{ tag }}</a>
+      {% capture link %}/tags/{{ tag | replace: " ", "-" }}{% endcapture %}
+      <a href="{{ link | relative_url }}" class="badge {{ css-class }}">{{ tag }}</a>
     {% endfor %}
   {% endif %}
-</p>
-<hr style="border: 1px solid;"/>
-{{ content }}
+  {% if page.last_updated %}
+    &nbsp;&nbsp;updated {{ page.last_updated | date_to_string }}
+  {% endif %}
+  </p>
+  <hr style="border: 1px solid;"/>
+  {{ content }}
 </div>
diff --git a/_layouts/tag.html b/_layouts/tag.html
@@ -0,0 +1,20 @@
+---
+layout: default
+---
+<div id="tag-info">
+  <h2>{{ page.title }}</h2>
+  {% if page.description %}
+    <p class="pb-0 mb-0">{{ page.description }}</p>
+  {% endif %}
+</div>
+<hr class="mb-0 mt-0 pb-0 pt-0"/>
+<div id="tag-posts">
+  <h2>recent posts:</h2>
+  <ul>
+    {% for post in site.posts %}
+      {% if post.tags contains page._name %}
+        <li>{% include post.html tag="h4" %}</li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+</div>
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -115,13 +115,21 @@ pre {
   background-color: lightgray;
 }
 
-#post-main-content {
-  padding: 1.5em;
-}
-
 blockquote {
   margin-left: 1em;
   border-left: 6px solid lightgray;
   padding-left: 1em;
   padding-top: 0.25em;
 }
+
+#post-main-content {
+  padding: 1.5em;
+}
+
+#tag-info {
+  padding: 1.5em;
+}
+
+#tag-posts {
+  padding: 1.5em;
+}
diff --git a/blog.html b/blog.html
@@ -14,45 +14,28 @@ <h1>Latest Posts</h1>
 <ul>
   {% for post in site.posts %}
     <li>
-      <h3>
-        <a href="{{ post.url }}">{{ post.title }}</a>&nbsp;
-        <span style="font-size: 50%;">
-          <span class="text-muted">{{ post.date | date_to_string }}</span>
-        </span>
-        <span style="font-size: 55%;">
-          {% if post.tags[0] %}
-            {% for tag in post.tags %}
-              {% assign css-class = "badge-secondary" %}
-              {% for site_tag in site.data.tags %}
-                {% if site_tag.name == tag %}
-                  {% assign css-class = site_tag.class %}
-                {% endif %}
-              {% endfor %}
-              <a href="{{ "/tags/" | append: tag | relative_url }}" class="badge {{ css-class }}">{{ tag }}</a>
-            {% endfor %}
-          {% endif %}
-        </span>
-      </h3>
-
-      {{ post.excerpt }}
+      {% include post.html %}
     </li>
   {% endfor %}
 </ul>
-<h2>Posts By Tag</h2>
-{% for tag in site.tags %}
-  {% assign css-class = "badge-secondary" %}
-  {% for site_tag in site.data.tags %}
-    {% if site_tag.name == tag[0] %}
-      {% assign css-class = site_tag.class %}
-    {% endif %}
-  {% endfor %}
-  <a href="{{ "/tags/" | append: tag[0] | relative_url }}" class="badge {{ css-class }}">{{ tag[0] }}</a>
+<h2>Tags</h2>
   <ul>
-    {% for post in tag[1] %}
-      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
+    {% for tag in site.tags %}
+      {% assign css-class = "badge-secondary" %}
+      {% for site_tag in site.data.tags %}
+        {% if site_tag.name == tag[0] %}
+          {% if site_tag.class %}
+            {% assign css-class = site_tag.class %}
+          {% endif %}
+        {% endif %}
+      {% endfor %}
+      <li>
+        {% capture link %}/tags/{{ tag[0] | replace: " ", "-" }}{% endcapture %}
+        <a href="{{ link | relative_url }}" class="badge {{ css-class }}">{{ tag[0] }}</a>
+        ({{ tag[1] | size }})
+      </li>
     {% endfor %}
   </ul>
-{% endfor %}
 </div>
 <hr style="width: 90%;"/>
 <footer style="padding: 5px; text-align: center;">