nuxt · Tahul · Jun 14, 2022 · Jun 13, 2022 · Jun 13, 2022 · Jun 14, 2022
diff --git a/docs/components/content/BlockHero.vue b/docs/components/content/BlockHero.vue
diff --git a/docs/components/content/Ellipsis.vue b/docs/components/content/Ellipsis.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="absolute left-0 top-0 w-full max-w-full">
+    <div class="ellipsis" />
+  </div>
+</template>
+
+
+<style lang="postcss" scoped>
+.ellipsis {
+  @apply h-[160px] md:w-[600px];
+  background: linear-gradient(97.62deg, rgba(0, 71, 225, 0.22) 2.27%, rgba(26, 214, 255, 0.22) 50.88%, rgba(0, 220, 130, 0.22) 98.48%);
+  filter: blur(169px);
+  transform: matrix(-0.95, -0.3, -0.3, 0.95, 200, 250);
+}
+</style>
diff --git a/docs/components/content/HeroAnnouncement.vue b/docs/components/content/HeroAnnouncement.vue
@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  to: {
+    type: String,
+    default: ''
+  },
+  label: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <NuxtLink :to="to" class="hover:bg-primary-200 text-primary-900 bg-primary-100 transition dark:bg-transparent hover:dark:bg-primary-900 dark:border-primary-700 dark:text-primary-100 border border-primary-400 mb-8 px-4 py-2 rounded-md flex gap-x-1 inline-flex items-center justify-center">
+    <Icon name="heroicons-solid:sparkles" class="h-4 w-4" />
+    <span class="font-medium text-sm">{{ label }}</span>
+  </NuxtLink>
+</template>
diff --git a/docs/content-v1/en/1.getting-started/1.introduction.md b/docs/content-v1/en/1.getting-started/1.introduction.md
@@ -3,8 +3,6 @@ title: Introduction
 description: 'Empower your NuxtJS application with the @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB-like API, acting as a Git-based Headless CMS.'
 ---
 
-Empower your NuxtJS application with the `@nuxt/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML, XML and CSV files through a MongoDB-like API, acting as a **Git-based Headless CMS**.
-
 ## Features
 
 ::list

diff --git a/docs/content-v1/fr/1.getting-started/1.introduction.md b/docs/content-v1/fr/1.getting-started/1.introduction.md
@@ -3,8 +3,6 @@ title: Introduction
 description: 'Renforcez votre application NuxtJS avec le module @nuxt/content : écrivez dans un répertoire content/ et récupérez vos fichiers Markdown, JSON, YAML et CSV à travers une API de type MongoDB, agissant comme un Headless CMS basé sur Git'
 ---
 
-Renforcez votre application NuxtJS avec le module `@nuxt/content` : écrivez dans un répertoire `content/` et récupérez vos fichiers Markdown, JSON, YAML et CSV à travers une API de type MongoDB, agissant comme un **Headless CMS basé sur Git**.
-
 ## Fonctionnalités
 
 ::list

diff --git a/docs/content-v1/fr/1.getting-started/5.displaying.md b/docs/content-v1/fr/1.getting-started/5.displaying.md
@@ -1,8 +1,6 @@
 ---
 title: Afficher du contenu
 description: Vous pouvez utiliser le composant `<nuxt-content>` directement dans vos template afin d'afficher votre Markdown.
-position: 5
-category: Pour commencer
 ---
 
 ::alert{type="info"}

diff --git a/docs/content-v1/fr/1.getting-started/7.advanced.md b/docs/content-v1/fr/1.getting-started/7.advanced.md
@@ -1,8 +1,6 @@
 ---
 title: Utilisation avancée
 description: Apprenez l'utilisation avancée du module @nuxt/content
-position: 7
-category: Pour commencer
 ---
 
 ## Utilisation Programmatique

diff --git a/docs/content-v1/fr/3.community/1.snippets.md b/docs/content-v1/fr/3.community/1.snippets.md
@@ -1,8 +1,6 @@
 ---
 title: Extraits
 description: 'Apprenez comment implémenter @nuxt/content dans votre application avec ces extraits de code.'
-subtitle: 'Découvrez ces extraits de code qui peuvent être copiés directement dans votre application.'
-version: 1.1
 ---
 
 ## Utilisation

diff --git a/docs/content-v1/ja/1.getting-started/1.introduction.md b/docs/content-v1/ja/1.getting-started/1.introduction.md
@@ -3,8 +3,6 @@ title: Content とは
 description: 'nuxt/contentモジュールを使ってNuxtJSアプリケーションを強化します。content/ディレクトリに書き込むことで、MongoDBのようなAPIを使ってMarkdown、JSON、YAML、CSVファイルを取得します。これはGitベースのヘッドレスCMSとして動作します。'
 ---
 
-`nuxt/content`モジュールを使ってNuxtJSアプリケーションを強化します。`content/`ディレクトリに書き込むことで、MongoDBのようなAPIを使ってMarkdown、JSON、YAML、XML、CSVファイルを取得します。これは**GitベースのヘッドレスCMS**として動作します。
-
 ## 特徴
 
 ::list

diff --git a/docs/content-v1/ja/2.examples/2.docs-theme.md b/docs/content-v1/ja/2.examples/2.docs-theme.md
@@ -1,7 +1,6 @@
 ---
 title: Docs
 description: 'テーマを使って、Nuxtと@nuxt/contentで開発を加速させましょう。'
-version: 1.6
 ---
 
 <alert type="info">

diff --git a/docs/content-v1/ru/1.getting-started/1.introduction.md b/docs/content-v1/ru/1.getting-started/1.introduction.md
@@ -3,8 +3,6 @@ title: Вступление
 description: 'Прокачайте ваше NuxtJS приложение с модулем @nuxt/content: пишите в директории content/ и получайте ваши Markdown, JSON, YAML и CSV файлы через MongoDB подобное API, работает как базирующаяся на Git безголовая CMS.'
 ---
 
-Прокачайте ваше NuxtJS приложение с модулем `@nuxt/content`: пишите в директории `content/` и получайте ваши Markdown, JSON, YAML и CSV файлы через MongoDB подобное API, работает как **базирующаяся на Git безголовая CMS**.
-
 ## Особенности
 
 ::list

diff --git a/docs/content/1.index.md b/docs/content/1.index.md
@@ -7,9 +7,6 @@ layout: fluid
 
 ::block-hero
 ---
-announcement:
-  - 'Announcing Nuxt Content v2'
-  - /blog/announcing-v2
 cta:
   - Get Started
   - /get-started
@@ -18,11 +15,23 @@ secondary:
   - https://github.com/nuxt/content
 ---
 
+#top
+::hero-announcement
+---
+label: "Announcing Nuxt Content v2"
+to: /blog/announcing-v2
+---
+::
+
 #title
 Content made easy for Vue Developers
 
 #description
 Nuxt Content reads the `content/` directory in your project, parses `.md`, `.yml`, `.csv` and `.json` files to create a powerful data layer for your application. Use Vue components in Markdown with the [MDC syntax](/guide/writing/mdc).
+
+#right
+::video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8" poster="/video-cover.jpeg" .border-2 .u-border-gray-100 .shadow-lg .h-64}
+::
 ::
 
 ::card-grid

diff --git a/docs/content/3.guide/1.writing/1.content-directory.md b/docs/content/3.guide/1.writing/1.content-directory.md
@@ -1,12 +1,8 @@
 ---
 title: 'Content directory'
-description: 'The Content module parses .md and .yam` files inside the content/ directory and provides paths according to the directory structure.'
+description: 'The Content module parses .md and .yaml files inside the content/ directory and provides paths according to the directory structure.'
 ---
 
-# Content directory
-
-The Content module parses `.md`, `.yml`, `.yaml`, `.csv`, `.json` and `.json5` files inside the `content/` directory and provides paths according to the directory structure.
-
 ## Paths
 
 Nuxt Content will automatically generate paths for your content files.
@@ -33,7 +29,7 @@ Nuxt Content uses these numbers to order content lists.
 content/
   1.frameworks/
     1.vue.md
-    2.nuxt.md 
+    2.nuxt.md
   2.examples/
     1.vercel.md
     2.netlify.md
@@ -53,7 +49,7 @@ Content module will ignore files and folders starting with a `.`.
 content/
    1.frameworks/
     .1.vue.md              // Ignored content
-    2.nuxt.md 
+    2.nuxt.md
   .2.translation/          // Ignored directory
     1.fa/
       1.messages.md        // Ignored content because of its grand parent
@@ -71,7 +67,7 @@ Partial contents are accessible in search and content lists but are not displaye
 content/
   1.frameworks/
     _1.vue.md              // Partial content
-    2.nuxt.md 
+    2.nuxt.md
   _2.translation/          // Partial directory
     1.fa/
       1.messages.md        // Partial content because of its grand parent

diff --git a/docs/content/3.guide/1.writing/2.markdown.md b/docs/content/3.guide/1.writing/2.markdown.md
@@ -3,10 +3,6 @@ title: Markdown
 description: 'Nuxt Content uses the Markdown syntax and conventions to provide a rich-text editing experience.'
 ---
 
-# Markdown
-
-Nuxt Content uses the Markdown syntax and conventions to provide a rich-text editing experience.
-
 - Use Markdown to format your content with Prose components.
 - Edit the meta-data of your pages in the front-matter block of your files.
 

diff --git a/docs/content/3.guide/1.writing/3.mdc.md b/docs/content/3.guide/1.writing/3.mdc.md
@@ -3,12 +3,6 @@ title: 'MDC Syntax'
 description: MDC stands for MarkDown Components. This syntax supercharges regular Markdown to write documents interacting deeply with any Vue component from your components/content/ directory or provided by a module.
 ---
 
-# MDC
-
-MDC stands for _**M**ark**D**own **C**omponents_.
-
-This syntax supercharges regular Markdown to write documents interacting deeply with any Vue component from your `components/content/` directory or provided by a module.
-
 ::alert{type=info}
 Install the [MDC VS Code extension](https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc) to get proper syntax highlighting for your MDC components.
 ::
@@ -293,15 +287,15 @@ Other than `span`s the attribute syntax will work on images, links, `code`, **bo
 
   ```md [Code]
   Attributes works on:
-  - ![](/icon.png){.inline.w-5.h-5.bg-primary-500} image, 
-  - [link](#attributes){.bg-primary-400}, `code`{.text-red-500}, 
+  - ![](/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.
   ```
 
-  ::code-block{label="Preview" preview} 
-  Attributes works on: 
-  - ![](/icon.png){.inline.w-5.h-5.bg-primary-500} image, 
-  - [link](#attributes){.bg-primary-400}, `code`{.text-red-500}, 
+  ::code-block{label="Preview" 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.
   ::
 ::
diff --git a/docs/content/3.guide/1.writing/4.json.md b/docs/content/3.guide/1.writing/4.json.md
@@ -3,10 +3,6 @@ title: JSON
 description: 'Nuxt Content can query JSON formatted content.'
 ---
 
-# JSON
-
-Nuxt Content can query JSON formatted content. 
-
 ::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.
 ::

diff --git a/docs/content/3.guide/1.writing/5.yaml.md b/docs/content/3.guide/1.writing/5.yaml.md
@@ -3,10 +3,6 @@ title: YAML / YML
 description: 'Nuxt Content can query YAML / YML formatted content.'
 ---
 
-# YAML / YML
-
-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.
 ::

diff --git a/docs/content/3.guide/1.writing/6.csv.md b/docs/content/3.guide/1.writing/6.csv.md
@@ -3,9 +3,9 @@ title: CSV
 description: 'Nuxt Content can query CSV formatted content.'
 ---
 
-# CSV
-
-Nuxt Content can query CSV formatted content. The `body` of the output is an array containing every row as objects.
+::alert{type=info}
+The `body` of the output is an array containing every row as objects.
+::
 
 ## Example
 

diff --git a/docs/content/3.guide/2.displaying/1.rendering.md b/docs/content/3.guide/2.displaying/1.rendering.md
@@ -3,8 +3,6 @@ title: 'Rendering'
 description: 'The <ContentDoc> and <ContentRenderer> components render the body of a Markdown document in a rich-text format.'
 ---
 
-# Rendering Content
-
 Nuxt Content provides 2 components to render Markdown content in a rich-text format, applying HTML tags ([Prose](/guide/writing/markdown)) and displaying Vue components ([MDC](/guide/writing/mdc)).
 
 - The `<ContentDoc>` component accepts an optional `path` prop to fetch the `content/` directory.

diff --git a/docs/content/3.guide/2.displaying/2.querying.md b/docs/content/3.guide/2.displaying/2.querying.md
@@ -1,11 +1,8 @@
 ---
 title: 'Querying'
-description: 'Any component or page of your application can fetch content from the content/ directory. The queryContent() function is auto-imported by Nuxt Content to build queries with a MongoDB-like syntax.'
+description: 'Any component or page of your application can fetch content from the content/ directory.'
 ---
 
-# Querying Content
-
-Any component or page of your application can fetch content from the `content/` directory.
 The `queryContent()`{lang="ts"} function is auto-imported by Nuxt Content to build queries with a MongoDB-like syntax.
 
 ## Usage

diff --git a/docs/content/3.guide/2.displaying/3.navigation.md b/docs/content/3.guide/2.displaying/3.navigation.md
@@ -3,9 +3,7 @@ title: Navigation
 description: 'The fetchContentNavigation utility returns a tree of items based on the content/ directory structure and files.'
 ---
 
-# Navigation
-
-The `fetchContentNavigation()`{lang="ts"} utility returns a tree of items based on the `content/` directory structure and files. Use the `title`{lang="ts"} and `path`{lang="ts"} properties of each item to create your application's navigation.
+Use the `title`{lang="ts"} and `path`{lang="ts"} properties of each item to create your application's navigation.
 
 ## Nested navigation
 

diff --git a/docs/content/3.guide/2.displaying/4.typescript.md b/docs/content/3.guide/2.displaying/4.typescript.md
@@ -1,11 +1,8 @@
 ---
 title: TypeScript
+description: 'Nuxt Content v2 is built with TypeScript in mind.'
 ---
 
-# TypeScript usage
-
-Nuxt Content v2 is built with TypeScript in mind.
-
 The module exposes typings properly from configuration to query builder.
 
 ## Usage
@@ -52,7 +49,7 @@ interface Article extends MarkdownParsedContent {
   author: string
 }
 const { data } = await useAsyncData(
-  'first-article',  
+  'first-article',
   () => queryContent<Article>('articles').findOne()
 )
 // data.value.author will be typed as well as markdown specific entries

diff --git a/docs/content/3.guide/3.recipes/1.sitemap.md b/docs/content/3.guide/3.recipes/1.sitemap.md
@@ -1,11 +1,8 @@
 ---
 title: Sitemap
+description: 'A sitemap file is useful for helping Google to better index your website, ensuring that the content you write can be visible on search results.'
 ---
 
-# Sitemap Generation
-
-A sitemap file is useful for helping Google to better index your website, ensuring that the content you write can be visible on search results.
-
 This can be created utilising the `sitemap` library, so you'll need to install that which can be done like so:
 
 ```bash
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,8 +3,6 @@ title: Introduction @@
     description: 'Empower your NuxtJS application with the @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB-like API, acting as a Git-based Headless CMS.'
     ---
-    Empower your NuxtJS application with the `@nuxt/content` module: write in a `content/` directory and fetch your Markdown, JSON, YAML, XML and CSV files through a MongoDB-like API, acting as a **Git-based Headless CMS**.
     ## Features
     ::list
@@ Expand Down @@