diff --git a/src/routes/solid-meta/reference/meta/base.mdx b/src/routes/solid-meta/reference/meta/base.mdx index 91a1607df..acf5be624 100644 --- a/src/routes/solid-meta/reference/meta/base.mdx +++ b/src/routes/solid-meta/reference/meta/base.mdx @@ -2,41 +2,58 @@ title: Base order: 5 use_cases: >- - setting base url, relative urls, external resources, multi-page apps, cdn - assets + base urls, relative urls, link targets, document head tags: - base - - url - - meta - head - - routing + - url + - component version: "1.0" description: >- - Set the base URL for all relative URLs in your Solid app with the Base - component. Essential for apps with complex routing or external resources. + Base renders a base element through Solid Meta. --- -`Base` is a component that specifies the base URL for all relative URLs in the document. -This provides a way to define the [`base`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) element of your document's `head`. +`Base` adds a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) element that sets the document base URL for resolving relative URLs. + +## Import -```tsx twoslash +```tsx import { Base } from "@solidjs/meta"; +``` + +## Type -; +```tsx +const Base: Component>; ``` -## Usage +## Props + +Accepts attributes for [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base). -### Adding `base` tag +## Behavior -```tsx twoslash +- Registers a self-closing `base` tag. +- Non-cascading tags can add one document-head element per active instance. +- Requires [`MetaProvider`](/solid-meta/reference/meta/metaprovider) in the component tree. + +## Examples + +### Basic usage + +```tsx import { MetaProvider, Base } from "@solidjs/meta"; -export default function Root() { +function App() { return ( - + ); } ``` + +## Related + +- [`MetaProvider`](/solid-meta/reference/meta/metaprovider) +- [`useHead`](/solid-meta/reference/meta/use-head) diff --git a/src/routes/solid-meta/reference/meta/link.mdx b/src/routes/solid-meta/reference/meta/link.mdx index 3220ebf12..8c5119ee5 100644 --- a/src/routes/solid-meta/reference/meta/link.mdx +++ b/src/routes/solid-meta/reference/meta/link.mdx @@ -1,71 +1,59 @@ --- title: Link order: 2 -use_cases: "adding favicon, stylesheets, external resources, preloading assets, web fonts" +use_cases: >- + links, favicons, stylesheets, preloads, external resources tags: - link - - favicon - - stylesheet - - assets - head - resources + - component version: "1.0" description: >- - Add external resources like stylesheets and favicons to your Solid app. Learn - to use the Link component for optimal resource loading and icons. + Link renders a link element through Solid Meta. --- -The Link component establishes a connection between the page and an external resource. -Commonly, this is used for linking stylesheets and other associations. +`Link` adds a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element that defines a relationship between the document and an external resource. -This component renders a [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element within the document's ``. +## Import -```tsx twoslash +```tsx import { Link } from "@solidjs/meta"; -; ``` -## Usage +## Type -### Adding a favicon - -To add a favicon in an app, `` can be used to point to the asset: +```tsx +const Link: Component>; +``` -```tsx twoslash -import { MetaProvider, Link } from "@solidjs/meta"; +## Props -export default function Root() { - return ( - - - - ); -} -``` +Accepts attributes for [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link). -### Using an emoji as a favicon +## Behavior -To use an emoji as a favicon, first create a function that returns a data URI containing an SVG image: +- Registers a self-closing `link` tag. +- Non-cascading tags can add one document-head element per active instance. +- Requires [`MetaProvider`](/solid-meta/reference/meta/metaprovider) in the component tree. -```jsx -const emojiSvg = (emoji) => { - return ( - `data:image/svg+xml;utf8,` + - `${emoji}` - ); -}; -``` +## Examples -Following this, include the emoji as an argument within that function in the `href` property of the Link component: +### Basic usage -```jsx +```tsx import { MetaProvider, Link } from "@solidjs/meta"; -export default function Root() { +function App() { return ( - + ); } ``` + +## Related + +- [`MetaProvider`](/solid-meta/reference/meta/metaprovider) +- [`useHead`](/solid-meta/reference/meta/use-head) diff --git a/src/routes/solid-meta/reference/meta/meta.mdx b/src/routes/solid-meta/reference/meta/meta.mdx index 27ed5cfc1..c42631930 100644 --- a/src/routes/solid-meta/reference/meta/meta.mdx +++ b/src/routes/solid-meta/reference/meta/meta.mdx @@ -2,38 +2,47 @@ title: Meta order: 3 use_cases: >- - seo optimization, social media tags, viewport settings, charset configuration, - open graph + metadata, descriptions, viewport tags, charset tags, social metadata tags: - meta - - seo - - viewport - - metadata - head - - tags + - metadata + - component version: "1.0" description: >- - Add SEO and viewport metadata to your Solid app with the Meta component. - Configure description, keywords, and social media tags for better reach. + Meta renders a meta element through Solid Meta. --- -The `` component represents metadata that cannot be represented by other HTML elements. -It is a wrapper for the native [`meta`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) element and has the same properties. +`Meta` adds a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) element for metadata that is not represented by another HTML metadata element. + +## Import -```tsx twoslash +```tsx import { Meta } from "@solidjs/meta"; +``` + +## Type -; +```tsx +const Meta: Component>; ``` -`Meta` components can be placed in the [`MetaProvider`](/solid-meta/reference/meta/metaprovider) or added throughout the application for additional metadata or override parents. -`Meta` tags are considered the same and will be overridden if `name` attributes match. +## Props -## Usage +Accepts attributes for [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta). -### Adding `meta` tag +## Behavior -```tsx twoslash {6-8} +- Registers a `meta` tag with self-closing server rendering. +- Cascading identity uses `name`, `http-equiv`, `content`, `charset`, `media`, and `property` from the tag props. +- `property` is treated as `name` when Solid Meta builds the tag key. +- Requires [`MetaProvider`](/solid-meta/reference/meta/metaprovider) in the component tree. + +## Examples + +### Basic usage + +```tsx import { MetaProvider, Meta } from "@solidjs/meta"; export default function Root() { @@ -46,3 +55,8 @@ export default function Root() { ); } ``` + +## Related + +- [`MetaProvider`](/solid-meta/reference/meta/metaprovider) +- [`useHead`](/solid-meta/reference/meta/use-head) diff --git a/src/routes/solid-meta/reference/meta/metaprovider.mdx b/src/routes/solid-meta/reference/meta/metaprovider.mdx index e1debf701..865947d37 100644 --- a/src/routes/solid-meta/reference/meta/metaprovider.mdx +++ b/src/routes/solid-meta/reference/meta/metaprovider.mdx @@ -2,26 +2,70 @@ title: MetaProvider order: 6 use_cases: >- - initializing meta tags, wrapping app, head management setup, meta context, - always in meta apps + head context, metadata context, document head management tags: - provider - meta - - setup - - context - - wrapper - head + - context + - component version: "1.0" description: >- - MetaProvider wraps your Solid app to enable head tag management. Essential - parent component for all metadata components to function properly. + MetaProvider provides the context used by Solid Meta head tags. --- -`MetaProvider` is a parent component responsible for wrapping all the metadata components. -All components that are contained within this will be added to the application `` +`MetaProvider` supplies the context that Solid Meta components and [`useHead`](/solid-meta/reference/meta/use-head) use to add head tags. + +## Import -```tsx twoslash +```tsx import { MetaProvider } from "@solidjs/meta"; +``` + +## Type + +```tsx +const MetaProvider: ParentComponent; +``` + +## Props + +### `children` -// add meta components; +- **Type:** `JSX.Element` +- **Optional:** Yes + +Content rendered inside the provider. + +## Behavior + +- Creates a `MetaContext.Provider` for its children. +- On the client, active head tags are appended to `document.head` and removed during cleanup. +- During server rendering, rendered head tags are registered through `useAssets`. +- Solid Meta components and [`useHead`](/solid-meta/reference/meta/use-head) throw if they run without a `MetaProvider` in the component tree. + +## Examples + +### Basic usage + +```tsx +import { MetaProvider, Title, Meta } from "@solidjs/meta"; + +export default function Root() { + return ( + + Solid Docs + + + ); +} ``` + +## Related + +- [`Title`](/solid-meta/reference/meta/title) +- [`Meta`](/solid-meta/reference/meta/meta) +- [`Link`](/solid-meta/reference/meta/link) +- [`Style`](/solid-meta/reference/meta/style) +- [`Base`](/solid-meta/reference/meta/base) +- [`useHead`](/solid-meta/reference/meta/use-head) diff --git a/src/routes/solid-meta/reference/meta/style.mdx b/src/routes/solid-meta/reference/meta/style.mdx index eb66313a8..b7d05ff9f 100644 --- a/src/routes/solid-meta/reference/meta/style.mdx +++ b/src/routes/solid-meta/reference/meta/style.mdx @@ -1,45 +1,54 @@ --- title: Style order: 4 -use_cases: "inline styles, critical css, theme styles, dynamic styling, css-in-js" +use_cases: >- + style tags, inline css, document head tags: - style - - css - - inline - - styling - head + - css + - component version: "1.0" description: >- - Add inline CSS styles to your Solid app's head with the Style component. - Useful for critical CSS and dynamic styling needs in your application. + Style renders a style element through Solid Meta. --- -`Style` is a component that adds the [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element to your document's `head`. +`Style` adds a [`; +```tsx +const Style: Component>; ``` -## Usage +## Props + +Accepts attributes for [`