Merge pull request #1870 from hrx01-dev/fix/ClickabilityIssue-onlandingPage-in-Blog

Fixed clickability on the blogs listed on the landing page

Author: sanjay-kv

src/components/blogCarousel/blogCard.tsx

@@ -2,13 +2,12 @@
 import React from "react";
 import Link from "@docusaurus/Link";
 import { getAuthorProfiles } from "../../utils/authors";
-import { usePluginData } from "@docusaurus/useGlobalData";
+
 
 interface BlogCardProps {
   type: string;
   date?: string;
   title: string;
-  content: string;
   imageUrl: string;
   id: string;
   authors?: string[];
@@ -50,7 +49,6 @@ const BlogCard = ({
   type,
   date,
   title,
-  content,
   imageUrl,
   id,
   authors,
@@ -80,7 +78,9 @@ const BlogCard = ({
     <div className="article-card">
       {/* Image */}
       <div className="card-image">
-        <img src={imageUrl} alt={title} loading="lazy" />
+        <Link to={`/blog/${id}`} className="block" aria-label={`Read ${title}`}>
+          <img src={imageUrl} alt={title} loading="lazy" />
+        </Link>
       </div>
 
       {/* Content */}
@@ -202,4 +202,4 @@ const BlogCard = ({
   );
 };
 
-export default BlogCard;
+export default BlogCard;

src/components/blogCarousel/blogCarousel.css

@@ -102,6 +102,12 @@
   flex-shrink: 0;
 }
 
+.card-image a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
 .card-image::after {
   content: "";
   position: absolute;
@@ -112,13 +118,15 @@
   opacity: 0;
   transition: opacity 0.35s ease;
   z-index: 1;
+  pointer-events: none;
 }
 
 .article-card:hover .card-image::after {
   opacity: 1;
 }
 
 .card-image img {
+  display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -157,6 +165,7 @@
   transition: color 0.2s ease;
   display: -webkit-box;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -195,6 +204,7 @@
   margin: 0 0 16px 0;
   display: -webkit-box;
   -webkit-line-clamp: 3;
+  line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   flex: 1;
@@ -635,6 +645,7 @@
   transform: translateY(-20px);
   transition: opacity 0.4s ease-in, transform 0.4s ease-in;
 }
+
 /* ── Reading time ── */
 .card-reading-time {
   display: inline-flex;