Skip to content

techdoc: base layout should support favicon configuration #54

Description

@MelbourneDeveloper

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:

  1. Sites using techdoc have no built-in way to configure favicons
  2. A "dn" favicon (from dart_node?) appears instead of the site's own favicon
  3. 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.favicon or similar)
  • Include <link rel="icon"> tags in base.njk that 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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions