-
-
👤
-
- {authorName}
-
+
+ {authors.map((author, idx) => (
+
+
+
+
+ {author.name || "recode hive Team"}
+ {renderSocialIcons(author)}
+
+
+ ))}
5 min read
diff --git a/src/theme/BlogPostAuthor/Socials/index.tsx b/src/theme/BlogPostAuthor/Socials/index.tsx
new file mode 100644
index 00000000..dd1ed98c
--- /dev/null
+++ b/src/theme/BlogPostAuthor/Socials/index.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import {
+ FaGithub,
+ FaTwitter,
+ FaLinkedin,
+ FaInstagram,
+ FaYoutube,
+ FaFacebook,
+ FaStackOverflow,
+ FaMedium,
+ // FaHashnod÷e,
+ FaExternalLinkAlt,
+ FaRss,
+} from 'react-icons/fa';
+import { FaXTwitter } from 'react-icons/fa6';
+import { SiBluesky, SiSubstack } from 'react-icons/si';
+import styles from './styles.module.css';
+
+const SocialIcons = {
+ github: FaGithub,
+ twitter: FaTwitter,
+ x: FaXTwitter,
+ linkedin: FaLinkedin,
+ instagram: FaInstagram,
+ youtube: FaYoutube,
+ facebook: FaFacebook,
+ stackoverflow: FaStackOverflow,
+ medium: FaMedium,
+ // hashnode: FaHashn÷ode,
+ newsletter: SiSubstack,
+ substack: SiSubstack,
+ bluesky: SiBluesky,
+ rss: FaRss,
+};
+
+export default function BlogPostAuthorSocials({author}) {
+ const {socials} = author;
+ if (!socials) {
+ return null;
+ }
+
+ const renderSocialLink = (platform, handle) => {
+ const Icon = SocialIcons[platform.toLowerCase()] || FaExternalLinkAlt;
+ let href = handle;
+
+ if (!handle.startsWith('http')) {
+ switch (platform.toLowerCase()) {
+ case 'github':
+ href = `https://github.com/${handle}`;
+ break;
+ case 'twitter':
+ case 'x':
+ href = `https://x.com/${handle}`;
+ break;
+ case 'linkedin':
+ href = `https://www.linkedin.com/in/${handle}`;
+ break;
+ case 'instagram':
+ href = `https://www.instagram.com/${handle}`;
+ break;
+ case 'youtube':
+ href = `https://www.youtube.com/@${handle}`;
+ break;
+ case 'facebook':
+ href = `https://www.facebook.com/${handle}`;
+ break;
+ case 'medium':
+ href = `https://medium.com/@${handle}`;
+ break;
+ case 'hashnode':
+ href = `https://hashnode.com/@${handle}`;
+ break;
+ case 'stackoverflow':
+ href = `https://stackoverflow.com/users/${handle}`;
+ break;
+ case 'bluesky':
+ href = `https://bsky.app/profile/${handle}`;
+ break;
+ default:
+ break;
+ }
+ }
+
+ return (
+
+
+
+ );
+ };
+
+ return (
+
+ {Object.entries(socials).map(([platform, handle]) =>
+ renderSocialLink(platform, handle),
+ )}
+
+ );
+}
diff --git a/src/theme/BlogPostAuthor/Socials/styles.module.css b/src/theme/BlogPostAuthor/Socials/styles.module.css
new file mode 100644
index 00000000..f1ea7212
--- /dev/null
+++ b/src/theme/BlogPostAuthor/Socials/styles.module.css
@@ -0,0 +1,37 @@
+.socials {
+ display: flex;
+ gap: 0.75rem;
+ margin-top: 0.5rem;
+ flex-wrap: wrap;
+}
+
+.socialLink {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background-color: var(--ifm-color-emphasis-100);
+ color: var(--ifm-color-emphasis-700);
+ transition: all 0.2s ease;
+ font-size: 1.1rem;
+}
+
+.socialLink:hover {
+ background-color: var(--ifm-color-primary);
+ color: white;
+ transform: translateY(-2px);
+ text-decoration: none;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+[data-theme='dark'] .socialLink {
+ background-color: var(--ifm-color-emphasis-200);
+ color: var(--ifm-color-emphasis-800);
+}
+
+[data-theme='dark'] .socialLink:hover {
+ background-color: var(--ifm-color-primary);
+ color: white;
+}
diff --git a/src/theme/BlogPostAuthor/index.tsx b/src/theme/BlogPostAuthor/index.tsx
new file mode 100644
index 00000000..71dddc60
--- /dev/null
+++ b/src/theme/BlogPostAuthor/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import Socials from '@theme/BlogPostAuthor/Socials';
+import styles from './styles.module.css';
+
+export default function BlogPostAuthor({author, className}) {
+ const {name, title, url, imageURL, socials} = author;
+ return (
+
+ {imageURL && (
+
+
+
+ )}
+
+
+
+ {title && (
+
+ {title}
+
+ )}
+
+
+
+ );
+}
diff --git a/src/theme/BlogPostAuthor/styles.module.css b/src/theme/BlogPostAuthor/styles.module.css
new file mode 100644
index 00000000..00583808
--- /dev/null
+++ b/src/theme/BlogPostAuthor/styles.module.css
@@ -0,0 +1,16 @@
+.authorPhoto {
+ width: 3.5rem;
+ height: 3.5rem;
+ border: 2px solid var(--ifm-color-emphasis-200);
+ padding: 2px;
+ background: var(--ifm-background-color);
+ transition: border-color 0.2s ease;
+}
+
+.authorPhoto:hover {
+ border-color: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] .authorPhoto {
+ border-color: var(--ifm-color-emphasis-300);
+}
diff --git a/src/utils/authors.ts b/src/utils/authors.ts
index 491bac28..8cbe7eee 100644
--- a/src/utils/authors.ts
+++ b/src/utils/authors.ts
@@ -1,22 +1,75 @@
-export const authorsMap = {
- "ajay-dhangar": "Ajay Dhangar",
- "sanjay-kv": "Sanjay Viswanthan",
- "hitesh-gahanolia": "Hitesh Gahanolia",
- "sowmiya-v": "Sowmiya Venkatesan",
- "abhijith-m-s": "Abhijith M S",
- "khushi-kalra": "Khushi Kalra",
- nayanikamukherjee: "Nayanika Mukherjee",
- "pujan-sarkar": "Pujan Sarkar",
- mohitmuktikant: "Mohit Muktikant",
- "santhosh-siddhardha": "Lingamuneni Santhosh Siddhardha",
- "akshitha-chiluka": "Akshitha Chiluka",
- "Aditya-Singh-Rathore": "Aditya Singh Rathore",
+export const authorsMap: Record
}> = {
+ "ajay-dhangar": {
+ name: "Ajay Dhangar",
+ socials: {
+ github: "ajay-dhangar",
+ linkedin: "ajay-dhangar",
+ x: "CodesWithAjay",
+ }
+ },
+ "sanjay-kv": {
+ name: "Sanjay Viswanthan",
+ socials: {
+ github: "sanjay-kv",
+ linkedin: "sanjay-k-v",
+ x: "sanjay_kv_",
+ }
+ },
+ "hitesh-gahanolia": {
+ name: "Hitesh Gahanolia",
+ socials: { github: "Hitesh4278" }
+ },
+ "sowmiya-v": {
+ name: "Sowmiya Venkatesan",
+ socials: {
+ github: "sowmiyeh",
+ linkedin: "sowmiyavenkatesan",
+ x: "sowmiyeh",
+ }
+ },
+ "abhijith-m-s": {
+ name: "Abhijith M S",
+ socials: { github: "AMS003010" }
+ },
+ "khushi-kalra": {
+ name: "Khushi Kalra",
+ socials: { github: "abckhush" }
+ },
+ nayanikamukherjee: {
+ name: "Nayanika Mukherjee",
+ socials: { github: "Nayanika1402" }
+ },
+ "pujan-sarkar": {
+ name: "Pujan Sarkar",
+ socials: { github: "Pujan-sarkar" }
+ },
+ mohitmuktikant: {
+ name: "Mohit Muktikant",
+ socials: { github: "mohitmuktikant" }
+ },
+ "santhosh-siddhardha": {
+ name: "Lingamuneni Santhosh Siddhardha",
+ socials: { github: "Santhosh-Siddhardha" }
+ },
+ "akshitha-chiluka": {
+ name: "Akshitha Chiluka",
+ socials: { github: "AKSHITHA-CHILUKA" }
+ },
+ "Aditya-Singh-Rathore": {
+ name: "Aditya Singh Rathore",
+ socials: {
+ github: "Adez017",
+ linkedin: "aditya-singh-rathore0017",
+ x: "Adez017",
+ }
+ },
};
export const getAuthorNames = (authorIds: string[]): string => {
const firstNames = authorIds
.map((id) => {
- const fullName = authorsMap[id] || id;
+ const author = authorsMap[id];
+ const fullName = author ? author.name : id;
return fullName.split(" ")[0];
})
.slice(0, 2);