{"id":24529756,"url":"https://github.com/learosema/eleventy-mini-spa","last_synced_at":"2025-07-23T08:08:04.452Z","repository":{"id":88706651,"uuid":"290478038","full_name":"learosema/eleventy-mini-spa","owner":"learosema","description":"Minimal Single Page Application ontop of 11ty","archived":false,"fork":false,"pushed_at":"2024-08-24T14:00:24.000Z","size":185,"stargazers_count":21,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-14T17:37:49.195Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/learosema.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-08-26T11:29:17.000Z","updated_at":"2024-09-07T16:27:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"076727f0-550a-4bd8-9ab1-358217a987a6","html_url":"https://github.com/learosema/eleventy-mini-spa","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/learosema/eleventy-mini-spa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learosema%2Feleventy-mini-spa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learosema%2Feleventy-mini-spa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learosema%2Feleventy-mini-spa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learosema%2Feleventy-mini-spa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learosema","download_url":"https://codeload.github.com/learosema/eleventy-mini-spa/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learosema%2Feleventy-mini-spa/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266640830,"owners_count":23960809,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-22T07:52:33.918Z","updated_at":"2025-07-23T08:08:04.430Z","avatar_url":"https://github.com/learosema.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Eleventy Mini SPA\n\nThis is a little demo about a possible approach to buiding an Single Page Application (=SPA) with HTML, CSS and JS.\n\n## How SPAs work\n\nSingle Page Applications work in a way that they prevent a full page reload.\nThis can help the experience to be a bit smoother for some users, especially when things like music or animations are playing in the background.\n\n## Accessibility problems with SPAs\n\nPeople using screenreaders often don't notice when a navigation is completed inside an SPA.\n\nA bad example of this is an old project I worked on: \u003chttps://talentbook.lea.lgbt\u003e. (available on GitHub: \u003chttps://github.com/learosema/talentbook\u003e).\n\n## Structure of this demo\n\nThe SPA functionality is added on top of a statically generated site that just uses HTML,CSS and no JS.\n\nI'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).\n\nAll the functionality is in the `src/js/main.ts` file which gets compiled to JavaScript via `esbuild`\n\n- it assumes there is a `main` element in the HTML document\n- it loads URLs that don't have `target=\"_blank\"` via XHR\n- uses `history.pushState` to update the URL\n- handles the back button via `popstate` event\n\nThis Demo is hosted on Netlify: \u003chttps://mini-spa.netlify.app/\u003e\n\n## Alternative approaches\n\nThe site \u003chttps://sbg.wtf\u003e 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)).\n\nAs 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.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearosema%2Feleventy-mini-spa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearosema%2Feleventy-mini-spa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearosema%2Feleventy-mini-spa/lists"}