https://github.com/learosema/eleventy-mini-spa
Minimal Single Page Application ontop of 11ty
https://github.com/learosema/eleventy-mini-spa
Last synced: 11 months ago
JSON representation
Minimal Single Page Application ontop of 11ty
- Host: GitHub
- URL: https://github.com/learosema/eleventy-mini-spa
- Owner: learosema
- Created: 2020-08-26T11:29:17.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-08-24T14:00:24.000Z (almost 2 years ago)
- Last Synced: 2025-04-14T17:37:49.195Z (about 1 year ago)
- Language: JavaScript
- Size: 181 KB
- Stars: 21
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Eleventy Mini SPA
This is a little demo about a possible approach to buiding an Single Page Application (=SPA) with HTML, CSS and JS.
## How SPAs work
Single Page Applications work in a way that they prevent a full page reload.
This can help the experience to be a bit smoother for some users, especially when things like music or animations are playing in the background.
## Accessibility problems with SPAs
People using screenreaders often don't notice when a navigation is completed inside an SPA.
A bad example of this is an old project I worked on: . (available on GitHub: ).
## Structure of this demo
The SPA functionality is added on top of a statically generated site that just uses HTML,CSS and no JS.
I've used the Eleventy static site generator 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/main.ts` file which gets compiled to JavaScript via `esbuild`
- 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
This Demo is hosted on Netlify:
## Alternative approaches
The site is a little simulator of the gender recognition law in Germany. It points out the problems with the law. It is implemented using an `aria-live` region (see [mdn](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)).
As the whole content of the live region is read in this case after a page changes, this approach is not suited well for sites with lots of content inside.