Thanks Brent, I’m stoked you like it! When it’s “ready”, for sure, I’d be delighted to contribute.
Themes are a great place where we can experiment without adding complexity to the app. As a result though, are aspects of this theme that feel kinda hacky. In particular where I’ve sought to solve problems that may be more elegantly resolved in the app.
At some point, when there is room in NNW roadmap, I’d like to help figure out where these complexities best belong. I like the idea of contributing a theme that makes sense to people who want peel it open to see how it works.
The js in the template does a few things CSS cannot:
Measure how much text a post contains.
Useful to apply the is-short-content class which in turn is used to enlarge the text of short unstructured posts (if it looks like your viewport has space).
Compare the post title to the body content.
I follow a few folks whose feeds often include short form posts – but rather than just omit the post title (because their post doesn’t really have one) they repeat the post in the title. Sometimes truncated (e.g. kottke.org), sometimes in full. Reading these has irked me for a long time.
The JavaScript does a comparison, if it looks like the title is redundant it switches the template class responsible for the untitled post display i.e. articleDatelineTitle.
Finally
It normalises posts that have a title and no body to present them in the same manner as posts with the reverse – by copying the title to the body. Technically this could be done with CSS alone. But the js makes the code a little tidier.
I put some thought in. With respect for backwards theme compatibility, hypothetical new or modified template tags to simplify a theme template that always renders a h1 (removing :empty CSS tricks) and replacing use of JavaScript:
[[title_deduped]]
Same as [[title]], except empty if title text is duplicated* in body
*(algorithm to be defined, possibly non trivial as body often contains mark-up or differently encoded characters that complicate comparison).
[[dateline_style]]
Append existing class output with articleTitleDeduped if title_deduped (above) is empty.
Use this as a CSS class to style the <h1> containing the dateline differently, and hide the regular dateline.
[[body_length_class]]
Outputs articleLengthShort if body value is short*
*(shortness requires definition. Markup included? Other length classes?)
Use this as a CSS class to enlarge font size of short form content.
[[title_deduped|datetime_medium]]
Outputs title value or (if title is empty) datetime_medium
Introducing a possible OR syntax in the template tag in case a different theme wanted to substitute a different date format
Use this to avoid an empty <h1> (ux consistency for VoiceOver users).
[[body|title]]
As above. Outputs body value (or title if: body is empty).
I’ve switched to it (from Fluid) to find out which one I prefer and noticed an issue with some SVG images. In the latest post from the feed Nano Bytes, Vol. 05 - Mark W.rites the small graphics used as icons in the top right of the grey boxes on the web page (Nano Bytes, Vol. 05 - Mark W.rites) are shown as huge, full width, images using your Scratch theme. They display fine as small icon on the right of the h2 subheading when using Fluid. It would be nice if you could address this in a future version of the Scratch theme.
Another image issue with the current version of Scratch is that it doesn’t show images in xkcd.com posts. They are displayed when switching to another theme.