added dynamicIcon

src/layouts/PostSingle.astro

@@ -2,7 +2,7 @@
 import BlogCard from "@/components/BlogCard.astro";
 import Share from "@/components/Share.astro";
 import config from "@/config/config.json";
-import Disqus from "@/function-components/Disqus";
+import Disqus from "@/helpers/Disqus";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import dateFormat from "@/lib/utils/dateFormat";
 import similerItems from "@/lib/utils/similarItems";

src/layouts/components/AuthorCard.astro

@@ -1,6 +1,6 @@
 ---
-import { Image } from "@astrojs/image/components";
 import { plainify } from "@/lib/utils/textConverter";
+import { Image } from "@astrojs/image/components";
 import Social from "./Social.astro";
 
 const { data } = Astro.props;

src/layouts/components/Social.astro

@@ -1,531 +1,28 @@
 ---
 const { source, className } = Astro.props;
+import DynamicIcon from "@/helpers/DynamicIcon";
 
-import {
-  IoCall,
-  IoGlobeOutline,
-  IoLocation,
-  IoLogoBehance,
-  IoLogoBitbucket,
-  IoLogoCodepen,
-  IoLogoDiscord,
-  IoLogoDribbble,
-  IoLogoFacebook,
-  IoLogoFoursquare,
-  IoLogoGithub,
-  IoLogoGitlab,
-  IoLogoInstagram,
-  IoLogoLinkedin,
-  IoLogoMastodon,
-  IoLogoMedium,
-  IoLogoPinterest,
-  IoLogoReddit,
-  IoLogoRss,
-  IoLogoSkype,
-  IoLogoSlack,
-  IoLogoSnapchat,
-  IoLogoSoundcloud,
-  IoLogoTiktok,
-  IoLogoTumblr,
-  IoLogoTwitter,
-  IoLogoVimeo,
-  IoLogoVk,
-  IoLogoWhatsapp,
-  IoLogoYoutube,
-  IoMail,
-} from "react-icons/io5/index.js";
-
-type SocialLink = {
-  facebook: string;
-  twitter: string;
-  mastodon: string;
-  instagram: string;
-  youtube: string;
-  linkedin: string;
-  github: string;
-  gitlab: string;
-  discord: string;
-  slack: string;
-  medium: string;
-  codepen: string;
-  bitbucket: string;
-  dribbble: string;
-  behance: string;
-  pinterest: string;
-  soundcloud: string;
-  tumblr: string;
-  reddit: string;
-  vk: string;
-  whatsapp: string;
-  snapchat: string;
-  vimeo: string;
-  tiktok: string;
-  foursquare: string;
-  rss: string;
-  email: string;
-  phone: string;
-  address: string;
-  skype: string;
-  website: string;
-};
-const {
-  facebook,
-  twitter,
-  mastodon,
-  instagram,
-  youtube,
-  linkedin,
-  github,
-  gitlab,
-  discord,
-  slack,
-  medium,
-  codepen,
-  bitbucket,
-  dribbble,
-  behance,
-  pinterest,
-  soundcloud,
-  tumblr,
-  reddit,
-  vk,
-  whatsapp,
-  snapchat,
-  vimeo,
-  tiktok,
-  foursquare,
-  rss,
-  email,
-  phone,
-  address,
-  skype,
-  website,
-}: SocialLink = source;
+export interface ISocial {
+  name: string;
+  icon: string;
+  link: string;
+}
 ---
 
 <ul class={className}>
   {
-    facebook && (
-      <li class="inline-block">
+    source.map((social: ISocial) => (
+      <li>
         <a
-          aria-label="facebook"
-          href={facebook}
+          aria-label={social.name}
+          href={social.link}
           target="_blank"
           rel="noopener noreferrer nofollow"
         >
-          <IoLogoFacebook />
+          <span class="sr-only">{social.name}</span>
+          <DynamicIcon class="inline-block" icon={social.icon} />
         </a>
       </li>
-    )
-  }
-  {
-    twitter && (
-      <li class="inline-block">
-        <a
-          aria-label="twitter"
-          href={twitter}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoTwitter />
-        </a>
-      </li>
-    )
-  }
-  {
-    mastodon && (
-      <li class="inline-block">
-        <a
-          aria-label="mastodon"
-          href={mastodon}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoMastodon />
-        </a>
-      </li>
-    )
-  }
-  {
-    instagram && (
-      <li class="inline-block">
-        <a
-          aria-label="instagram"
-          href={instagram}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoInstagram />
-        </a>
-      </li>
-    )
-  }
-  {
-    youtube && (
-      <li class="inline-block">
-        <a
-          aria-label="youtube"
-          href={youtube}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoYoutube />
-        </a>
-      </li>
-    )
-  }
-  {
-    linkedin && (
-      <li class="inline-block">
-        <a
-          aria-label="linkedin"
-          href={linkedin}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoLinkedin />
-        </a>
-      </li>
-    )
-  }
-  {
-    github && (
-      <li class="inline-block">
-        <a
-          aria-label="github"
-          href={github}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoGithub />
-        </a>
-      </li>
-    )
-  }
-  {
-    gitlab && (
-      <li class="inline-block">
-        <a
-          aria-label="gitlab"
-          href={gitlab}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoGitlab />
-        </a>
-      </li>
-    )
-  }
-  {
-    discord && (
-      <li class="inline-block">
-        <a
-          aria-label="discord"
-          href={discord}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoDiscord />
-        </a>
-      </li>
-    )
-  }
-  {
-    slack && (
-      <li class="inline-block">
-        <a
-          aria-label="slack"
-          href={slack}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoSlack />
-        </a>
-      </li>
-    )
-  }
-  {
-    medium && (
-      <li class="inline-block">
-        <a
-          aria-label="medium"
-          href={medium}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoMedium />
-        </a>
-      </li>
-    )
-  }
-  {
-    codepen && (
-      <li class="inline-block">
-        <a
-          aria-label="codepen"
-          href={codepen}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoCodepen />
-        </a>
-      </li>
-    )
-  }
-  {
-    bitbucket && (
-      <li class="inline-block">
-        <a
-          aria-label="bitbucket"
-          href={bitbucket}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoBitbucket />
-        </a>
-      </li>
-    )
-  }
-  {
-    dribbble && (
-      <li class="inline-block">
-        <a
-          aria-label="dribbble"
-          href={dribbble}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoDribbble />
-        </a>
-      </li>
-    )
-  }
-  {
-    behance && (
-      <li class="inline-block">
-        <a
-          aria-label="behance"
-          href={behance}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoBehance />
-        </a>
-      </li>
-    )
-  }
-  {
-    pinterest && (
-      <li class="inline-block">
-        <a
-          aria-label="pinterest"
-          href={pinterest}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoPinterest />
-        </a>
-      </li>
-    )
-  }
-  {
-    soundcloud && (
-      <li class="inline-block">
-        <a
-          aria-label="soundcloud"
-          href={soundcloud}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoSoundcloud />
-        </a>
-      </li>
-    )
-  }
-  {
-    tumblr && (
-      <li class="inline-block">
-        <a
-          aria-label="tumblr"
-          href={tumblr}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoTumblr />
-        </a>
-      </li>
-    )
-  }
-  {
-    reddit && (
-      <li class="inline-block">
-        <a
-          aria-label="reddit"
-          href={reddit}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoReddit />
-        </a>
-      </li>
-    )
-  }
-  {
-    vk && (
-      <li class="inline-block">
-        <a
-          aria-label="vk"
-          href={vk}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoVk />
-        </a>
-      </li>
-    )
-  }
-  {
-    whatsapp && (
-      <li class="inline-block">
-        <a
-          aria-label="whatsapp"
-          href={whatsapp}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoWhatsapp />
-        </a>
-      </li>
-    )
-  }
-  {
-    snapchat && (
-      <li class="inline-block">
-        <a
-          aria-label="snapchat"
-          href={snapchat}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoSnapchat />
-        </a>
-      </li>
-    )
-  }
-  {
-    vimeo && (
-      <li class="inline-block">
-        <a
-          aria-label="vimeo"
-          href={vimeo}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoVimeo />
-        </a>
-      </li>
-    )
-  }
-  {
-    tiktok && (
-      <li class="inline-block">
-        <a
-          aria-label="tiktok"
-          href={tiktok}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoTiktok />
-        </a>
-      </li>
-    )
-  }
-  {
-    foursquare && (
-      <li class="inline-block">
-        <a
-          aria-label="foursquare"
-          href={foursquare}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoFoursquare />
-        </a>
-      </li>
-    )
-  }
-  {
-    skype && (
-      <li class="inline-block">
-        <a
-          aria-label="skype"
-          href={skype}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoSkype />
-        </a>
-      </li>
-    )
-  }
-  {
-    website && (
-      <li class="inline-block">
-        <a
-          aria-label="website"
-          href={website}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoGlobeOutline />
-        </a>
-      </li>
-    )
-  }
-  {
-    rss && (
-      <li class="inline-block">
-        <a
-          aria-label="rss feed"
-          href={rss}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLogoRss />
-        </a>
-      </li>
-    )
-  }
-  {
-    email && (
-      <li class="inline-block">
-        <a aria-label="email" href={`mailto:${email}`}>
-          <IoMail />
-        </a>
-      </li>
-    )
-  }
-  {
-    phone && (
-      <li class="inline-block">
-        <a aria-label="telephone" href={`tel:${phone}`}>
-          <IoCall />
-        </a>
-      </li>
-    )
-  }
-  {
-    address && (
-      <li class="inline-block">
-        <a
-          aria-label="location"
-          href={address}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <IoLocation />
-        </a>
-      </li>
-    )
+    ))
   }
 </ul>

src/layouts/helpers/DynamicIcon.tsx

@@ -0,0 +1,49 @@
+import React, { FC } from "react";
+import type { IconType } from "react-icons";
+import * as AiIcons from "react-icons/ai/index.js";
+import * as BsIcons from "react-icons/bs/index.js";
+import * as FaIcons from "react-icons/fa/index.js";
+import * as FaIcons6 from "react-icons/fa6/index.js";
+import * as FiIcons from "react-icons/fi/index.js";
+import * as Io5Icons from "react-icons/io5/index.js";
+import * as RiIcons from "react-icons/ri/index.js";
+import * as TbIcons from "react-icons/tb/index.js";
+import * as TfiIcons from "react-icons/tfi/index.js";
+
+type IconMap = Record<string, IconType>;
+
+interface IDynamicIcon {
+  icon: string;
+  className?: string;
+}
+
+const iconLibraries: { [key: string]: IconMap } = {
+  ai: AiIcons,
+  bs: BsIcons,
+  fa: FaIcons,
+  fa6: FaIcons6,
+  fi: FiIcons,
+  io5: Io5Icons,
+  ri: RiIcons,
+  tb: TbIcons,
+  tfi: TfiIcons,
+};
+
+const DynamicIcon: FC<IDynamicIcon> = ({ icon, ...props }) => {
+  const IconLibrary = getIconLibrary(icon);
+  const Icon = IconLibrary ? IconLibrary[icon] : undefined;
+
+  if (!Icon) {
+    return <span className="text-sm">Icon not found</span>;
+  }
+
+  return <Icon {...props} />;
+};
+
+const getIconLibrary = (icon: string): IconMap | undefined => {
+  const libraryKey = icon.substring(0, 2).toLowerCase();
+
+  return iconLibraries[libraryKey];
+};
+
+export default DynamicIcon;

src/layouts/partials/Footer.astro

@@ -27,7 +27,7 @@ const { footer }: { footer: { name: string; url: string }[] } = menu;
         </ul>
       </div>
       <div class="mb-8 text-center lg:col-3 lg:mb-0 lg:mt-0 lg:text-right">
-        <Social source={social} className="social-icons" />
+        <Social source={social.main} className="social-icons" />
       </div>
     </div>
   </div>