Page metadata (head)

Quickly add a description, title, open graph, etc. in your page’s document head.
This add-on will take care of the nitty-gritty.

Warning

This section is under construction.

Installation

Tip

You can use this extension with any Vite+Lit SSR setup!
It’s totally decoupled from the framework.

npm i @gracile/metadata

Usage

📄 /src/document.ts

import { htmlimport html } from '@gracile/gracile/server-html';
import { helpersimport helpers } from '@gracile/gracile/document';
import { createMetadataimport createMetadata } from '@gracile/metadata';

export const documentconst document: (props: {
    url: URL;
    title?: string;
}) => any = (propsprops: {
    url: URL;
    title?: string;
}: { urlurl: URL: URL; titletitle?: string | undefined?: string }) => htmlimport html`
  <!doctype html>
  <html lang="en">
    <head>
      <!-- SEO -->
      ${createMetadataimport createMetadata({
        siteTitlesiteTitle: string: 'My Site',
        pageTitlepageTitle: string: `My Page | ${propsprops: {
    url: URL;
    title?: string;
}.titletitle?: string | undefined ?? 'Untitled'}`,
        ogTitleogTitle: string | undefined: propsprops: {
    url: URL;
    title?: string;
}.titletitle?: string | undefined,
        pageDescriptionpageDescription: string: 'The description…',
        // ...
      })}
    </head>

    <body>
      <route-template-outlet></route-template-outlet>
    </body>
  </html>
`;

Yields (roughly):

<head>
  <!-- ... -->

  <!-- SEO -->

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link href="http://localhost:9898/" rel="canonical" />
  <meta property="og:url" content="http://localhost:9898/" />

  <meta property="og:type" content="website" />
  <meta property="og:locale" content="en_US" />

  <title>Gracile | Page metadata (head)</title>
  <meta property="og:title" content="Page metadata (head)" />
  <meta name="twitter:title" content="Page metadata (head)" />

  <meta
    name="description"
    property="og:description"
    content="The description…"
  />
  <meta name="twitter:description" content="The description…" />

  <meta property="og:image" content="/og/docs/add-ons/metadata.png" />
  <meta name="twitter:card" content="summary_large_image" />

  <meta name="author" content="Julian Cataldo" />
  <meta name="generator" content="Gracile" />

  <!-- ... -->
</head>

Yes… all that!