docs(nuxtjs): dynamic blog content on homepage

nuxtjs.org/components/HomeCampfire.vue

@@ -14,12 +14,12 @@
 
         <template #content>
           <ul class="grid grid-cols-1 sm:grid-cols-2 gap-16 sm:gap-8 lg:gap-16 py-8">
-            <li v-for="(article, index) in articles" :key="article.title" class="flex flex-col self-start">
-              <img :src="`/img/home/campfire/article-${index + 1}.svg`" class="mb-4 h-2/3" />
-              <span class="text-cloud-light text-body-base lg:text-body-lg font-bold mb-2">{{ article.category }}</span>
-              <h3 class="text-body-xl lg:text-body-2xl font-bold mb-2">{{ article.title }}</h3>
-              <p class="mb-4 text-body-base lg:text-body-lg">{{ article.description }}</p>
-              <MMarketingLink color="primary-green" name="Read article" icon="IconChevronRight" :to="'#'" />
+            <li v-for="post in posts" :key="post.title" class="flex flex-col self-start">
+              <img :src="post.imgUrl" class="mb-4 h-2/3 rounded-lg" :alt="post.title" />
+              <span class="text-cloud-light text-body-base lg:text-body-lg font-bold mb-2">{{ post.category }}</span>
+              <h3 class="text-body-xl lg:text-body-2xl font-bold mb-2">{{ post.title }}</h3>
+              <p class="mb-4 text-body-base lg:text-body-lg">{{ post.description }}</p>
+              <MMarketingLink color="primary-green" name="Read article" icon="IconChevronRight" :to="post.to" />
             </li>
           </ul>
         </template>
@@ -28,25 +28,18 @@
   </HomeSection>
 </template>
 <script>
-import { defineComponent } from '@vue/composition-api'
-
+import { defineComponent, ref, useContext, useFetch } from '@nuxtjs/composition-api'
 export default defineComponent({
   setup() {
-    const articles = [
-      {
-        category: 'Tips',
-        title: 'Creating a Nuxt Module',
-        description: 'Lorem ipsum dolor sit amet dolor sit amet dolsor sit amet, consectetur adipiscing elit, se...'
-      },
-      {
-        category: 'Tips',
-        title: 'Improve your developer experience with Nuxt Components',
-        description: 'Lorem ipsum dolor sit amet dolor sit amet dolor sit amet, consectetur adipiscing elit, se...'
-      }
-    ]
+    const { $docus } = useContext()
+    const posts = ref()
+    useFetch(async () => {
+      const documents = await $docus.search('/blog/', { deep: true }).sortBy('position', 'desc').limit(2).fetch()
 
+      posts.value = documents.reverse()
+    })
     return {
-      articles
+      posts
     }
   }
 })

nuxtjs.org/content/2.blog/13.case-study-livementor.md → nuxtjs.org/content/2.blog/1.case-study-livementor.md

@@ -6,6 +6,7 @@ date: 2021-06-01
 tags:
   - case-study
   - nuxt-migration
+category: 'Showcase'
 authors:
   - name: 'Clement Ollivier'
     avatarUrl: https://pbs.twimg.com/profile_images/1370286658432724996/ZMSDzzIi_400x400.jpg

nuxtjs.org/content/2.blog/4.build-dev-to-clone-with-nuxt-new-fetch.md → nuxtjs.org/content/2.blog/10.build-dev-to-clone-with-nuxt-new-fetch.md

@@ -17,6 +17,7 @@ tags:
   - Fetch
   - Asynchronous Data Fetching
   - API
+category: Tutorial
 ---
 
 _Let’s build a blazing fast articles and tutorials app using Nuxt and the DEV API, with lazy loading, placeholders, caching and trendy neumorphic design UI._

nuxtjs.org/content/2.blog/3.understanding-how-fetch-works-in-nuxt-2-12.md → nuxtjs.org/content/2.blog/11.understanding-how-fetch-works-in-nuxt-2-12.md

@@ -14,6 +14,7 @@ tags:
   - Fetch
   - Asynchronous Data Fetching
   - API
+category: Release
 ---
 
 Nuxt introduces a new `fetch` with the latest release of version 2.12. Fetch provides a brand new way to bring data into Nuxt applications.

nuxtjs.org/content/2.blog/2.nuxtjs-from-terminal-to-browser.md → nuxtjs.org/content/2.blog/12.nuxtjs-from-terminal-to-browser.md

@@ -12,6 +12,7 @@ authors:
 tags:
   - webpack
   - DX
+category: Release
 ---
 
 > Nuxt.js is a Vue.js framework to create different kind of web applications with the **same directory structure & conventions**: Universal, Single Page, PWA or Static Generated.

nuxtjs.org/content/2.blog/1.introducing-smart-prefetching.md → nuxtjs.org/content/2.blog/13.introducing-smart-prefetching.md

@@ -13,6 +13,7 @@ tags:
   - framework
   - feature
   - performance
+category: Release
 ---
 
 ## Introducing Smart prefetching ⚡️

nuxtjs.org/content/2.blog/12.creating-a-nuxt-module.md → nuxtjs.org/content/2.blog/2.creating-a-nuxt-module.md

@@ -12,6 +12,7 @@ tags:
   - Nuxt
   - Modules
   - ngrok
+category: Tutorial
 ---
 
 Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Nuxt modules can be incorporated into npm packages. This makes them easy to reuse across projects and to share with the community.
@@ -427,4 +428,4 @@ Check out our published [ngrok module](https://ngrok.nuxtjs.org/).
 
 ::alert{type="next"}
 Check out our list of [Nuxt modules](https://modules.nuxtjs.org/).
-::
+::

nuxtjs.org/content/2.blog/11.nuxt-static-improvements.md → nuxtjs.org/content/2.blog/3.nuxt-static-improvements.md

@@ -19,6 +19,7 @@ tags:
   - release
   - full-static
   - framework
+category: Release
 ---
 
 ## Introduction

nuxtjs.org/content/2.blog/10.creating-blog-with-nuxt-content.md → nuxtjs.org/content/2.blog/4.creating-blog-with-nuxt-content.md

@@ -13,6 +13,7 @@ tags:
   - Nuxt
   - Content
   - Markdown
+category: Tutorial
 ---
 
 The [content module](https://content.nuxtjs.org) is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.

nuxtjs.org/content/2.blog/9.improve-your-developer-experience-with-nuxt-components.md → nuxtjs.org/content/2.blog/5.improve-your-developer-experience-with-nuxt-components.md

@@ -15,6 +15,7 @@ tags:
   - dynamic-import
   - ignore-rules
   - 3rd-party-library
+category: Tutorial
 ---
 
 ## Introduction

nuxtjs.org/content/2.blog/8.going-full-static.md → nuxtjs.org/content/2.blog/6.going-full-static.md

@@ -14,6 +14,7 @@ tags:
   - Static
   - Crawler
   - Live Preview
+category: Release
 ---
 
 ## Too long to read

nuxtjs.org/content/2.blog/7.moving-from-nuxtjs-dotenv-to-runtime-config.md

@@ -12,6 +12,7 @@ authors:
 tags:
   - Nuxt
   - env
+category: Tutorial
 ---
 
 It's time to migrate from @nuxtjs/dotenv module to use our new runtime config which has been released as of Nuxt v2.13.

nuxtjs.org/content/2.blog/6.going-dark-with-nuxtjs-color-mode.md → nuxtjs.org/content/2.blog/8.going-dark-with-nuxtjs-color-mode.md

@@ -12,6 +12,7 @@ authors:
 tags:
   - Nuxt
   - Color mode
+category: Tutorial
 ---
 
 <p align="center">

nuxtjs.org/content/2.blog/5.seed-round.md → nuxtjs.org/content/2.blog/9.seed-round.md

@@ -12,6 +12,7 @@ authors:
 tags:
   - Nuxt
   - Company
+category: Anouncement
 ---
 
 Three years ago, my brother Sébastien and I were [open sourcing our code](https://github.com/nuxt/nuxt.js) to build Vue.js applications with server side rendering. Today, we are incredibly excited to announce that NuxtJS has raised \$2M in seed funding led by [firstminute capital](https://www.firstminute.capital/) with participation from [Kima Ventures](https://www.kimaventures.com), [Eduardo Ronzano](https://www.linkedin.com/in/eduardoronzano/) (founder & CEO, KelDoc), [Thibaud Elzière](https://www.linkedin.com/in/thibaud-elziere-a787913/) (founder & CEO, Fotolia), [Nicolas Steegmann](https://www.linkedin.com/in/steegmann/) (founder of Stupeflix), and [Renaud Visage](https://www.linkedin.com/in/renaudvisage/) (Co-founder & CTO, Eventbrite).