Skip to content

Commit c233f69

Browse files
farnabazfarnabaz
committed
docs: useContentHead docs
1 parent 76fe863 commit c233f69

File tree

5 files changed

+79
-9
lines changed

5 files changed

+79
-9
lines changed

‎docs/content/3.api/5.useContentHead.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: useContentHead
3+
description: The useContentHead() composable provides a binding between your content data and useHead() composable.
4+
---
5+
6+
## Type
7+
8+
```ts
9+
function useContentHead(collection: PageCollectionItemBase): void
10+
```
11+
12+
## `useContentHead(collection: PageCollectionItemBase)`{lang=ts}
13+
14+
15+
The `useContentHead()`{lang="ts-type"} composable provides a binding between your content data and [`useHead()`{lang="ts-type"}](https://nuxt.com/docs/api/composables/use-head) composable.
16+
17+
18+
Here is a list supported options that you can define in contents [Front-Matter](/usage/markdown#front-matter).
19+
20+
| Key | Type | Description |
21+
| ------------------ | :----------------: | ------------------------------------------------------------------------------------------------ |
22+
| `title`{lang="ts-type"} | `string`{lang="ts-type"} | Will be used as the default value for `seo.title`{lang="ts-type"} |
23+
| `description`{lang="ts-type"} | `string`{lang="ts-type"} | Will be used as the default value for `seo.description`{lang="ts-type"} |
24+
| `seo.title`{lang="ts-type"} | `string`{lang="ts-type"} Sets the `<title>`{lang="ts-type"} tag |
25+
| `description`{lang="ts-type"} | `string`{lang="ts-type"} | Will be used as the default value for `seo.description`{lang="ts-type"} |
26+
| `seo.description`{lang="ts-type"} | `string`{lang="ts-type"} | Sets the `<meta name="description">`{lang="ts-type"} tag |
27+
| `seo.image`{lang="ts-type"} | `string \| object`{lang="ts-type"} | Overrides the `<meta property="og:image">`{lang="ts-type"} |
28+
| `seo.image.src`{lang="ts-type"} | `string`{lang="ts-type"} | The source of the image |
29+
| `seo.image.alt`{lang="ts-type"} | `string`{lang="ts-type"} | The alt description of the image |
30+
| `seo.image.xxx`{lang="ts-type"} | `string`{lang="ts-type"} | Any [`og:image:xxx`{lang="ts-type"} compatible](https://ogp.me#structured) attribute |
31+
32+
33+
Below you can see a sample content.
34+
35+
```md [example-usage.md]
36+
---
37+
title: 'My Page Title'
38+
description: 'What a lovely page.'
39+
seo:
40+
title: Awesome Page
41+
description: Best Website event
42+
meta:
43+
- name: 'keywords'
44+
content: 'nuxt, vue, content'
45+
- name: 'robots'
46+
content: 'index, follow'
47+
- name: 'author'
48+
content: 'NuxtLabs'
49+
- name: 'copyright'
50+
content: '© 2022 NuxtLabs'
51+
---
52+
```

‎docs/content/5.deploy/0.node.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ navigation:
44
icon: i-simple-icons-nodedotjs
55
---
66

7-
Node preset is the default preset for Nuxt. It is used to build and run Nuxt applications on Node.js.
7+
Node preset is the default preset for Nuxt and Nuxt Content. It is used to build and run Nuxt applications on Node.js.
88

99
Build project with Nuxt build command:
1010

‎docs/content/5.deploy/1.cloudflare.md‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,23 @@ Or by updating your Nuxt configuration:
2121
"preset": "cloudflare_pages",
2222
```
2323

24-
::callout
25-
If you use the [Cloudflare Pages GitHub/GitLab integration][1]{target="_blank"} Nuxt does not require any type of configuration.
26-
::
24+
If you use the [Cloudflare Pages GitHub/GitLab integration][1]{target="_blank"} Nuxt does not require configuration for presets.
2725

26+
## Database
2827

28+
Unfortunately sqlite database is not supported in cloudflare environment and you should use another database.
29+
You can simply create a D1 database in cloudflare and use Content Module's D1 adapter.
2930

31+
- You can simply use [Nuxt Hub][nuxt-hub] to create, connect and manage D1 database for you.
32+
- Or you can create it directly create a D1 database from Cloudflare dashboard and connect it to you project by creating a `wrangler.toml` file in project root. [Get started with Cloudflare D1][d1]
3033

31-
[1]: https://developers.cloudflare.com/pages/get-started/#connect-your-git-provider-to-pages
34+
35+
36+
37+
38+
39+
40+
41+
[1]: https://developers.cloudflare.com/pages/get-started/#connect-your-git-provider-to-pages
42+
[nuxt-hub]: https://hub.nuxt.com/docs/features/database
43+
[d1]: https://developers.cloudflare.com/d1/get-started/

‎docs/content/5.deploy/2.vercel.md‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,19 @@ navigation:
77

88
Nuxt Content uses Nuxt deployment presets to adjust the build process for different hosting platforms. To deploy your Nuxt Content to Vercel, you can use the `vercel`{lang="ts-type"} preset.
99

10-
Note that you need to change project configuration to deploy on Vercel. Nuxt and Nuxt Content automatically detect the vercel environment and adjust build configuration for you.
10+
Note that you don't need to change project configuration to deploy on Vercel. Nuxt and Nuxt Content automatically detect the vercel environment and adjust build configuration for you.
1111

1212
You can either use [Vercel git integration][1] or [Vercel CLI][2].
1313

14+
## Database
15+
16+
Unfortunately sqlite database is not supported in Vercel environment and you should use another database.
17+
You can simply create a [Vercel Postgres][3] database and use Content Module's Postgres adapter.
18+
19+
Checkout [official documentation][4] to create a Vercel Postgress database and connect it to your Vercel project. Nuxt Content will automatically detect connection url from environment variables in production.
1420

1521

1622
[1]: https://vercel.com/docs/deployments/git
17-
[2]: https://vercel.com/docs/cli
23+
[2]: https://vercel.com/docs/cli
24+
[3]: https://vercel.com/storage/postgres
25+
[4]: https://vercel.com/docs/storage/vercel-postgres/quickstart#quickstart

‎docs/content/6.snippets/1.fulltext-search.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
---
22
title: Full-Text Search
33
description: Implement full-text search in your website using Nuxt Content
4-
navigation:
5-
icon: i-heroicons-document-magnifying-glass
64
---
75

86
Content module expose a handy utility [`queryCollectionSearchSections`{lang="ts-type"}][1] to break down content files into searchable sections. This is useful for implementing full-text search in your website.

0 commit comments

Comments
 (0)