Add template elements based on meta tags

Fixes #20.
This commit is contained in:
Florine W. Dekker 2021-06-08 22:56:51 +02:00
parent b756a2cc44
commit 161a36b308
Signed by: FWDekker
GPG Key ID: 78B3EAF58145AF25
4 changed files with 70 additions and 19 deletions

BIN
package-lock.json generated

Binary file not shown.

View File

@ -1,6 +1,6 @@
{
"name": "@fwdekker/template",
"version": "2.4.1",
"version": "2.5.0",
"description": "The base template for pages on fwdekker.com.",
"author": "Felix W. Dekker",
"license": "MIT",
@ -28,14 +28,14 @@
"normalize.css": "^8.0.1"
},
"devDependencies": {
"grunt": "^1.4.0",
"grunt-cli": "^1.4.2",
"grunt": "^1.4.1",
"grunt-cli": "^1.4.3",
"grunt-contrib-clean": "^2.0.0",
"grunt-contrib-cssmin": "^4.0.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-focus": "^1.0.0",
"grunt-webpack": "^4.0.3",
"webpack": "^5.36.0",
"webpack-cli": "^4.6.0"
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2"
}
}

View File

@ -193,5 +193,60 @@ const footerLink = function(prefix, text, url, suffix) {
};
/**
* Runs the functions `nav`, `header`, and `footer` after the page has loaded using properties defined in the meta tags.
*
* The remaining functions are invoked only if the corresponding `target` meta property is set to select an existing
* element. The HTML element returned by the function is then added as a child to the element specified by the query
* selector in the `target` property. The parameters to the function invocation can be set using other meta properties.
* The format of meta properties is `fwd:<function>:<property>`, where `property` is the same as the name of the
* parameter of that function, except that instead of camelcase words are separated by dashes. For example, `vcsURL`
* becomes `vcs-url`.
*
* Meta properties can be set by including `<meta name="fwd:<function>:<property>" content="<value>" />` in the HTML
* page on which this module is included. The `<value>` is then passed without modification as a parameter to the
* function. Leaving out the `<value>` by writing `<meta name="fwd:<function>:property" />` instead results in passing
* `null` as the value. Not including the meta tag at all corresponds to passing `undefined` to the function. See the
* documentation of the respective functions for more details on the parameters that they accept.
*
* Note that the function is invoked only if `fwd:<function>:target` is a query selector for an existing element. This
* means that it is possible to mix how the functions are invoked; for example, one can use meta properties to pass
* parameters to `nav`, but also invoke `header` in a separate function manually.
*/
doAfterLoad(() => {
const getMetaProperty = (name) => {
const element = $(`meta[name="${name}"]`);
return element === null ? undefined : element.getAttribute("content");
};
const navTarget = $(getMetaProperty("fwd:nav:target"));
if (navTarget !== null) {
navTarget.appendChild(nav(getMetaProperty("fwd:nav:highlight-path")));
}
const headerTarget = $(getMetaProperty("fwd:header:target"));
if (headerTarget !== null) {
headerTarget.appendChild(header({
title: getMetaProperty("fwd:header:title"),
description: getMetaProperty("fwd:header:description"),
}));
}
const footerTarget = $(getMetaProperty("fwd:footer:target"));
if (footerTarget !== null) {
footerTarget.appendChild(footer({
author: getMetaProperty("fwd:footer:author"),
authorURL: getMetaProperty("fwd:footer:author-url"),
license: getMetaProperty("fwd:footer:license"),
licenseURL: getMetaProperty("fwd:footer:license-url"),
vcs: getMetaProperty("fwd:footer:vcs"),
vcsURL: getMetaProperty("fwd:footer:vcs-url"),
version: getMetaProperty("fwd:footer:version"),
privacyPolicyURL: getMetaProperty("fwd:footer:privacy-policy-url"),
}));
}
});
// Export to namespace
fwdekker = {stringToHtml, $, doAfterLoad, nav, header, footer};

View File

@ -8,6 +8,15 @@
<meta name="description" content="A test page" />
<meta name="theme-color" content="#0033cc" />
<meta name="fwd:nav:target" content="#nav" />
<meta name="fwd:nav:highlight-path" content="/Tools/Dice/" />
<meta name="fwd:header:target" content="#header" />
<meta name="fwd:header:title" content="Test" />
<meta name="fwd:header:description" content="A test page" />
<meta name="fwd:footer:target" content="#footer" />
<meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/FWDekker/fwdekker-template/" />
<meta name="fwd:footer:version" content="vTEST" />
<title>Tools | FWDekker</title>
<link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
@ -22,7 +31,7 @@
instructions on how to enable JavaScript in your web browser</a>.
</p>
</noscript>
<main class="hidden">
<main>
<div id="nav"></div>
<div id="contents">
<div id="header"></div>
@ -38,18 +47,5 @@
<!--suppress HtmlUnknownTarget -->
<script src="../../dist/template.js"></script>
<script>
const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
doAfterLoad(() => {
$("#nav").appendChild(nav("/Tools/Dice/"));
$("#header").appendChild(header({title: "Test", description: "A test page"}));
$("#footer").appendChild(footer({
vcsURL: "https://git.fwdekker.com/FWDekker/fwdekker-template/",
version: "vTEST"
}));
$("main").classList.remove("hidden");
});
</script>
</body>
</html>