Skip to content

Commit acf0b35

Browse files
LadyBluenotesLadyBluenotes
authored
update router, start, meta ref docs (#1468)
1 parent 2492fae commit acf0b35

55 files changed

Lines changed: 3024 additions & 1640 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/routes/solid-meta/reference/meta/base.mdx‎

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,58 @@
22
title: Base
33
order: 5
44
use_cases: >-
5-
setting base url, relative urls, external resources, multi-page apps, cdn
6-
assets
5+
base urls, relative urls, link targets, document head
76
tags:
87
- base
9-
- url
10-
- meta
118
- head
12-
- routing
9+
- url
10+
- component
1311
version: "1.0"
1412
description: >-
15-
Set the base URL for all relative URLs in your Solid app with the Base
16-
component. Essential for apps with complex routing or external resources.
13+
Base renders a base element through Solid Meta.
1714
---
1815

19-
`Base` is a component that specifies the base URL for all relative URLs in the document.
20-
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`.
16+
`Base` adds a [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) element that sets the document base URL for resolving relative URLs.
17+
18+
## Import
2119

22-
```tsx twoslash
20+
```tsx
2321
import { Base } from "@solidjs/meta";
22+
```
23+
24+
## Type
2425

25-
<Base target="_blank" href="https://docs.solidjs.com/" />;
26+
```tsx
27+
const Base: Component<JSX.BaseHTMLAttributes<HTMLBaseElement>>;
2628
```
2729

28-
## Usage
30+
## Props
31+
32+
Accepts attributes for [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base).
2933

30-
### Adding `base` tag
34+
## Behavior
3135

32-
```tsx twoslash
36+
- Registers a self-closing `base` tag.
37+
- Non-cascading tags can add one document-head element per active instance.
38+
- Requires [`MetaProvider`](/solid-meta/reference/meta/metaprovider) in the component tree.
39+
40+
## Examples
41+
42+
### Basic usage
43+
44+
```tsx
3345
import { MetaProvider, Base } from "@solidjs/meta";
3446

35-
export default function Root() {
47+
function App() {
3648
return (
3749
<MetaProvider>
38-
<Base target="_blank" href="https://docs.solidjs.com/" />
50+
<Base href="https://docs.solidjs.com/" />
3951
</MetaProvider>
4052
);
4153
}
4254
```
55+
56+
## Related
57+
58+
- [`MetaProvider`](/solid-meta/reference/meta/metaprovider)
59+
- [`useHead`](/solid-meta/reference/meta/use-head)

‎src/routes/solid-meta/reference/meta/link.mdx‎

Lines changed: 27 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,59 @@
11
---
22
title: Link
33
order: 2
4-
use_cases: "adding favicon, stylesheets, external resources, preloading assets, web fonts"
4+
use_cases: >-
5+
links, favicons, stylesheets, preloads, external resources
56
tags:
67
- link
7-
- favicon
8-
- stylesheet
9-
- assets
108
- head
119
- resources
10+
- component
1211
version: "1.0"
1312
description: >-
14-
Add external resources like stylesheets and favicons to your Solid app. Learn
15-
to use the Link component for optimal resource loading and icons.
13+
Link renders a link element through Solid Meta.
1614
---
1715

18-
The Link component establishes a connection between the page and an external resource.
19-
Commonly, this is used for linking stylesheets and other associations.
16+
`Link` adds a [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element that defines a relationship between the document and an external resource.
2017

21-
This component renders a [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) element within the document's `<head>`.
18+
## Import
2219

23-
```tsx twoslash
20+
```tsx
2421
import { Link } from "@solidjs/meta";
25-
<Link rel="icon" href="/favicon.ico" />;
2622
```
2723

28-
## Usage
24+
## Type
2925

30-
### Adding a favicon
31-
32-
To add a favicon in an app, `<Link>` can be used to point to the asset:
26+
```tsx
27+
const Link: Component<JSX.LinkHTMLAttributes<HTMLLinkElement>>;
28+
```
3329

34-
```tsx twoslash
35-
import { MetaProvider, Link } from "@solidjs/meta";
30+
## Props
3631

37-
export default function Root() {
38-
return (
39-
<MetaProvider>
40-
<Link rel="icon" href="/favicon.ico" />
41-
</MetaProvider>
42-
);
43-
}
44-
```
32+
Accepts attributes for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link).
4533

46-
### Using an emoji as a favicon
34+
## Behavior
4735

48-
To use an emoji as a favicon, first create a function that returns a data URI containing an SVG image:
36+
- Registers a self-closing `link` tag.
37+
- Non-cascading tags can add one document-head element per active instance.
38+
- Requires [`MetaProvider`](/solid-meta/reference/meta/metaprovider) in the component tree.
4939

50-
```jsx
51-
const emojiSvg = (emoji) => {
52-
return (
53-
`data:image/svg+xml;utf8,` +
54-
`<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${emoji}</text></svg>`
55-
);
56-
};
57-
```
40+
## Examples
5841

59-
Following this, include the emoji as an argument within that function in the `href` property of the Link component:
42+
### Basic usage
6043

61-
```jsx
44+
```tsx
6245
import { MetaProvider, Link } from "@solidjs/meta";
6346

64-
export default function Root() {
47+
function App() {
6548
return (
6649
<MetaProvider>
67-
<Link rel="icon" href={emojiSvg("😎")} />
50+
<Link rel="icon" href="/favicon.ico" />
6851
</MetaProvider>
6952
);
7053
}
7154
```
55+
56+
## Related
57+
58+
- [`MetaProvider`](/solid-meta/reference/meta/metaprovider)
59+
- [`useHead`](/solid-meta/reference/meta/use-head)

‎src/routes/solid-meta/reference/meta/meta.mdx‎

Lines changed: 31 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,47 @@
22
title: Meta
33
order: 3
44
use_cases: >-
5-
seo optimization, social media tags, viewport settings, charset configuration,
6-
open graph
5+
metadata, descriptions, viewport tags, charset tags, social metadata
76
tags:
87
- meta
9-
- seo
10-
- viewport
11-
- metadata
128
- head
13-
- tags
9+
- metadata
10+
- component
1411
version: "1.0"
1512
description: >-
16-
Add SEO and viewport metadata to your Solid app with the Meta component.
17-
Configure description, keywords, and social media tags for better reach.
13+
Meta renders a meta element through Solid Meta.
1814
---
1915

20-
The `<Meta>` component represents metadata that cannot be represented by other HTML elements.
21-
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.
16+
`Meta` adds a [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) element for metadata that is not represented by another HTML metadata element.
17+
18+
## Import
2219

23-
```tsx twoslash
20+
```tsx
2421
import { Meta } from "@solidjs/meta";
22+
```
23+
24+
## Type
2525

26-
<Meta name="description" content="My site description" />;
26+
```tsx
27+
const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>>;
2728
```
2829

29-
`Meta` components can be placed in the [`MetaProvider`](/solid-meta/reference/meta/metaprovider) or added throughout the application for additional metadata or override parents.
30-
`Meta` tags are considered the same and will be overridden if `name` attributes match.
30+
## Props
3131

32-
## Usage
32+
Accepts attributes for [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta).
3333

34-
### Adding `meta` tag
34+
## Behavior
3535

36-
```tsx twoslash {6-8}
36+
- Registers a `meta` tag with self-closing server rendering.
37+
- Cascading identity uses `name`, `http-equiv`, `content`, `charset`, `media`, and `property` from the tag props.
38+
- `property` is treated as `name` when Solid Meta builds the tag key.
39+
- Requires [`MetaProvider`](/solid-meta/reference/meta/metaprovider) in the component tree.
40+
41+
## Examples
42+
43+
### Basic usage
44+
45+
```tsx
3746
import { MetaProvider, Meta } from "@solidjs/meta";
3847

3948
export default function Root() {
@@ -46,3 +55,8 @@ export default function Root() {
4655
);
4756
}
4857
```
58+
59+
## Related
60+
61+
- [`MetaProvider`](/solid-meta/reference/meta/metaprovider)
62+
- [`useHead`](/solid-meta/reference/meta/use-head)

‎src/routes/solid-meta/reference/meta/metaprovider.mdx‎

Lines changed: 55 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,70 @@
22
title: MetaProvider
33
order: 6
44
use_cases: >-
5-
initializing meta tags, wrapping app, head management setup, meta context,
6-
always in meta apps
5+
head context, metadata context, document head management
76
tags:
87
- provider
98
- meta
10-
- setup
11-
- context
12-
- wrapper
139
- head
10+
- context
11+
- component
1412
version: "1.0"
1513
description: >-
16-
MetaProvider wraps your Solid app to enable head tag management. Essential
17-
parent component for all metadata components to function properly.
14+
MetaProvider provides the context used by Solid Meta head tags.
1815
---
1916

20-
`MetaProvider` is a parent component responsible for wrapping all the metadata components.
21-
All components that are contained within this will be added to the application `<head/>`
17+
`MetaProvider` supplies the context that Solid Meta components and [`useHead`](/solid-meta/reference/meta/use-head) use to add head tags.
18+
19+
## Import
2220

23-
```tsx twoslash
21+
```tsx
2422
import { MetaProvider } from "@solidjs/meta";
23+
```
24+
25+
## Type
26+
27+
```tsx
28+
const MetaProvider: ParentComponent;
29+
```
30+
31+
## Props
32+
33+
### `children`
2534

26-
<MetaProvider>// add meta components</MetaProvider>;
35+
- **Type:** `JSX.Element`
36+
- **Optional:** Yes
37+
38+
Content rendered inside the provider.
39+
40+
## Behavior
41+
42+
- Creates a `MetaContext.Provider` for its children.
43+
- On the client, active head tags are appended to `document.head` and removed during cleanup.
44+
- During server rendering, rendered head tags are registered through `useAssets`.
45+
- Solid Meta components and [`useHead`](/solid-meta/reference/meta/use-head) throw if they run without a `MetaProvider` in the component tree.
46+
47+
## Examples
48+
49+
### Basic usage
50+
51+
```tsx
52+
import { MetaProvider, Title, Meta } from "@solidjs/meta";
53+
54+
export default function Root() {
55+
return (
56+
<MetaProvider>
57+
<Title>Solid Docs</Title>
58+
<Meta name="description" content="Solid documentation" />
59+
</MetaProvider>
60+
);
61+
}
2762
```
63+
64+
## Related
65+
66+
- [`Title`](/solid-meta/reference/meta/title)
67+
- [`Meta`](/solid-meta/reference/meta/meta)
68+
- [`Link`](/solid-meta/reference/meta/link)
69+
- [`Style`](/solid-meta/reference/meta/style)
70+
- [`Base`](/solid-meta/reference/meta/base)
71+
- [`useHead`](/solid-meta/reference/meta/use-head)

0 commit comments

Comments
 (0)