[modules] add `head` module (inject metadata, links, scripts)

Currently, passing metadata, links (e.g. stylesheets), scripts, etc can only be done programatically on a per-route basis or at any given layout using <head> or creating a custom fresh plugin to simply inject this (e.g. via middleware). A new module should be provided to allow to more easily configure the head (global) to the project:

export default defineNetzoConfig({
  modules: {
    head: {
      favicon: "...",
      links: [
        { rel: "stylesheet", type: "text/css", href: "..." }
      ],
      links: [
        { type: "module", src: "..." }
      ]
    }
  }
})

NOTE: the title and description and favicon fields should be ported from the appLayout plugin to here.

Notes

These functions can use the following injectStylesheet and injectScript utilities from netzo/modules/utils.ts:

export function injectStylesheet(options: Partial<HTMLLinkElement>) {
  const stylesheet = document.createElement("link");
  stylesheet.rel = "stylesheet";
  stylesheet.type = "text/css";
  Object.entries(options).forEach(([key, value]) => {
    // deno-lint-ignore no-explicit-any
    (stylesheet as any)[key] = value;
  });
  document.head.appendChild(stylesheet);
}

export function injectScript(
  options: Partial<HTMLScriptElement & Record<string, unknown>>,
) {
  const script = document.createElement("script");
  Object.entries(options).forEach(([key, value]) => {
    // deno-lint-ignore no-explicit-any
    (script as any)[key] = value;
  });
  document.head.appendChild(script);
}

netzo / fresh-netzo

[modules] add `head` module (inject metadata, links, scripts) #54

Notes