Netzo Logo

Head

Sets page metadata and load stylesheets and scripts.

Usage

After installation components can be imported and used directly.

routes/_app.tsx
import type { NetzoState } from "netzo/mod.ts";
import { Head } from "netzo/components/head.ts";

export default defineApp<NetzoState>((req, ctx) => {
  return (
    // ...
    <Head
      title="Customer Portal | Netzo"
      description="App for external customers to manage billing."
      favicon="/favicon.svg"
      image="/cover.svg"
    />
    // ...
  );
});
The Head component can be used from any route, be it the _app page, a _layout page or any normal page.

Props

type HeadProps = {
  /** A short title for the app to be used in head of the page. */
  title?: string;
  /** A short description for the app to be used in head of the page. */
  description?: string;
  /** An https or data URL of the favicon to be shown in browser tabs */
  favicon?: string;
  /** An https or data URL of a cover image shown when sharing the link */
  image?: string;
  /** Optional JSX content */
  children?: JSX.ComponentChildren;
}