change design

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

pages/about.vue

@@ -26,11 +26,8 @@ const getAllPost = computed(() => {
 
 <template>
   <div
-    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[82vh]"
+    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[72vh]"
   >
-    <h1 class="font-semibold text-3xl mt-10 mb-5 py-3 mx-5 text-slate-800">
-      ALL BLOG POST
-    </h1>
     <div>
       <template v-for="pp in getAllPost" :key="pp">
         <archiev-card

pages/blogs.vue

@@ -5,18 +5,16 @@ definePageMeta({
 
 const { data } = await useAsyncData("home", () => queryContent("/").find());
 
-const getRecentContent = computed(() => {
+const getAllPost = computed(() => {
   const allpost = data.value || [];
   const alltypes = allpost.map((post) => {
     return {
       title: post.title,
-      description: post.description,
       path: post._path,
       date: post.date as string,
-      author: post.author,
+      type: post.type,
     };
   });
-
   alltypes.sort(function (a, b) {
     const c = new Date(a.date);
     const d = new Date(b.date);
@@ -28,19 +26,15 @@ const getRecentContent = computed(() => {
 
 <template>
   <div
-    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[82vh]"
+    class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[72vh]"
   >
-    <h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
-      LATEST CONTENT
-    </h1>
-    <div class="flex justify-between flex-wrap">
-      <template v-for="pp in getRecentContent" :key="pp">
-        <latest-blog-card
+    <div>
+      <template v-for="pp in getAllPost" :key="pp">
+        <archiev-card
           :title="pp.title"
-          :description="pp.description"
           :date="pp.date"
-          :author="pp.author"
           :path="pp.path"
+          :type="pp.type"
         />
       </template>
     </div>

pages/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { data } = await useAsyncData("home", () => queryContent("/").find());
 
+// get all the unique types from content
 const getTopCategory = computed(() => {
   const allpost = data.value || [];
   const alltypes = allpost.map((post) => post.type);
@@ -8,9 +9,10 @@ const getTopCategory = computed(() => {
   return uniqType;
 });
 
+// get all post in recent time order
 const getRecentContent = computed(() => {
   const allpost = data.value || [];
-  const alltypes = allpost.map((post) => {
+  const customizePost = allpost.map((post) => {
     return {
       title: post.title,
       description: post.description,
@@ -19,23 +21,12 @@ const getRecentContent = computed(() => {
     };
   });
 
-  alltypes.sort(function (a, b) {
+  customizePost.sort(function (a, b) {
     const c = new Date(a.date);
     const d = new Date(b.date);
     return c < d ? 1 : -1;
   });
-  return alltypes;
-});
-
-const getPopularContent = computed(() => {
-  const allpost = data.value || [];
-  const alltypes = allpost.map((post) => {
-    return {
-      title: post.title,
-      path: post._path,
-    };
-  });
-  return alltypes;
+  return customizePost;
 });
 </script>
 
@@ -55,20 +46,12 @@ const getPopularContent = computed(() => {
         </template>
       </div>
     </div>
-    <div class="max-w-[400px]">
+    <div class="basis-1/4">
       <div>
         <h2 class="text-xl pb-8 text-[#e60067]">TOP CATEGORIES</h2>
-
         <template v-for="cat in getTopCategory" :key="cat">
           <topic-card :title="cat" />
         </template>
-
-        <h2 class="text-xl py-8 text-[#e60067]">POPULAR CONTENT</h2>
-        <div class="space-y-5">
-          <template v-for="pp in getPopularContent" :key="pp">
-            <one-line-card :title="pp.title" :path="pp.path" />
-          </template>
-        </div>
       </div>
     </div>
   </div>

pages/tags/index.vue

@@ -28,9 +28,6 @@ const getTopCategory = computed(() => {
   <div
     class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[82vh]"
   >
-    <h1 class="font-semibold text-3xl mt-10 py-3 mx-5 text-slate-800">
-      ALL TAGS
-    </h1>
     <div class="flex justify-start flex-wrap">
       <template v-for="ct in getTopCategory" :key="ct">
         <category-card :type="ct.type" :count="ct.count" :path="ct.path" />