From 523238ca9908f6fc8c03ce18c8f9115d753f02da Mon Sep 17 00:00:00 2001
From: juls0730 <62722391+juls0730@users.noreply.github.com>
Date: Tue, 23 Apr 2024 20:14:40 -0500
Subject: [PATCH] fix stale data fetching

---
 components/MiniBlogCard.vue |  2 +-
 nuxt.config.ts              | 10 ++++++++++
 pages/blog/[...slug].vue    | 22 +++++++++++-----------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/components/MiniBlogCard.vue b/components/MiniBlogCard.vue
index c4d1143..ec2178b 100644
--- a/components/MiniBlogCard.vue
+++ b/components/MiniBlogCard.vue
@@ -9,7 +9,7 @@ const props = defineProps({
 
 <template>
     <NuxtLink :to="props.to"
-        class="py-8 px-6 border-[#ECE6E7] dark:border-[#232326] border rounded-lg hover:dark:bg-obsidian-night hover:bg-[hsl(270,68%,95.71%)] hover:transition-colors select-none"
+        class="py-8 px-6 border-[#ECE6E7] dark:border-[#232326] border rounded-lg hover:dark:bg-obsidian-night hover:bg-[hsl(270,68%,95.71%)] hover:transition-colors select-none block"
         :class="props.rightAlign ? 'text-right' : ''">
         <div
             class="p-1.5 inline-flex bg-[#ECE6E7] dark:bg-[#1A1A1D] rounded-full mb-4 border border-gray-300/80 dark:border-neutral-800/70">
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d371f79..5e2705d 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -69,4 +69,14 @@ export default defineNuxtConfig({
             autoprefixer: {},
         },
     },
+
+    router: {
+        options: {
+            strict: false
+        }
+    },
+
+    sourcemap: false,
+
+    ssr: true
 })
diff --git a/pages/blog/[...slug].vue b/pages/blog/[...slug].vue
index a2c0097..d0d5615 100755
--- a/pages/blog/[...slug].vue
+++ b/pages/blog/[...slug].vue
@@ -7,8 +7,9 @@ const location = useBrowserLocation()
 let year = new Date().getFullYear();
 
 let route = useRoute();
-const { data: doc } = await useAsyncData('blog', () => queryContent(route.path).findOne())
-if (!doc.value) {
+// cant use "useAsyncData" here for some reason because it leads to the posts not rendering correctly
+const doc = await queryContent(route.path).findOne()
+if (!doc) {
     throw createError({ statusCode: 404, statusMessage: 'Article not found', fatal: true })
 }
 
@@ -96,7 +97,8 @@ useHead({
         <Nav />
         <div class="grid grid-cols-12 gap-x-5 justify-center pt-6 mb-4 relative">
             <div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-1">
-                <NuxtImg :src="doc.image.src" class="mb-2 rounded-md drop-shadow w-full" quality="80" />
+                <NuxtImg v-if="doc.image" :src="doc.image.src" class="mb-2 rounded-md drop-shadow w-full"
+                    quality="80" />
                 <h1 class="text-3xl dark:text-gray-100 md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
                 <p class="mb-1 dark:text-zinc-400 text-zinc-600">
                     {{ doc.description }}
@@ -130,14 +132,12 @@ useHead({
                         Copy Link
                     </button>
                 </div>
-                <div v-if="surround">
-                    <hr class="my-6 border-[#ECE6E7] dark:border-[#232326] border-t" />
-                    <div class="grid gap-8 grid-cols-1 sm:grid-cols-2">
-                        <MiniBlogCard v-if="surround[0]" :to="surround[0]._path" :title="surround[0].title"
-                            :description="surround[0].description" />
-                        <MiniBlogCard class="col-start-2" v-if="surround[1]" :to="surround[1]._path"
-                            :title="surround[1].title" :right-align="true" :description="surround[1].description" />
-                    </div>
+                <hr class="my-6 border-[#ECE6E7] dark:border-[#232326] border-t" />
+                <div v-if="surround" class="sm:grid gap-8 sm:grid-cols-2">
+                    <MiniBlogCard v-if="surround[0]" :to="surround[0]._path" :title="surround[0].title"
+                        :description="surround[0].description" />
+                    <MiniBlogCard class="col-start-2" v-if="surround[1]" :to="surround[1]._path"
+                        :title="surround[1].title" :right-align="true" :description="surround[1].description" />
                 </div>
             </div>
         </div>