Deprecate mostly-unnecessary header function
This commit is contained in:
parent
8d5b6ef101
commit
6965a9d20e
|
@ -1,7 +1,7 @@
|
||||||
# FWDekker Template
|
# FWDekker Template
|
||||||
The base template for pages on fwdekker.com.
|
The base template for pages on fwdekker.com.
|
||||||
|
|
||||||
This module contains templating functions (e.g. `header`, `footer`), CSS libraries, and some common utility methods that
|
This module contains templating functions (e.g. `nav`, `footer`), CSS libraries, and some common utility methods that
|
||||||
are used on nearly all pages anyway.
|
are used on nearly all pages anyway.
|
||||||
|
|
||||||
The main functionality is provided in `template.js` and `template.css`.
|
The main functionality is provided in `template.js` and `template.css`.
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@fwdekker/template",
|
"name": "@fwdekker/template",
|
||||||
"version": "3.0.0",
|
"version": "3.0.0-RC1",
|
||||||
"description": "The base template for pages on fwdekker.com.",
|
"description": "The base template for pages on fwdekker.com.",
|
||||||
"author": "Florine W. Dekker",
|
"author": "Florine W. Dekker",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
|
@ -77,7 +77,7 @@ noscript.fwd-js-notice p {
|
||||||
|
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
header.fwd-header h1 > a {
|
header a[href="."] {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -122,27 +122,6 @@ const unpackEntry = function(entry, path = "/", highlightPath = "") {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates a header element with the given title and description.
|
|
||||||
*
|
|
||||||
* @param [title] {string} the title to display, possibly including HTML
|
|
||||||
* @param [description] {string} the description to display, possibly including HTML
|
|
||||||
* @returns {HTMLElement} a header element
|
|
||||||
*/
|
|
||||||
const header = function({title, description}) {
|
|
||||||
if (title === undefined && description === undefined)
|
|
||||||
return stringToHtml(`<header></header>`, "header");
|
|
||||||
|
|
||||||
return stringToHtml(
|
|
||||||
`<header class="fwd-header"><hgroup>` +
|
|
||||||
(title !== undefined ? `<h1><a href="./">${title}</a></h1>` : "") +
|
|
||||||
(description !== undefined ? `<h2>${description}</h2>` : "") +
|
|
||||||
`</hgroup></header>`,
|
|
||||||
"header"
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a footer element with the given data.
|
* Creates a footer element with the given data.
|
||||||
*
|
*
|
||||||
|
@ -211,10 +190,10 @@ const footerLink = function(prefix, text, url, suffix) {
|
||||||
* Runs the functions `nav` and `footer` after the page has loaded using properties defined in the meta tags.
|
* Runs the functions `nav` and `footer` after the page has loaded using properties defined in the meta tags.
|
||||||
*
|
*
|
||||||
* Meta tags are read as interpreted as `<meta name="fwd:<function>:<property>" content="<value>" />` from the
|
* Meta tags are read as interpreted as `<meta name="fwd:<function>:<property>" content="<value>" />` from the
|
||||||
* document's head. Given a `function` of `nav`, `header`, or `footer`, if the `value` of `fwd:<function>:target` is the
|
* document's head. Given a `function` of `nav` or `footer`, if the `value` of `fwd:<function>:target` is the ID of an
|
||||||
* ID of an element in the page, that element is replaced by the output of `function`. The `function` is invoked with
|
* element in the page, that element is replaced by the output of `function`. The `function` is invoked with parameters
|
||||||
* parameters also read from meta elements, where each `property` is the same as the name of the parameter of that
|
* also read from meta elements, where each `property` is the same as the name of the parameter of that function, except
|
||||||
* function, except that instead of camelcase words are separated by dashes. For example, `vcsURL` becomes `vcs-url`.
|
* that instead of camelcase words are separated by dashes. For example, `vcsURL` becomes `vcs-url`.
|
||||||
*/
|
*/
|
||||||
doAfterLoad(() => {
|
doAfterLoad(() => {
|
||||||
const getMetaProperty = (name) => {
|
const getMetaProperty = (name) => {
|
||||||
|
@ -230,17 +209,6 @@ doAfterLoad(() => {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const headerTarget = $(getMetaProperty("fwd:header:target"));
|
|
||||||
if (headerTarget !== null) {
|
|
||||||
headerTarget.parentElement.replaceChild(
|
|
||||||
header({
|
|
||||||
title: getMetaProperty("fwd:header:title"),
|
|
||||||
description: getMetaProperty("fwd:header:description"),
|
|
||||||
}),
|
|
||||||
headerTarget
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const footerTarget = $(getMetaProperty("fwd:footer:target"));
|
const footerTarget = $(getMetaProperty("fwd:footer:target"));
|
||||||
if (footerTarget !== null) {
|
if (footerTarget !== null) {
|
||||||
footerTarget.parentElement.replaceChild(
|
footerTarget.parentElement.replaceChild(
|
||||||
|
|
|
@ -10,9 +10,6 @@
|
||||||
|
|
||||||
<meta name="fwd:nav:target" content="#nav" />
|
<meta name="fwd:nav:target" content="#nav" />
|
||||||
<meta name="fwd:nav:highlight-path" content="/Tools/Dice/" />
|
<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:target" content="#footer" />
|
||||||
<meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/FWDekker/fwdekker-template/" />
|
<meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/FWDekker/fwdekker-template/" />
|
||||||
<meta name="fwd:footer:version" content="vTEST" />
|
<meta name="fwd:footer:version" content="vTEST" />
|
||||||
|
@ -44,7 +41,12 @@
|
||||||
</aside>
|
</aside>
|
||||||
<div role="document">
|
<div role="document">
|
||||||
<section>
|
<section>
|
||||||
<header id="header"></header>
|
<header id="header">
|
||||||
|
<hgroup>
|
||||||
|
<h1><a href=".">Test</a></h1>
|
||||||
|
<h2>A test page</h2>
|
||||||
|
</hgroup>
|
||||||
|
</header>
|
||||||
|
|
||||||
<p>This <a href="./" target="_blank">is an external link</a> in a sentence.</p>
|
<p>This <a href="./" target="_blank">is an external link</a> in a sentence.</p>
|
||||||
<p>These are some more contents.</p>
|
<p>These are some more contents.</p>
|
||||||
|
|
Loading…
Reference in New Issue