From 321d00b6f1efb7ac2189443a20943d91030e5221 Mon Sep 17 00:00:00 2001
From: Konkamon Sion <bigkonkamon@gmail.com>
Date: Thu, 12 Sep 2024 14:33:26 +0700
Subject: [PATCH] feat(Blog Slug): :sparkles: Use API To parse markdown instead
 of using browser

---
 pages/blog/[slug].vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index b214fa6..0b69b21 100644
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -21,14 +21,12 @@
 <script lang="ts" setup>
 import type { RouteLocationNormalized } from 'vue-router'
 import type { StrapiBlogSlug } from '~/types/StrapiBlogSlug'
-import { parseMarkdown } from '@nuxtjs/mdc/runtime'
-import type { MDCParserResult } from '@nuxtjs/mdc'
 
 const { findOne } = useStrapi()
 const route: RouteLocationNormalized = useRoute()
 
 const { data:blogSlug } = await useAsyncData('blogSlug', () =>
-  findOne<StrapiBlogSlug>('blogs', route.params['slug'] as string, {
+  findOne<StrapiBlogSlug>('blogs', route.params.slug as string, {
     fields: ['title', 'subtitle', 'publishedAt', 'slug', 'content', 'updatedAt', 'createdAt'],
     populate: {
       mainImage: {
@@ -52,9 +50,14 @@ useSeoMeta({
   ogUrl: `https://konkamon.live/blog/${blogSlug.value?.slug}`
 })
 
-  definePageMeta({
-    middleware: ['check-blog-post']
-  })
+definePageMeta({
+  middleware: ['check-blog-post']
+})
 
-const { data: ast } = await useAsyncData<MDCParserResult>('markdown', () => parseMarkdown(blogSlug.value?.content))
+const { data: ast } = await useFetch('/api/mdc-transform', {
+  method: 'POST',
+  body: {
+    content: blogSlug.value?.content
+  }
+})
 </script>