Use new template system

This commit is contained in:
Florine W. Dekker 2021-04-15 23:49:37 +02:00
parent c93350cd6d
commit 230d902ddc
Signed by: FWDekker
GPG Key ID: B1B567AF58D6EE0F
4 changed files with 16 additions and 18 deletions

BIN
package-lock.json generated

Binary file not shown.

View File

@ -1,6 +1,6 @@
{
"name": "tools",
"version": "1.0.5",
"version": "1.0.6",
"description": "Main page for the /tools directory.",
"author": "Felix W. Dekker",
"browser": "dist/bundle.js",
@ -15,10 +15,6 @@
"dev:server": "grunt dev:server",
"deploy": "grunt deploy"
},
"dependencies": {
"@fwdekker/template": "^0.0.27",
"hyperscript": "^2.0.2"
},
"devDependencies": {
"grunt": "^1.3.0",
"grunt-cli": "^1.4.2",

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Felix W. Dekker" />
<meta name="author" content="F.W. Dekker" />
<meta name="application-name" content="Tools" />
<meta name="description" content="FWDekker's tools" />
<meta name="theme-color" content="#0033cc" />
@ -11,6 +11,7 @@
<title>Tools | FWDekker</title>
<link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto.css" crossorigin="anonymous" />
<link rel="stylesheet" href="https://static.fwdekker.com/lib/template/1.x.x/bundle.css" crossorigin="anonymous" />
<link rel="stylesheet" href="main.css?v=%%VERSION_NUMBER%%" />
</head>
<body>
@ -41,6 +42,7 @@
<!-- Scripts -->
<script src="https://static.fwdekker.com/lib/template/1.x.x/bundle.js" crossorigin="anonymous"></script>
<script src="bundle.js?v=%%VERSION_NUMBER%%"></script>
</body>
</html>

View File

@ -1,12 +1,17 @@
import {$, doAfterLoad, footer, header, nav, showPage} from "@fwdekker/template";
import h from "hyperscript";
// noinspection JSUnresolvedVariable
const {$, doAfterLoad, footer, header, nav, showPage, stringToHtml} = window.fwdekker;
const unpackEntry = function (entry, depth = 0) {
return h("li",
h(`h${depth + 4}`, h("a", {href: entry.link, innerHTML: entry.name})),
entry.entries.length === 0 ? undefined : h("ul", entry.entries.map(it => unpackEntry(it, depth + 1)))
);
const subEntries = entry.entries.length === 0
? ""
: `<ul>` + entry.entries.map(it => unpackEntry(it, depth + 1)).join("") + `</ul>`;
return "" +
`<h${depth + 4}>` +
`<a href="${entry.link}">${entry.name}</a>` +
subEntries +
`</h${depth + 4}>`;
};
@ -14,11 +19,6 @@ doAfterLoad(() => {
$("#nav").appendChild(nav("/Tools/"));
$("#header").appendChild(header({title: "Tools", description: "An overview of tools I have created"}));
$("#footer").appendChild(footer({
author: "Felix W. Dekker",
authorURL: "https://fwdekker.com/",
license: "MIT License",
licenseURL: "https://git.fwdekker.com/FWDekker/tools/src/branch/master/LICENSE",
vcs: "git",
vcsURL: "https://git.fwdekker.com/FWDekker/tools/",
version: "v%%VERSION_NUMBER%%"
}));
@ -27,6 +27,6 @@ doAfterLoad(() => {
fetch("https://fwdekker.com/api/nav/")
.then(it => it.json())
.then(json => json.entries.find(it => it.name === "Tools"))
.then(json => h("ul", json.entries.map(entry => unpackEntry(entry))))
.then(json => stringToHtml(`<ul>${json.entries.map(entry => unpackEntry(entry)).join("")}</ul>`, "ul"))
.then(listing => $("#listing").append(listing));
});