resign card component

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

components/blog/card.vue

@@ -8,20 +8,35 @@ defineProps<{
 </script>
 
 <template>
-  <div
-    class="grid shadow-xl group overflow-hidden rounded max-w-md p-5 m-5 bg-slate-700 text-white"
-  >
-    <h1 class="text-xl">
-      {{ title }}
-    </h1>
-
-    <p class="text-sm">
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores labore cupiditate ducimus,
-      ipsam harum, adipisci laudantium similique voluptate officiis sunt nesciunt dolorem repellat
-      cumque obcaecati nulla, sed dolore unde. Atque!
-    </p>
-    <nuxt-link class="underline" :to="slug">
-      {{ slug }}
-    </nuxt-link>
+  <article class="group border p-5 m-5 rounded-2xl shadow-lg text-zinc-700">
+    <NuxtLink to="/home" class="">
+      <img
+        class="lg:h-48 md:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:scale-105 transition-all"
+        src="/blogs/hello-world/riyad.jpg"
+        alt="card photo"
+      />
+      <div class="text-black text-sm pt-4 pb-2">
+        <div class="flex items-center">
+          <LogoDate />
+          3rd July 2022
         </div>
+        <div class="flex items-center gap-1 flex-wrap">
+          <LogoTag />
+          <span>JavaScript</span>
+          <span>Typescript</span>
+          <span>Clean</span>
+        </div>
+      </div>
+      <h2 class="text-3xl font-semibold text-black pb-1 group-hover:text-sky-600">
+        This is the card title
+      </h2>
+      <p class="text-ellipsis line-clamp-3">
+        {{ excerpt }}
+      </p>
+      <div class="flex group-hover:underline text-sky-600 items-center pt-2">
+        <p>Read More</p>
+        <LogoArrow />
+      </div>
+    </NuxtLink>
+  </article>
 </template>

components/blog/oldcard.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+defineProps<{
+  title: string
+  excerpt?: string
+  image?: string
+  slug?: string
+}>()
+</script>
+
+<template>
+  <article class="group py-4 sm:p-4 w-full">
+    <NuxtLink
+      :to="slug"
+      class="block h-full rounded-3xl overflow-hidden border dark:border-gray-600 transform group-hover:-translate-y-2 duration-300 p-5"
+    >
+      <img
+        src="https://res.cloudinary.com/jahiddev/images/f_auto,q_auto/v1670084907/tips-to-write-better-javascript/tips-to-write-better-javascript.jpg?_i=AA"
+        alt="5 Pro Tips for Writing Better JavaScript in 2023"
+        class="lg:h-48 md:h-36 w-full object-cover object-center rounded-2xl shadow-lg group-hover:shadow-xl"
+      />
+      <h2 class="tracking-widest text-xs title-font mb-1 mt-5">
+        <p class="uppercase text-xs">
+          <span class="inline-flex pr-2">
+            <LogoDate />
+            3rd Dec 2022</span
+          >
+          <span class="inline-flex flex-wrap">
+            <span>
+              <LogoTag />
+            </span>
+            <span class="mr-2">Clean Code </span>
+            <span class="mr-2">JavaScript </span>
+          </span>
+        </p>
+      </h2>
+      <h3 class="title-font text-lg mb-3">5 Pro Tips for Writing Better JavaScript in 2023</h3>
+      <p class="leading-relaxed mb-3">
+        Learn how to write better JavaScript code with these five pro tips. From using code linting
+        tools to...
+      </p>
+      <span
+        class="mt-3 text-primary-500 inline-flex items-center md:mb-2 lg:mb-0 group-hover:underline duration-300"
+      >
+        Read more
+        <LogoArrow />
+      </span>
+    </NuxtLink>
+  </article>
+</template>

components/logo/arrow.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    stroke-width="2"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="w-4 h-4 ml-2 transform group-hover:translate-x-2 duration-300"
+  >
+    <path d="M5 12h14"></path>
+    <path d="M12 5l7 7-7 7"></path>
+  </svg>
+</template>

components/logo/date.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    class="w-4 h-4 mr-2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+    ></path>
+  </svg>
+</template>

components/logo/tag.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    class="w-4 h-4 mr-2"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+    ></path>
+  </svg>
+</template>

components/main/header.vue

@@ -3,7 +3,7 @@ let isDark = ref(false)
 </script>
 
 <template>
-  <div class="py-5 font-spacegrotesk border-b text-zinc-600">
+  <div class="py-5 border-b text-zinc-700">
     <div class="flex px-6 container max-w-5xl justify-between mx-auto items-baseline">
       <ul class="flex items-baseline space-x-5">
         <li class="">

components/main/hero.vue

@@ -2,7 +2,7 @@
   <div class="container mx-auto">
     <div class="grid grid-cols-1 sm:grid-cols-2 items-center">
       <div class="px-6">
-        <h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl mb-5">
+        <h1 class="text-black font-semibold leading-tight text-4xl md:text-5xl my-5">
           Welcome To My Blog Site
         </h1>
         <p>

content/blogs/1. hello-world.md

@@ -1,6 +1,6 @@
 ---
 title: 'Title of the page'
-description: 'meta description of the page'
+description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque minima eum, odit earum porro beatae explicabo quisquam asperiores aliquam similique ipsam non deleniti qui sint ad maxime culpa accusantium. Deleniti.'
 ---
 
 # Hello world

layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="gd-container font-spacegrotesk">
-    <header class="fixed w-full backdrop-blur-3xl">
+    <header class="fixed w-full backdrop-blur-3xl z-10">
       <MainHeader />
     </header>
     <main>

package.json

@@ -10,6 +10,7 @@
   "devDependencies": {
     "@nuxt/content": "^2.3.0",
     "@nuxtjs/tailwindcss": "^6.1.3",
+    "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
     "nuxt": "3.0.0",
     "nuxt-icon": "^0.1.8",

pages/index.vue

@@ -14,7 +14,7 @@ const { data } = await useAsyncData('home', () => queryContent('/blogs').find())
 <template>
   <main class="container max-w-5xl mx-auto text-zinc-600">
     <MainHero />
-    <div class="flex m-5 p-3 flex-wrap">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
       <template v-for="n in data" :key="n">
         <BlogCard :title="n.title || ''" :excerpt="n.description" image="sdlfkj" :slug="n._path" />
       </template>

tailwind.config.js

@@ -10,5 +10,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/line-clamp')],
 }

yarn.lock

@@ -802,6 +802,11 @@
   resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
   integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
 
+"@tailwindcss/line-clamp@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz#f353c5a8ab2c939c6267ac5b907f012e5ee130f9"
+  integrity sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==
+
 "@tailwindcss/typography@^0.5.8":
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.8.tgz#8fb31db5ab0590be6dfa062b1535ac86ad9d12bf"