Update nuxt to version 4 (#92)

* Nuxt 3.17.4 and other dependencies updated

* Temporary fix (maybe) of the Inline Code

* Update nuxt to version 4

app/pages/blogs/[blog].vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { BlogPost } from '@/types/blog'
+import { navbarData, seoData } from '~/data'
+
+const { path } = useRoute()
+
+const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () =>
+  queryCollection('content').path(path).first(),
+)
+
+if (error.value) navigateTo('/404')
+
+const data = computed<BlogPost>(() => {
+  const meta = articles?.value?.meta as unknown as BlogPost
+  return {
+    title: articles.value?.title || 'no-title available',
+    description: articles.value?.description || 'no-description available',
+    image: meta?.image || '/not-found.jpg',
+    alt: meta?.alt || 'no alter data available',
+    ogImage: (articles?.value?.ogImage as unknown as string) || '/not-found.jpg',
+    date: meta?.date || 'not-date-available',
+    tags: meta?.tags || [],
+    published: meta?.published || false,
+  }
+})
+
+useHead({
+  title: data.value.title || '',
+  meta: [
+    { name: 'description', content: data.value.description },
+    {
+      name: 'description',
+      content: data.value.description,
+    },
+    // Test on: https://developers.facebook.com/tools/debug/ or https://socialsharepreview.com/
+    { property: 'og:site_name', content: navbarData.homeTitle },
+    { property: 'og:type', content: 'website' },
+    {
+      property: 'og:url',
+      content: `${seoData.mySite}/${path}`,
+    },
+    {
+      property: 'og:title',
+      content: data.value.title,
+    },
+    {
+      property: 'og:description',
+      content: data.value.description,
+    },
+    {
+      property: 'og:image',
+      content: data.value.ogImage || data.value.image,
+    },
+    // Test on: https://cards-dev.twitter.com/validator or https://socialsharepreview.com/
+    { name: 'twitter:site', content: '@qdnvubp' },
+    { name: 'twitter:card', content: 'summary_large_image' },
+    {
+      name: 'twitter:url',
+      content: `${seoData.mySite}/${path}`,
+    },
+    {
+      name: 'twitter:title',
+      content: data.value.title,
+    },
+    {
+      name: 'twitter:description',
+      content: data.value.description,
+    },
+    {
+      name: 'twitter:image',
+      content: data.value.ogImage || data.value.image,
+    },
+  ],
+  link: [
+    {
+      rel: 'canonical',
+      href: `${seoData.mySite}/${path}`,
+    },
+  ],
+})
+
+// console.log(articles.value)
+
+// Generate OG Image
+defineOgImageComponent('Test', {
+  headline: 'Riyads Blog 👋',
+  title: articles.value?.seo.title || '',
+  description: articles.value?.seo.description || '',
+  link: data.value.ogImage,
+})
+</script>
+
+<template>
+  <div class="px-6 container max-w-5xl mx-auto sm:grid grid-cols-12 gap-x-12">
+    <div class="col-span-12 lg:col-span-9">
+      <BlogHeader
+        :title="data.title"
+        :image="data.image"
+        :alt="data.alt"
+        :date="data.date"
+        :description="data.description"
+        :tags="data.tags"
+      />
+      <div
+        class="prose prose-pre:max-w-xs sm:prose-pre:max-w-full prose-sm sm:prose-base md:prose-lg prose-h1:no-underline max-w-5xl mx-auto prose-zinc dark:prose-invert prose-img:rounded-lg"
+      >
+        <ContentRenderer v-if="articles" :value="articles">
+          <template #empty>
+            <p>No content found.</p>
+          </template>
+        </ContentRenderer>
+      </div>
+    </div>
+    <BlogToc />
+
+    <div class="flex flex-row flex-wrap md:flex-nowrap mt-10 gap-2">
+      <SocialShare
+        v-for="network in ['facebook', 'twitter', 'linkedin', 'email']"
+        :key="network"
+        :network="network"
+        :styled="true"
+        :label="true"
+        class="p-1"
+        aria-label="Share with {network}"
+      />
+    </div>
+  </div>
+</template>