Skip to content

Commit

Permalink
docs: useContentHead docs
Browse files Browse the repository at this point in the history
  • Loading branch information
farnabaz committed Nov 5, 2024
1 parent 76fe863 commit c233f69
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 9 deletions.
52 changes: 52 additions & 0 deletions docs/content/3.api/5.useContentHead.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
title: useContentHead
description: The useContentHead() composable provides a binding between your content data and useHead() composable.
---

## Type

```ts
function useContentHead(collection: PageCollectionItemBase): void
```

## `useContentHead(collection: PageCollectionItemBase)`{lang=ts}


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.


Here is a list supported options that you can define in contents [Front-Matter](/usage/markdown#front-matter).

| Key | Type | Description |
| ------------------ | :----------------: | ------------------------------------------------------------------------------------------------ |
| `title`{lang="ts-type"} | `string`{lang="ts-type"} | Will be used as the default value for `seo.title`{lang="ts-type"} |
| `description`{lang="ts-type"} | `string`{lang="ts-type"} | Will be used as the default value for `seo.description`{lang="ts-type"} |
| `seo.title`{lang="ts-type"} | `string`{lang="ts-type"} Sets the `<title>`{lang="ts-type"} tag |
| `description`{lang="ts-type"} | `string`{lang="ts-type"} | Will be used as the default value for `seo.description`{lang="ts-type"} |
| `seo.description`{lang="ts-type"} | `string`{lang="ts-type"} | Sets the `<meta name="description">`{lang="ts-type"} tag |
| `seo.image`{lang="ts-type"} | `string \| object`{lang="ts-type"} | Overrides the `<meta property="og:image">`{lang="ts-type"} |
| `seo.image.src`{lang="ts-type"} | `string`{lang="ts-type"} | The source of the image |
| `seo.image.alt`{lang="ts-type"} | `string`{lang="ts-type"} | The alt description of the image |
| `seo.image.xxx`{lang="ts-type"} | `string`{lang="ts-type"} | Any [`og:image:xxx`{lang="ts-type"} compatible](https://ogp.me#structured) attribute |


Below you can see a sample content.

```md [example-usage.md]
---
title: 'My Page Title'
description: 'What a lovely page.'
seo:
title: Awesome Page
description: Best Website event
meta:
- name: 'keywords'
content: 'nuxt, vue, content'
- name: 'robots'
content: 'index, follow'
- name: 'author'
content: 'NuxtLabs'
- name: 'copyright'
content: '© 2022 NuxtLabs'
---
```
2 changes: 1 addition & 1 deletion docs/content/5.deploy/0.node.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ navigation:
icon: i-simple-icons-nodedotjs
---

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

Build project with Nuxt build command:

Expand Down
20 changes: 16 additions & 4 deletions docs/content/5.deploy/1.cloudflare.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,23 @@ Or by updating your Nuxt configuration:
"preset": "cloudflare_pages",
```

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

## Database

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

- You can simply use [Nuxt Hub][nuxt-hub] to create, connect and manage D1 database for you.
- 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]

[1]: https://developers.cloudflare.com/pages/get-started/#connect-your-git-provider-to-pages







[1]: https://developers.cloudflare.com/pages/get-started/#connect-your-git-provider-to-pages
[nuxt-hub]: https://hub.nuxt.com/docs/features/database
[d1]: https://developers.cloudflare.com/d1/get-started/
12 changes: 10 additions & 2 deletions docs/content/5.deploy/2.vercel.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,19 @@ navigation:

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.

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.
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.

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

## Database

Unfortunately sqlite database is not supported in Vercel environment and you should use another database.
You can simply create a [Vercel Postgres][3] database and use Content Module's Postgres adapter.

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.


[1]: https://vercel.com/docs/deployments/git
[2]: https://vercel.com/docs/cli
[2]: https://vercel.com/docs/cli
[3]: https://vercel.com/storage/postgres
[4]: https://vercel.com/docs/storage/vercel-postgres/quickstart#quickstart
2 changes: 0 additions & 2 deletions docs/content/6.snippets/1.fulltext-search.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
---
title: Full-Text Search
description: Implement full-text search in your website using Nuxt Content
navigation:
icon: i-heroicons-document-magnifying-glass
---

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.
Expand Down

0 comments on commit c233f69

Please sign in to comment.