fix: the social icons were not avaliable to of all writers now available fixing (#1127)

Author: sachinggsingh

blog/authors.yml

@@ -7,6 +7,12 @@ ajay-dhangar:
   page: true # Turns the feature on
   description: >
     A passionate developer who loves to code and build new things. I am a Full Stack Developer and a Cyber Security, ML & AI  Enthusiast. I am also a Technical Content Writer and a Speaker. I love to share my knowledge with the community. I am the Founder of CodeHarborHub. I am also a Technical Content Writer at GeeksforGeeks. I am a Girl Script Summer of Code 2024 Project Manager (PA).
+  socials:
+    x: https://x.com/CodesWithAjay
+    linkedin: ajay-dhangar
+    github: ajay-dhangar
+    youtube: ajay-dhangar
+    facebook: ajay.dhangar.2001
 
 sanjay-kv:
   name: Sanjay Viswanthan
@@ -29,57 +35,79 @@ sanjay-kv:
 
 hitesh-gahanolia:
   name: Hitesh Gahanolia
-  tile: Final Year Student At MNNIT ALLAHABAD
+  title: Final Year Student At MNNIT ALLAHABAD
   url: https://github.com/Hitesh4278
   image_url: https://avatars.githubusercontent.com/u/97452642?v=4
+  socials:
+    github: Hitesh4278
 
 sowmiya-v:
   name: Sowmiya Venkatesan
-  tile:  Business Strategy & Operations Manager 
+  title:  Business Strategy & Operations Manager 
   url: https://github.com/sowmiyeh
   image_url: https://avatars.githubusercontent.com/u/74345706?v=4
+  socials:
+    x: sowmiyeh
+    linkedin: sowmiyavenkatesan
+    github: sowmiyeh
+    # medium: sowmiyeh
+    # hashnode: sowmiyeh
 
 abhijith-m-s:
   name: Abhijith M S
   title: Full Stack Developer
   url: https://github.com/AMS003010
   image_url: https://avatars.githubusercontent.com/u/111883236?v=4
+  socials:
+    github: AMS003010
 
 khushi-kalra:
   name: Khushi Kalra
   title: Full Stack Developer
   url: "https://github.com/abckhush"
   image_url: "https://yt3.googleusercontent.com/BpaBYEiGibr8uiNMCWytJ5BdKbPtpqTJAuA5Ida5rXAe8Zfvr8keZSPXYSqGasjGo7OunF2w=s176-c-k-c0x00ffffff-no-rj"
+  socials:
+    github: abckhush
 
 nayanikamukherjee:
   name: Nayanika Mukherjee
   title: Full Stack Developer
   url: "https://github.com/Nayanika1402"
   image_url: https://avatars.githubusercontent.com/u/132455412?v=4
+  socials:
+    github: Nayanika1402
 
 pujan-sarkar:
   name: Pujan Sarkar
   title: Cyber Security Enthusiast
   url: "https://github.com/Pujan-sarkar"
   image_url: https://avatars.githubusercontent.com/u/144250917?v=4
+  socials:
+    github: Pujan-sarkar
 
 mohitmuktikant:
   name: Mohit Muktikant
   title: Full Stack Web Developer
   url: "https://github.com/mohitmuktikant"
   image_url: https://avatars.githubusercontent.com/u/101824646?v=4
+  socials:
+    github: mohitmuktikant
 
 santhosh-siddhardha:
   name: Lingamuneni Santhosh Siddhardha
   title: Software Engineer
   url: "https://github.com/Santhosh-Siddhardha"
   image_url: https://avatars.githubusercontent.com/u/103999924?v=4
+  socials:
+    github: Santhosh-Siddhardha
 
 akshitha-chiluka:
   name: Akshitha Chiluka
   title: Software Engineering Undergraduate
   url: https://github.com/AKSHITHA-CHILUKA
   image_url: https://avatars.githubusercontent.com/u/120377576?v=4
+  socials:
+    github: AKSHITHA-CHILUKA
 
 Aditya-Singh-Rathore:
   name: Aditya Singh Rathore
@@ -96,4 +124,4 @@ Aditya-Singh-Rathore:
     github: Adez017
     instagram: _aaditya_.017
     bluesky: adez017.bsky.social
-    x: https://x.com/Adez017
+    x: Adez017

src/pages/blogs/blogs-new.css

@@ -1627,58 +1627,117 @@
   width: 80px;
 }
 
+.card-authors-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
 .card-author {
   display: flex;
   align-items: center;
-  gap: 10px;
-  flex: 1;
-  min-width: 0; /* Allow text to shrink */
+  gap: 12px;
+  min-width: 0;
 }
 
 .author-avatar {
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  background: var(--ifm-color-emphasis-200);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 16px;
-  color: white;
-  font-weight: 600;
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
-  flex-shrink: 0;
+  overflow: hidden;
+  border: 2px solid transparent;
   transition: all 0.3s ease;
+  flex-shrink: 0;
 }
 
-.author-avatar:hover {
-  transform: scale(1.1);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+.author-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.author-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
 }
 
 .author-name {
-  font-size: 13px;
-  color: #475569;
-  font-weight: 600;
+  font-size: 14px;
+  color: #1e293b;
+  font-weight: 700;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100%;
-  position: relative;
-  cursor: help;
   transition: color 0.2s ease;
 }
 
-.author-name:hover {
-  color: #6366f1;
+[data-theme="dark"] .author-name {
+  color: #f1f5f9;
 }
 
-[data-theme="dark"] .author-name {
-  color: #cbd5e1;
+.author-social-links {
+  display: flex;
+  gap: 8px;
+  margin-top: 2px;
 }
 
-[data-theme="dark"] .author-name:hover {
-  color: #a78bfa;
+.author-social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #64748b;
+  transition: all 0.2s ease;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.03);
+}
+
+[data-theme="dark"] .author-social-link {
+  color: #94a3b8;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.author-social-link:hover {
+  transform: translateY(-2px);
+  text-decoration: none;
+}
+
+.author-social-link.github:hover {
+  color: #181717;
+  background: rgba(24, 23, 23, 0.1);
+}
+
+.author-social-link.linkedin:hover {
+  color: #0a66c2;
+  background: rgba(10, 102, 194, 0.1);
+}
+
+.author-social-link.x:hover {
+  color: #000000;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+[data-theme="dark"] .author-social-link.github:hover {
+  color: #ffffff;
+}
+
+[data-theme="dark"] .author-social-link.x:hover {
+  color: #ffffff;
+}
+
+[data-theme="dark"] .author-social-link.linkedin:hover {
+  color: #0a66c2;
+  background: rgba(10, 102, 194, 0.2);
 }
 
 /* Tooltip for author names */

src/pages/blogs/index.tsx

@@ -4,6 +4,9 @@ import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import blogs from "../../database/blogs/index";
 import Head from "@docusaurus/Head";
+import { FaGithub, FaLinkedin } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+import { authorsMap } from "../../utils/authors";
 
 import "./blogs-new.css";
 
@@ -269,12 +272,52 @@ export default function Blogs(): React.JSX.Element {
 
 const BlogCard = ({ blog, index }) => {
   // Get authors for this blog post
-  const getAuthors = (slug) => {
-    const authors = authorMapping[slug] || ["recode hive Team"];
-    return authors.length > 1 ? authors.join(" & ") : authors[0];
+  const getAuthorsData = (slug: string) => {
+    // Some blogs might have multiple authors
+    const authorIds = blog.authors || [];
+    return authorIds.map((id) => ({
+      id,
+      ...authorsMap[id],
+    }));
   };
 
-  const authorName = getAuthors(blog.slug);
+  const authors = getAuthorsData(blog.slug);
+
+  const renderSocialIcons = (author) => {
+    if (!author.socials) return null;
+
+    return (
+      <div className="author-social-links">
+        {author.socials.github && (
+          <Link
+            href={`https://github.com/${author.socials.github}`}
+            className="author-social-link github"
+            title="GitHub"
+          >
+            <FaGithub />
+          </Link>
+        )}
+        {author.socials.linkedin && (
+          <Link
+            href={`https://www.linkedin.com/in/${author.socials.linkedin}`}
+            className="author-social-link linkedin"
+            title="LinkedIn"
+          >
+            <FaLinkedin />
+          </Link>
+        )}
+        {author.socials.x && (
+          <Link
+            href={`https://x.com/${author.socials.x}`}
+            className="author-social-link x"
+            title="X"
+          >
+            <FaXTwitter />
+          </Link>
+        )}
+      </div>
+    );
+  };
 
   return (
     <div className="article-card">
@@ -286,11 +329,25 @@ const BlogCard = ({ blog, index }) => {
         <h3 className="card-title">{blog.title}</h3>
         <p className="card-description">{blog.description}</p>
         <div className="card-meta">
-          <div className="card-author">
-            <span className="author-avatar">👤</span>
-            <span className="author-name" data-full-name={authorName}>
-              {authorName}
-            </span>
+          <div className="card-authors-container">
+            {authors.map((author, idx) => (
+              <div key={author.id} className="card-author">
+                <span className="author-avatar">
+                  <img 
+                    src={author.id ? `https://github.com/${author.socials?.github || author.id}.png` : ""} 
+                    alt={author.name}
+                    className="author-img"
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E";
+                    }}
+                  />
+                </span>
+                <div className="author-info">
+                  <span className="author-name">{author.name || "recode hive Team"}</span>
+                  {renderSocialIcons(author)}
+                </div>
+              </div>
+            ))}
           </div>
           <span className="card-read-time">5 min read</span>
         </div>