diff --git a/CHANGELOG.md b/CHANGELOG.md index f586ea340..597087e69 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,61 @@ # Changelog +## v2.6.0 + +[compare changes](https://github.com/nuxt/content/compare/v2.5.2...v2.6.0) + + +### 🚀 Enhancements + + - **CodeBlock:** Add line number attribute to code block lines ([#1973](https://github.com/nuxt/content/pull/1973)) + - More flexible ignores configuration ([#2022](https://github.com/nuxt/content/pull/2022)) + +### 🩹 Fixes + + - **type:** Content locale ([#1965](https://github.com/nuxt/content/pull/1965)) + - **markdown:** Html ids in markdown headings should not start with a digit ([#1961](https://github.com/nuxt/content/pull/1961)) + - **useContentHead:** Set `property` instead of `name` for OG metadata ([#1981](https://github.com/nuxt/content/pull/1981)) + - Access config from `public` key ([#2005](https://github.com/nuxt/content/pull/2005)) + - **ContentRendererMarkdown:** Prevent `undefiend` error on component resolve ([#2021](https://github.com/nuxt/content/pull/2021)) + - **code-block:** Use span with `\n` instead of div for lines ([#2008](https://github.com/nuxt/content/pull/2008)) + - **preview:** Use `sessionStorage` to keep token ([#2020](https://github.com/nuxt/content/pull/2020)) + - **shiki:** Add `\n` to empty lines ([46f3d79f](https://github.com/nuxt/content/commit/46f3d79f)) + - **markdown-renderer:** Document reactivity ([e46309fe](https://github.com/nuxt/content/commit/e46309fe)) + - **query:** Prevent adding duplicate conditions to query ([#2027](https://github.com/nuxt/content/pull/2027)) + - **document-driven:** Ensure layout is set on hydration ([#2032](https://github.com/nuxt/content/pull/2032)) + +### 📖 Documentation + + - Add Nuxt Studio link ([bc329334](https://github.com/nuxt/content/commit/bc329334)) + - Fix link to nitro plugins ([#1969](https://github.com/nuxt/content/pull/1969)) + - Format docs & update links & fix mistakes ([#1982](https://github.com/nuxt/content/pull/1982)) + - Fix template syntax ([9d8478de](https://github.com/nuxt/content/commit/9d8478de)) + +### ❤️ Contributors + +- Farnabaz +- Dave Stewart +- Nobkd +- Daniel Roe +- Thomas Lamant +- Electrolinux +- Artyom +- Sébastien Chopin + +## v2.5.2 + +[compare changes](https://github.com/nuxt/content/compare/v2.5.1...v2.5.2) + + +### 🩹 Fixes + + - Revert navDirFromPath behavior ([049c356d](https://github.com/nuxt/content/commit/049c356d)) + +### ❤️ Contributors + +- Sébastien Chopin ([@Atinux](http://github.com/Atinux)) + ## v2.5.1 [compare changes](https://github.com/nuxt/content/compare/v2.5.0...v2.5.1) diff --git a/README.md b/README.md index 83f519301..197d631a2 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ Nuxt Content reads the `content/` directory in your project, parses `.md`, `.yml - [📖  Read the documentation](https://content.nuxtjs.org) - [👾  Playground](https://stackblitz.com/github/nuxt/content/tree/main/examples/essentials/hello-world?file=app.vue) - [✨  Intro video](https://www.youtube.com/watch?v=o9e12WbKrd8) +- [✍️  Nuxt Studio](https://nuxt.studio) ## Features 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-list.md b/docs/content/4.api/1.components/2.content-list.md index 17891a654..dfdb0c110 100644 --- a/docs/content/4.api/1.components/2.content-list.md +++ b/docs/content/4.api/1.components/2.content-list.md @@ -40,7 +40,7 @@ An explicit `path`{lang=ts} can be given to the component.