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.
master
Mike Gerwitz 2024-03-18 23:32:57 -04:00
parent 8c92c57faa
commit 8ce8b5a7f7
Signed by: mikegerwitz
GPG Key ID: 8C917B7F5DC51BA2
2 changed files with 64 additions and 8 deletions

View File

@ -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"
}

View File

@ -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 {