Infra: Add make htmllive to rebuild and reload HTML files in your browser

[hugovk]

Add a make htmllive target to use https://github.com/executablebooks/sphinx-autobuild.

When you run it, it builds the docs and serves them at something like http://127.0.0.1:8000/

You can visit any page, for example http://127.0.0.1:8000/pep-0101.html, and when you edit/save your source .rst file, it will automatically rebuild and update the page in the browser.

This drastically improves the edit/inspect loop. A very nice touch is it will also keep you at the same position in the page.

Compare before:

1. switch to IDE: edit, save
2. switch to prompt: make html
3. switch to browser: reload, inspect
4. repeat

To this PR:

1. switch to IDE: edit, save
2. switch to prompt: make html
3. switch to browser: reload, inspect
4. repeat

(There's still some slowness due to #3477, but this automation reduces the manual labour.)

We've already added this to the devguide (python/devguide#1208, python/devguide#1212) and can add thing to CPython Docs later.

cc @pradyunsg

---

📚 Documentation preview 📚: https://pep-previews--3521.org.readthedocs.build/

[Rosuav]

Nice. How representative is it? Obviously the autoreload is going to require some JS, but as long as it isn't messing with the structure of the document, this is going to be very handy.

[hugovk]

Yes, it's using https://github.com/lepture/python-livereload which uses livereload.js, but I think that's all server-side stuff, and the output files in the build directory are just the same as a regular make html build.

[Rosuav]

By definition it's going to need something clientside that triggers the refresh, but it looks like that isn't going to mess with the structure. (I've seen some of those sorts of things that add a banner or something, which is annoying.)

[hugovk]

We can ask @pradyunsg to explain it to us, he's maintaining both https://github.com/executablebooks/sphinx-autobuild and https://github.com/lepture/python-livereload :)

[pradyunsg]

By definition it's going to need something clientside that triggers the refresh, but it looks like that isn't going to mess with the structure.

The HTTP server used in sphinx-autobuild looks for </head> on HTML responses and injects a blurb of JS to load a script. That script then makes a websocket connection on the same server and listens for reload events. Once a reload event is received, it calls window.reload basically (i.e. roughly the same as doing a manual refresh of the page).

There's no DOM manipulation on the client side in the logic AFAIK.

[Rosuav]

"Websocket"! You said the magic word...

(I love websockets, have used 'em in so many ridiculous and not-so-ridiculous ways)