zhead

\n\n

\n\n\n $\"NPM$ \n $\"NPM$ \n $\"GitHub$ \n

\n\n\n

\nAll of the TypeScript definitions for <head>.

Powering Unhead.\n

\n\n

\n\n\n\n\n
\n
\nStatus: Stable
\n^{Please report any issues ????}
\n_{Made possible by my Sponsor Program ????
Follow me @harlan_zw ???? • Join Discord for help}
\n\n
\n

\n\n## Features\n\n- ???? Fully typed Head schema\n- ???? Commented with MDN docs\n- ???? Fully Augmentable\n- ???? [100+ typed meta's](https://github.com/harlan-zw/zhead/blob/main/packages/schema/src/metaFlat.ts)\n\n## Installation\n\n```bash\nnpm install --save-dev zhead\n\n# Using yarn\nyarn add --dev zhead\n```\n\n## Types\n\n### Head\n\nTypescript base schema for document <head>.\n\n```ts\nexport interface Head extends BaseHead {\n /**\n * The HTML element defines the document's title that is shown in a browser's title bar or a page's tab.\n * It only contains text; tags within the element are ignored.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title\n */\n title?: string\n /**\n * The <base> HTML element specifies the base URL to use for all relative URLs in a document.\n * There can be only one <base> element in a document.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base\n */\n base?: Partial<Merge<E['base'], Base>>\n /**\n * The <link> HTML element specifies relationships between the current document and an external resource.\n * This element is most commonly used to link to stylesheets, but is also used to establish site icons\n * (both \"favicon\" style icons and icons for the home screen and apps on mobile devices) among other things.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-as\n */\n link?: (Link & DataKeys & DefinedValueOrEmptyObject<E['link']>)[]\n /**\n * The <meta> element represents metadata that cannot be expressed in other HTML elements, like <link> or <script>.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta\n */\n meta?: (Meta & DataKeys & DefinedValueOrEmptyObject<E['meta']>)[]\n /**\n * The <style> HTML element contains style information for a document, or part of a document.\n * It contains CSS, which is applied to the contents of the document containing the <style> element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style\n */\n style?: (Style & DataKeys & DefinedValueOrEmptyObject<E['style']>)[]\n /**\n * The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script\n */\n script?: (Script & DataKeys & DefinedValueOrEmptyObject<E['script']>)[]\n /**\n * The <noscript> HTML element defines a section of HTML to be inserted if a script type on the page is unsupported\n * or if scripting is currently turned off in the browser.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript\n */\n noscript?: (Noscript & DataKeys & DefinedValueOrEmptyObject<E['noscript']>)[]\n /**\n * Attributes for the <html> HTML element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html\n */\n htmlAttrs?: (HtmlAttributes & DataKeys & DefinedValueOrEmptyObject<E['htmlAttrs']>)\n /**\n * Attributes for the <body> HTML element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body\n */\n bodyAttrs?: (BodyAttributes & DataKeys & DefinedValueOrEmptyObject<E['bodyAttrs']>)\n}\n```\n\n### Flat Meta\n\nSee [metaFlat.ts](/src/metaFlat.ts) for the full list.\n\n```ts\n// SAMPLE\n\nexport interface MetaFlat {\n /**\n * This attribute declares the document's character encoding.\n * If the attribute is present, its value must be an ASCII case-insensitive match for the string \"utf-8\",\n * because UTF-8 is the only valid encoding for HTML5 documents.\n * <meta> elements which declare a character encoding must be located entirely within the first 1024 bytes\n * of the document.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset\n */\n charset: string\n /**\n * Use this tag to provide a short description of the page.\n * In some situations, this description is used in the snippet shown in search results.\n *\n * @see https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions\n */\n description: string\n /**\n * This tag tells the browser how to render a page on a mobile device.\n * Presence of this tag indicates to Google that the page is mobile friendly.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name#standard_metadata_names_defined_in_other_specifications\n */\n viewport: string | Partial<{\n /**\n * Defines the pixel width of the viewport that you want the web site to be rendered at.\n */\n width: number | string | 'device-width'\n /**\n * Defines the height of the viewport. Not used by any browser.\n */\n height: number | string | 'device-height'\n /**\n * Defines the ratio between the device width\n * (device-width in portrait mode or device-height in landscape mode) and the viewport size.\n *\n * @minimum 0\n * @maximum 10\n */\n initialScale: number | string\n /**\n * Defines the maximum amount to zoom in.\n * It must be greater or equal to the minimum-scale or the behavior is undefined.\n * Browser settings can ignore this rule and iOS10+ ignores it by default.\n *\n * @minimum 0\n * @maximum 10\n */\n maximumScale: number | string\n /**\n * Defines the minimum zoom level. It must be smaller or equal to the maximum-scale or the behavior is undefined.\n * Browser settings can ignore this rule and iOS10+ ignores it by default.\n *\n * @minimum 0\n * @maximum 10\n */\n minimumScale: number | string\n /**\n * If set to no, the user is unable to zoom in the webpage.\n * The default is yes. Browser settings can ignore this rule, and iOS10+ ignores it by default.\n */\n userScalable: 'yes' | 'no'\n /**\n * The auto value doesn't affect the initial layout viewport, and the whole web page is viewable.\n *\n * The contain value means that the viewport is scaled to fit the largest rectangle inscribed within the display.\n *\n * The cover value means that the viewport is scaled to fill the device display.\n * It is highly recommended to make use of the safe area inset variables to ensure that important content\n * doesn't end up outside the display.\n */\n viewportFit: 'auto' | 'contain' | 'cover'\n }>\n\n // ...\n}\n```\n\n## API\n\n### defineHead\n\nUse this decorator for a simple fully-typed head schema.\n\n```ts\nimport { defineHead } from 'zhead'\n\nconst head = defineHead({\n title: 'My Page',\n})\n\n// {\n// title: 'My Page',\n// }\n```\n\n## Sponsors\n\n<p align=\"center\">\n <a href=\"https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg\">\n <img src='https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg'/>\n </a>\n</p>\n\n\n## License\n\nMIT License © 2022-PRESENT [Harlan Wilton](https://github.com/harlan-zw)\n","_attachments":{},"homepage":"https://github.com/harlan-zw/zhead#readme","bugs":{"url":"https://github.com/harlan-zw/zhead/issues"},"license":"MIT"}