chore(docs): import v1 docs (#1123)

Co-authored-by: Clément Ollivier <[email protected]>

docs/components/content/BlockHero.vue

@@ -34,20 +34,22 @@ defineProps({
           <Markdown use="description" unwrap="p" />
         </p>
         <div class="flex flex-col items-center space-y-4 sm:mb-4 sm:flex-row sm:space-y-0 sm:space-x-4 lg:space-x-6">
-          <ButtonLink v-if="cta" class="mx-auto md:mx-0" bold size="large" :href="(cta[1] as any)">
+          <ButtonLink v-if="cta" class="mx-auto md:mx-0 !mb-0" bold size="large" :href="(cta[1] as any)">
             {{ cta[0] }}
           </ButtonLink>
+
           <a
             v-if="secondary"
             :href="(secondary[1] as any)"
-            class="text-secondary-active border-b border-gray-300 dark:bordwer-gray-500 hover:border-gray-800 dark:hover:border-gray-200 mt-px py-px font-medium"
+            class="block transition-base transition-colors text-secondary-active border-b border-gray-300 dark:bordwer-gray-500 hover:border-gray-800 dark:hover:border-gray-200 mt-2 py-px font-medium"
           >
             {{ secondary[0] }}
           </a>
         </div>
       </div>
+
       <div class="sm:w-580px mx-auto lg:w-1/3">
-        <VideoPlayer src="https://www.youtube.com/watch?v=o9e12WbKrd8" />
+        <VideoPlayer poster="/video-cover.jpeg" src="https://www.youtube.com/watch?v=o9e12WbKrd8" />
       </div>
     </Container>
   </section>

docs/components/content/ExampleMultiselect.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>Not working on content v2 docs!</div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: [Array, String],
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      value: null
+    }
+  }
+}
+</script>

docs/content-v1/en/1.getting-started/1.introduction.md

@@ -0,0 +1,63 @@
+---
+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
+- Blazing fast hot reload in development
+- Vue components in Markdown
+- Full-text search
+- Support static site generation with `nuxt generate`
+- Powerful QueryBuilder API (MongoDB like)
+- Syntax highlighting to code blocks in markdown files using PrismJS.
+- Table of contents generation
+- Handles Markdown, CSV, YAML, JSON(5), XML
+- Extend with custom parsers
+- Extend with hooks
+::
+
+## Videos
+
+Demonstration of using `$content` and `<nuxt-content>` to display Markdown pages:
+
+<video poster="https://res.cloudinary.com/nuxt/video/upload/v1588091670/nuxt-content_wxnjje.jpg" loop playsinline controls>
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1588091670/nuxt-content_wxnjje.webm" type="video/webm" />
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1588091670/nuxt-content_wxnjje.mp4" type="video/mp4" />
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1588091670/nuxt-content_wxnjje.ogv" type="video/ogg" />
+</video>
+
+Using `$content()` on a directory to list, filter and search content:
+
+<video poster="https://res.cloudinary.com/nuxt/video/upload/v1588095794/nuxt-content-movies_c0cq9p.jpg" loop playsinline controls>
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1588095794/nuxt-content-movies_c0cq9p.webm" type="video/webm" />
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1588095794/nuxt-content-movies_c0cq9p.mp4" type="video/mp4" />
+  <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1588095794/nuxt-content-movies_c0cq9p.ogv" type="video/ogg" />
+</video>
+
+## Tutorial
+
+[Create a blog with Nuxt Content](https://nuxtjs.org/blog/creating-blog-with-nuxt-content)
+
+## Testimonials
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Really enjoy working with the <a href="https://twitter.com/nuxt_js?ref_src=twsrc%5Etfw">@nuxt_js</a> content module more and more. Especially from a developer perspective. The api is easy to learn and really powerful. Give it a try if you haven&#39;t already.</p>&mdash; Rasmus Langvad (@rlangvad) <a href="https://twitter.com/rlangvad/status/1352940444200669186?ref_src=twsrc%5Etfw">January 23, 2021</a></blockquote>
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Adding an FAQ to <a href="https://twitter.com/turnaudio?ref_src=twsrc%5Etfw">@TurnAudio</a> using <a href="https://twitter.com/nuxt_js?ref_src=twsrc%5Etfw">@nuxt_js</a> nuxt/content. Really great module for organizing a little bit of content within your static website <a href="https://t.co/o2uA9Lvmuu">https://t.co/o2uA9Lvmuu</a></p>&mdash; Lee Martin (@leemartin) <a href="https://twitter.com/leemartin/status/1290374428107341830?ref_src=twsrc%5Etfw">August 3, 2020</a></blockquote>
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Wanted to try out <a href="https://twitter.com/nuxt_js?ref_src=twsrc%5Etfw">@nuxt_js</a> new content theme doc, was a blast!<br><br>Managed to hack its interals to extend its Tailwind config with mine hihihi... <a href="https://t.co/fuXXOBKXYE">pic.twitter.com/fuXXOBKXYE</a></p>&mdash; lihbr (@li_hbr) <a href="https://twitter.com/li_hbr/status/1289536277897834497?ref_src=twsrc%5Etfw">August 1, 2020</a></blockquote>
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr">On an upper <a href="https://twitter.com/nuxt_js?ref_src=twsrc%5Etfw">@nuxt_js</a> is the most exciting thing in web for me right now, everything they put out is golden. The content module is phenomenal.</p>&mdash; Liam Hall - Three Bears (@wearethreebears) <a href="https://twitter.com/wearethreebears/status/1289345099214725120?ref_src=twsrc%5Etfw">July 31, 2020</a></blockquote>
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr">I&#39;ve been working on a new portfolio/blog today with <a href="https://twitter.com/tailwindcss?ref_src=twsrc%5Etfw">@tailwindcss</a> and <a href="https://twitter.com/nuxt_js?ref_src=twsrc%5Etfw">@nuxt_js</a>. I&#39;m blown away by Nuxt Content.</p>&mdash; Cameron Baney (@cameronbaney) <a href="https://twitter.com/cameronbaney/status/1289671455559413761?ref_src=twsrc%5Etfw">August 1, 2020</a></blockquote>
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Docs powered by the new <a href="https://twitter.com/nuxt_js?ref_src=twsrc%5Etfw">@nuxt_js</a> content plugin and stored in <a href="https://twitter.com/Netlify?ref_src=twsrc%5Etfw">@Netlify</a> what a time to be a developer</p>&mdash; Alfonso Bribiesca (@alfonsobries) <a href="https://twitter.com/alfonsobries/status/1288653236833062913?ref_src=twsrc%5Etfw">July 30, 2020</a></blockquote>
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr">The new vee-validate v4 documentation is using <a href="https://twitter.com/nuxt_js?ref_src=twsrc%5Etfw">@nuxt_js</a> content module and so far it is too damn good 🔥<br><br>I like being able to create my own layouts and &quot;on this page&quot; and &quot;menu&quot; components, in other words, to be in full control 🎮</p>&mdash; Abdelrahman Awad (@logaretm) <a href="https://twitter.com/logaretm/status/1287526576847048705?ref_src=twsrc%5Etfw">July 26, 2020</a></blockquote>
+
+<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Decided to build a blog with <a href="https://twitter.com/nuxt_js?ref_src=twsrc%5Etfw">@nuxt_js</a> content module. I mean, it&#39;s rapid and lightning quick to setup. Super nice experience thus far 👌</p>&mdash; 𝖊𝖗𝖉 (@erd_xyz) <a href="https://twitter.com/erd_xyz/status/1286395125447483394?ref_src=twsrc%5Etfw">July 23, 2020</a></blockquote>
+
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

docs/content-v1/en/1.getting-started/2.installation.md

@@ -0,0 +1,50 @@
+---
+title: Installation
+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
+  ```
+
+  ```bash [NPM]
+  npm install @nuxt/content
+  ```
+::
+
+Then, add `@nuxt/content` to the `modules` section of `nuxt.config.js`:
+
+```js [nuxt.config.js]
+{
+  modules: [
+    '@nuxt/content'
+  ],
+  content: {
+    // Options
+  }
+}
+```
+
+## TypeScript
+
+Add the types to your "types" array in tsconfig.json after the `@nuxt/types` (Nuxt 2.9.0+) or `@nuxt/vue-app` entry.
+
+**tsconfig.json**
+
+```json
+{
+  "compilerOptions": {
+    "types": [
+      "@nuxt/types",
+      "@nuxt/content"
+    ]
+  }
+}
+```
+
+> **Why?**
+>
+> Because of the way Nuxt works the `$content` property on the context has to be merged into the Nuxt `Context` interface via [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html). Adding `@nuxt/content` to your types will import the types from the package and make TypeScript aware of the additions to the `Context` interface.