← Back to context

Comment by tamnd

1 day ago

And thanks for the link. Let me implement this single HTML feature, it looks nice to have!

Yeah. An idea on top of that is to bundle an entire website into a single HTML page, with vendored JavaScript to enable client-side routing (all of the original pages' JS is still stripped out).

That way, the page is self-contained as it is, but requires no bundled binary code to serve the site. It is actually safer security-wise.

The vendored script can be as simple as this:

  const site = {
    "path-1": "<!DOCTYPE html><html> ... </html>",
    "path-2": "<!DOCTYPE html><html> ... </html>",
    // More paths
  }

  function attachListeners() {
    for (const [path, html] of Object.entries(site)) {
      document.querySelector(`a[href=${path}]`).onclick = () => {
        document.documentElement.outerHTML = html
        attachListeners()
      }
    }
  }

  document.addEventListeners("DOMContentLoaded", attachListeners)