simple-githubpages-spa-router v1.0.1
simple-githubpages-spa-router
Simple web router for SPA hosted with Github Pages
Disclaimer
Im not by any means an experienced web developer. This repository started as a side project while developing my personal Devlog web page with Github Pages.
I'm using this side project for personal studying purposes only.
Topics I'm studying with this project:
- Typescript (the basics)
- Library development with typescript
- Manipulation of the Window Location and History properties with Javascript
- The basics of how SPA's could work under the hood
- Client side rendering ideas
Any comments are completely welcome. I am passionate about always learning new things.
About
This is a simple web router written in Typescript that can help you if you are trying to build a simple SPA using Github Pages as your hosting service.
Requirements
- Rollup or any other bundler or library that lets you resolve Node module imports on the client side when building your project
Usage
- Installation
- createRouter()
- Basic implementation
- Creating anchor
<a>
tags for navigation - Handling page reload
- To do list
Installation
You can install the library as a npm package with the next command:
$ npm install simple-githubpages-spa-router
createRouter()
Parameters:
routes
Array of the routes defined for the project.
For more information on creating routes please use this example.
repoName
Name 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/
customListener
An optional custom method, that will be attached to the listener for the event "popstate" from the window element. If not defined, the router will use the default listener method.
Creating routes
A route is represented as an object with the following structure:
// Render method example
function renderAbout() {
body = document.getElementById("body");
body!.innterHTML = `<h1> About </h1>`;
}
var route = { "/about", renderAbout }
Basic implementation
Import the module into your main javascript file and use the method createRouter() to initialize a new gpSpaRouter instance to use in your project.
// index.js
import renderMethod1 from "./first_module";
import renderMethod2 from "./second_module";
import { createRouter } from "simple-githubpages-spa-router";
let router = createRouter([
{path: "/first_path", pageRenderer: renderMethod1},
{path: "/second_path", pageRenderer: renderMethod2},
]);
Creating anchor <a>
tags for navigation
You can tell your web page when to render the content attached to a path by using the <a>
tag and writing the path as a reference with the hash format:
<a href="#/myPage"> Render my content </>
You can still use normal hash paths to anchor segments in your page, just remember to remove the / from the path.
Normal hash path | Router hash path |
---|---|
#about | #/about |
Redirecting to the main page
By 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.
Handling page reload
By 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.
To do list:
- Handling of nested paths
- Support for a custom 404 error page renderer method