techdoc: base layout should support favicon configuration #54
Description
Problem
The base.njk layout template in techdoc has no favicon support at all — there are no <link rel="icon"> tags in the <head> section. This means:
- Sites using techdoc have no built-in way to configure favicons
- A "dn" favicon (from dart_node?) appears instead of the site's own favicon
- Consumers must write custom Eleventy transforms as a workaround to inject favicon
<link>tags
Expected Behavior
The techdoc plugin should either:
- Support favicon configuration through the plugin options (e.g.,
site.faviconor similar) - Include
<link rel="icon">tags inbase.njkthat sites can configure via data files - At minimum, not ship any default favicon that overrides the consumer's favicon
Current Workaround
Sites have to inject favicon links via a custom Eleventy transform:
const faviconLinks = [
' <link rel="icon" href="/favicon.ico" sizes="48x48">',
' <link rel="icon" href="/assets/images/favicon.svg" type="image/svg+xml">',
' <link rel="apple-touch-icon" href="/assets/images/apple-touch-icon.png">',
].join("\n");
eleventyConfig.addTransform("favicon", function(content) {
if (this.page.outputPath?.endsWith(".html")) {
return content.replace("</head>", faviconLinks + "\n</head>");
}
return content;
});Suggestion
Add favicon support to the plugin options and base.njk, e.g.:
// In plugin options
eleventyConfig.addPlugin(techdoc, {
site: {
favicon: '/favicon.ico',
faviconSvg: '/assets/images/favicon.svg',
appleTouchIcon: '/assets/images/apple-touch-icon.png',
},
});And in base.njk:
{% if site.favicon %}<link rel="icon" href="{{ site.favicon }}" sizes="48x48">{% endif %}
{% if site.faviconSvg %}<link rel="icon" href="{{ site.faviconSvg }}" type="image/svg+xml">{% endif %}
{% if site.appleTouchIcon %}<link rel="apple-touch-icon" href="{{ site.appleTouchIcon }}">{% endif %}The "dn" favicon should NOT be included in the package — each consumer site should be able to set their own favicon without fighting a default.