update

2025-12-20 18:46:45 +08:00
parent 5163e756f0
commit 547fd99c23
73 changed files with 15635 additions and 1924 deletions
--- a/app/pages/[...slug].vue
+++ b/app/pages/[...slug].vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
 useHead({
-  title: '404',
+  title: "404",
  meta: [
    {
-      name: 'description',
-      content: 'Page not found',
+      name: "description",
+      content: "Page not found",
    },
  ],
-})
+});

-defineOgImageComponent('About', {
-  headline: 'Wrong Path',
-  title: '404',
-  description: 'Page Not Found',
-})
+defineOgImageComponent("About", {
+  headline: "Wrong Path",
+  title: "404",
+  description: "Page Not Found",
+});
 </script>

 <template>
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,22 +1,15 @@
 <script setup lang="ts">
-import { aboutPage, footerData, navbarData, socialLinks } from '~/data'
+import { aboutPage, footerData, navbarData, socialLinks } from "~/data";

 useHead({
-  title: 'About',
+  title: "About",
  meta: [
    {
-      name: 'description',
+      name: "description",
      content: footerData.aboutAuthor,
    },
  ],
-})
-
-defineOgImageComponent('About', {
-  headline: 'Greetings 👋',
-  title: navbarData.homeTitle,
-  description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
-  link: '/riyad.jpg',
-})
+});
 </script>

 <template>
@@ -34,32 +27,28 @@ defineOgImageComponent('About', {
                :to="socialLinks.githubLink"
                target="_blank"
                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
-                aria-label="Github"
-              >
+                aria-label="Github">
                <Icon name="fa:github" size="1em" class="-translate-y-[-10%]" />
              </NuxtLink>
              <NuxtLink
                :to="socialLinks.linkedinLink"
                target="_blank"
                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
-                aria-label="LinkedIn"
-              >
+                aria-label="LinkedIn">
                <Icon name="fa:linkedin-square" size="1em" class="-translate-y-[-10%]" />
              </NuxtLink>
              <NuxtLink
                :to="socialLinks.twitterLink"
                target="_blank"
                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
-                aria-label="Twitter"
-              >
+                aria-label="Twitter">
                <Icon name="fa:twitter-square" size="1em" class="-translate-y-[-10%]" />
              </NuxtLink>
              <NuxtLink
                :to="socialLinks.stackoverflowLink"
                target="_blank"
                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
-                aria-label="StackOverflow"
-              >
+                aria-label="StackOverflow">
                <Icon name="fa:stack-overflow" size="1em" class="-translate-y-[-10%]" />
              </NuxtLink>
            </div>
--- a/app/pages/blogs/[blog].vue
+++ b/app/pages/blogs/[blog].vue
@@ -1,128 +1,88 @@
 <script setup lang="ts">
-import type { BlogPost } from '@/types/blog'
-import { navbarData, seoData } from '~/data'
+import type { BlogPost } from "@/types/blog";
+import { seoData } from "~/data";

-const { path } = useRoute()
+const { path } = useRoute();

 const { data: articles, error } = await useAsyncData(`blog-post-${path}`, () =>
-  queryCollection('content').path(path).first(),
-)
+  queryCollection("content").path(path).first(),
+);

-if (error.value) navigateTo('/404')
+if (error.value) navigateTo("/404");

 const data = computed<BlogPost>(() => {
-  const meta = articles?.value?.meta as unknown as 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',
+    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 || '',
+  title: data.value.title || "",
  meta: [
-    { name: 'description', content: data.value.description },
+    { name: "description", content: data.value.description },
    {
-      name: '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',
+      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">
+  <div class="px-6 container max-w-6xl mx-auto sm:grid grid-cols-12 gap-x-12">
+    <div class="col-span-12 lg:col-span-8">
      <BlogHeader
        :title="data.title"
        :image="data.image"
        :alt="data.alt"
        :date="data.date"
        :description="data.description"
-        :tags="data.tags"
-      />
+        :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"
-      >
+        class="prose prose-zinc dark:prose-invert max-w-none prose-headings:scroll-mt-28 prose-headings:tracking-tight prose-headings:font-bold prose-h1:text-4xl prose-h2:text-3xl prose-h3:text-2xl prose-p:leading-relaxed prose-p:text-zinc-600 dark:prose-p:text-zinc-400 prose-a:text-violet-600 dark:prose-a:text-violet-400 prose-a:no-underline hover:prose-a:underline prose-blockquote:border-l-4 prose-blockquote:border-violet-500 prose-blockquote:bg-violet-500/5 prose-blockquote:py-1 prose-blockquote:px-6 prose-blockquote:rounded-r-xl prose-blockquote:italic prose-img:rounded-3xl prose-img:shadow-xl prose-code:text-violet-600 dark:prose-code:text-violet-400 prose-code:bg-violet-500/10 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-pre:bg-slate-900 dark:prose-pre:bg-slate-950 prose-pre:rounded-2xl prose-pre:shadow-2xl prose-pre:border prose-pre:border-white/5">
        <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 class="mt-16 pt-8 border-t border-white/10 dark:border-white/5">
+        <h3 class="text-lg font-bold text-zinc-800 dark:text-zinc-100 mb-6 flex items-center gap-2">
+          <Icon name="heroicons:share" class="w-5 h-5 text-violet-500" />
+          Share this post
+        </h3>
+        <div class="flex flex-wrap gap-3">
+          <SocialShare
+            v-for="network in ['facebook', 'twitter', 'linkedin', 'email']"
+            :key="network"
+            :network="network"
+            :styled="true"
+            :label="true"
+            class="!rounded-xl !bg-white/40 dark:!bg-slate-800/40 !backdrop-blur-md !border !border-white/20 dark:!border-white/5 !text-zinc-700 dark:!text-zinc-300 hover:!bg-violet-500/10 hover:!text-violet-600 transition-all duration-300"
+            aria-label="Share with {network}" />
+        </div>
+      </div>
    </div>
+
+    <!-- 侧边目录 -->
+    <BlogToc />
  </div>
 </template>
--- a/app/pages/blogs/index.vue
+++ b/app/pages/blogs/index.vue
@@ -1,88 +1,88 @@
 <script lang="ts" setup>
-import Fuse from 'fuse.js'
-import type { BlogPost } from '~/types/blog'
+import Fuse from "fuse.js";
+import type { BlogPost } from "~/types/blog";

-const { data } = await useAsyncData('all-blog-post', () => queryCollection('content').all())
+const { data } = await useAsyncData("all-blog-post", () => queryCollection("content").all());

-const elementPerPage = ref(5)
-const pageNumber = ref(1)
-const searchTest = ref('')
+const elementPerPage = ref(5);
+const pageNumber = ref(1);
+const searchTest = ref("");

 const formattedData = computed(() => {
  return (
    data.value?.map((articles) => {
-      const meta = articles.meta as unknown as BlogPost
+      const meta = articles.meta as unknown as BlogPost;
      return {
        path: articles.path,
-        title: articles.title || 'no-title available',
-        description: articles.description || 'no-description available',
-        image: meta.image || '/not-found.jpg',
-        alt: meta.alt || 'no alter data available',
-        ogImage: meta.ogImage || '/not-found.jpg',
-        date: meta.date || 'not-date-available',
+        title: articles.title || "no-title available",
+        description: articles.description || "no-description available",
+        image: meta.image || "/not-found.jpg",
+        alt: meta.alt || "no alter data available",
+        ogImage: meta.ogImage || "/not-found.jpg",
+        date: meta.date || "not-date-available",
        tags: meta.tags || [],
        published: meta.published || false,
-      }
+      };
    }) || []
-  )
-})
+  );
+});

 const fuse = computed(() => {
  return new Fuse(formattedData.value, {
-    keys: ['title', 'description'],
+    keys: ["title", "description"],
    threshold: 0.4,
    includeScore: false,
-  })
-})
+  });
+});

 const searchData = computed(() => {
  if (!searchTest.value.trim()) {
-    return formattedData.value
+    return formattedData.value;
  }

-  const results = fuse.value.search(searchTest.value)
-  return results.map((result) => result.item)
-})
+  const results = fuse.value.search(searchTest.value);
+  return results.map((result) => result.item);
+});

 const paginatedData = computed(() => {
-  const startInd = (pageNumber.value - 1) * elementPerPage.value
-  const endInd = pageNumber.value * elementPerPage.value
+  const startInd = (pageNumber.value - 1) * elementPerPage.value;
+  const endInd = pageNumber.value * elementPerPage.value;

-  return searchData.value.slice(startInd, endInd)
-})
+  return searchData.value.slice(startInd, endInd);
+});

 function onPreviousPageClick() {
-  if (pageNumber.value > 1) pageNumber.value -= 1
+  if (pageNumber.value > 1) pageNumber.value -= 1;
 }

 const totalPage = computed(() => {
-  const ttlContent = searchData.value.length || 0
-  return Math.ceil(ttlContent / elementPerPage.value)
-})
+  const ttlContent = searchData.value.length || 0;
+  return Math.ceil(ttlContent / elementPerPage.value);
+});

 function onNextPageClick() {
-  if (pageNumber.value < totalPage.value) pageNumber.value += 1
+  if (pageNumber.value < totalPage.value) pageNumber.value += 1;
 }

 useHead({
-  title: 'Archive',
+  title: "Archive",
  meta: [
    {
-      name: 'description',
-      content: 'Here you will find all the blog posts I have written & published on this site.',
+      name: "description",
+      content: "Here you will find all the blog posts I have written & published on this site.",
    },
  ],
-})
+});

 // Generate OG Image
-const siteData = useSiteConfig()
+const siteData = useSiteConfig();
 defineOgImage({
  props: {
-    title: 'Archive',
-    description: 'Here you will find all the blog posts I have written & published on this site.',
+    title: "Archive",
+    description: "Here you will find all the blog posts I have written & published on this site.",
    siteName: siteData.url,
  },
-})
+});
 </script>

 <template>
@@ -94,8 +94,7 @@ defineOgImage({
        v-model="searchTest"
        placeholder="Search"
        type="text"
-        class="block w-full bg-[#F1F2F4] dark:bg-slate-900 dark:placeholder-zinc-500 text-zinc-300 rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-      />
+        class="block w-full bg-[#F1F2F4] dark:bg-slate-900 dark:placeholder-zinc-500 text-zinc-300 rounded-md border-gray-300 dark:border-gray-800 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
    </div>

    <div v-auto-animate class="space-y-5 my-5 px-4">
@@ -109,8 +108,7 @@ defineOgImage({
          :alt="post.alt"
          :og-image="post.ogImage"
          :tags="post.tags"
-          :published="post.published"
-        />
+          :published="post.published" />
      </template>

      <ArchiveCard v-if="paginatedData.length <= 0" title="No Post Found" image="/not-found.jpg" />
@@ -121,16 +119,14 @@ defineOgImage({
        <Icon
          name="mdi:code-less-than"
          size="30"
-          :class="{ 'text-sky-700 dark:text-sky-400': pageNumber > 1 }"
-        />
+          :class="{ 'text-sky-700 dark:text-sky-400': pageNumber > 1 }" />
      </button>
      <p>{{ pageNumber }} / {{ totalPage }}</p>
      <button :disabled="pageNumber >= totalPage" @click="onNextPageClick">
        <Icon
          name="mdi:code-greater-than"
          size="30"
-          :class="{ 'text-sky-700 dark:text-sky-400': pageNumber < totalPage }"
-        />
+          :class="{ 'text-sky-700 dark:text-sky-400': pageNumber < totalPage }" />
      </button>
    </div>
  </main>
--- a/app/pages/categories/[category].vue
+++ b/app/pages/categories/[category].vue
@@ -1,64 +1,64 @@
 <script lang="ts" setup>
-import type { BlogPost } from '@/types/blog'
-const route = useRoute()
+import type { BlogPost } from "@/types/blog";
+const route = useRoute();

 // take category from route params & make first char upper
 const category = computed(() => {
-  const name = route.params.category || ''
-  let strName = ''
+  const name = route.params.category || "";
+  let strName = "";

-  if (Array.isArray(name)) strName = name.at(0) || ''
-  else strName = name
-  return strName
-})
+  if (Array.isArray(name)) strName = name.at(0) || "";
+  else strName = name;
+  return strName;
+});

 const { data } = await useAsyncData(`category-data-${category.value}`, () =>
-  queryCollection('content')
+  queryCollection("content")
    .all()
    .then((articles) =>
      articles.filter((article) => {
-        const meta = article.meta as unknown as BlogPost
-        return meta.tags.includes(category.value)
+        const meta = article.meta as unknown as BlogPost;
+        return meta.tags.includes(category.value);
      }),
    ),
-)
+);

 const formattedData = computed(() => {
  return data.value?.map((articles) => {
-    const meta = articles.meta as unknown as BlogPost
+    const meta = articles.meta as unknown as BlogPost;
    return {
      path: articles.path,
-      title: articles.title || 'no-title available',
-      description: articles.description || 'no-description available',
-      image: meta.image || '/blogs-img/blog.jpg',
-      alt: meta.alt || 'no alter data available',
-      ogImage: meta.ogImage || '/blogs-img/blog.jpg',
-      date: meta.date || 'not-date-available',
+      title: articles.title || "no-title available",
+      description: articles.description || "no-description available",
+      image: meta.image || "/blogs-img/blog.jpg",
+      alt: meta.alt || "no alter data available",
+      ogImage: meta.ogImage || "/blogs-img/blog.jpg",
+      date: meta.date || "not-date-available",
      tags: meta.tags || [],
      published: meta.published || false,
-    }
-  })
-})
+    };
+  });
+});

 useHead({
  title: category.value,
  meta: [
    {
-      name: 'description',
+      name: "description",
      content: `You will find all the ${category.value} related post here`,
    },
  ],
-})
+});

 // Generate OG Image
-const siteData = useSiteConfig()
+const siteData = useSiteConfig();
 defineOgImage({
  props: {
    title: category.value?.toUpperCase(),
    description: `You will find all the ${category.value} related post here`,
    siteName: siteData.url,
  },
-})
+});
 </script>

 <template>
@@ -76,8 +76,7 @@ defineOgImage({
        :alt="post.alt"
        :og-image="post.ogImage"
        :tags="post.tags"
-        :published="post.published"
-      />
+        :published="post.published" />
      <BlogEmpty v-if="data?.length === 0" />
    </div>
  </main>
--- a/app/pages/categories/index.vue
+++ b/app/pages/categories/index.vue
@@ -1,45 +1,45 @@
 <script lang="ts" setup>
-import { makeFirstCharUpper } from '@/utils/helper'
+import { makeFirstCharUpper } from "@/utils/helper";

-const { data } = await useAsyncData('all-blog-post-by-category', () =>
-  queryCollection('content').all(),
-)
+const { data } = await useAsyncData("all-blog-post-by-category", () =>
+  queryCollection("content").all(),
+);

-const allTags = new Map()
+const allTags = new Map();

 data.value?.forEach((blog) => {
-  const tags: Array<string> = (blog.meta.tags as string[]) || []
+  const tags: Array<string> = (blog.meta.tags as string[]) || [];
  tags.forEach((tag) => {
    if (allTags.has(tag)) {
-      const cnt = allTags.get(tag)
-      allTags.set(tag, cnt + 1)
+      const cnt = allTags.get(tag);
+      allTags.set(tag, cnt + 1);
    } else {
-      allTags.set(tag, 1)
+      allTags.set(tag, 1);
    }
-  })
-})
+  });
+});

 useHead({
-  title: 'Categories',
+  title: "Categories",
  meta: [
    {
-      name: 'description',
+      name: "description",
      content:
-        'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
+        "Below All the topics are listed on which either I have written a blog or will write a blog in near future.",
    },
  ],
-})
+});

 // Generate OG Image
-const siteData = useSiteConfig()
+const siteData = useSiteConfig();
 defineOgImage({
  props: {
-    title: 'Categories',
+    title: "Categories",
    description:
-      'Below All the topics are listed on which either I have written a blog or will write a blog in near future.',
+      "Below All the topics are listed on which either I have written a blog or will write a blog in near future.",
    siteName: siteData.url,
  },
-})
+});
 </script>

 <template>
@@ -50,8 +50,7 @@ defineOgImage({
        v-for="topic in allTags"
        :key="topic[0]"
        :title="makeFirstCharUpper(topic[0])"
-        :count="topic[1]"
-      />
+        :count="topic[1]" />
    </div>
  </main>
 </template>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,30 +1,16 @@
-<script lang="ts" setup>
-import { navbarData } from '~/data'
-
-useHead({
-  title: 'Home',
-  meta: [
-    {
-      name: 'description',
-      content:
-        'Welcome To My Blog Site. Get Web Development, Javascript, Typescript, NodeJs, Vue, and Nuxt, Related Articles, Tips, Learning resources and more.',
-    },
-  ],
-})
-
-// Generate OG Image
-defineOgImageComponent('About', {
-  headline: 'Greetings 👋',
-  title: navbarData.homeTitle,
-  description: 'Dive into web development with me and learn Js, Ts, Vue, Nuxt, Docker, k8s',
-  link: '/riyad.jpg',
-})
-</script>
+<script lang="ts" setup></script>

 <template>
-  <main class="container max-w-5xl mx-auto text-zinc-600">
-    <MainHero />
-    <MainRecent />
-    <MainTrending />
-  </main>
+  <div class="relative">
+    <main>
+      <MainHero />
+
+      <div class="relative">
+        <div class="container max-w-5xl mx-auto text-zinc-600 px-4 py-8 relative z-10">
+          <MainRecent />
+          <MainTechInfo />
+        </div>
+      </div>
+    </main>
+  </div>
 </template>
--- a/app/pages/tags/[tag].vue
+++ b/app/pages/tags/[tag].vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { BlogPost } from "@/types/blog";
+import { makeFirstCharUpper } from "@/utils/helper";
+const route = useRoute();
+
+const tag = computed(() => {
+  const name = route.params.tag || "";
+  let strName = "";
+
+  if (Array.isArray(name)) strName = name.at(0) || "";
+  else strName = name;
+  return strName;
+});
+
+const { data } = await useAsyncData(`tag-data-${tag.value}`, () =>
+  queryCollection("content")
+    .all()
+    .then((articles) =>
+      articles.filter((article) => {
+        const meta = article.meta as unknown as BlogPost;
+        return meta.tags.some((t) => t.toLowerCase() === tag.value.toLowerCase());
+      }),
+    ),
+);
+
+const formattedData = computed(() => {
+  return data.value?.map((articles) => {
+    const meta = articles.meta as unknown as BlogPost;
+    return {
+      path: articles.path,
+      title: articles.title || "no-title available",
+      description: articles.description || "no-description available",
+      image: meta.image || "/blogs-img/blog.jpg",
+      alt: meta.alt || "no alter data available",
+      ogImage: meta.ogImage || "/blogs-img/blog.jpg",
+      date: meta.date || "not-date-available",
+      tags: meta.tags || [],
+      published: meta.published || false,
+    };
+  });
+});
+
+useHead({
+  title: `Tag: ${makeFirstCharUpper(tag.value)}`,
+  meta: [
+    {
+      name: "description",
+      content: `Explore all posts tagged with ${tag.value}`,
+    },
+  ],
+});
+
+// Generate OG Image
+const siteData = useSiteConfig();
+defineOgImage({
+  props: {
+    title: `Tag: ${tag.value?.toUpperCase()}`,
+    description: `Explore all posts tagged with ${tag.value}`,
+    siteName: siteData.url,
+  },
+});
+</script>
+
+<template>
+  <main class="container max-w-5xl mx-auto text-zinc-600 px-4 py-12">
+    <div class="flex flex-col items-center mb-12">
+      <NuxtLink
+        to="/tags"
+        class="flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-400 hover:underline mb-4">
+        <Icon name="heroicons:arrow-left-20-solid" />
+        Back to all tags
+      </NuxtLink>
+      <div class="p-3 bg-violet-500/10 rounded-2xl mb-4">
+        <Icon name="fa-solid:tag" size="2.5em" class="text-violet-600 dark:text-violet-400" />
+      </div>
+      <h1
+        class="text-4xl md:text-5xl font-bold text-zinc-800 dark:text-zinc-100 mb-4 tracking-tight">
+        #{{ makeFirstCharUpper(tag) }}
+      </h1>
+      <p class="text-zinc-600 dark:text-zinc-400 text-center">
+        Found {{ data?.length || 0 }} posts with this tag
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <BlogCard
+        v-for="post in formattedData"
+        :key="post.title"
+        :path="post.path"
+        :title="post.title"
+        :date="post.date"
+        :description="post.description"
+        :image="post.image"
+        :alt="post.alt"
+        :og-image="post.ogImage"
+        :tags="post.tags"
+        :published="post.published" />
+      <BlogEmpty v-if="data?.length === 0" />
+    </div>
+  </main>
+</template>
--- a/app/pages/tags/index.vue
+++ b/app/pages/tags/index.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { makeFirstCharUpper } from "@/utils/helper";
+
+const { data } = await useAsyncData("all-blog-post-by-tags", () =>
+  queryCollection("content").all(),
+);
+
+const allTags = new Map();
+
+data.value?.forEach((blog) => {
+  const tags: Array<string> = (blog.meta.tags as string[]) || [];
+  tags.forEach((tag) => {
+    if (allTags.has(tag)) {
+      const cnt = allTags.get(tag);
+      allTags.set(tag, cnt + 1);
+    } else {
+      allTags.set(tag, 1);
+    }
+  });
+});
+
+useHead({
+  title: "Tags",
+  meta: [
+    {
+      name: "description",
+      content: "Explore all the tags used in the blog posts.",
+    },
+  ],
+});
+
+// Generate OG Image
+const siteData = useSiteConfig();
+defineOgImage({
+  props: {
+    title: "Tags",
+    description: "Explore all the tags used in the blog posts.",
+    siteName: siteData.url,
+  },
+});
+</script>
+
+<template>
+  <main class="container max-w-5xl mx-auto text-zinc-600 px-4 py-12">
+    <div class="flex flex-col items-center mb-12">
+      <div class="p-3 bg-violet-500/10 rounded-2xl mb-4">
+        <Icon name="fa-solid:tags" size="2.5em" class="text-violet-600 dark:text-violet-400" />
+      </div>
+      <h1
+        class="text-4xl md:text-5xl font-bold text-zinc-800 dark:text-zinc-100 mb-4 tracking-tight">
+        All Tags
+      </h1>
+      <p class="text-zinc-600 dark:text-zinc-400 text-center max-w-md">
+        Browse through all the topics and technologies I've written about.
+      </p>
+    </div>
+
+    <div class="flex flex-wrap justify-center gap-4">
+      <NuxtLink
+        v-for="[tag, count] in allTags"
+        :key="tag"
+        :to="`/tags/${tag.toLocaleLowerCase()}`"
+        class="group relative flex items-center gap-2 px-6 py-3 rounded-2xl bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
+        <span
+          class="text-lg font-bold text-zinc-700 dark:text-zinc-200 group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
+          #{{ makeFirstCharUpper(tag) }}
+        </span>
+        <span
+          class="flex items-center justify-center min-w-[24px] h-6 px-1.5 rounded-full bg-violet-500/10 text-violet-600 dark:text-violet-400 text-xs font-bold border border-violet-500/20">
+          {{ count }}
+        </span>
+      </NuxtLink>
+    </div>
+  </main>
+</template>