From 094c4c1d82cc4945cbd4c89a146ba7fa9c410a77 Mon Sep 17 00:00:00 2001
From: kernoeb <kernoeb@protonmail.com>
Date: Sun, 24 Sep 2023 16:30:31 +0200
Subject: [PATCH] use asyncData instead on fetch on home page

---
 pages/index.vue | 63 ++++++++++++++++++++++++++-----------------------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index cfa9ea1..07ee2a0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -151,43 +151,34 @@ import { categories, types } from '@/utils/data'
 
 export default {
   name: 'Home',
-  data () {
-    return {
-      carousel: [
-        {
-          title: 'BecauseOfProg',
-          subtitle: 'Blog autour de la programmation créé par des passionnés'
-        },
-        {
-          background: '/img/others/blurry-code.webp',
-          title: 'Nos projets',
-          subtitle: 'Nous mettons à disposition des outils et services open-sources',
-          button: {
-            label: 'En savoir plus',
-            link: '/page/projects'
-          }
-        }
-      ],
-      lastPublications: null,
-      categories,
-      types,
-      mdiClockOutline
-    }
-  },
-  async fetch () {
+  async asyncData ({ $content }) {
     // Get 3 last publications, sorted by timestamp
-    const lastPublications = await this.$content('blog-posts').without(['body']).sortBy('timestamp', 'desc').limit(3).fetch()
+    const lastPublications = await $content('blog-posts').without(['body']).sortBy('timestamp', 'desc').limit(3).fetch()
     const authorIds = [...new Set(lastPublications.map(v => v.authorId))]
-    const authors = await this.$content('members').where({ username: { $in: authorIds } }).fetch()
+    const authors = await $content('members').where({ username: { $in: authorIds } }).fetch()
     lastPublications.forEach((v) => {
       v.id = v.slug
       v.author = authors.find(a => a.slug === v.authorId) || {}
     })
-    this.lastPublications = lastPublications
 
-    const lastDevBlog = (await this.$content('devblogs').without(['body']).sortBy('timestamp', 'desc').limit(1).fetch())?.[0]
+    const carousel = [
+      {
+        title: 'BecauseOfProg',
+        subtitle: 'Blog autour de la programmation créé par des passionnés'
+      },
+      {
+        background: '/img/others/blurry-code.webp',
+        title: 'Nos projets',
+        subtitle: 'Nous mettons à disposition des outils et services open-sources',
+        button: {
+          label: 'En savoir plus',
+          link: '/page/projects'
+        }
+      }
+    ]
+    const lastDevBlog = (await $content('devblogs').without(['body']).sortBy('timestamp', 'desc').limit(1).fetch())?.[0]
     if (lastDevBlog) {
-      this.carousel.push({
+      carousel.push({
         background: lastDevBlog.banner,
         title: 'Sur notre devblog...',
         subtitle: `${lastDevBlog.title} (${lastDevBlog.category})`,
@@ -198,6 +189,20 @@ export default {
         classes: ['darker-bg']
       })
     }
+
+    return {
+      lastPublications,
+      carousel
+    }
+  },
+  data () {
+    return {
+      lastPublications: [],
+      carousel: [],
+      categories,
+      types,
+      mdiClockOutline
+    }
   },
   head () {
     return {