change design

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

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>