change design

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

components/ArchievCard.vue

@@ -8,7 +8,9 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="font-ibmmono px-10 mb-4 text-slate-800 group">
+  <div
+    class="font-ibmmono px-10 mb-4 text-slate-800 group shadow-sm bg-white rounded-lg py-4"
+  >
     <div class="flex items-center space-x-3 space-y-2">
       <icon name="ant-design:arrow-right-outlined" />
       <div>

components/FooterCom.vue

@@ -4,7 +4,7 @@ const theme = ref("light");
 
 <template>
   <footer class="p-3 mt-10 bg-[#a2d9ff] font-ibmmono">
-    <div class="container px-4 mx-auto max-w-6xl flex justify-center">
+    <div class="container px-4 mx-auto max-w-6xl flex justify-between">
       <ul class="flex space-x-2 text-sm text-slate-800 items-end justify-start">
         <li>Copyright &#169; 2022 - Present</li>
         <li>|</li>
@@ -15,18 +15,24 @@ const theme = ref("light");
             target="_blank"
             to="https://nurriyad.xyz"
           >
-            Al Asad Nur Riyad
+            Riyad
           </nuxt-link>
         </li>
-        <li>|</li>
+      </ul>
+      <ul class="flex space-x-2 text-sm text-slate-800 items-end justify-start">
         <li>
-          Site source on
+          <nuxt-link to="/">
-          <nuxt-link
+            <icon size="22px" name="uil:github" />
-            class="underline"
+          </nuxt-link>
-            target="_blank"
+        </li>
-            to="https://github.com/nurRiyad/blogs"
+        <li>
-          >
+          <nuxt-link to="/">
-            GitHub.
+            <icon size="22px" name="uil:linkedin" />
+          </nuxt-link>
+        </li>
+        <li>
+          <nuxt-link to="/">
+            <icon size="22px" name="mdi:stackoverflow" />
           </nuxt-link>
         </li>
       </ul>

components/IndexHero.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="text-center text-stone-800 font-ibmmono bg-[#a2d9ff]">
+    <h1 class="text-4xl pt-16 pb-2 font-bold">Al Asad Nur Riyad</h1>
+    <p class="mt-3 max-w-md mx-auto text-base">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eum
+      nam magni rem. Nihil reprehenderit dolorum quas, facere soluta commodi.
+    </p>
+  </div>
+</template>

components/ListHero.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const route = useRoute();
+
+const title = computed(() => {
+  const path = route.fullPath;
+  const splitPath = path.split("/");
+  const name = splitPath.at(1);
+
+  if (name === "blogs") return "All Blogs Post";
+  else if (name === "tags") return "All Tags";
+  else return "About Me";
+});
+</script>
+
+<template>
+  <div class="text-center text-stone-800 bg-[#a2d9ff] mb-5 font-ibmmono">
+    <h1 class="text-4xl p-16 font-bold">{{ title }}</h1>
+  </div>
+</template>

components/NavbarCom.vue

@@ -16,20 +16,20 @@ const activeNavbar = computed(() => {
       class="container px-4 mx-auto max-w-6xl flex justify-between text-slate-800"
     >
       <ul class="flex space-x-8 items-end justify-start">
-        <li class="align">
+        <li>
           <nuxt-link
-            class="font-semibold text-xl"
+            class="font-semibold text-base"
             :class="{ underline: activeNavbar === '' }"
             to="/"
           >
-            RafKhata
+            NurRiyad
           </nuxt-link>
         </li>
         <li>
           <nuxt-link
-            :class="{ underline: activeNavbar === 'latest' }"
+            :class="{ underline: activeNavbar === 'blogs' }"
-            to="/latest"
+            to="/blogs"
-            >Latest</nuxt-link
+            >Blogs</nuxt-link
           >
         </li>
         <li>
@@ -37,30 +37,16 @@ const activeNavbar = computed(() => {
             >Tags</nuxt-link
           >
         </li>
+      </ul>
+      <ul class="flex space-x-8 items-end">
         <li>
           <nuxt-link
-            :class="{ underline: activeNavbar === 'archive' }"
+            :class="{ underline: activeNavbar === 'about' }"
-            to="/archive"
+            to="/about"
-            >Archive</nuxt-link
+            >About</nuxt-link
           >
         </li>
-      </ul>
+
-      <ul class="flex space-x-3 items-end">
-        <li>
-          <nuxt-link to="/">
-            <icon size="25px" name="uil:github" />
-          </nuxt-link>
-        </li>
-        <li>
-          <nuxt-link to="/">
-            <icon size="25px" name="uil:linkedin" />
-          </nuxt-link>
-        </li>
-        <li>
-          <nuxt-link to="/">
-            <icon size="25px" name="mdi:stackoverflow" />
-          </nuxt-link>
-        </li>
         <li v-show="theme === 'light'" @click="theme = 'dark'">
           <nuxt-link to="/">
             <icon size="25px" name="ph:sun-dim" />

components/OneLineCard.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  title: String,
-  path: String,
-});
-</script>
-
-<template>
-  <div class="group font-semibold antialiased text-slate-800 font-ibmmono">
-    <nuxt-link class="flex items-baseline space-x-3" :to="path">
-      <div class="group-hover:scale-125 transition">
-        <icon name="ant-design:arrow-right-outlined" />
-      </div>
-      <h4 class="group-hover:underline">
-        {{ title }}
-      </h4>
-    </nuxt-link>
-  </div>
-</template>

components/TopicCard.vue

@@ -6,7 +6,7 @@ const props = defineProps({
 const router = useRouter();
 
 const onClick = () => {
-  router.push(`/tags/${props.title}`);
+  router.push(`/tags/${props.title?.toLocaleLowerCase()}`);
 };
 </script>
 

content/git/hellogit.md

@@ -0,0 +1,47 @@
+---
+title: "Thi is hello git"
+description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley"
+draft: false
+head: true
+author: riyad
+date: 29 Jan 2022
+type: Git
+---
+
+::info-component
+#time
+22 January 2022
+
+#author
+by Md. [Al Asad Nur Riyad](https://www.nurriyad.xyz)
+::
+
+# How to install nuxt 3
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
+
+## Step 01
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+<img src="/img/sdf.jpg" class="mx-auto" alt="drawing" width="200"/>
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+## This is a sub header
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+[google](google.com)
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+
+Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

layouts/default.vue

@@ -1,8 +1,7 @@
 <template>
   <div>
-    <div class="h-10 bg-[#a2d9ff]"></div>
     <navbar-com />
-    <div class="h-10 bg-[#a2d9ff]"></div>
+    <index-hero />
     <img src="@/assets/img/wave.png" class="w-full" alt="this is wave image" />
     <div>
       <slot />

layouts/list.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="bg-slate-200">
     <navbar-com />
+    <list-hero />
     <div>
       <slot />
     </div>

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">
+    <div>
-      LATEST CONTENT
+      <template v-for="pp in getAllPost" :key="pp">
-    </h1>
+        <archiev-card
-    <div class="flex justify-between flex-wrap">
-      <template v-for="pp in getRecentContent" :key="pp">
-        <latest-blog-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;
+  return customizePost;
-});
-
-const getPopularContent = computed(() => {
-  const allpost = data.value || [];
-  const alltypes = allpost.map((post) => {
-    return {
-      title: post.title,
-      path: post._path,
-    };
-  });
-  return alltypes;
 });
 </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" />