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 { htmlfunction html(strings: TemplateStringsArray, ...values: unknown[]): ServerRenderedTemplateA lit-html template that can only be rendered on the server, and cannot be
hydrated.
These templates can be used for rendering full documents, including the
doctype, and rendering into elements that Lit normally cannot, like
<title>, <textarea>, <template>, and non-executing <script> tags
like <script type="text/json">. They are also slightly more efficient than
normal Lit templates, because the generated HTML doesn't need to include
markers for updating.
Server-only html templates can be composed, and combined, and they support
almost all features that normal Lit templates do, with the exception of
features that don't have a pure HTML representation, like event handlers or
property bindings.
Server-only html templates can only be rendered on the server, they will
throw an Error if created in the browser. However if you render a normal Lit
template inside a server-only template, then it can be hydrated and updated.
Likewise, if you place a custom element inside a server-only template, it can
be hydrated and update like normal.
A server-only template can't be rendered inside a normal Lit template.
} from '@gracile/gracile/server-html';
import { helpersimport helpers } from '@gracile/gracile/document';
import { createMetadatafunction createMetadata(config: MetadataConfig, warn?: boolean): ServerRenderedTemplate[]Ouput all useful tags to put in document head.
} from '@gracile/metadata';
export const documentconst document: (props: {
url: URL;
title?: string;
}) => ServerRenderedTemplate = (propsprops: {
url: URL;
title?: string;
} : { urlurl: URL : URL; titletitle?: string | undefined ?: string }) => htmlfunction html(strings: TemplateStringsArray, ...values: unknown[]): ServerRenderedTemplateA lit-html template that can only be rendered on the server, and cannot be
hydrated.
These templates can be used for rendering full documents, including the
doctype, and rendering into elements that Lit normally cannot, like
<title>, <textarea>, <template>, and non-executing <script> tags
like <script type="text/json">. They are also slightly more efficient than
normal Lit templates, because the generated HTML doesn't need to include
markers for updating.
Server-only html templates can be composed, and combined, and they support
almost all features that normal Lit templates do, with the exception of
features that don't have a pure HTML representation, like event handlers or
property bindings.
Server-only html templates can only be rendered on the server, they will
throw an Error if created in the browser. However if you render a normal Lit
template inside a server-only template, then it can be hydrated and updated.
Likewise, if you place a custom element inside a server-only template, it can
be hydrated and update like normal.
A server-only template can't be rendered inside a normal Lit template.
`
<!doctype html>
<html lang="en">
<head>
<!-- SEO -->
${createMetadatafunction createMetadata(config: MetadataConfig, warn?: boolean): ServerRenderedTemplate[]Ouput all useful tags to put in document head.
({
siteTitleMetadataConfig.siteTitle?: string | undefined : 'My Site',
pageTitleMetadataConfig.pageTitle?: string | undefined : `My Page | ${propsprops: {
url: URL;
title?: string;
} .titletitle?: string | undefined ?? 'Untitled'}`,
ogTitleMetadataConfig.ogTitle?: string | undefined : propsprops: {
url: URL;
title?: string;
} .titletitle?: string | undefined ,
pageDescriptionMetadataConfig.pageDescription?: string | undefined : '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 name="twitter:url" content="http://localhost:9898/" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta name="apple-mobile-web-app-title" content="Gracile" />
<meta property="og:site_name" content="Gracile" />
<title>Gracile | Page metadata (head)</title>
<meta property="og:title" content="Page metadata (head)" />
<meta name="twitter:title" content="Page metadata (head)" />
<meta
property="og:image:alt"
content="Quickly add a description, title,
open graph, etc. in your page's document head.
This add-on will take care of the nitty-gritty."
/>
<meta
name="description"
property="og:description"
content="Quickly add a description, title,
open graph, etc. in your page's document head.
This add-on will take care of the nitty-gritty."
/>
<meta
name="twitter:description"
content="Quickly add a description, title,
open graph, etc. in your page's document head.
This add-on will take care of the nitty-gritty."
/>
<meta property="og:image" content="/og/docs/add-ons/metadata.png" />
<meta name="twitter:image:src" content="/og/docs/add-ons/metadata.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="author" content="Julian Cataldo" />
<meta name="copyright" content="ISC" />
<meta name="generator" content="Gracile v0-Alpha" />
<link type="image/svg+xml" href="/favicon.svg" rel="icon" />
<link type="application/xml" href="/sitemap.xml" rel="sitemap" />
<!-- ... -->
</head>
Yes… all that!