diff --git a/docs/components/content/BlockHero.vue b/docs/components/content/BlockHero.vue deleted file mode 100644 index fe46dab31..000000000 --- a/docs/components/content/BlockHero.vue +++ /dev/null @@ -1,56 +0,0 @@ - - - diff --git a/docs/components/content/Ellipsis.vue b/docs/components/content/Ellipsis.vue new file mode 100644 index 000000000..ffc0e1c67 --- /dev/null +++ b/docs/components/content/Ellipsis.vue @@ -0,0 +1,15 @@ + + + + diff --git a/docs/components/content/HeroAnnouncement.vue b/docs/components/content/HeroAnnouncement.vue new file mode 100644 index 000000000..8a48dad4b --- /dev/null +++ b/docs/components/content/HeroAnnouncement.vue @@ -0,0 +1,19 @@ + + + diff --git a/docs/content-v1/en/1.getting-started/1.introduction.md b/docs/content-v1/en/1.getting-started/1.introduction.md index 9728be7bd..e063f1842 100644 --- 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 index be81ac3db..9e0e251f6 100644 --- 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 index 744951671..f8b58c490 100644 --- 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 `` 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 index 653de5135..e302179db 100644 --- 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 index 72b3a7896..3f651ff38 100644 --- 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 index 211798c51..296bb88f3 100644 --- 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 index ab3c3626a..7eaa1ffd5 100644 --- 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 --- diff --git a/docs/content-v1/ru/1.getting-started/1.introduction.md b/docs/content-v1/ru/1.getting-started/1.introduction.md index dbbb035e4..fa7f0b968 100644 --- 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 index 0fecaecc7..9fbb04807 100755 --- 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 index 2683972bc..673a8a55c 100644 --- 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 index 9127b1f1a..7228639fa 100755 --- 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 index 28cc72b4e..300a9033f 100755 --- 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 index 300704421..09fd31691 100644 --- 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 index eaf412334..f0c0d6a8b 100644 --- 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 index 138259ab7..2bfd0f4ab 100644 --- 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 index 9fa40040d..56509c814 100644 --- 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 and 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 `` 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 index 79dc5249b..673c5f0af 100644 --- 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 index 8d0986287..5d39ff577 100644 --- 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 index a6bdecbc0..e64167a18 100644 --- 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
('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 index c90dee553..b0da08d87 100644 --- 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 diff --git a/docs/content/3.guide/4.migration/1.from-v1.md b/docs/content/3.guide/4.migration/1.from-v1.md index e12f641c2..3d559ffcc 100644 --- a/docs/content/3.guide/4.migration/1.from-v1.md +++ b/docs/content/3.guide/4.migration/1.from-v1.md @@ -3,8 +3,6 @@ title: 'From Content v1' description: 'Learn how to upgrade from Nuxt Content V1 to Nuxt Content V2 for Nuxt 3.' --- -# Migration from Content V1 - - Make sure your dev server (`nuxt dev`) isn't running and remove any package lock files (`package-lock.json` and `yarn.lock`) - Upgrade to Nuxt 3 (check out the [Nuxt 3 migration guide](https://v3.nuxtjs.org/getting-started/migration)) @@ -101,7 +99,7 @@ The `` component will fetch the document for the current route path | Feature / Version | Convent v1 | Content v2 | | ----------------- | :--------: | :--------: | -| Nuxt Version | `nuxt@2.x` | `nuxt@3.x` | +| 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 | ❌ | ✅ | diff --git a/docs/content/4.api/1.components/1.content-doc.md b/docs/content/4.api/1.components/1.content-doc.md index a31ca5b5d..5a37f9ec8 100644 --- a/docs/content/4.api/1.components/1.content-doc.md +++ b/docs/content/4.api/1.components/1.content-doc.md @@ -3,8 +3,6 @@ title: '' description: 'The fastest way to query and display your content.' --- -# `` - The ``{lang=html} component fetches and renders a single document. An explicit path can be passed to the component with the `path`{lang=ts} prop. If not provided, the `$route.path`{lang=ts} will be used. 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 7fce565f0..a2dc8f729 100644 --- a/docs/content/4.api/1.components/2.content-list.md +++ b/docs/content/4.api/1.components/2.content-list.md @@ -3,8 +3,6 @@ title: '' description: 'The fastest way to query and display your content.' --- -# `` - The ``{lang=html} component fetches a list of documents and allows you to render them by using `slots`. The fetching path defaults to the content root (`/`). 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 fbad81d66..2d5a7ca25 100644 --- a/docs/content/4.api/1.components/2.content-renderer.md +++ b/docs/content/4.api/1.components/2.content-renderer.md @@ -3,8 +3,6 @@ title: '' description: 'Takes your component from an AST to a wonderful template.' --- -# `` - The ``{lang=html} component renders a document coming from a query. It will use ``{lang=html} component to render `.md` file types. diff --git a/docs/content/4.api/1.components/3.content-navigation.md b/docs/content/4.api/1.components/3.content-navigation.md index d7a5eb255..077207f8a 100644 --- a/docs/content/4.api/1.components/3.content-navigation.md +++ b/docs/content/4.api/1.components/3.content-navigation.md @@ -3,8 +3,6 @@ title: '' description: 'Building complex navigation from your content has never been easier.' --- -# `` - The ``{lang=html} is a renderless component shortening the access to navigation. ## Props diff --git a/docs/content/4.api/1.components/4.content-query.md b/docs/content/4.api/1.components/4.content-query.md index f8c53aff1..92dcc2faa 100644 --- a/docs/content/4.api/1.components/4.content-query.md +++ b/docs/content/4.api/1.components/4.content-query.md @@ -3,8 +3,6 @@ title: '' description: 'The fastest way to query and display your content.' --- -# `` - The ``{lang=html} component fetches a document and gives access to it via a scoped slot. ## Props diff --git a/docs/content/4.api/1.components/5.markdown.md b/docs/content/4.api/1.components/5.markdown.md index 363a1f476..ea1f3464a 100644 --- a/docs/content/4.api/1.components/5.markdown.md +++ b/docs/content/4.api/1.components/5.markdown.md @@ -3,15 +3,13 @@ title: '' description: 'The fastest way to inject Markdown into your Vue components.' --- -# `` - The ``{lang=html} component makes it easier to use Markdown syntax in your Vue components. It is useful when creating components that you want to use in your Markdown content. ## Props -- `use`{lang=ts}: The slot to bind on, you must provide a `use`{lang=ts} via `$slots.{your_slot}`{lang=ts} in `