Move nav asynchronicity into background

This commit is contained in:
Florine W. Dekker 2020-05-05 00:50:29 +02:00
parent fcb63984d1
commit 670e2a6c3a
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
2 changed files with 14 additions and 12 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@fwdekker/template", "name": "@fwdekker/template",
"version": "0.0.11", "version": "0.0.12",
"description": "The base template for pages on fwdekker.com.", "description": "The base template for pages on fwdekker.com.",
"author": "Felix W. Dekker (https://fwdekker.com)", "author": "Felix W. Dekker (https://fwdekker.com)",
"license": "MIT", "license": "MIT",

View File

@ -36,23 +36,25 @@ export const doAfterLoad = function (fun) {
* *
* Fetches entries asynchronously from the website's API. * Fetches entries asynchronously from the website's API.
* *
* @returns {Promise<HTMLElement>} a navigation element, eventually * @returns {HTMLElement} a base navigation element that will eventually be filled with contents
*/ */
export const nav = async function () { export const nav = function () {
const entries = await fetch("https://fwdekker.com/api/nav/") const base = h("ul",
h("li", h("a", {href: "https://fwdekker.com/"},
h("div.logo", h("img.logo", {src: "https://fwdekker.com/favicon.png"})),
h("b", "FWDekker")
))
);
fetch("https://fwdekker.com/api/nav/")
.then(it => it.json()) .then(it => it.json())
.then(it => it.entries) .then(json => json.entries.forEach(entry => base.appendChild(unpackEntry(entry))))
.then(it => it.map(entry => unpackEntry(entry)))
.catch(e => { .catch(e => {
console.error("Failed to fetch navigation elements", e); console.error("Failed to fetch navigation elements", e);
return []; return [];
}); });
const prefix = h("li", h("a", {href: "https://fwdekker.com/"},
h("div.logo", h("img.logo", {src: "https://fwdekker.com/favicon.png"})),
h("b", "FWDekker")
));
return h("nav.nav", h("ul", prefix, ...entries)); return h("nav.nav", base);
}; };
/** /**
@ -61,7 +63,7 @@ export const nav = async function () {
* @param entry {Object} the entry to unpack * @param entry {Object} the entry to unpack
* @returns {HTMLElement} the navigation list entry as HTML, described by its children * @returns {HTMLElement} the navigation list entry as HTML, described by its children
*/ */
const unpackEntry = function(entry) { const unpackEntry = function (entry) {
if (entry.entries.length === 0) if (entry.entries.length === 0)
return h("li", h("a", {href: entry.link, innerHTML: entry.name})); return h("li", h("a", {href: entry.link, innerHTML: entry.name}));