diff --git a/docs/content/3.api/5.useContentHead.md b/docs/content/3.api/5.useContentHead.md new file mode 100644 index 000000000..dd1aa3df5 --- /dev/null +++ b/docs/content/3.api/5.useContentHead.md @@ -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 ``{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' +--- +``` diff --git a/docs/content/5.deploy/0.node.md b/docs/content/5.deploy/0.node.md index 70ac2e290..1655ba83f 100644 --- a/docs/content/5.deploy/0.node.md +++ b/docs/content/5.deploy/0.node.md @@ -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: diff --git a/docs/content/5.deploy/1.cloudflare.md b/docs/content/5.deploy/1.cloudflare.md index 993ef5255..a94c12926 100644 --- a/docs/content/5.deploy/1.cloudflare.md +++ b/docs/content/5.deploy/1.cloudflare.md @@ -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 \ No newline at end of file + + + + + + + +[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/ \ No newline at end of file diff --git a/docs/content/5.deploy/2.vercel.md b/docs/content/5.deploy/2.vercel.md index 6e90bdeac..71e03e745 100644 --- a/docs/content/5.deploy/2.vercel.md +++ b/docs/content/5.deploy/2.vercel.md @@ -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 \ No newline at end of file +[2]: https://vercel.com/docs/cli +[3]: https://vercel.com/storage/postgres +[4]: https://vercel.com/docs/storage/vercel-postgres/quickstart#quickstart \ No newline at end of file diff --git a/docs/content/6.snippets/1.fulltext-search.md b/docs/content/6.snippets/1.fulltext-search.md index fe93779ea..aa566e33d 100644 --- a/docs/content/6.snippets/1.fulltext-search.md +++ b/docs/content/6.snippets/1.fulltext-search.md @@ -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.