Reuse fetched entries from template
This commit is contained in:
parent
861c552d57
commit
4a67716e13
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "tools",
|
"name": "tools",
|
||||||
"version": "1.1.3",
|
"version": "1.1.4",
|
||||||
"description": "Main page for the /tools directory.",
|
"description": "Main page for the /tools directory.",
|
||||||
"author": "Felix W. Dekker",
|
"author": "Felix W. Dekker",
|
||||||
"browser": "dist/bundle.js",
|
"browser": "dist/bundle.js",
|
||||||
|
|
|
@ -2,7 +2,14 @@
|
||||||
const {$, doAfterLoad, footer, header, nav, stringToHtml} = window.fwdekker;
|
const {$, doAfterLoad, footer, header, nav, stringToHtml} = window.fwdekker;
|
||||||
|
|
||||||
|
|
||||||
const unpackEntry = function (entry, depth = 0) {
|
/**
|
||||||
|
* Transforms the given (nested) entry into a list item to be displayed in HTML.
|
||||||
|
*
|
||||||
|
* @param entry the entry to transform
|
||||||
|
* @param depth the current level of nesting
|
||||||
|
* @returns {string} the HTML form of the given entry
|
||||||
|
*/
|
||||||
|
const unpackEntry = (entry, depth = 0) => {
|
||||||
const subEntries = entry.entries.length === 0
|
const subEntries = entry.entries.length === 0
|
||||||
? ""
|
? ""
|
||||||
: `<ul>` + entry.entries.map(it => unpackEntry(it, depth + 1)).join("") + `</ul>`;
|
: `<ul>` + entry.entries.map(it => unpackEntry(it, depth + 1)).join("") + `</ul>`;
|
||||||
|
@ -14,19 +21,24 @@ const unpackEntry = function (entry, depth = 0) {
|
||||||
`</h${depth + 4}>`;
|
`</h${depth + 4}>`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Displays the given entries on the page.
|
||||||
|
*
|
||||||
|
* @param entries the entries to display
|
||||||
|
*/
|
||||||
|
const showEntries = entries => {
|
||||||
|
const toolEntries = entries.entries.find(it => it.name === "Tools").entries;
|
||||||
|
const entryHtml = stringToHtml(`<ul>${toolEntries.map(entry => unpackEntry(entry)).join("")}</ul>`, "ul");
|
||||||
|
$("#listing").append(entryHtml);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
doAfterLoad(() => {
|
doAfterLoad(() => {
|
||||||
$("#nav").appendChild(nav("/Tools/"));
|
$("#nav").appendChild(nav("/Tools/", showEntries));
|
||||||
$("#header").appendChild(header({title: "Tools", description: "An overview of tools I have created"}));
|
$("#header").appendChild(header({title: "Tools", description: "An overview of tools I have created"}));
|
||||||
$("#footer").appendChild(footer({
|
$("#footer").appendChild(footer({
|
||||||
vcsURL: "https://git.fwdekker.com/FWDekker/tools/",
|
vcsURL: "https://git.fwdekker.com/FWDekker/tools/",
|
||||||
version: "v%%VERSION_NUMBER%%"
|
version: "v%%VERSION_NUMBER%%"
|
||||||
}));
|
}));
|
||||||
$("main").classList.remove("hidden");
|
$("main").classList.remove("hidden");
|
||||||
|
|
||||||
fetch("https://fwdekker.com/api/nav/")
|
|
||||||
.then(it => it.json())
|
|
||||||
.then(json => json.entries.find(it => it.name === "Tools"))
|
|
||||||
.then(json => stringToHtml(`<ul>${json.entries.map(entry => unpackEntry(entry)).join("")}</ul>`, "ul"))
|
|
||||||
.then(listing => $("#listing").append(listing));
|
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue