Deprecate mostly-unnecessary header function

This commit is contained in:
Florine W. Dekker 2022-11-19 17:26:07 +01:00
parent 8d5b6ef101
commit 6965a9d20e
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
5 changed files with 13 additions and 43 deletions

View File

@ -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`.

View File

@ -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",

View File

@ -77,7 +77,7 @@ noscript.fwd-js-notice p {
/* Header */ /* Header */
header.fwd-header h1 > a { header a[href="."] {
color: black; color: black;
} }

View File

@ -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(

View File

@ -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>