Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 31 additions & 3 deletions blog/authors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -96,4 +124,4 @@ Aditya-Singh-Rathore:
github: Adez017
instagram: _aaditya_.017
bluesky: adez017.bsky.social
x: https://x.com/Adez017
x: Adez017
2 changes: 1 addition & 1 deletion docusaurus.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ const config: Config = {
},
{
label: "🗺️ Roadmap",
to: "https://github.com/orgs/recodehive/projects/9",
to: "/roadmap"
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Formatting: this object entry is missing a trailing comma after to: "/roadmap". The repo runs Prettier with trailing commas, so npm run format:check is likely to fail until this is formatted.

Suggested change
to: "/roadmap"
to: "/roadmap",

Copilot uses AI. Check for mistakes.
},
{
label: "🤝 Community",
Expand Down
111 changes: 85 additions & 26 deletions src/pages/blogs/blogs-new.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
75 changes: 66 additions & 9 deletions src/pages/blogs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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],
}));
};
Comment on lines +275 to 282
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getAuthorsData takes a slug argument but doesn’t use it (it closes over blog). Also, the existing authorMapping constant near the top of the file appears to be unused after this refactor. Please remove the unused parameter/constant (or rewire the code to use them) to avoid @typescript-eslint/no-unused-vars warnings and keep the intent clear.

Copilot uses AI. Check for mistakes.

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>
Comment on lines +291 to +316
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The social profile links are icon-only. For accessibility, please add an aria-label (and/or visually-hidden text) to each Link so screen readers announce the destination (e.g., “GitHub profile”, “LinkedIn profile”, “X profile”). Relying on title alone isn’t sufficient for many assistive technologies.

Copilot uses AI. Check for mistakes.
)}
</div>
);
};

return (
<div className="article-card">
Expand All @@ -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";
}}
/>
Comment on lines +336 to +343
Copy link

Copilot AI Apr 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These author avatar images are loaded from GitHub for every card. Consider adding loading="lazy" to reduce initial page load cost, and prefer avatars.githubusercontent.com/<user>?size=... (or a locally cached image) to avoid redirects and reduce external dependency/latency.

Copilot uses AI. Check for mistakes.
</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>
Expand Down
Loading
Loading