Dynamically fetch navigation entries from API
This commit is contained in:
parent
3a04888564
commit
fcb63984d1
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fwdekker/template",
|
"name": "@fwdekker/template",
|
||||||
"version": "0.0.10",
|
"version": "0.0.11",
|
||||||
"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",
|
||||||
|
|
|
@ -34,40 +34,44 @@ export const doAfterLoad = function (fun) {
|
||||||
/**
|
/**
|
||||||
* Creates a navigation element for navigating through the website.
|
* Creates a navigation element for navigating through the website.
|
||||||
*
|
*
|
||||||
* @returns {HTMLElement} a navigation element
|
* Fetches entries asynchronously from the website's API.
|
||||||
|
*
|
||||||
|
* @returns {Promise<HTMLElement>} a navigation element, eventually
|
||||||
*/
|
*/
|
||||||
export const nav = function () {
|
export const nav = async function () {
|
||||||
return h("nav.nav",
|
const entries = await fetch("https://fwdekker.com/api/nav/")
|
||||||
h("ul",
|
.then(it => it.json())
|
||||||
h("li", h("a", {href: "https://fwdekker.com/"},
|
.then(it => it.entries)
|
||||||
h("div.logo", h("img.logo", {src: "https://fwdekker.com/favicon.png"})),
|
.then(it => it.map(entry => unpackEntry(entry)))
|
||||||
h("b", "FWDekker")
|
.catch(e => {
|
||||||
)),
|
console.error("Failed to fetch navigation elements", e);
|
||||||
h("li", h("a", {href: "#", innerHTML: "Tools ▾"}),
|
return [];
|
||||||
h("ul",
|
});
|
||||||
h("li",
|
const prefix = h("li", h("a", {href: "https://fwdekker.com/"},
|
||||||
h("a", "Converter", {href: "https://fwdekker.com/tools/converter/"})
|
h("div.logo", h("img.logo", {src: "https://fwdekker.com/favicon.png"})),
|
||||||
),
|
h("b", "FWDekker")
|
||||||
h("li",
|
));
|
||||||
h("a", "Dice", {href: "https://fwdekker.com/tools/dice/"})
|
|
||||||
),
|
return h("nav.nav", h("ul", prefix, ...entries));
|
||||||
h("li",
|
};
|
||||||
h("a", "Doomsday", {href: "https://fwdekker.com/tools/doomsday/"})
|
|
||||||
),
|
/**
|
||||||
h("li",
|
* Unpacks a navigation entry returned from the navigation API into an HTML element.
|
||||||
h("a", "Interlanguage Checker", {href: "https://fwdekker.com/tools/interlanguage-checker/"})
|
*
|
||||||
),
|
* @param entry {Object} the entry to unpack
|
||||||
h("li",
|
* @returns {HTMLElement} the navigation list entry as HTML, described by its children
|
||||||
h("a", "Random FO76", {href: "https://fwdekker.com/tools/random-fo76/"})
|
*/
|
||||||
),
|
const unpackEntry = function(entry) {
|
||||||
)
|
if (entry.entries.length === 0)
|
||||||
),
|
return h("li", h("a", {href: entry.link, innerHTML: entry.name}));
|
||||||
h("li", h("a", "Gitea", {href: "https://git.fwdekker.com/"})),
|
|
||||||
h("li", h("a", "Blog", {href: "https://blog.fwdekker.com/"}))
|
return h("li",
|
||||||
)
|
h("a", {href: entry.link, innerHTML: `${entry.name} ▾`}),
|
||||||
|
h("ul", entry.entries.map(it => unpackEntry(it)))
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a header element with the given title and description.
|
* Creates a header element with the given title and description.
|
||||||
*
|
*
|
||||||
|
@ -84,6 +88,7 @@ export const header = function ({title, description}) {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a footer element with the given data.
|
* Creates a footer element with the given data.
|
||||||
*
|
*
|
||||||
|
@ -107,7 +112,6 @@ export const footer = function ({author, authorURL, license, licenseURL, vcs, vc
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Constructs a link that is used in footers.
|
* Constructs a link that is used in footers.
|
||||||
*
|
*
|
||||||
|
|
Loading…
Reference in New Issue