From 5c1fd5edca840e3ec2f8a80b8fed763d30cfa11a Mon Sep 17 00:00:00 2001
From: Alex Karle <alex@alexkarle.com>
Date: Fri, 8 Oct 2021 00:59:38 -0400
Subject: [PATCH] blog: Change listing format to -tag list (grid)

The bullet-point listing was becoming very cluttered as I added more
posts! I took a page out of danluu.com and trimmed the longer
(MM/DD/YYYY) datestamps into MM/YY (the full date is still on the page!)
and tossed in some CSS grid magic to make sure the list is actually true
to the mdoc -tag equivalent!

The trickiest part here (besides getting it to look how I wanted) was
revamping the genatom.sh to no longer parse the dates from blog.7. This
is a net-win in terms of maintainability in my book though! I'd rather
grab them from the source-of-truth .Dd macros :)
---
 bin/genatom.sh | 12 +++++-------
 blog.7         | 49 +++++++++++++++++++++++--------------------------
 style.css      | 10 ++++++++++
 3 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/bin/genatom.sh b/bin/genatom.sh
index 78a4270..6f04900 100755
--- a/bin/genatom.sh
+++ b/bin/genatom.sh
@@ -9,9 +9,6 @@ PATH="$REPO/bin:$REPO/obj/bin:$PATH"
 
 # All posts are a item (.It) in the list, and linked via .Xr
 POSTS=$(sed '/SEE ALSO/q' "$REPO/blog.7" | grep -A1 '\.It' | grep '\.Xr' | sed 's/^\.Xr \([^ ]*\) 7/\1/')
-# Assume dates are 1-1
-DATES=$(grep -o '[0-9]\{1,2\}/[0-9]\{1,2\}/[0-9]\{4\}' "$REPO/blog.7" \
-    | sed -e 's#\([0-9]\{2\}\)/\([0-9]\{2\}\)/\([0-9]\{4\}\)#\3-\1-\2#')
 
 cat <<HEADER
 <?xml version="1.0" encoding="utf-8"?>
@@ -25,11 +22,12 @@ cat <<HEADER
   </author>
 HEADER
 
-set $DATES
-printf "  %s\n" "<updated>${1}T00:00:00Z</updated>"
 for p in $POSTS; do
-    d="$1"
-    shift
+    d=$(date -juf"%b %d, %Y" +%F "$(grep '^\.Dd' "$REPO/$p.7"  | cut -d' ' -f2-)")
+    if [ -z "$printed_update" ]; then
+        printed_update=1
+        printf "  %s\n" "<updated>${d}T00:00:00Z</updated>"
+    fi
     cat <<ENTRY
   <entry>
     <title>$p</title>
diff --git a/blog.7 b/blog.7
index de4f555..d651eee 100644
--- a/blog.7
+++ b/blog.7
@@ -13,44 +13,41 @@ feed (for use with your favorite RSS/Atom client).
 .Pp
 For an up to date list of software/hardware I use, see
 .Xr uses 7 .
-.Pp
-Otherwise, posts below are from newest to oldest:
-.Pp
-.Bl -bullet -compact
-.It
+.Sh POSTS
+.Bl -tag -width "XX/XX"
+.It 09/21
 .Xr make-obj 7
-\(em out-of-tree builds with BSD
+- out-of-tree builds with BSD
 .Xr make 1
-(09/28/2021)
-.It
+.It 09/21
 .Xr text-only 7
-\(em announcing text.alexkarle.com (09/20/2021)
-.It
+- announcing text.alexkarle.com
+.It 07/21
 .Xr creative-coding 7
-\(em learning through creative limitation (07/18/2021)
-.It
+- learning through creative limitation
+.It 02/21
 .Xr use-feeds 7
-\(em RSS/Atom feeds; what, why, and how (02/09/2021)
-.It
+- RSS/Atom feeds; what, why, and how
+.It 12/20
 .Xr my-old-man 7
-\(em Adventures in using
+- Adventures in using
 .Xr mdoc 7
-for this site's source (12/30/2020)
-.It
+for this site
+.It 10/20
 .Xr on-writing 7
-\(em On Writing Without an Audience (10/22/2020)
-.It
+- On Writing Without an Audience
+.It 07/20
 .Xr self-hosted 7
-\(em Migrating to a Self-Hosted Site (07/19/2020)
-.It
+- Migrating to a Self-Hosted Site
+.It 07/20
 .Xr BLM 7
-\(em Black Lives Matter (07/13/2020)
-.It
+- Black Lives Matter
+.It 03/20
 .Xr domain-names 7
-\(em What's in a (domain) name? (03/24/2020)
-.It
+- What's in a (domain) name?
+.It 12/19
 .Xr a-new-hope 7
-\(em A New Hope (12/19/2019)
+- A New Hope
 .El
 .Sh SEE ALSO
 .Bl -bullet -compact
diff --git a/style.css b/style.css
index 30ba849..95d1185 100644
--- a/style.css
+++ b/style.css
@@ -61,6 +61,16 @@ div.Bd-indent {
     overflow-x: auto;
 }
 
+/* Bl-tag correctly with grid for blog.7 */
+dl.Bl-tag {
+    display: grid;
+    grid-template-columns: max-content auto
+}
+dl.Bl-tag dd {
+     margin-left: 16px;
+     margin-bottom: 1em;
+}
+
 /* defaults from mandoc(1)'s inlined CSS */
 table.head, table.foot { width: 100%; }
 td.head-rtitle, td.foot-os { text-align: right; }
--
libgit2 1.1.1