I was wondering how to add SPA functionality to a statically generated site that just uses HTML,CSS and no JS.
I've used Eleventy and I wanted to add as little overhead as possible. Also, it should follow the principles of Progressive Enhancement (basically, it should keep working without the JS being required).
All the functionality is in the src/js/mini-spa.js
file.
- it assumes there is a
main
element in the HTML document - it loads URLs that don't have
target="_blank"
via XHR - uses
history.pushState
to update the URL - handles the back button via
popstate
event