Redesign home page

Signed-off-by: Al Asad Nur Riyad <asadnurriyad@gmail.com>

components/archive/card.vue

@@ -31,14 +31,14 @@ withDefaults(defineProps<Props>(), {
     <NuxtLink :to="path" class="grid grid-cols-1 sm:grid-cols-10 gap-1">
       <div class="sm:col-span-3">
         <NuxtImg
-          class="h-full w-full object-cover object-center rounded-t-2xl sm:rounded-l-2xl sm:rounded-t-none shadow-lg group-hover:scale-[1.05] transition-all duration-500"
+          class="h-full w-full object-cover object-center rounded-t-2xl sm:rounded-l-2xl sm:rounded-t-none shadow-lg group-hover:scale-[1.02] transition-all duration-500"
           :provider="provider"
           :src="image"
           :alt="alt"
         />
       </div>
       <div class="sm:col-span-7 p-5">
-        <h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-700">
+        <h2 class="text-xl font-semibold text-black pb-1 group-hover:text-sky-700">
           {{ title }}
         </h2>
         <p class="text-ellipsis line-clamp-2">

components/blog/card.vue

@@ -27,16 +27,16 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <article class="group border m-2 overflow-hidden rounded-2xl shadow-lg text-zinc-700">
+  <article class="group border m-2 overflow-hidden rounded-2xl shadow-md text-zinc-700">
     <NuxtLink :to="path">
       <NuxtImg
         :provider="provider"
-        class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.05] transition-all duration-500"
+        class="lg:h-48 md:h-36 w-full object-cover object-center rounded-t-2xl shadow-lg group-hover:scale-[1.02] transition-all duration-500"
         :src="image"
         :alt="alt"
       />
-      <div class="p-5">
+      <div class="px-3 pb-4">
-        <div class="text-black text-sm pt-4 pb-2">
+        <div class="text-black  pt-3 pb-2">
           <div class="flex items-center">
             <LogoDate />
             {{ date }}
@@ -48,13 +48,13 @@ withDefaults(defineProps<Props>(), {
             </template>
           </div>
         </div>
-        <h2 class="text-2xl font-semibold text-black pb-1 group-hover:text-sky-700">
+        <h2 class="text-xl font-semibold  text-black pb-1 group-hover:text-sky-700">
           {{ title }}
         </h2>
-        <p class="text-ellipsis line-clamp-3">
+        <p class="text-ellipsis line-clamp-2 text-base">
           {{ description }}
         </p>
-        <div class="flex group-hover:underline text-sky-700 items-center pt-2">
+        <div class="flex group-hover:underline text-sky-700 items-center py-2">
           <p>Read More</p>
           <LogoArrow />
         </div>

components/main/recent.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+// Get Last 6 Publish Post from the content/blog directory
+const { data } = await useAsyncData('recent-post', () =>
+  queryContent('/blogs').limit(3).sort({ _id: -1 }).find(),
+)
+
+const formatedData = computed(() => {
+  return data.value?.map((articles) => {
+    return {
+      path: articles._path,
+      title: articles.title || 'no-title available',
+      description: articles.description || 'no-descriptoin available',
+      image: articles.image || '/nuxt-blog/no-image_cyyits.png',
+      alt: articles.alt || 'no alter data available',
+      ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
+      provider: articles.provider,
+      date: articles.date || 'not-date-available',
+      tags: articles.tags || [],
+      published: articles.published || false,
+    }
+  })
+})
+
+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.',
+    },
+  ],
+  titleTemplate: 'Riyad\'s Blog - %s',
+})
+</script>
+
+<template>
+  <div class="pb-10">
+    <div class="px-6">
+      <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
+        <Icon name="mdi:star-three-points-outline" size="2em" class="text-black" />
+        <h3 class="text-4xl font-semibold text-black ">
+          Recent Post
+        </h3>
+      </div>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+      <template v-for="post in formatedData" :key="post.title">
+        <BlogCard
+          :path="post.path"
+          :title="post.title"
+          :date="post.date"
+          :description="post.description"
+          :image="post.image"
+          :alt="post.alt"
+          :og-image="post.ogImage"
+          :provider="post.provider"
+          :tags="post.tags"
+          :published="post.published"
+        />
+      </template>
+      <template v-if="data?.length === 0">
+        <BlogEmpty />
+      </template>
+    </div>
+  </div>
+</template>

components/main/trending.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+// Get Last 6 Publish Post from the content/blog directory
+const { data } = await useAsyncData('trending-post', () =>
+  queryContent('/blogs').limit(3).sort({ _id: -1 }).find(),
+)
+
+const formatedData = computed(() => {
+  return data.value?.map((articles) => {
+    return {
+      path: articles._path,
+      title: articles.title || 'no-title available',
+      description: articles.description || 'no-descriptoin available',
+      image: articles.image || '/nuxt-blog/no-image_cyyits.png',
+      alt: articles.alt || 'no alter data available',
+      ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
+      provider: articles.provider,
+      date: articles.date || 'not-date-available',
+      tags: articles.tags || [],
+      published: articles.published || false,
+    }
+  })
+})
+
+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.',
+    },
+  ],
+  titleTemplate: 'Riyad\'s Blog - %s',
+})
+</script>
+
+<template>
+  <div>
+    <div class="px-6">
+      <div class="flex flex-row items-center space-x-3 pt-5 pb-3">
+        <Icon name="mdi:star-three-points-outline" size="2em" class="text-black" />
+        <h3 class="text-4xl font-semibold text-black ">
+          Trending Post
+        </h3>
+      </div>
+    </div>
+    <div class="grid grid-cols-1 ">
+      <template v-for="post in formatedData" :key="post.title">
+        <ArchiveCard
+          :path="post.path"
+          :title="post.title"
+          :date="post.date"
+          :description="post.description"
+          :image="post.image"
+          :alt="post.alt"
+          :og-image="post.ogImage"
+          :provider="post.provider"
+          :tags="post.tags"
+          :published="post.published"
+        />
+      </template>
+      <template v-if="data?.length === 0">
+        <BlogEmpty />
+      </template>
+    </div>
+  </div>
+</template>

content/blogs/5. vue3-awesome-library.md

@@ -6,7 +6,7 @@ image: /nuxt-blog/pexels-photo-3379934_qjpfp3.jpg
 alt: Some Awesome Libraries For Vue3
 ogImage: /nuxt-blog/pexels-photo-3379934_qjpfp3.jpg
 provider: cloudinary
-tags: ['vue']
+tags: ['vue',"javascript"]
 published: true
 ---
 

pages/blogs/[blog].vue

@@ -77,7 +77,7 @@ useHead({
 <template>
   <main class="px-6 container max-w-5xl mx-auto">
     <header>
-      <h1 class="text-xl md:text-3xl lg:text-5xl m-7 font-bold text-center">
+      <h1 class="text-xl md:text-3xl lg:text-4xl m-7 font-bold text-center">
         {{ data.title || '' }}
       </h1>
       <NuxtImg

pages/index.vue

@@ -1,26 +1,4 @@
 <script lang="ts" setup>
-// Get Last 6 Publish Post from the content/blog directory
-const { data } = await useAsyncData('home', () =>
-  queryContent('/blogs').limit(6).sort({ _id: -1 }).find(),
-)
-
-const formatedData = computed(() => {
-  return data.value?.map((articles) => {
-    return {
-      path: articles._path,
-      title: articles.title || 'no-title available',
-      description: articles.description || 'no-descriptoin available',
-      image: articles.image || '/nuxt-blog/no-image_cyyits.png',
-      alt: articles.alt || 'no alter data available',
-      ogImage: articles.ogImage || '/nuxt-blog/no-image_cyyits.png',
-      provider: articles.provider,
-      date: articles.date || 'not-date-available',
-      tags: articles.tags || [],
-      published: articles.published || false,
-    }
-  })
-})
-
 useHead({
   title: 'Home',
   meta: [
@@ -37,24 +15,7 @@ useHead({
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <MainHero />
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+    <MainRecent />
-      <template v-for="post in formatedData" :key="post.title">
+    <MainTrending />
-        <BlogCard
-          :path="post.path"
-          :title="post.title"
-          :date="post.date"
-          :description="post.description"
-          :image="post.image"
-          :alt="post.alt"
-          :og-image="post.ogImage"
-          :provider="post.provider"
-          :tags="post.tags"
-          :published="post.published"
-        />
-      </template>
-      <template v-if="data?.length === 0">
-        <BlogEmpty />
-      </template>
-    </div>
   </main>
 </template>