docs: format docs & update links & fix mistakes (#1982)

Co-authored-by: Farnabaz <farnabaz@gmail.com>

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`:

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
 
 <alert type="info">
 
-Be careful to enter <code>&lt;!--more--&gt;</code> exactly; i.e., all lowercase and with no whitespace.
+Be careful to enter `<!--more-->` exactly; i.e., all lowercase and with no whitespace.
 
 </alert>
 

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]

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"}

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"}

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"}

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.
 
-<alert>
+<alert type="info">
 
 We recommend to take a look at this tutorial made by [Pascal Cauhépé](https://twitter.com/eQRoeil)
-
+<br>
 👉 &nbsp;https://nuxt-content-and-forestry.netlify.app
 
 </alert>

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"}

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`:

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 <code>&lt;!--more--&gt;</code>; c'est-à-dire, tout en minuscules et sans espace.
-
-::alert
+Veillez à saisir exactement `<!--more-->`; c'est-à-dire, tout en minuscules et sans espace.
+::
 
 Des exemples de variables seront injectés dans le document:
 

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

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"}

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"}

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"}

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

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` を追加します。

docs/content-v1/ja/1.getting-started/3.writing.md

@@ -78,12 +78,12 @@ title: Introduction
 
 Description プロパティには、フロントマター プロップ内で定義されていない限り、抜粋コンテンツが含まれます。
 
-
 ::alert{type="info"}
-<code>&lt;!--more--&gt;</code> を正確に入力するように注意してください。 つまり、すべて小文字で、空白はありません。
+`<!--more-->` を正確に入力するように注意してください。 つまり、すべて小文字で、空白はありません。
 ::
 
 変数の例がドキュメントに挿入されます。
+
 ```json
 {
   body: Object
@@ -321,9 +321,7 @@ multiselectOptions:
 </div>
 
 ::alert{type="info"}
-
 これらのコンポーネントは `<nuxt-content>` コンポーネントを使ってレンダリングされます。[コンテンツを表示する](/ja/displaying#component)を参照してください。
-
 ::
 
 またMarkdownの中で`<template>`タグを***使用できない***ことにも注意してください。（例: `v-slot`と使用する）
@@ -359,9 +357,7 @@ content/
 > このページの右側に表示されている目次を例に見てみましょう。
 
 ::alert{type="info"}
-
 アプリに目次を実装する方法について、[この実装例](/ja/examples#目次)を参照してください
-
 ::
 
 ### 用例

docs/content-v1/ja/1.getting-started/4.fetching.md

@@ -200,9 +200,7 @@ const [prev, next] = await this.$content('articles')
 > `surround`を利用する場合、`search`、`limit`、`skip`は考慮されません。
 
 ::alert{type="info"}
-
 アプリに前後の記事へのリンクを実装する方法について[この実装例](/ja/examples#ページネーション)を参考にしてください
-
 ::
 
 ### fetch()

docs/content-v1/ja/1.getting-started/6.configuration.md

@@ -88,9 +88,7 @@ content: {
 [remark](https://github.com/remarkjs/remark)と[rehype](https://github.com/rehypejs/rehype)を使って、MarkdownファイルをJSON ASTにコンパイルし、変数`body`に格納します。
 
 ::alert{type="info"}
-
 以下の説明は`remarkPlugins`と`rehypePlugins`の両方に当てはまります。
-
 ::
 
 どのようにMarkdownをパースするか設定するには、次のようにします。
@@ -163,20 +161,18 @@ export default {
 }
 ```
 
-::alert
-
+::alert{type="info"}
 新しいプラグインを追加するときは、必ず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]
@@ -207,18 +203,14 @@ export default {
 
 ### `markdown.basePlugins`
 
-::alert
-
+::alert{type="info"}
 非推奨です。代わりに `markdown.remarkPlugins`を関数として使用してください。
-
 ::
 
 ### `markdown.plugins`
 
-::alert
-
+::alert{type="info"}
 非推奨です。代わりに `markdown. remarkPlugins`を配列として使用してください。
-
 ::
 
 ### `markdown.prism.theme`
@@ -231,13 +223,14 @@ export default {
 これは、Nuxt.jsの設定で希望するPrismJSテーマを自動的にプッシュします。デフォルトのテーマとは異なるテーマを使用したい場合は、[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]