From 8ce8b5a7f7fc67d3600b548dffa664419f2854d7 Mon Sep 17 00:00:00 2001
From: Mike Gerwitz <mtg@gnu.org>
Date: Mon, 18 Mar 2024 23:32:57 -0400
Subject: [PATCH] HTML details styling and parsing improvements

The article I'm working on makes (very) heavy use of the `details` HTML
element, and nests them.  Making sense of the article without
indentation is difficult and torturous.

This has complicated the prefmt script enough that it really ought to be
extracted into something else.  I'm admittedly disappointed that I've
had to do this much work with it, because it completely sacrifies any
hope of portability.  Oh well, that's not even a design goal, though
it'd be nice to be able to have the preview of Markdown files make sense
in e.g. Forejo.

I figured I'd have the least numbre of problems with nesting if I strip
whitespace prefixes based on the current level of nesting.  To avoid
surprises, I enforce expectations statically---it will not compile
without proper nesting.

To reduce the potential blast radius, I'm doing this only for `details`
for now; it'll expand later on.  I did diff the output of older articles
to make sure they were unaffected.
---
 src/post2html | 59 ++++++++++++++++++++++++++++++++++++++++++++-------
 style.css     | 13 ++++++++++++
 2 files changed, 64 insertions(+), 8 deletions(-)

diff --git a/src/post2html b/src/post2html
index c0c6c03..51f6f5a 100755
--- a/src/post2html
+++ b/src/post2html
@@ -86,15 +86,56 @@ hgroup-wrap()
 # Pre-format Markdown files before they get to Pandoc
 #
 # These may be able to be implemented as Pandoc filters, but I haven't had
-# the time to research that yet.  This is actually a fitting real-world
-# demonstration of incremental development / MVP that I'm writing about at
-# the time that this comment was written (MyCustomBB Part I)!
+# the time to research that yet.
+#
+# I had originally switched to Markdown hoping that it would suit my needs
+# better than an ad-hoc formatting language of my own design.  And yet here
+# I am again, adding to the language.
 prefmt()
 {
+  # Accepting a filename instead of stdin allows us to output errors
+  # including the name of the file.
+  local -r file="$1"
+
   awk '
-    triml {
-      gsub( /^ +/, "" )
+    BEGIN {
+      infence = 0
+      gather = 0
+      nltrim = 0
       triml = 0
+      indent = 0
+      ex = 0
+    }
+
+    # indentation is the first non-space character
+    { indent = match($0, /[^ ]/) - 1 }
+
+    # HTML nesting
+    /^ *<\/details>/ {
+      triml = indent
+    }
+
+    triml && indent >= 0 {
+      if (indent < triml) {
+        printf "error: post2html: %s:%d: expected %d-char indent, found %d\n", \
+          FILENAME, NR, triml, indent \
+          > "/dev/stderr"
+        ex = 1
+      } else {
+        # must have `triml` leading spaces
+        $0 = substr($0, triml + 1)
+      }
+    }
+
+    # must appear _after_ triml above so we just discard what is left,
+    # or we mess up the indentation calculation
+    nltrim && indent {
+      gsub( /^ +/, "" )
+      nltrim = 0
+    }
+
+    /^ *<details\>/ {
+      triml = indent + 2
     }
 
     # ties
@@ -105,7 +146,7 @@ prefmt()
     !infence && /%$/ {
       gsub( /%$/, "" )
       printf "%s", $0
-      triml = 1
+      nltrim = 1
       next
     }
 
@@ -120,7 +161,9 @@ prefmt()
     !gather && /^ *@LASTFENCE@$/ { print gblock; next }
 
     { print }
-  '
+
+    END { exit(ex) }
+  ' "$file"
 }
 
 
@@ -139,7 +182,7 @@ main()
          --highlight-style tango \
          -B <( src/mkheader post @__PAGE_TITLE__@ ) \
          -A src/footer.tpl.htm \
-         < <( prefmt < "$file" ) \
+         < <( prefmt "$file" ) \
     | src/h12title @__PAGE_TITLE__@ \
     | hgroup-wrap "$date" "$file"
 }
diff --git a/style.css b/style.css
index 070d168..a61e220 100644
--- a/style.css
+++ b/style.css
@@ -417,10 +417,23 @@ article figure > figcaption:last-child {
   margin-top: 1em;
 }
 
+article details {
+  /* 3px border + 2px spacing for nested details */
+  border-left: 5px solid;
+  border-image: linear-gradient(to right, #eeeeee 3px, transparent 2px) 5;
+
+  padding: 0em 1em;
+  margin: 1em 0em 1em -1em;
+}
+
 article details > summary {
   cursor: pointer;
 }
 
+article details[open] > summary {
+  border-bottom: 1px dashed;
+}
+
 
 @media ( max-width: 60ch ) {
   article {