Hi.
My first Issue, so go easy on me.
The js uses deprecated code. It still works, and I'm no dev, but I used Codium to rewrite it replacing the deprecated code.
As I say, not a dev, so lack the confidence or ability to check if it warrants a PR, but it does appear to work.
For your consideration, then...
`const urlPageTitle = "JS Single Page Application Router";
// create document click that watches the nav links only
document.addEventListener("click", (e) => {
const { target } = e;
if (!target.matches("nav a")) {
return;
}
e.preventDefault();
urlRoute(e); // Pass the event object to urlRoute function
});
// create an object that maps the url to the template, title, and description
const urlRoutes = {
404: {
template: "/templates/404.html",
title: "404 | " + urlPageTitle,
description: "Page not found",
},
"/": {
template: "/templates/index.html",
title: "Home | " + urlPageTitle,
description: "This is the home page",
},
"/about": {
template: "/templates/about.html",
title: "About Us | " + urlPageTitle,
description: "This is the about page",
},
"/contact": {
template: "/templates/contact.html",
title: "Contact Us | " + urlPageTitle,
description: "This is the contact page",
},
};
// create a function that watches the url and calls the urlLocationHandler
const urlRoute = (event) => {
event.preventDefault();
window.history.pushState({}, "", event.target.href);
urlLocationHandler();
};
// create a function that handles the url location
const urlLocationHandler = async () => {
let location = window.location.pathname; // get the url path
// if the path length is 0, set it to primary page route
if (location.length == 0) {
location = "/";
}
// get the route object from the urlRoutes object
const route = urlRoutes.hasOwnProperty(location)
? urlRoutes[location]
: urlRoutes["404"];
// get the html from the template
const html = await fetch(route.template).then((response) => response.text());
// set the content of the content div to the html
document.getElementById("content").innerHTML = html;
// set the title of the document to the title of the route
document.title = route.title;
// set the description of the document to the description of the route
document
.querySelector('meta[name="description"]')
.setAttribute("content", route.description);
};
// add an event listener to the window that watches for url changes
window.addEventListener("popstate", urlLocationHandler);
// call the urlLocationHandler function to handle the initial url
window.route = urlRoute;
// call the urlLocationHandler function to handle the initial url
urlLocationHandler();
`