diff --git a/docs/content-v1/en/1.getting-started/2.installation.md b/docs/content-v1/en/1.getting-started/2.installation.md index 26803fd57..633e477ef 100644 --- a/docs/content-v1/en/1.getting-started/2.installation.md +++ b/docs/content-v1/en/1.getting-started/2.installation.md @@ -6,13 +6,13 @@ description: 'Install @nuxt/content in only two steps in your Nuxt project.' Add `@nuxt/content` dependency to your project: ::code-group - ```bash [Yarn] - yarn add @nuxt/content@^1 - ``` +```bash [Yarn] +yarn add @nuxt/content@^1 +``` - ```bash [NPM] - npm install @nuxt/content@^1 - ``` +```bash [NPM] +npm install @nuxt/content@^1 +``` :: Then, add `@nuxt/content` to the `modules` section of `nuxt.config.js`: diff --git a/docs/content-v1/en/1.getting-started/3.writing.md b/docs/content-v1/en/1.getting-started/3.writing.md index 5b326f42d..40ef558d9 100644 --- a/docs/content-v1/en/1.getting-started/3.writing.md +++ b/docs/content-v1/en/1.getting-started/3.writing.md @@ -83,7 +83,7 @@ Description property will contain the excerpt content unless defined within the -Be careful to enter <!--more--> exactly; i.e., all lowercase and with no whitespace. +Be careful to enter `` exactly; i.e., all lowercase and with no whitespace. diff --git a/docs/content-v1/en/1.getting-started/6.configuration.md b/docs/content-v1/en/1.getting-started/6.configuration.md index b6894a7de..a29f58e61 100644 --- a/docs/content-v1/en/1.getting-started/6.configuration.md +++ b/docs/content-v1/en/1.getting-started/6.configuration.md @@ -181,13 +181,13 @@ When adding a new plugin, make sure to install it in your dependencies: :: ::code-group - ```bash [Yarn] - yarn add remark-emoji - ``` +```bash [Yarn] +yarn add remark-emoji +``` - ```bash [NPM] - npm install remark-emoji - ``` +```bash [NPM] +npm install remark-emoji +``` :: ```js [nuxt.config.js] @@ -246,13 +246,13 @@ This module handles code highlighting in markdown content using [PrismJS](https: It automatically pushes the desired PrismJS theme in your Nuxt.js config, so if you want to use a different theme than the default one, for example [prism-themes](https://github.com/PrismJS/prism-themes): ::code-group - ```bash [Yarn] - yarn add prism-themes - ``` +```bash [Yarn] +yarn add prism-themes +``` - ```bash [NPM] - npm install prism-themes - ``` +```bash [NPM] +npm install prism-themes +``` :: ```js [nuxt.config.js] diff --git a/docs/content-v1/en/2.examples/1.basic.md b/docs/content-v1/en/2.examples/1.basic.md index 7454f908f..b4e8cb4b3 100644 --- a/docs/content-v1/en/2.examples/1.basic.md +++ b/docs/content-v1/en/2.examples/1.basic.md @@ -4,5 +4,4 @@ description: 'Live example of basic usage of Nuxt Content on CodeSandbox.' toc: false --- -::sandbox{src="https://codesandbox.io/embed/nuxt-content-playground-l164h?hidenavigation=1&theme=dark"} -:: +:sandbox{src="https://codesandbox.io/embed/nuxt-content-playground-l164h?hidenavigation=1&theme=dark"} diff --git a/docs/content-v1/en/2.examples/2.tailwindcss-typography.md b/docs/content-v1/en/2.examples/2.tailwindcss-typography.md index 0654a9c23..5fd2ff565 100644 --- a/docs/content-v1/en/2.examples/2.tailwindcss-typography.md +++ b/docs/content-v1/en/2.examples/2.tailwindcss-typography.md @@ -4,5 +4,4 @@ description: 'Live example of Nuxt Content with TailwindCSS Typography plugin on toc: false --- -::sandbox{src="https://codesandbox.io/embed/nuxt-content-tailwindcss-typography-xq04z?hidenavigation=1&theme=dark"} -:: +:sandbox{src="https://codesandbox.io/embed/nuxt-content-tailwindcss-typography-xq04z?hidenavigation=1&theme=dark"} diff --git a/docs/content-v1/en/2.examples/3.docs-theme.md b/docs/content-v1/en/2.examples/3.docs-theme.md index 44caf4e5e..50df55833 100644 --- a/docs/content-v1/en/2.examples/3.docs-theme.md +++ b/docs/content-v1/en/2.examples/3.docs-theme.md @@ -4,5 +4,4 @@ description: 'Live example of Nuxt Content docs theme on CodeSandbox.' toc: false --- -::sandbox{src="https://codesandbox.io/embed/nuxt-content-docs-theme-playground-inwxb?hidenavigation=1&theme=dark"} -:: +:sandbox{src="https://codesandbox.io/embed/nuxt-content-docs-theme-playground-inwxb?hidenavigation=1&theme=dark"} diff --git a/docs/content-v1/en/3.community/2.integrations.md b/docs/content-v1/en/3.community/2.integrations.md index a3cb4f1af..6fa4b856b 100644 --- a/docs/content-v1/en/3.community/2.integrations.md +++ b/docs/content-v1/en/3.community/2.integrations.md @@ -276,10 +276,10 @@ export default { You can integrate Nuxt Content with [Forestry](https://forestry.io) in a few steps. - + We recommend to take a look at this tutorial made by [Pascal Cauhépé](https://twitter.com/eQRoeil) - +
👉  https://nuxt-content-and-forestry.netlify.app diff --git a/docs/content-v1/fr/1.getting-started/1.introduction.md b/docs/content-v1/fr/1.getting-started/1.introduction.md index 9e0e251f6..ffdf95fb8 100644 --- a/docs/content-v1/fr/1.getting-started/1.introduction.md +++ b/docs/content-v1/fr/1.getting-started/1.introduction.md @@ -37,4 +37,4 @@ Utilisez `$content()` sur un répertoire afin de lister, filtrer et rechercher d ## Essayer sur CodeSandbox -::sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} +:sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"} diff --git a/docs/content-v1/fr/1.getting-started/2.installation.md b/docs/content-v1/fr/1.getting-started/2.installation.md index 79d42c720..2db62e707 100644 --- a/docs/content-v1/fr/1.getting-started/2.installation.md +++ b/docs/content-v1/fr/1.getting-started/2.installation.md @@ -6,13 +6,13 @@ description: 'Intégrez @nuxt/content au sein de votre projet Nuxt en seulement Ajoutez `@nuxt/content` en tant que dépendence à votre projet: ::code-group - ```bash [Yarn] - yarn add @nuxt/content - ``` +```bash [Yarn] +yarn add @nuxt/content +``` - ```bash [NPM] - npm install @nuxt/content - ``` +```bash [NPM] +npm install @nuxt/content +``` :: Ensuite, ajoutez `@nuxt/content` au sein de la section `modules` de votre fichier `nuxt.config.js`: diff --git a/docs/content-v1/fr/1.getting-started/3.writing.md b/docs/content-v1/fr/1.getting-started/3.writing.md index cd2ed951a..4fee39476 100644 --- a/docs/content-v1/fr/1.getting-started/3.writing.md +++ b/docs/content-v1/fr/1.getting-started/3.writing.md @@ -79,10 +79,8 @@ Quantité totale de contenu au-delà du plus diviseur. La propriété Description contiendra le contenu de l'extrait à moins qu'elle ne soit définie dans les accessoires Front Matter. ::alert{type="info"} - -Veillez à saisir exactement <!--more-->; c'est-à-dire, tout en minuscules et sans espace. - -::alert +Veillez à saisir exactement ``; c'est-à-dire, tout en minuscules et sans espace. +:: Des exemples de variables seront injectés dans le document: diff --git a/docs/content-v1/fr/1.getting-started/7.advanced.md b/docs/content-v1/fr/1.getting-started/7.advanced.md index e302179db..bde216ab5 100644 --- a/docs/content-v1/fr/1.getting-started/7.advanced.md +++ b/docs/content-v1/fr/1.getting-started/7.advanced.md @@ -7,10 +7,8 @@ description: Apprenez l'utilisation avancée du module @nuxt/content `$content` est accessible depuis **@nuxt/content**. -::alert - +::alert{type="info"} Notez que vous ne pouvez y accéder seulement **après que le module ait été chargé** par Nuxt. L'utilisation de `require(@nuxt/content)` devrait avoir lieu dans les hooks ou les méthodes internes de Nuxt. - :: ```js @@ -31,9 +29,7 @@ export default { ### Génération de Site Statique ::alert{type="info"} - Si vous utilisez Nuxt 2.13+, la commande `nuxt export` a une fonctionnalité de crawler intégrée, donc vous ne devriez pas avoir besoin de recourir à `generate.routes`. - :: Lors de l'utilisation de `nuxt generate`, vous devez spécifier les routes dynamiques avec `generate.routes`, car Nuxt ne sait pas quelles seront ces routes donc il ne sera pas capable de les générer. @@ -97,9 +93,7 @@ export default { ## Gérer le Rechargement à Chaud ::alert{type="info"} - Lorsque vous développez, ce module appellera automatiquement l'action `nuxtServerInit` (si elle est définie) et `$nuxt.refresh()` afin de rafraîchir la page actuelle. - :: Dans le cas où vous souhaiteriez écouter cet évènement et ajouter des instructions supplémentaires, vous pouvez écouter l'évènement `content:update` côté client en utilisant `$nuxt.$on('content:update')`: @@ -135,9 +129,7 @@ Dès lors que vous opèrerez un changement sur un des fichiers au sein du réper Dans le cas d'articles, le contenu peut être utilisé pour générer des fils d'actualités en utilisant le module [@nuxtjs/feed](https://github.com/nuxt-community/feed-module). ::alert{type="info"} - Pour utiliser `$content` au sein de l'option `feed`, vous devez ajouter `@nuxt/content` avant `@nuxtjs/feed` dans la propriété `modules`. - :: **Exemple** diff --git a/docs/content-v1/fr/2.examples/1.basic.md b/docs/content-v1/fr/2.examples/1.basic.md index 6a9f1f27e..453944bd8 100644 --- a/docs/content-v1/fr/2.examples/1.basic.md +++ b/docs/content-v1/fr/2.examples/1.basic.md @@ -4,5 +4,4 @@ description: "Exemple en direct d'utilisation de base de Nuxt Content sur CodeSa toc: false --- -::sandbox{src="https://codesandbox.io/embed/nuxt-content-playground-l164h?hidenavigation=1&theme=dark"} -:: +:sandbox{src="https://codesandbox.io/embed/nuxt-content-playground-l164h?hidenavigation=1&theme=dark"} diff --git a/docs/content-v1/fr/2.examples/2..tailwindcss-typography.md b/docs/content-v1/fr/2.examples/2..tailwindcss-typography.md index ae25d855b..6edb9357a 100644 --- a/docs/content-v1/fr/2.examples/2..tailwindcss-typography.md +++ b/docs/content-v1/fr/2.examples/2..tailwindcss-typography.md @@ -4,4 +4,4 @@ description: 'Exemple en direct de contenu Nuxt avec le plugin TailwindCSS Typog toc: true --- -::sandbox{src="https://codesandbox.io/embed/nuxt-content-tailwindcss-typography-twhtf?hidenavigation=1&theme=dark"} +:sandbox{src="https://codesandbox.io/embed/nuxt-content-tailwindcss-typography-twhtf?hidenavigation=1&theme=dark"} diff --git a/docs/content-v1/fr/2.examples/3.docs-theme.md b/docs/content-v1/fr/2.examples/3.docs-theme.md index c20fc9b06..12618cef1 100644 --- a/docs/content-v1/fr/2.examples/3.docs-theme.md +++ b/docs/content-v1/fr/2.examples/3.docs-theme.md @@ -4,5 +4,4 @@ description: 'Exemple en direct du thème de la documentation Nuxt Content sur C toc: true --- -::sandbox{src="https://codesandbox.io/embed/nuxt-content-docs-theme-playground-inwxb?hidenavigation=1&theme=dark"} -:: +:sandbox{src="https://codesandbox.io/embed/nuxt-content-docs-theme-playground-inwxb?hidenavigation=1&theme=dark"} diff --git a/docs/content-v1/fr/3.community/2.integrations.md b/docs/content-v1/fr/3.community/2.integrations.md index cf747b140..f1b0cdf01 100644 --- a/docs/content-v1/fr/3.community/2.integrations.md +++ b/docs/content-v1/fr/3.community/2.integrations.md @@ -9,9 +9,7 @@ Dans le cas d'articles, le contenu peut être utilisé pour générer des fils d en utilisant le module [@nuxtjs/feed](https://github.com/nuxt-community/feed-module). ::alert{type="info"} - -Pour utiliser `$content` à l'intérieur de l'option `feed`, vous devez ajouter `@nuxt/content` avant `@nuxtjs/feed` dans la propriété `modules`. - +Pour utiliser `$content` à l'intérieur de l'option `feed`, vous devez ajouter `@nuxt/content` avant `@nuxtjs/feed` dans la propriété `modules`. :: Vous pouvez accéder à votre flux via : `baseUrl + baseLinkFeedArticles + file` @@ -276,10 +274,8 @@ export default { Vous pouvez intégrer Nuxt Content avec [Forestry](https://forestry.io) en quelques étapes. -::alert - +::alert{type="info"} Nous vous recommandons de jeter un œil à ce tutoriel réalisé par [Pascal Cauhépé](https://twitter.com/eQRoeil) 👉  https://nuxt-content-and-forestry.netlify.app - :: diff --git a/docs/content-v1/ja/1.getting-started/2.installation.md b/docs/content-v1/ja/1.getting-started/2.installation.md index b6ef50642..fb1ff610e 100644 --- a/docs/content-v1/ja/1.getting-started/2.installation.md +++ b/docs/content-v1/ja/1.getting-started/2.installation.md @@ -6,13 +6,13 @@ description: 'たった2つのステップであなたのNuxtプロジェクト プロジェクトに `@nuxt/content` の依存関係を追加します。 ::code-group - ```bash [Yarn] - yarn add @nuxt/content - ``` - - ```bash [NPM] - npm install @nuxt/content - ``` +```bash [Yarn] +yarn add @nuxt/content +``` + +```bash [NPM] +npm install @nuxt/content +``` :: そして、`nuxt.config.js` の `modules` セクションに `@nuxt/content` を追加します。 diff --git a/docs/content-v1/ja/1.getting-started/3.writing.md b/docs/content-v1/ja/1.getting-started/3.writing.md index afccd2e9e..9c16b3eb9 100644 --- a/docs/content-v1/ja/1.getting-started/3.writing.md +++ b/docs/content-v1/ja/1.getting-started/3.writing.md @@ -78,12 +78,12 @@ title: Introduction Description プロパティには、フロントマター プロップ内で定義されていない限り、抜粋コンテンツが含まれます。 - ::alert{type="info"} -<!--more--> を正確に入力するように注意してください。 つまり、すべて小文字で、空白はありません。 +`` を正確に入力するように注意してください。 つまり、すべて小文字で、空白はありません。 :: 変数の例がドキュメントに挿入されます。 + ```json { body: Object @@ -321,9 +321,7 @@ multiselectOptions: ::alert{type="info"} - これらのコンポーネントは `` コンポーネントを使ってレンダリングされます。[コンテンツを表示する](/ja/displaying#component)を参照してください。 - :: またMarkdownの中で` ``` + ```md [index.md] ::the-title A [rich text](/) will be **rendered** by the component. :: ``` - ::code-block{label="Preview" preview} + + ::code-block{label="Preview"} ::example-the-title A [rich text](/) will be **rendered** by the component. :: @@ -143,18 +150,19 @@ Inline components are components without slots or ``. They can be used with the `:` identifier. ::code-group - ```md [index.md] - # Title +```md [index.md] +# Title - :banner - ``` - ```html [Banner.vue] - - ``` +:banner +``` + +```html [Banner.vue] + +``` :: If you want to use an inline component followed by specific characters like `-`, `_` or `:`, you can use a dummy props specifier after it. @@ -174,26 +182,25 @@ There are two ways to pass props to components using MDC. The `{}` identifier passes props to components in a terse way by using a `key=value` syntax. ::code-group - ```md [index.md] ::alert{type="warning"} The **alert** component. :: ``` - ```html [Alert.vue] - + ```vue [Alert.vue] + - + ``` - ::code-block{label="Preview" preview} + ::code-block{label="Preview"} ::alert{type="warning"} The **alert** component. :: @@ -216,37 +223,35 @@ type: "warning" --- ::alert{:type="type"} - +Your warning +:: ``` If you want to pass arrays or objects as props to components you can pass them as JSON string and prefix the prop key with a colon to automatically decode the JSON string. Note that in this case you should use single quotes for the value string so you can use double quotes to pass a valid JSON string: ::code-group +```md [array.md] +::dropdown{:items='["Nuxt", "Vue", "React"]'} +:: +``` - ```md [array.md] - ::dropdown{:items='["Nuxt", "Vue", "React"]'} - :: - ``` - - ```md [number-array.md] - ::dropdown{:items='[1,2,3.5]'} - :: - ``` - - ```md [object.md] - ::chart{:options='{"responsive": true, "scales": {"y": {"beginAtZero": true}}}'} - :: - ``` +```md [number-array.md] +::dropdown{:items='[1,2,3.5]'} :: +``` +```md [object.md] +::chart{:options='{"responsive": true, "scales": {"y": {"beginAtZero": true}}}'} +:: +``` +:: ### YAML method The YAML method uses the `---` identifier to declare one prop per line, that can be useful for readability. ::code-group - ```md [index.md] ::icon-card --- @@ -286,7 +291,7 @@ The YAML method uses the `---` identifier to declare one prop per line, that can ``` - ::code-block{label="Preview" preview} + ::code-block{label="Preview"} ::example-icon-card --- icon: IconNuxt @@ -302,12 +307,11 @@ The YAML method uses the `---` identifier to declare one prop per line, that can To create inline spans in your text you can use the `[]` identifier. ::code-group - ```md [Code] Hello [World]{.bg-blue-500}! ``` - ::code-block{label="Preview" preview} + ::code-block{label="Preview"} Hello [World]{.bg-primary-500}! :: :: @@ -317,12 +321,11 @@ To create inline spans in your text you can use the `[]` identifier. Attributes are useful for highlighting and modifying part of paragraph. The syntax is nearly similar to inline components and markdown links syntax. ::code-group - ```md [Code] Hello [World]{.text-primary-500}! ``` - ::code-block{label="Preview" preview} + ::code-block{label="Preview"} Hello [World]{.text-primary-500}! :: :: @@ -330,18 +333,19 @@ Attributes are useful for highlighting and modifying part of paragraph. The synt Other than `spans` the attribute syntax will work on images, links, `code`, **bold** and _italic_ texts. ::code-group - ```md [Code] Attributes works on: - - ![](/icon.png){.inline.w-5.h-5.bg-primary-500} image, + + - ![](/icon.png){.inline.m-0.bg-primary-800} image, - [link](#attributes){.bg-primary-400}, `code`{.text-red-500}, - _italic_{.bg-primary-500} and **bold**{.bg-primary-500} texts. ``` - ::code-block{label="Preview" preview} + ::code-block{label="Preview"} Attributes works on: - - ![](/icon.png){.inline.w-5.h-5.bg-primary-500} image, - - [link](#attributes){.bg-primary-400}, `code`{.text-red-500}, - - _italic_{.bg-primary-500} and **bold**{.bg-primary-500} texts. + + - ![](/favicon.ico){style="display: inline; margin: 0; background-color: var(--color-primary-800);"} image, + - [link](#attributes){style="background-color: var(--color-primary-400);"}, `code`{style="color: var(--color-red-500);"}, + - _italic_{style="background-color: var(--color-primary-500);"} and **bold**{style="background-color: var(--color-primary-500);"} texts. :: :: diff --git a/docs/content/3.guide/1.writing/4.json.md b/docs/content/3.guide/1.writing/4.json.md index e5ba99072..6c73ac8ce 100644 --- a/docs/content/3.guide/1.writing/4.json.md +++ b/docs/content/3.guide/1.writing/4.json.md @@ -2,14 +2,13 @@ Nuxt Content can query JSON formatted content. -::alert{type=info} +::alert{type="info"} If the document root is an object `{}`, the output contains all the document properties at its root. If the document root is an array `[]`, the output contains all the document properties in a `body` property. :: ## Example ::code-group - ```json [content/hello.json] { "title": "Hello Content v2!", @@ -33,5 +32,4 @@ If the document root is an object `{}`, the output contains all the document pro _extension: 'json' } ``` - :: diff --git a/docs/content/3.guide/1.writing/5.yaml.md b/docs/content/3.guide/1.writing/5.yaml.md index 94ba49b14..dbeca52a2 100644 --- a/docs/content/3.guide/1.writing/5.yaml.md +++ b/docs/content/3.guide/1.writing/5.yaml.md @@ -2,14 +2,14 @@ Nuxt Content can query YAML / YML formatted content. -::alert{type=info} -If the document root is based on key-value pairs, the output contains all the document properties at its root. If the document root is a list `-`, the output contains all the document properties in a `body` property. +::alert{type="info"} +If the document root is based on key-value pairs, the output contains all the document properties at its root. +If the document root is a list `-`, the output contains all the document properties in a `body` property. :: ## Example ::code-group - ```yaml [content/hello.yml] title: Hello Content v2! description: The writing experience for Nuxt 3 @@ -31,5 +31,4 @@ category: announcement _extension: 'yml' } ``` - :: diff --git a/docs/content/3.guide/1.writing/6.csv.md b/docs/content/3.guide/1.writing/6.csv.md index 03bd59d29..5c06c1223 100644 --- a/docs/content/3.guide/1.writing/6.csv.md +++ b/docs/content/3.guide/1.writing/6.csv.md @@ -2,14 +2,13 @@ Nuxt Content can query CSV formatted content. -::alert{type=info} +::alert{type="info"} The `body` of the output is an array containing every row as objects. :: ## Example ::code-group - ```csv [content/hello.csv] title,description,category Hello Content v2!,The writing experience for Nuxt 3,announcement @@ -35,5 +34,4 @@ Hello Content v2!,The writing experience for Nuxt 3,announcement _extension: 'csv' } ``` - :: diff --git a/docs/content/3.guide/1.writing/7.document-driven.md b/docs/content/3.guide/1.writing/7.document-driven.md index 263973ea0..0a4019f06 100644 --- a/docs/content/3.guide/1.writing/7.document-driven.md +++ b/docs/content/3.guide/1.writing/7.document-driven.md @@ -26,12 +26,13 @@ export default defineNuxtConfig({ Start a new project with the document-driven mode enabled: ::code-group - ```bash [npx] - npx nuxi init doc-driven-app -t doc-driven - ``` - ```bash [pnpm] - pnpm dlx nuxi init doc-driven-app -t doc-driven - ``` +```bash [npx] +npx nuxi init doc-driven-app -t doc-driven +``` + +```bash [pnpm] +pnpm dlx nuxi init doc-driven-app -t doc-driven +``` :: You can also use an object to configure the behavior of the mode, checkout the [configuration section](/api/configuration#documentdriven). @@ -112,6 +113,7 @@ This option will search for a `theme` key in `globals`, then search for a `layou Queries are being made from a [route middleware](https://v3.nuxtjs.org/guide/directory-structure/middleware#middleware-directory) and are resolved before your page renders. This gives access to the [`useContent()`](/api/composables/use-document-driven) composable **anywhere in your app** with the following variables: + - `page` - `surround` - `navigation` @@ -210,8 +212,9 @@ definePageMeta({ ``` -::alert +::alert{type="info"} If you change `page` option and leave `surround` unset, `surround` option will use the same config and `page`. + ```html - ```vue [app.vue] - + +``` - - ``` - - ```md [content/index.md] - # Hello Content v2! - - Content V2 is a Git-based CMS - ``` - - ::code-block{label="Preview" preview} - 
-    {
-      "_path":"/",
-      "_draft":false,
-      "_partial":false,
-      "_empty":false,
-      "title":"Hello Content V2!",
-      "description":"",
-      "body":{
-        "type":"root",
-        "children":[
-          {
-              "type":"element",
-              "tag":"h1",
-              "props":{
-                "id":"hello-content-v2"
-              },
-              "children":[
-                {
-                    "type":"text",
-                    "value":"Hello Content V2!"
-                }
-              ]
-          }
-        ],
-        "toc":{
-          "title":"",
-          "searchDepth":2,
-          "depth":2,
-          "links":[]
-        }
-      },
-      "_type":"markdown",
-      "_id":"content:index.md",
-      "_source":"content",
-      "_file":"index.md",
-      "_extension":"md"
+```md [content/index.md]
+# Hello Content v2!
+
+Content V2 is a Git-based CMS
+```
+
+```json ["Preview"]
+{
+  "_path":"/",
+  "_draft":false,
+  "_partial":false,
+  "_empty":false,
+  "title":"Hello Content V2!",
+  "description":"",
+  "body":{
+    "type":"root",
+    "children":[
+      {
+          "type":"element",
+          "tag":"h1",
+          "props":{
+            "id":"hello-content-v2"
+          },
+          "children":[
+            {
+                "type":"text",
+                "value":"Hello Content V2!"
+            }
+          ]
+      }
+    ],
+    "toc":{
+      "title":"",
+      "searchDepth":2,
+      "depth":2,
+      "links":[]
     }
-
- :: + }, + "_type":"markdown", + "_id":"content:index.md", + "_source":"content", + "_file":"index.md", + "_extension":"md" +} +``` :: ## Query builder @@ -113,7 +110,7 @@ const { data } = await useAsyncData('home', () => queryContent('/').findOne()) Once your query is ready, make sure to end your call with `.find()`{lang="ts"}, `.findOne()`{lang="ts"} or `.findSurround()`{lang="ts"} to effectively trigger data fetching. -::alert{type=info} +::alert{type="info"} Discover every query methods in the [API reference](/api/composables/query-content) :: @@ -151,7 +148,6 @@ The API root path `/api/_content/query` accepts query parameters such as: ### Example ::code-group - ```md [content/hello.md] # Hello Content v2! ``` @@ -201,5 +197,4 @@ The API root path `/api/_content/query` accepts query parameters such as: } ] ``` - :: diff --git a/docs/content/3.guide/2.displaying/3.navigation.md b/docs/content/3.guide/2.displaying/3.navigation.md index 2f7a61dca..6dfac05cb 100644 --- a/docs/content/3.guide/2.displaying/3.navigation.md +++ b/docs/content/3.guide/2.displaying/3.navigation.md @@ -13,7 +13,6 @@ The navigation object can be seen as a tree, representing the structure of your It is divided into two types of nodes: **pages** and **directories**. ::code-group - ``` [Directory structure] content/ my-directory/ @@ -53,7 +52,6 @@ content/ } ] ``` - :: ## Custom keys @@ -82,13 +80,11 @@ navigation: ``` :: - Alternatively, the navigation also allows you to configure directory nodes via `_dir.yml` files. It allows you to overwrite the `title` and custom properties to directory nodes in navigation. ::code-group - ``` [Directory structure] content/ my-directory/ @@ -116,7 +112,6 @@ navigation.icon: '📁' If you want to use top-level keys in the front-matter to be included in the navigation object, use the [`content.navigation.fields`](/api/configuration#navigation) property in the `nuxt.config`: ::code-group - ```ts [nuxt.config.ts] defineNuxtConfig({ content: { @@ -144,10 +139,8 @@ publishedAt: '15-06-2022' "_id": "content:page.md", } ``` - :: - ## Excluding Set `navigation: false` in the [front-matter](/guide/writing/markdown) of a page to filter it out. @@ -167,7 +160,6 @@ navigation: false You can also use the `_` content prefix to exclude content directories and files. ::code-group - ``` [Directory structure] content/ _hidden-directory/ @@ -194,10 +186,8 @@ content/ } ] ``` - :: - ## Nested navigation You can pass a `queryContent()`{lang="ts"} instance to the `fetchContentNavigation()`{lang="ts"} utility to filter the items returned. @@ -214,7 +204,7 @@ const query = queryContent({ --- -::alert +::alert{type="info"} Go deeper in the **API** section: - [`fetchContentNavigation()`](/api/composables/fetch-content-navigation) composable to fetch navigation in ` ``` - ## The future TypeScript support is a strong focus for us. diff --git a/docs/content/3.guide/3.recipes/1.sitemap.md b/docs/content/3.guide/3.recipes/1.sitemap.md index 99f19b266..7e2a97d86 100644 --- a/docs/content/3.guide/3.recipes/1.sitemap.md +++ b/docs/content/3.guide/3.recipes/1.sitemap.md @@ -5,17 +5,17 @@ A sitemap file is useful for helping Google to better index your website, ensuri This can be created by utilising the `sitemap` library, which can be installed as follows: ::code-group - ```bash [pnpm] - pnpm add --save-dev sitemap - ``` +```bash [pnpm] +pnpm add --save-dev sitemap +``` - ```bash [yarn] - yarn add --dev sitemap - ``` +```bash [yarn] +yarn add --dev sitemap +``` - ```bash [npm] - npm install --save-dev sitemap - ``` +```bash [npm] +npm install --save-dev sitemap +``` :: ## Server Route diff --git a/docs/content/3.guide/4.deploy/1.node-server.md b/docs/content/3.guide/4.deploy/1.node-server.md index e61f988a8..c90a9bb1f 100644 --- a/docs/content/3.guide/4.deploy/1.node-server.md +++ b/docs/content/3.guide/4.deploy/1.node-server.md @@ -1,6 +1,6 @@ # Node Server -Use the [`nuxi build` command](https://v3.nuxtjs.org//api/commands/build) to build your application. The JS files will be generated in the `.output` directory. +Use the [`nuxi build` command](https://nuxt.com/docs/api/commands/build) to build your application. The JS files will be generated in the `.output` directory. ```bash npx nuxi build diff --git a/docs/content/3.guide/4.deploy/2.static-hosting.md b/docs/content/3.guide/4.deploy/2.static-hosting.md index b2ec68938..34a5b3bc4 100644 --- a/docs/content/3.guide/4.deploy/2.static-hosting.md +++ b/docs/content/3.guide/4.deploy/2.static-hosting.md @@ -5,10 +5,9 @@ There are two ways to deploy a Content application to any static hosting service - Static site generation (SSG) prerenders every route of your application at build time. For every page, Nuxt uses a crawler to generate a corresponding HTML file. - Using `ssr: false` and `service-worker` preset to produce a pure client-side output. - ## Prerendering -Use the [`nuxi generate` command](https://v3.nuxtjs.org//api/commands/generate) to build your application. The HTML files will be generated in the `.output/public` directory. +Use the [`nuxi generate` command](https://nuxt.com/docs/api/commands/generate) to build your application. The HTML files will be generated in the `.output/public` directory. ```bash npx nuxi generate @@ -27,7 +26,6 @@ defineNuxtConfig({ }) ``` -::alert{type=warning} -Nuxt Content highly depends on [Nuxt's server engine](https://v3.nuxtjs.org/guide/concepts/server-engine). The only way to have server engine in client-only rendering is to use Service Workers. +::alert{type="warning"} +Nuxt Content highly depends on [Nuxt's server engine](https://nuxt.com/docs/guide/concepts/server-engine). The only way to have server engine in client-only rendering is to use Service Workers. :: - diff --git a/docs/content/3.guide/5.migration/1.from-v1.md b/docs/content/3.guide/5.migration/1.from-v1.md index cafb6c7d0..0aeb856bf 100644 --- a/docs/content/3.guide/5.migration/1.from-v1.md +++ b/docs/content/3.guide/5.migration/1.from-v1.md @@ -4,7 +4,7 @@ Learn how to upgrade from Nuxt Content V1 to Nuxt Content V2 for Nuxt 3. - Make sure your dev server (`nuxt dev`) isn't running and remove any package lock files (`package-lock.json`, `yarn.lock`, or `pnpm-lock.yaml`) -- Upgrade to Nuxt 3 (check out the [Nuxt 3 migration guide](https://v3.nuxtjs.org/getting-started/migration)) +- Upgrade to Nuxt 3 (check out the [Nuxt 3 migration guide](https://nuxt.com/docs/getting-started/upgrade)) ```diff - "nuxt": "latest" @@ -15,7 +15,7 @@ Learn how to upgrade from Nuxt Content V1 to Nuxt Content V2 for Nuxt 3. ```diff - "@nuxt/content": "^1.15.1" - + "@nuxt/content": "^2.0" + + "@nuxt/content": "^2.0.0" ``` - Then, reinstall your dependencies: @@ -46,9 +46,9 @@ There is no global `$content` variable, instead you can use `queryContent` compo - `fetch` dropped in favor of new find utils - [`find`](/api/composables/query-content#find): retrieve a list of contents - - [`findOne`](/api/composables/query-content#findOne): retrieve first matched content -- `surround` dropped in favor of [`findSurround`](/api/composables/query-content#findSurround) -- [`where`](/api/composables/query-content#where) utility can be chained + - [`findOne`](/api/composables/query-content#findone): retrieve first matched content +- `surround` dropped in favor of [`findSurround`](/api/composables/query-content#findsurroundpath-options) +- [`where`](/api/composables/query-content#wherequery) utility can be chained ```ts queryContent() @@ -58,13 +58,12 @@ There is no global `$content` variable, instead you can use `queryContent` compo ``` - There is no `search` utility for full text search. -- Find utilities does not contain body of documents and they only include meta information of parsed contents. You can fetch the body's contents using `getContentDocument`(non-reactive) or `useContentDocument`(reactive) composables ```js const doc = await getContentDocument(post.id) ``` -- There is a new [`findNavigation`](/api/composables/query-content#findnavigation) utility to retrieve navigation object +- There is a new [`fetchContentNavigation`](/api/composables/fetch-content-navigation) utility is designed to provide a tree of items based on the `content/` directory structure. ## Rendering Content @@ -96,22 +95,22 @@ The `` component will fetch the document for the current route path ## Feature comparison -| Feature / Version | Content v1 | Content v2 | -| ----------------- | :--------: | :--------: | -| Nuxt Version | `nuxt@2.x` | `nuxt@3.x` | -| Supported files | `.md`, `.yaml`, `.yml`, `.csv`, `.json`, `.json5`, `.xml` | `.md`, `.yaml`, `.yml`, `.csv`, `.json`, `.json5` | -| Full text search | ✅ | ❌ | -| Reactive Composables | ❌ | ✅ | -| [FrontMatter](/guide/writing/markdown#front-matter) | ✅ | ✅ | -| [Excerpt](https://content.nuxtjs.org/writing#excerpt) | ✅ | ✅ | -| [Table Of Contents](https://content.nuxtjs.org/writing#table-of-contents) | ✅ | ✅ | -| MDC Components syntax | ❌ | ✅ | -| Multi Source | ❌ | ✅ | -| Locale Support | ❌ | ✅ | -| Content Navigation | ❌ | ✅ | +| Feature / Version | Content v1 | Content v2 | +| --------------------------------------------------- | :--------------------------------------------------------: | :-----------------------------------------------: | +| Nuxt Version | `nuxt@2.x` | `nuxt@3.x` | +| Supported files | `.md`, `.yaml`, `.yml`, `.csv`, `.json`, `.json5`, `.xml` | `.md`, `.yaml`, `.yml`, `.csv`, `.json`, `.json5` | +| Full text search | ✅ | ❌ | +| Reactive Composables | ❌ | ✅ | +| [FrontMatter](/guide/writing/markdown#front-matter) | ✅ | ✅ | +| [Excerpt](/writing#excerpt) | ✅ | ✅ | +| [Table Of Contents](/writing#table-of-contents) | ✅ | ✅ | +| MDC Components syntax | ❌ | ✅ | +| Multi Source | ❌ | ✅ | +| Locale Support | ❌ | ✅ | +| Content Navigation | ❌ | ✅ | ## Querying content -::alert +::alert{type="info"} Learn more about query methods in the [API reference](/api/composables/query-content) :: diff --git a/docs/content/3.guide/5.migration/2.edge-channel.md b/docs/content/3.guide/5.migration/2.edge-channel.md index ccb67235f..5e8705112 100644 --- a/docs/content/3.guide/5.migration/2.edge-channel.md +++ b/docs/content/3.guide/5.migration/2.edge-channel.md @@ -2,13 +2,13 @@ Nuxt Content is landing commits, improvements, and bug fixes every day. You can opt-in to test them earlier before the next release. -After each commit is merged into the `main` branch of [nuxt/content](https://github.com/nuxt/content) and **passing all tests**, we trigger an automated npm release using Github Actions publishing a `@nuxt/content-edge` package. +After each commit is merged into the `main` branch of @nuxt/content and **passing all tests**, we trigger an automated npm release using Github Actions publishing a `@nuxt/content-edge` package. You can opt in to use this release channel and avoid waiting for the next release and helping the module by beta testing changes. The build and publishing method and quality of edge releases are the same as stable ones. The only difference is that you should often check the [GitHub repository](https://github.com/nuxt/content) for updates. There is a slight chance of regressions not being caught during the review process and by the automated tests. Therefore, we internally use this channel to double-check everything before each release. -::alert +::alert{type="info"} Features only available on the edge channel are marked with an alert in the documentation. :: @@ -19,8 +19,8 @@ Update `@nuxt/content` dependency inside `package.json`: ```diff [package.json] { "devDependencies": { --- "@nuxt/content": "^2.0.0" -++ "@nuxt/content": "npm:@nuxt/content-edge@latest" +- "@nuxt/content": "^2.0.0" ++ "@nuxt/content": "npm:@nuxt/content-edge@latest" } } ``` @@ -34,8 +34,8 @@ Update `@nuxt/content` dependency inside `package.json`: ```diff [package.json] { "devDependencies": { --- "@nuxt/content": "npm:@nuxt/content-edge@latest" -++ "@nuxt/content": "^2.0.0" +- "@nuxt/content": "npm:@nuxt/content-edge@latest" ++ "@nuxt/content": "^2.0.0" } } ``` diff --git a/docs/content/4.api/1.components/2.content-renderer.md b/docs/content/4.api/1.components/2.content-renderer.md index 57c0d5017..3bc424ef3 100644 --- a/docs/content/4.api/1.components/2.content-renderer.md +++ b/docs/content/4.api/1.components/2.content-renderer.md @@ -60,7 +60,7 @@ const { data } = await useAsyncData('page-data', () => queryContent('/hello').fi ``` -::alert +::alert{type="info"} Note that when you use default slot and `` in your template you need to pass `components` to ``. ```html [pages/[...slug].vue] diff --git a/docs/content/4.api/1.components/5.markdown.md b/docs/content/4.api/1.components/5.markdown.md index be38c5182..ab855849d 100644 --- a/docs/content/4.api/1.components/5.markdown.md +++ b/docs/content/4.api/1.components/5.markdown.md @@ -2,7 +2,7 @@ The fastest way to inject Markdown into your Vue components. -::alert{type=danger} +::alert{type="danger"} **NOTE**: As of Content@2.1.0 this component is deprecated and replaced by [``](/api/components/content-slot). :: diff --git a/docs/content/4.api/1.components/7.prose.md b/docs/content/4.api/1.components/7.prose.md index 983501b90..86ae547b2 100755 --- a/docs/content/4.api/1.components/7.prose.md +++ b/docs/content/4.api/1.components/7.prose.md @@ -11,15 +11,13 @@ To overwrite a prose component, create a component with the same name in your pr [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseA.vue) ::code-group - - ```markdown [Code] + ```md [Code] [Link](/api/components/prose) - ```` + ``` ::code-block{label="Preview"} [Link](/api/components/prose) :: - :: ## `ProseBlockquote` @@ -27,15 +25,13 @@ To overwrite a prose component, create a component with the same name in your pr [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseBlockquote.vue) ::code-group - - ```markdown [Code] + ```md [Code] > Block quote - ```` + ``` ::code-block{label="Preview"} > Block quote :: - :: ## `ProseCode` @@ -43,9 +39,8 @@ To overwrite a prose component, create a component with the same name in your pr [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseCode.vue) ::code-group - - ```markdown [Code] - ```javascript[file.js]{4-6,7} meta-info=val + ```md [Code] + ```js [file.js]{4-6,7} meta-info=val export default () => { console.log('Code block') } @@ -53,22 +48,20 @@ To overwrite a prose component, create a component with the same name in your pr ``` ::code-block{label="Preview"} - - ```javascript[file.js]{4-6,7} + ```js [file.js]{4-6,7} export default () => { console.log('Code block') } ``` - :: - :: Component properties will be: + ```json { code: "export default () => {\n console.log('Code block')\n}" - language: "javascript" + language: "js" filename: "file.js" highlights: [4, 5, 6, 7] meta: "meta-info=val" @@ -84,19 +77,17 @@ Check out the [highlight options](/api/configuration#highlight) for more about t `code inline`. ::code-group + ```md [Code] + `code inline`. - ```markdown [Code] - `code inline`. - - `const codeInline: string = 'highlighted code inline'`{lang="ts"} + `const codeInline: string = 'highlighted code inline'`{lang="ts"} ``` ::code-block{label="Preview"} - `code inline`. + `code inline`. - `const codeInline: string = 'highlighted code inline'`{lang="ts"} + `const codeInline: string = 'highlighted code inline'`{lang="ts"} :: - :: ## `ProseH1` @@ -104,15 +95,13 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseH1.vue) ::code-group - - ```markdown [Code] + ```md [Code] # H1 Heading ``` ::code-block{label="Preview"} - # H1 Heading + # H1 Heading :: - :: ## `ProseH2` @@ -120,15 +109,13 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseH2.vue) ::code-group - - ```markdown [Code] + ```md [Code] ## H2 Heading ``` ::code-block{label="Preview"} - ## H2 Heading + ## H2 Heading :: - :: ## `ProseH3` @@ -136,15 +123,13 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseH3.vue) ::code-group - - ```markdown [Code] - ## H3 Heading + ```md [Code] + ### H3 Heading ``` ::code-block{label="Preview"} - ## H3 Heading + ### H3 Heading :: - :: ## `ProseH4` @@ -152,11 +137,12 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseH4.vue) ::code-group - ```markdown [Code] - ## H4 Heading + ```md [Code] + #### H4 Heading ``` + ::code-block{label="Preview"} - ## H4 Heading + #### H4 Heading :: :: @@ -165,11 +151,12 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseH5.vue) ::code-group - ```markdown [Code] - ## H5 Heading + ```md [Code] + ##### H5 Heading ``` + ::code-block{label="Preview"} - ## H5 Heading + ##### H5 Heading :: :: @@ -178,11 +165,12 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseH6.vue) ::code-group - ```markdown [Code] - ## H6 Heading + ```md [Code] + ###### H6 Heading ``` + ::code-block{label="Preview"} - ## H6 Heading + ###### H6 Heading :: :: @@ -191,8 +179,7 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseHr.vue) ::code-group - - ```markdown [Code] + ```md [Code] Divider under. --- @@ -201,13 +188,12 @@ Check out the [highlight options](/api/configuration#highlight) for more about t ``` ::code-block{label="Preview"} - Divider under. + Divider under. - --- + --- - Divider above. + Divider above. :: - :: ## `ProseImg` @@ -215,15 +201,13 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseImg.vue) ::code-group - - ```markdown [Code] + ```md [Code] ![A Cool Image](/preview.png) ``` ::code-block{label="Preview"} - ![A Cool Image](/preview.png) + ![A Cool Image](/preview.png) :: - :: ## `ProseUl` @@ -231,8 +215,7 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseUl.vue) ::code-group - - ```markdown [Code] + ```md [Code] - Just - An - Unordered @@ -245,7 +228,6 @@ Check out the [highlight options](/api/configuration#highlight) for more about t - Unordered - List :: - :: ## `ProseLi` @@ -253,15 +235,13 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseLi.vue) ::code-group - - ```markdown [Code] + ```md [Code] - List element ``` ::code-block{label="Preview"} - List element :: - :: ## `ProseOl` @@ -269,8 +249,7 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseOl.vue) ::code-group - - ```markdown [Code] + ```md [Code] 1. Foo 2. Bar 3. Baz @@ -281,7 +260,6 @@ Check out the [highlight options](/api/configuration#highlight) for more about t 2. Bar 3. Baz :: - :: ## `ProseP` @@ -289,8 +267,7 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseP.vue) ::code-group - - ```markdown [Code] + ```md [Code] Just a paragraph. ``` @@ -304,8 +281,7 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseStrong.vue) ::code-group - - ```markdown [Code] + ```md [Code] **Just a strong paragraph.** ``` @@ -319,8 +295,7 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseEm.vue) ::code-group - - ```markdown [Code] + ```md [Code] _Just an italic paragraph._ ``` @@ -334,21 +309,20 @@ Check out the [highlight options](/api/configuration#highlight) for more about t [:icon{name="fa-brands:github" class="inline -mt-1 w-6"} Source](https://github.com/nuxt/content/tree/main/src/runtime/components/Prose/ProseTable.vue) ::code-group - - ```markdown [Code] - | Key | Type | Description | - |---------|--------| -----| - | 1 | Wonderful | Table | - | 2 | Wonderful | Data | - | 3 | Wonderful | Website | + ```md [Code] + | Key | Type | Description | + | --- | --------- | ----------- | + | 1 | Wonderful | Table | + | 2 | Wonderful | Data | + | 3 | Wonderful | Website | ``` ::code-block{label="Preview"} - | Key | Type | Description | - |---------|--------| -----| - | 1 | Wonderful | Table | - | 2 | Wonderful | Data | - | 3 | Wonderful | Website | + | Key | Type | Description | + | --- | --------- | ----------- | + | 1 | Wonderful | Table | + | 2 | Wonderful | Data | + | 3 | Wonderful | Website | :: :: diff --git a/docs/content/4.api/2.composables/1.query-content.md b/docs/content/4.api/2.composables/1.query-content.md index 3bf511cfb..6cd4d8bb9 100644 --- a/docs/content/4.api/2.composables/1.query-content.md +++ b/docs/content/4.api/2.composables/1.query-content.md @@ -79,8 +79,9 @@ const articles = await queryContent('articles') ``` > `sort()`{lang="ts"} method does **case-sensitive** sort by default. There is some magical options you can pass to sort options to change sort behavior, like sorting **case-insensitive**. +> > - `$sensitivity`{lang=ts}: Change case sensitivity. Like using `$sensitivity: 'base'`{lang=ts} for case-insensitive sort -> - `$numeric`{lang=ts}: Whether numeric collation should be used, such that `"1" < "2" < "10"`. +> - `$numeric`{lang=ts}: Boolean whether numeric collation should be used, such that `"1" < "2" < "10"`. > - `$caseFirst`{lang=ts}: Whether upper case or lower case should sort first. These options are given to [Intl.Collator()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator#parameters). diff --git a/docs/content/4.api/2.composables/2.fetch-content-navigation.md b/docs/content/4.api/2.composables/2.fetch-content-navigation.md index d2384b467..17584f51b 100644 --- a/docs/content/4.api/2.composables/2.fetch-content-navigation.md +++ b/docs/content/4.api/2.composables/2.fetch-content-navigation.md @@ -1,11 +1,10 @@ # fetchContentNavigation() -The fetchContentNavigation utility returns a tree of items based on the content/ directory structure and files. +The `fetchContentNavigation` utility returns a tree of items based on the `content/` directory structure and files. ## Usage ::code-group - ```Text [Directory structure] content/ index.md @@ -49,7 +48,6 @@ const { data: navigation } = await useAsyncData('navigation', () => fetchContent } ] ``` - :: :ReadMore{link="/examples/navigation/fetch-content-navigation"} @@ -60,4 +58,3 @@ const { data: navigation } = await useAsyncData('navigation', () => fetchContent - Type: `QueryBuilder`{lang=ts} - Definition: Any query built via `queryContent()`{lang=ts} - Default: `/`{lang=ts} - diff --git a/docs/content/4.api/2.composables/3.unwrap.md b/docs/content/4.api/2.composables/3.unwrap.md index fb79d1d5a..cb8f3899f 100644 --- a/docs/content/4.api/2.composables/3.unwrap.md +++ b/docs/content/4.api/2.composables/3.unwrap.md @@ -1,3 +1,3 @@ # useUnwrap() -It can be used to achieve a similar behavior as `unwrap`{lang=ts} prop from ``{lang=html} component. +It can be used to achieve a similar behavior as [`unwrap`{lang=ts} prop](/api/components/content-slot#props) from ``{lang=html} component. diff --git a/docs/content/4.api/2.composables/4.use-document-driven.md b/docs/content/4.api/2.composables/4.use-document-driven.md index eb1cc6a45..670cd2746 100644 --- a/docs/content/4.api/2.composables/4.use-document-driven.md +++ b/docs/content/4.api/2.composables/4.use-document-driven.md @@ -8,7 +8,7 @@ This composable will only be enabled if you toggle the [Document-driven](/guide/ `useContent()`{lang="ts"} is available everywhere in your app and gives access to a list of refs based on your content. -```ts +```vue - ``` - - ```vue [with queryContent] - +``` - useContentHead(page) - - ``` +```vue [with queryContent] + +``` :: diff --git a/docs/content/4.api/3.configuration.md b/docs/content/4.api/3.configuration.md index 06578e987..2e21f9100 100644 --- a/docs/content/4.api/3.configuration.md +++ b/docs/content/4.api/3.configuration.md @@ -43,35 +43,33 @@ Disable content watcher and hot content reload. The watcher is a development feature and will not be included in production. ::code-group - - ```ts [Enabled] - export default defineNuxtConfig({ - content: { - watch: { - ws: { - port: 4000, - showUrl: true - } +```ts [Enabled] +export default defineNuxtConfig({ + content: { + watch: { + ws: { + port: 4000, + showUrl: true } } - }) - ``` - - ```ts [Disabled] - export default defineNuxtConfig({ - content: { - watch: false - } - }) - ``` + } +}) +``` +```ts [Disabled] +export default defineNuxtConfig({ + content: { + watch: false + } +}) +``` :: ### `ws` options | Option | Default | Description | | --------- | :-----: | :--------------------------------------------- | -| `port` | `4000` | Select the port used for the WebSocket server. | +| `port` | `4000` | Select the port used for the WebSocket server. | | `showUrl` | `false` | Toggle URL display in dev server boot message. | ## `sources` @@ -113,7 +111,7 @@ export default defineNuxtConfig({ }) ``` -::Alert +::alert{type="info"} It is highly recommended to prevent modifying default source. If you want to load contents from another location, consider adding an additional source. :: @@ -172,7 +170,9 @@ export default defineNuxtConfig({ > [Here](https://github.com/nuxt/content/tree/main/src/runtime/markdown-parser/index.ts#L23) is a list of plugins @nuxt/content is using by default. -> When adding a new plugin, make sure to install it in your dependencies. +::alert{type="info"} +When adding a new plugin, make sure to install it in your dependencies. +:: ### `mdc` @@ -220,13 +220,12 @@ By default, the Content module generates anchor links for `h2`, `h3` and `h4` he `true`{lang=ts} will enable link generation for all headings. -**options** +#### `anchorLinks` options | Option | Type | Description | | ------- | :--------: | :------------------------------------------------------- | | depth | `number` | Sets the maximal depth for anchor link generation. | -| exclude | `number[]` | A list of headings to exclude from link generation. | - +| exclude | `number[]` | A list of headings to exclude from link generation. | ## `highlight` @@ -271,7 +270,7 @@ export default defineNuxtConfig({ ### `highlight.preload` -By default, module preloads couple of languages for syntax highlighter: `['diff', 'json', 'js', 'ts', 'css', 'shell', 'html', 'md', 'yaml']`{lang=ts} +By default, module preloads couple of languages for syntax highlighter: `['diff', 'json', 'js', 'ts', 'css', 'shell', 'html', 'md', 'yaml']`{lang=ts} If you plan to use code samples of other languages, you need to define the language in these options. @@ -325,7 +324,7 @@ List of locale codes. This codes will be used to detect contents locale. Default locale for top level contents. Module will use first locale code from `locales` array if this option is not defined. -::alert +::alert{type="info"} Note that in case of defining multiple locales, Module will filter content with `defaultLocale`. If you want to fetch contents of another locale, you need to use `where` option. :: diff --git a/docs/content/4.api/4.advanced.md b/docs/content/4.api/4.advanced.md index 308380342..934e809f6 100644 --- a/docs/content/4.api/4.advanced.md +++ b/docs/content/4.api/4.advanced.md @@ -20,12 +20,12 @@ export default defineNitroPlugin((nitroApp) => { }) ``` - ### `content:file:beforeParse` Allows you to modify the contents of a file before it is handled by the parsers. Arguments: + - file - Type: `Object` - Properties: @@ -77,10 +77,10 @@ Internally, the module has specific transformers for each content type to parse You can create custom transformers to support new content types or improve functionalities of supported content types. 1. Create your transformer. A transformer consists of 4 parts: - - `name`: Transformer name. - - `extensions`: List of valid file extensions. - - `parse`: If provided, this function will be used to parse the raw content. - - `transform`: Receives that parsed content and manipulates it. + - `name`: Transformer name. + - `extensions`: List of valid file extensions. + - `parse`: If provided, this function will be used to parse the raw content. + - `transform`: Receives that parsed content and manipulates it. ```ts [my-transformer.ts] // filename: my-transformer.ts diff --git a/docs/content/5.examples/1.essentials/1.hello-world.md b/docs/content/5.examples/1.essentials/1.hello-world.md index b27f569c5..e7ca69fc6 100644 --- a/docs/content/5.examples/1.essentials/1.hello-world.md +++ b/docs/content/5.examples/1.essentials/1.hello-world.md @@ -1,13 +1,11 @@ --- -head.title: 'Hello world | Examples' +head.title: 'Hello World | Examples' --- # Hello World Minimal example of using Nuxt Content V2. -::ReadMore{link="/get-started"} -:: +:ReadMore{link="/get-started"} -::sandbox{repo="nuxt/content" branch="main" dir="examples/essentials/hello-world" file="app.vue"} -:: +:sandbox{repo="nuxt/content" branch="main" dir="examples/essentials/hello-world" file="app.vue"} diff --git a/docs/content/5.examples/1.essentials/2.document-driven.md b/docs/content/5.examples/1.essentials/2.document-driven.md index 5e1c9be9e..f441a8416 100644 --- a/docs/content/5.examples/1.essentials/2.document-driven.md +++ b/docs/content/5.examples/1.essentials/2.document-driven.md @@ -2,8 +2,6 @@ Discover the document-driven mode of Nuxt Content in a live example. -::ReadMore{link="/guide/writing/document-driven"} -:: +:ReadMore{link="/guide/writing/document-driven"} -::sandbox{repo="nuxt/content" branch="main" dir="examples/essentials/document-driven" file="index.md"} -:: +:sandbox{repo="nuxt/content" branch="main" dir="examples/essentials/document-driven" file="index.md"} diff --git a/docs/content/5.examples/3.mdc/1.inline-components.md b/docs/content/5.examples/3.mdc/1.inline-components.md index 90f276896..01ea6c77d 100644 --- a/docs/content/5.examples/3.mdc/1.inline-components.md +++ b/docs/content/5.examples/3.mdc/1.inline-components.md @@ -4,8 +4,6 @@ Inline components are components that can be used inside paragraphs. After creating them in the `components/` directory, declare them in your markdown files with the `:` MDC syntax. -::ReadMore{link="/guide/writing/mdc#inline-components"} -:: +:ReadMore{link="/guide/writing/mdc#inline-components"} -::sandbox{repo="nuxt/content" branch="main" dir="examples/mdc/inline-component" file="content/index.md"} -:: +:sandbox{repo="nuxt/content" branch="main" dir="examples/mdc/inline-component" file="content/index.md"} diff --git a/docs/content/5.examples/3.mdc/2.nested-components.md b/docs/content/5.examples/3.mdc/2.nested-components.md index 338477ef9..db3b0f17d 100644 --- a/docs/content/5.examples/3.mdc/2.nested-components.md +++ b/docs/content/5.examples/3.mdc/2.nested-components.md @@ -1,10 +1,9 @@ # Nested components -The MDC syntax allow you to nest components within a parent slot using indentation and the :: syntax. +The MDC syntax allow you to nest components within a parent slot using indentation and the `::` syntax. The `components/AppNested.vue` component uses the `` component as markdown-rendering slot. -::ReadMore{link="/guide/writing/mdc#nesting"} +:ReadMore{link="/guide/writing/mdc#nesting"} -::sandbox{repo="nuxt/content" branch="main" dir="examples/mdc/nested-components" file="content/index.md"} -:: +:sandbox{repo="nuxt/content" branch="main" dir="examples/mdc/nested-components" file="content/index.md"} diff --git a/docs/content/5.examples/3.mdc/3.props.md b/docs/content/5.examples/3.mdc/3.props.md index 9a450879f..8ee72c39d 100644 --- a/docs/content/5.examples/3.mdc/3.props.md +++ b/docs/content/5.examples/3.mdc/3.props.md @@ -1,9 +1,7 @@ # Props -Pass props to your components in Markdown files using the {} MDC syntax. +Pass props to your components in Markdown files using the `{}` MDC syntax. -::ReadMore{link="/guide/writing/mdc#props"} -:: +:ReadMore{link="/guide/writing/mdc#props"} -::sandbox{repo="nuxt/content" branch="main" dir="examples/mdc/props" file="content/index.md"} -:: +:sandbox{repo="nuxt/content" branch="main" dir="examples/mdc/props" file="content/index.md"} diff --git a/docs/content/5.examples/3.mdc/4.slots.md b/docs/content/5.examples/3.mdc/4.slots.md index 0cf8365b6..a32e75818 100644 --- a/docs/content/5.examples/3.mdc/4.slots.md +++ b/docs/content/5.examples/3.mdc/4.slots.md @@ -4,8 +4,6 @@ You can fill a component's default slot by inserting content between `::` Use the `#` MDC syntax to fill a named slot inside a component. -::ReadMore{link="/guide/writing/mdc#slots"} -:: +:ReadMore{link="/guide/writing/mdc#slots"} -::sandbox{repo="nuxt/content" branch="main" dir="examples/mdc/slots" file="content/index.md"} -:: +:sandbox{repo="nuxt/content" branch="main" dir="examples/mdc/slots" file="content/index.md"} diff --git a/docs/content/5.examples/4.queries/1.where.md b/docs/content/5.examples/4.queries/1.where.md index 28a37b4e6..2c1d42aaa 100644 --- a/docs/content/5.examples/4.queries/1.where.md +++ b/docs/content/5.examples/4.queries/1.where.md @@ -4,10 +4,8 @@ navigation.title: 'Where' # Where Queries -Example of using the where() method of queryContent() +Example of using the `where()`{lang=ts} method of `queryContent()`{lang=ts} -::ReadMore{link="/api/composables/query-content#wherequery"} -:: +:ReadMore{link="/api/composables/query-content#wherequery"} -::sandbox{repo="nuxt/content" branch="main" dir="examples/queries/where" file="pages/app.vue"} -:: +:sandbox{repo="nuxt/content" branch="main" dir="examples/queries/where" file="pages/app.vue"} diff --git a/docs/content/5.examples/4.queries/2.only.md b/docs/content/5.examples/4.queries/2.only.md index 63520b9f9..efed14074 100644 --- a/docs/content/5.examples/4.queries/2.only.md +++ b/docs/content/5.examples/4.queries/2.only.md @@ -4,10 +4,8 @@ navigation.title: 'Only' # Only Queries -Example of using the only() method of queryContent() +Example of using the `only()`{lang=ts} method of `queryContent()`{lang=ts} -::ReadMore{link="/api/composables/query-content#onlykeys"} -:: +:ReadMore{link="/api/composables/query-content#onlykeys"} -::sandbox{repo="nuxt/content" branch="main" dir="examples/queries/only" file="app.vue"} -:: +:sandbox{repo="nuxt/content" branch="main" dir="examples/queries/only" file="app.vue"} diff --git a/docs/content/5.examples/4.queries/3.without.md b/docs/content/5.examples/4.queries/3.without.md index 840060d68..49ab7b151 100644 --- a/docs/content/5.examples/4.queries/3.without.md +++ b/docs/content/5.examples/4.queries/3.without.md @@ -4,10 +4,8 @@ navigation.title: 'Without' # Without Queries -Example of using the without() method of queryContent() +Example of using the `without()`{lang=ts} method of `queryContent()`{lang=ts} -::ReadMore{link="/api/composables/query-content#withoutkeys"} -:: +:ReadMore{link="/api/composables/query-content#withoutkeys"} -::sandbox{repo="nuxt/content" branch="main" dir="examples/queries/without" file="app.vue"} -:: +:sandbox{repo="nuxt/content" branch="main" dir="examples/queries/without" file="app.vue"} diff --git a/docs/content/5.examples/4.queries/4.skip-limit.md b/docs/content/5.examples/4.queries/4.skip-limit.md index 0adfb795a..ad3fb6d6f 100644 --- a/docs/content/5.examples/4.queries/4.skip-limit.md +++ b/docs/content/5.examples/4.queries/4.skip-limit.md @@ -4,13 +4,10 @@ navigation.title: 'Skip & Limit' # Skip & Limit Queries -Example of using the skip() and limit() methods of queryContent() +Example of using the `skip()`{lang=ts} and `limit()`{lang=ts} methods of `queryContent()`{lang=ts} -::ReadMore{link="/api/composables/query-content#skipcount"} -:: +:ReadMore{link="/api/composables/query-content#skipcount"} -::ReadMore{link="/api/composables/query-content#limitcount"} -:: +:ReadMore{link="/api/composables/query-content#limitcount"} -::sandbox{repo="nuxt/content" branch="main" dir="examples/queries/skip-limit" file="app.vue"} -:: +:sandbox{repo="nuxt/content" branch="main" dir="examples/queries/skip-limit" file="app.vue"} diff --git a/docs/content/5.examples/5.navigation/1.fetch-content-navigation.md b/docs/content/5.examples/5.navigation/1.fetch-content-navigation.md index 95357b7d0..e38220eca 100644 --- a/docs/content/5.examples/5.navigation/1.fetch-content-navigation.md +++ b/docs/content/5.examples/5.navigation/1.fetch-content-navigation.md @@ -1,9 +1,7 @@ # fetchContentNavigation -Example of using the fetchContentNavigation() composable +Example of using the `fetchContentNavigation()`{lang=ts} composable -::ReadMore{link="/guide/displaying/navigation"} -:: +:ReadMore{link="/guide/displaying/navigation"} -::sandbox{repo="nuxt/content" branch="main" dir="examples/navigation/fetch-content-navigation" file="app.vue"} -:: +:sandbox{repo="nuxt/content" branch="main" dir="examples/navigation/fetch-content-navigation" file="app.vue"} diff --git a/docs/content/5.examples/5.navigation/2.use-route.md b/docs/content/5.examples/5.navigation/2.use-route.md index 238ef279d..6c039813f 100644 --- a/docs/content/5.examples/5.navigation/2.use-route.md +++ b/docs/content/5.examples/5.navigation/2.use-route.md @@ -1,9 +1,7 @@ # useRoute -Use the `where()` method alongside the `useRoute()` composable to query content based on the current route. +Use the `where()`{lang=ts} method alongside the `useRoute()`{lang=ts} composable to query content based on the current route. -::ReadMore{link="/guide/displaying/querying"} -:: +:ReadMore{link="/guide/displaying/querying"} -::sandbox{repo="nuxt/content" branch="main" dir="examples/navigation/use-route" file="pages/[...slug].vue"} -:: +:sandbox{repo="nuxt/content" branch="main" dir="examples/navigation/use-route" file="pages/[...slug].vue"} diff --git a/docs/content/5.examples/6.templates/1.content-wind.md b/docs/content/5.examples/6.templates/1.content-wind.md index 445726536..9b931a29d 100644 --- a/docs/content/5.examples/6.templates/1.content-wind.md +++ b/docs/content/5.examples/6.templates/1.content-wind.md @@ -2,7 +2,7 @@ A lightweight Nuxt template to write a Markdown driven website with TailwindCSS and Iconify. -It leverages the [`document driven mode`](/guide/writing/document-driven) to display the current Markdown page and the generated navigation. +It leverages the [`document-driven mode`](/guide/writing/document-driven) to display the current Markdown page and the generated navigation. - Repository: [Atinux/content-wind](https://github.com/Atinux/content-wind) - Live demo: https://content-wind.nuxt.dev diff --git a/docs/content/6.blog/1.announcing-v2.md b/docs/content/6.blog/1.announcing-v2.md index 13cf179ba..d9ec96d9c 100644 --- a/docs/content/6.blog/1.announcing-v2.md +++ b/docs/content/6.blog/1.announcing-v2.md @@ -27,7 +27,7 @@ category: Announcements # Announcing Nuxt Content v2 -2 years after the [release of Content v1](https://github.com/nuxt/content/releases/tag/v1.0.0), we are proud to announce the second version of Nuxt Content built for [Nuxt 3](https://v3.nuxtjs.org). +2 years after the [release of Content v1](https://github.com/nuxt/content/releases/tag/v1.0.0), we are proud to announce the second version of Nuxt Content built for [Nuxt 3](https://nuxt.com). On top of the Nuxt 3 support, it comes with new features: @@ -42,22 +42,23 @@ On top of the Nuxt 3 support, it comes with new features: ## What is Nuxt Content? -Nuxt Content is a [Nuxt module](https://v3.nuxtjs.org/guide/features/modules) that reads Markdown, YAML, CSV and JSON files in the `content/` directory. +Nuxt Content is a [Nuxt module](https://nuxt.com/docs/guide/concepts/modules) that reads Markdown, YAML, CSV and JSON files in the `content/` directory. Let’s imagine a `content/` directory with the following structure: ::code-group - ```[Directory Structure] - content/ - index.md - ``` - ```md [index.md] - # Hello World +``` [Directory Structure] +content/ + index.md +``` - My first paragraph. +```md [index.md] +# Hello World - https://content.nuxtjs.org - ``` +My first paragraph. + +https://content.nuxtjs.org +``` :: Create a `pages/[...slug].vue` file with the [``](/guide/displaying/rendering) component inside: @@ -71,12 +72,12 @@ Create a `pages/[...slug].vue` file with the [``](/guide/displaying/ And voilà! ::code-group - ::code-block{label="Preview" preview} - # Hello World + ::code-block{label="Preview"} + # Hello World - My first paragraph. + My first paragraph. - https://content.nuxtjs.org + https://content.nuxtjs.org :: :: @@ -86,7 +87,6 @@ You can also query the `hello.md` file by using the `queryContent()` composable: const file = await queryContent('hello').findOne() ``` - ::callout #summary The returned file won't be Markdown or HTML, but a JSON representing the abstract syntax tree. @@ -169,6 +169,7 @@ The returned file won't be Markdown or HTML, but a JSON representing the abstrac } ``` :: + You can do much more than fetching only one file. Take a look at the [querying content](/guide/displaying/querying) section to discover its full potential. ## Introducing MDC @@ -176,14 +177,13 @@ You can do much more than fetching only one file. Take a look at the [querying c We wanted to leverage the power of Vue components in a content edition experience. After months of testing on the [Nuxt website](https://nuxtjs.org), we are happy to introduce the [**M**ark**D**own **C**omponents syntax](/guide/writing/mdc). ::list{icon="heroicons-outline:badge-check"} - - Use your own Vue components in Markdown - Customize them with props - Write Markdown content in slots (and of course, you can nest them) - Experience blazing fast HMR for Markdown and MDC (as fast as Vite!) :: -::alert +::alert{type="info"} MDC is Markdown, so nothing changes and you can keep using the `.md` extension. :: @@ -192,9 +192,10 @@ MDC is Markdown, so nothing changes and you can keep using the `.md` extension. ::code-group ```md [content/index.md] ::my-button{type="success"} - ✏️ Start **writing!** + ✏️ Start **writing!** :: ``` + ```html [components/MyButton.vue]