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
parent
8c92c57faa
commit
8ce8b5a7f7
|
@ -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"
|
||||
}
|
||||
|
|
13
style.css
13
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 {
|
||||
|
|
Loading…
Reference in New Issue