Fix small typo, add non-JS version

[kescherCode]

I've gone ahead and fixed a small typo in CheckFormat.js (validility -> validity), and added the entirety of the page, minus the things that really do require JavaScript, to the index.html. This allows non-JS clients to view the page as well (tested in Firefox with NoScript, as well as elinks).

[koutsie]

Huge +1

[kescherCode]

@IJMacD I have added getStaticSite.js, which is intended to be run in browser DevTools, for example while doing yarn start. The downloaded file can be placed at /public/index.html. (That parser might need some adjustment in the future, however.)

[koutsie]

@IJMacD I have added getStaticSite.js, which is intended to be run in browser DevTools, for example while doing yarn start. The downloaded file can be placed at /public/index.html. (That parser might need some adjustment in the future, however.)

Tested and seems to work!

[IJMacD]

I put the style back in a noscript tag as you had originally to avoid interference with live styles if available (in dev or prod).

I've tried running some performance comparisons to see if adding 80 kB for all users for the benefit of a tiny minority of users causes noticeable issues. On my laptop with a good connection I see no problems so we're all good there. 👍Still haven't checked on mobile/slow connection though.

Resources	Gzip'd
Before	190 kB	54.8 kB
After	271 kB	64.1 kB
Delta	+43%	+17%

I had the thought of linking to the GitHub readme in the noscript tag for those who elect to run without JS. That would avoid the problem of bloated page loads for little noticeable benefit. The getStaticSite.js could be repurposed to update README.md instead.

How does this sound?

[kescherCode]

Indeed, I forgot to put the style into a noscript tag. Oops!

Now, there are some different approaches that one could take here. First of all, one could generate a separate page to begin with for JS users, with automatic redirection to the non-JS version using Http-Equiv "Refresh", and back to the JS version using JS when enabled. I used that approach at one of my projects written in Vue (the source code is linked, too). Note that it will redirect you to /nojs when JS is disabled, and to the JS-enabled page when accessed with JS enabled. And my getStaticSite.js script could potentially be obsoleted by a script using https://reactjs.org/docs/react-dom-server.html, as a friend pointed out, that is run with Node instead of browser DevTools.

[IJMacD]

Server side rendering has always been an option but I think in our case with the extreme size of the markup, any benefits gained from SSR are outweighed by the additional payload; both in terms of waiting for the network and additional parsing requirements.

I've changed the getStaticSite.js script into a generateReadme.js script. This means there is only one static version to maintain and is accessible to everyone. The main page will redirect non-JS users back to the static version hosted on GitHub as the README.

[koutsie]

Works I guess...?