{"id":22622037,"url":"https://github.com/clouduser98/simple-githubpages-spa-router","last_synced_at":"2026-04-13T00:44:18.941Z","repository":{"id":169543160,"uuid":"642489208","full_name":"cloudUser98/simple-githubpages-spa-router","owner":"cloudUser98","description":"Simple web router for SPA hosted in Github Pages","archived":false,"fork":false,"pushed_at":"2023-05-30T02:53:02.000Z","size":56,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-03-03T19:24:19.996Z","etag":null,"topics":["front-end","javascript","routing","single-page-applications","spa","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudUser98.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-05-18T17:24:26.000Z","updated_at":"2023-05-30T23:08:16.000Z","dependencies_parsed_at":"2023-08-18T17:49:30.007Z","dependency_job_id":null,"html_url":"https://github.com/cloudUser98/simple-githubpages-spa-router","commit_stats":null,"previous_names":["clouduser98/simple-githubpages-spa-router"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudUser98%2Fsimple-githubpages-spa-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudUser98%2Fsimple-githubpages-spa-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudUser98%2Fsimple-githubpages-spa-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudUser98%2Fsimple-githubpages-spa-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudUser98","download_url":"https://codeload.github.com/cloudUser98/simple-githubpages-spa-router/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246128266,"owners_count":20727880,"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","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":["front-end","javascript","routing","single-page-applications","spa","typescript"],"created_at":"2024-12-08T23:13:06.627Z","updated_at":"2026-04-13T00:44:18.904Z","avatar_url":"https://github.com/cloudUser98.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# simple-githubpages-spa-router\nSimple web router for SPA hosted with Github Pages.\n\nYou can see the basic use of this library in [this Demo Page](https://clouduser98.github.io/simple-githubpages-spa-router/) or you can check out the source code of the page the [demo-page branch](https://github.com/cloudUser98/simple-githubpages-spa-router/tree/demo-page).\n\n## Disclaimer\n__Im not by any means an experienced web developer__. This repository started as a\nside project while developing my personal Devlog web page with Github Pages.\n\nI'm using this side project for personal studying purposes only.\n\n__Topics I'm studying with this project:__\n- Typescript (the basics)\n- Library development with typescript\n- Manipulation of the Window __Location__ and __History__ properties with Javascript\n- The basics of how SPA's could work under the hood\n- Client side rendering ideas\n\n## Any comments are completely welcome. I am passionate about always learning new things.\n\n## About\nThis is a simple web router written in Typescript that can help you if you are\ntrying to build a simple SPA using Github Pages as your hosting service.\n\n## Requirements\n+ Rollup or any other bundler or library that lets you resolve Node module imports on the client side when building your project\n\n## Usage\n\n+ [Installation](#installation)\n+ [createRouter()](#createrouter)\n+ [Basic implementation](#basic-implementation)\n+ [Creating anchor ```\u003ca\u003e``` tags for navigation](#creating-anchor-a-tags-for-navigation)\n+ [Handling page reload](#handling-page-reload)\n+ [To do list](#to-do-list)\n\n### Installation\n\nYou can install the library as a npm package with the next command:\n```\n$ npm install simple-githubpages-spa-router\n```\n### createRouter()\n\n#### Parameters:\n\n##### __routes__\nArray of the routes defined for the project.\n\nFor more information on creating routes please use [this example](#creating-routes).\n\n##### __repoName__\nName of the page repository, this parameter is optional and you can define it only if your github page does not count with a custom domain and it is using the defatult one, example: github.io/repoName/\n\n##### __customListener__\nAn optional custom method, that will be attached to the listener for the event \"popstate\" from the window element.\nIf not defined, the router will use the default listener method.\n\n### Creating routes\n\nA route is represented as an object with the following structure:\n\n```javascript\n// Render method example\nfunction renderAbout() {\n    body = document.getElementById(\"body\");\n   \n    body!.innterHTML = `\u003ch1\u003e About \u003c/h1\u003e`;\n}\n\nvar route = { \"/about\", renderAbout }\n```\n\n### Basic implementation\n\nImport the module into your main javascript file and use the method __createRouter()__ to initialize a new gpSpaRouter instance to use in your project.\n\n```javascript\n// index.js\nimport renderMethod1 from \"./first_module\";\nimport renderMethod2 from \"./second_module\";\n\nimport { createRouter } from \"simple-githubpages-spa-router\";\n\nlet router = createRouter([\n    {path: \"/first_path\", pageRenderer: renderMethod1},\n    {path: \"/second_path\", pageRenderer: renderMethod2},\n], '/repositoryName');\n```\n\n### Creating anchor ```\u003ca\u003e``` tags for navigation\n   \nYou can tell your web page when to render the content attached to a path by using the ```\u003ca\u003e``` tag and writing the path as a reference with the __hash format__:\n   \n```html\n\u003ca href=\"#/myPage\"\u003e Render my content \u003c/\u003e\n```\n\nYou can still use normal hash paths to anchor segments in your page, just remember to remove the __/__ from the path.\n   \n| Normal hash path | Router hash path |\n|-|-|\n| __#about__ | __#/about__ |\n   \n#### Redirecting to the main page\n   \nBy default, the hashed path __#/__ is reserved for reloading the index.html in case you want to use it to take you to the main page.\n   \n### Handling page reload\n   \nBy default, github pages will redirect you to a 404 error page when trying to load a path that does not exist. The custom 404.html page created in your repository would prevent this by parsing the custom path in the URL as a query parameter and redirecting you to the main HTML document. By doing this, the router can catch the requested path and render out the content.\n   \n### To do list:\n   \n- [ ] Handling of nested paths\n- [ ] Support for a custom 404 error page renderer method\n- [ ] A history property for the router to show all past navigated routes\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclouduser98%2Fsimple-githubpages-spa-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclouduser98%2Fsimple-githubpages-spa-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclouduser98%2Fsimple-githubpages-spa-router/lists"}