parent
b756a2cc44
commit
161a36b308
Binary file not shown.
10
package.json
10
package.json
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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};
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue