refactor: enhance Author page with dynamic social media links and improve layout

Author: Llewellyn500

app/authors/[author]/page.tsx

@@ -1,10 +1,19 @@
-import { Metadata } from 'next';
-import formatString from "@/app/functions/formatString";
+import { db } from "@/lib/firebase";
+import { collection, query, where, getDocs, orderBy } from "firebase/firestore";
 import PostNavigation from "@/components/PostNavigation";
 import SocialSharing from "@/components/SocialSharing";
 import Link from "next/link";
-import { db } from "@/lib/firebase";
-import { collection, query, where, getDocs, orderBy } from "firebase/firestore";
+import {
+  RiInstagramLine,
+  RiTwitterFill,
+  RiYoutubeFill,
+  RiGithubFill,
+  RiTiktokFill,
+  RiPatreonFill,
+  RiFacebookFill,
+  RiLinkedinFill,
+  RiDiscordFill,
+} from "react-icons/ri";
 
 type AuthorData = {
   uid: string;
@@ -14,10 +23,8 @@ type AuthorData = {
   avatar: string;
   imgAlt: string;
   slug: string;
-  biography: {
-    summary: string;
-    body: string;
-  };
+  biography: { summary: string; body: string };
+  socials?: { [key: string]: string }; // Social media map
 };
 
 type ArticleData = {
@@ -31,33 +38,6 @@ type ArticleData = {
   authorUID: string;
 };
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { author: string };
-}): Promise<Metadata> {
-  const decodedAuthor = decodeURIComponent(params.author);
-  try {
-    const authorsRef = collection(db, "authors");
-    const q = query(authorsRef, where("slug", "==", decodedAuthor));
-    const snapshot = await getDocs(q);
-
-    if (snapshot.empty) {
-      return { title: "Author Not Found | L.A.P Docs" };
-    }
-
-    const authorData = snapshot.docs[0].data() as AuthorData;
-    return {
-      title: `${authorData.name} | L.A.P Docs`,
-      description: authorData.biography.summary
-    };
-  } catch (error) {
-    return {
-      title: "Author Profile | L.A.P Docs"
-    };
-  }
-}
-
 // Function to fetch author data
 async function getAuthorData(slug: string) {
   try {
@@ -66,19 +46,18 @@ async function getAuthorData(slug: string) {
     const q = query(authorsRef, where("slug", "==", decodedAuthor));
     const authorSnapshot = await getDocs(q);
 
-    if (authorSnapshot.empty) {
-      return null;
-    }
+    if (authorSnapshot.empty) return null;
 
     const authorData = authorSnapshot.docs[0].data() as AuthorData;
+
     const articlesQuery = query(
       collection(db, "articles"),
       where("authorUID", "==", authorData.uid),
       orderBy("date", "desc")
     );
     const articlesSnapshot = await getDocs(articlesQuery);
 
-    const articles = articlesSnapshot.docs.map(doc => ({
+    const articles = articlesSnapshot.docs.map((doc) => ({
       uid: doc.id,
       ...doc.data(),
       date: doc.data().date?.toDate() || new Date(),
@@ -91,71 +70,74 @@ async function getAuthorData(slug: string) {
   }
 }
 
-// Non-async page component
+// **Dynamically Map Social Links to Icons**
+const SOCIAL_ICONS: { [key: string]: any } = {
+  youtube: RiYoutubeFill,
+  github: RiGithubFill,
+  instagram: RiInstagramLine,
+  twitter: RiTwitterFill,
+  tiktok: RiTiktokFill,
+  patreon: RiPatreonFill,
+  facebook: RiFacebookFill,
+  linkedin: RiLinkedinFill,
+  discord: RiDiscordFill,
+};
+
+// **Non-async page component**
 export default function Page({ params }: { params: { author: string } }) {
   return <AuthorPage authorSlug={params.author} />;
 }
 
-// Async server component
+// **Async server component**
 async function AuthorPage({ authorSlug }: { authorSlug: string }) {
   const data = await getAuthorData(authorSlug);
-  
+
   if (!data) {
     return <div className="p-8">Author not found</div>;
   }
-  
+
   const { author: authorData, articles } = data;
 
+  // **Dynamically Generate Social Media Links**
+  const socialLinks = authorData.socials
+    ? Object.entries(authorData.socials)
+        .filter(([platform, url]) => url) // Remove empty links
+        .map(([platform, url]) => ({
+          href: url,
+          ariaLabel: `Visit ${authorData.name}'s ${platform} page`,
+          Icon: SOCIAL_ICONS[platform.toLowerCase()] || RiGithubFill, // Default to GitHub icon if unknown
+        }))
+    : [];
+
   return (
     <main className="max-w-[95rem] w-full mx-auto px-4 sm:pt-4 xs:pt-2 lg:pb-4 md:pb-4 sm:pb-2 xs:pb-2">
       <PostNavigation href="/authors">Author</PostNavigation>
-      
+
       <article className="max-w-[75rem] w-full mx-auto grid lg:grid-cols-[300px_680px] gap-8 md:gap-6 justify-around">
-        {/* Author Profile Section */}
+        {/* **Author Profile Section** */}
         <div className="w-fit">
           <img
             src={authorData.avatar}
             alt={authorData.imgAlt}
-            className="w-full max-w-[300px] h-auto"
+            className="w-full max-w-[300px] h-auto rounded-full"
           />
-          <div className="flex justify-between border-t border-black mt-12 pt-6">
-            <p className="uppercase font-semibold text-lg">Follow</p>
-            <SocialSharing
-              links={[
-                {
-                  href: "#",
-                  ariaLabel: "Visit our Instagram page",
-                  src: "/icons/ri_instagram-line.svg",
-                  alt: "Instagram logo",
-                },
-                {
-                  href: "#",
-                  ariaLabel: "Visit our Twitter page",
-                  src: "/icons/ri_twitter-fill.svg",
-                  alt: "Twitter logo",
-                },
-                {
-                  href: "#",
-                  ariaLabel: "Visit our YouTube page",
-                  src: "/icons/ri_youtube-fill.svg",
-                  alt: "YouTube logo",
-                },
-              ]}
-            />
-          </div>
+          {socialLinks.length > 0 && (
+            <div className="flex justify-between border-t border-white mt-12 pt-6">
+              <p className="uppercase font-semibold text-lg">Follow:</p>
+              <SocialSharing links={socialLinks} />
+            </div>
+          )}
         </div>
 
-        {/* Author Biography */}
+        {/* **Author Biography** */}
         <article>
           <h1 className="text-subheading pb-8">{authorData.name}</h1>
-          <p className="text-blog-summary pb-12">
-            {authorData.biography.summary}
-          </p>
+          <p className="text-blog-summary pb-12">{authorData.biography.summary}</p>
           <p className="text-blog-body">{authorData.biography.body}</p>
         </article>
       </article>
 
-      {/* Author Articles */}
+      {/* **Author Articles** */}
       <div className="pb-12 md:pb-48">
         <h2 className="text-blog-subheading mt-[9.5rem] pt-12 pb-12 md:pb-24">
           Articles by {authorData.name}
@@ -166,6 +148,7 @@ async function AuthorPage({ authorSlug }: { authorSlug: string }) {
   );
 }
 
+// **Component to Render Author’s Articles**
 function AuthorArticles({ articles }: { articles: ArticleData[] }) {
   if (articles.length === 0) {
     return (
@@ -176,55 +159,44 @@ function AuthorArticles({ articles }: { articles: ArticleData[] }) {
   }
 
   return (
-    <div className="grid md:grid-cols-2 border border-black border-collapse">
+    <div className="grid md:grid-cols-2">
       {articles.map((article) => (
-        <article
-          className="flex items-center gap-2 md:gap-12 p-8 border border-black"
-          key={article.uid}
-        >
-          <Link href={`/magazine/${article.slug}`} className="flex-shrink-0">
+        <article className="flex items-center gap-2 md:gap-12 p-8 border border-white" key={article.uid}>
+          <Link href={`/posts/${article.slug}`} className="flex-shrink-0">
             <img
               className="h-[150px] w-[150px] object-cover hover:scale-105 transition-transform"
               src={article.img}
               alt={article.title}
             />
           </Link>
-          
+
           <div>
             <p className="heading3-title pb-4">
-              <Link 
-                href={`/magazine/${article.slug}`}
-                className="hover:text-gray-600 transition-colors"
-              >
+              <Link href={`/posts/${article.slug}`} className="hover:text-white transition-colors">
                 {article.title}
               </Link>
             </p>
-            
+
             <div className="flex flex-wrap gap-4">
               <div className="flex items-center">
                 <p className="font-semibold pr-2">Date:</p>
-                <time 
-                  dateTime={article.date.toISOString()}
-                  className="text-gray-600"
-                >
+                <time dateTime={article.date.toISOString()} className="text-white">
                   {article.date.toLocaleDateString("en-US", {
                     year: "numeric",
                     month: "long",
                     day: "numeric",
                   })}
                 </time>
               </div>
-              
+
               <div className="flex items-center">
                 <p className="font-semibold pr-2">Category:</p>
-                <span className="text-gray-600">
-                  {formatString(article.label)}
-                </span>
+                <span className="text-white">{article.label}</span>
               </div>
             </div>
           </div>
         </article>
       ))}
     </div>
   );
-}
+}

components/AuthorList.tsx

@@ -54,13 +54,15 @@ export default function AuthorsList() {
             <article className="flex flex-col md:flex-row justify-between md:items-center gap-4 ml-5">
               <div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-16">
                 {/* Ensure image has a transparent background */}
+                <Link href={`authors/${author.slug}`}>
                 <Image
                   className="h-[9.375rem] w-[9.375rem] object-cover rounded-full bg-transparent"
                   src={author.avatar}
                   alt={author.imgAlt}
                   width={150}
                   height={150}
                 />
+                </Link>
                 <Link href={`authors/${author.slug}`}>
                   <h2 className="text-2xl font-semibold">{author.name}</h2>
                 </Link>