Refactor theme to elegantly fall back to more barebones functionality in the absence of JavaScript and CSS

[StevenTammen]

Right now things are uber-borked in situations where JavaScript (and sometimes even CSS) are disabled:

• Reading posts via RSS feed readers (probably the most restrictive overall)
• Mailing list updates, via Buttondown automatically pushing updates from RSS
• Plaintext browsers like Emacs' EWW
• Regular browsers with JavaScript disabled by default---think things like NoScript. If people don't want to whitelist our Hugo site for whatever reason, having it function well (without busted state and whatnot) in the absence of JavaScript is what we want.

I am big fan of the idea of RSS feeds, and also a big fan of browsing in Emacs with EWW. I want the site to perform flawlessly in these contexts, without any compromises whatsoever aside from those that are inherent (i.e., those unavoidably caused by the absence of JavaScript... and CSS too in the case of RSS).

Another side-benefit of fixing things so that they function flawlessly with RSS is that they can then be seamlessly integrated with Buttondown to support automated mailing list updates for folks who want to consume content that way.

There are a few culprits, each of which will need to be handled separately, in all likelihood:

Reftagger

For automatic Bible verse tagging to fall back properly in the absence of JavaScript, several things need to be true:

• All Bible verse references that are not in headers or in things that are already links should be made into Biblia links using a pre-processor
• The specific setting in Reftagger should be enabled that allows Reftagger to tag links
• The setting in Reftagger for excluding HTML tags to search should include your TOC and headers (h1-h6) and whatever other things are necessary, so that Bible verses embedded in other links in your UI don't get converted when they shouldn't. (You could also set up your templates in such a way that Reftagger doesn't get injected on pages that aren't content pages. That might be easier, but YMMV).

The settings should look something like this (but again, make sure you test your TOC, and all navigation/link-related things for menus, list pages, aggregation pages, content pages, and so on across your site, to make sure nothing is broken by having Reftagger tag things that are already in links):

	var refTagger = {
		settings: {
			bibleVersion: "NASB",
			roundCorners: true,
			convertHyperlinks: true,
			noSearchTagNames: ["h1", "h2", "h3", "h4", "h5", "h6", "nav"],
			socialSharing: [],
			tagChapters: true
		} 
 	};

Footnotes

Littlefoot tooltip footnotes should fall back gracefully to hyperlink-based footnotes that link to notes at the end

Special content sections

Right now I use divs with styling to change background color, apply padding, etc. I need to figure out an HTML-only way to make content sections stand out as distinct. All the pretty styling should still be there when on the normal site (with CSS enabled), but the sections just needs to fall back much more elegantly than current behavior when showing up in areas with restricted CSS support (RSS, Emails).

Maybe use an HTML table, with the special content section title in <th> and the actual content in a <td>?

Embedded videos and menu options

Since RSS does not support iframes to embed videos, these need to... do what exactly?

From very basic initial testing, it looks like Feedly at least supports embedded videos, but I want it to be maximally portable. I'll personally be viewing feeds in elfeed (Emacs), but I want all the main normie feed readers (Feedly, Inoreader, etc.) to display embedded videos---all of them. I want to figure out what the consistent standard is. Actually using an iframe tag since it is supported nowadays? An embed tag? Just the bare YouTube link?

I also want to make the links under the embedded video (for YouTube playlist link, content slides link, and podcast episode link) to fall back to something appropriate when lacking CSS. Maybe an HTML table containing the links would preserve the general look of a row of buttons?

Images

Whatever shortcode I use for images, I'll want it to transfer over well to RSS. So maybe manually set image heights in the image tag, so it's not in CSS?

Figure shortcodes that include a caption should fall back to HTML that keeps the caption closely associated with the image so semantic meaning is not lost. Maybe everything can get stuck in a <td> to get a border around it all?

Expandable/collapsible content and transcript sections

These are easy: just show everything by default in the HTML, so that when there is no JavaScript (as in a feed), everything is there uncollapsed.

Writing level

Writing level (higher vs. lower) will not be supported period. What needs to actually be rendered in the HTML by default is the higher writing level (which shows technical discussion, sidenotes, and higher level scripture shortcodes, and so on). This functionality needs to be implemented JavaScript-only

STEP Bible iframes

STEP Bible iframes will not be supported period. What is actually in the HTML therefore needs to be the normal higher level scripture special content section.

Etc.

There may be (are likely, in fact) some things I missed. The point is that a large effort needs to be undertaken to make all site content fall back seamlessly when viewed in environments that restrict JavaScript and CSS.