88 lines
1.6 KiB
JavaScript
88 lines
1.6 KiB
JavaScript
// Top nav
|
|
const skipLink = {
|
|
href: "#main",
|
|
title: "skip to main content",
|
|
text: "skip to main content"
|
|
}
|
|
|
|
const homeLink = {
|
|
href: "/",
|
|
title: "home page",
|
|
text: "Firstname Lastname"
|
|
}
|
|
|
|
const navLinks = [
|
|
{
|
|
href: "/one",
|
|
title: "dummy link one",
|
|
text: "nav one"
|
|
},
|
|
{
|
|
href: "/two",
|
|
title: "dummy link two",
|
|
text: "nav two"
|
|
},
|
|
{
|
|
href: "/three",
|
|
title: "dummy link three",
|
|
text: "nav three"
|
|
}
|
|
]
|
|
|
|
const createLink = function(link, currentPath) {
|
|
const a = document.createElement("a");
|
|
a.href = link.href;
|
|
a.title = link.title;
|
|
a.innerHTML = link.text;
|
|
|
|
if (link.href === currentPath) a.classList.add("current-page");
|
|
|
|
return a;
|
|
}
|
|
|
|
const createSkipLink = function(path) {
|
|
const a = createLink(skipLink, path);
|
|
a.id = "skip";
|
|
return a;
|
|
}
|
|
|
|
const createTitle = function(path) {
|
|
const h2 = document.createElement("h2");
|
|
h2.append(createLink(homeLink, path));
|
|
return h2;
|
|
}
|
|
|
|
const createNavLink = function(link) {
|
|
const li = document.createElement("li");
|
|
li.append(createLink(link));
|
|
return li;
|
|
}
|
|
|
|
const populateNav = function() {
|
|
nav = document.getElementById("top-nav");
|
|
let path = window.location.pathname;
|
|
|
|
nav.append(createSkipLink(path));
|
|
nav.append(createTitle(path));
|
|
|
|
const ul = document.createElement("ul");
|
|
for (const link of navLinks) ul.append(createNavLink(link, path));
|
|
nav.append(ul);
|
|
}
|
|
|
|
populateNav();
|
|
|
|
// Footer
|
|
const footerHTML = `
|
|
<p>2026</p>
|
|
<p>Firstname Lastname</p>
|
|
<p><a href="/attribution">attribution</a></p>
|
|
`
|
|
|
|
const populateFooter = function() {
|
|
const footer = document.getElementById("footer");
|
|
footer.innerHTML = footerHTML;
|
|
}
|
|
|
|
populateFooter();
|
