Replace socialLinks array with SOCIALS config

src/components/Footer.astro

@@ -1,7 +1,8 @@
 ---
+import socialIcons from "@assets/socialIcons";
+import { SOCIALS } from "src/config";
 import Hr from "./Hr.astro";
 import LinkButton from "./LinkButton.astro";
-import socialLinks from "@utils/socialLinks";
 
 const currentYear = new Date().getFullYear();
 
@@ -17,17 +18,15 @@ const { noMarginTop = false } = Astro.props;
   <div class="footer-wrapper">
     <div class="social-icons">
       {
-        socialLinks
+        SOCIALS.filter((social) => social.active).map((social) => (
-          .filter((socialLink) => socialLink.active)
+          <LinkButton
-          .map((socialLink) => (
+            href={social.href}
-            <LinkButton
+            className="link-button"
-              href={socialLink.href}
+            title={social.name}
-              className="link-button"
+          >
-              title={socialLink.name}
+            <Fragment set:html={socialIcons[social.name]} />
-            >
+          </LinkButton>
-              <Fragment set:html={socialLink.icon} />
+        ))
-            </LinkButton>
-          ))
       }
     </div>
     <div class="copyright-wrapper">

src/pages/index.astro

@@ -6,7 +6,8 @@ import LinkButton from "@components/LinkButton.astro";
 import Hr from "@components/Hr.astro";
 import Card from "@components/Card";
 import getSortedPosts from "@utils/getSortedPosts";
-import socialLinks from "@utils/socialLinks";
+import { SOCIALS } from "src/config";
+import socialIcons from "@assets/socialIcons";
 import type { Frontmatter } from "src/types";
 
 const posts = await Astro.glob<Frontmatter>("../contents/*.md");
@@ -45,17 +46,15 @@ const sortedPosts = getSortedPosts(posts);
         <div class="whitespace-nowrap">Social Links:</div>
         <div class="social-icons">
           {
-            socialLinks
+            SOCIALS.filter((social) => social.active).map((social) => (
-              .filter((socialLink) => socialLink.active)
+              <LinkButton
-              .map((socialLink) => (
+                href={social.href}
-                <LinkButton
+                className="link-button"
-                  href={socialLink.href}
+                title={social.name}
-                  className="link-button"
+              >
-                  title={socialLink.name}
+                <Fragment set:html={socialIcons[social.name]} />
-                >
+              </LinkButton>
-                  <Fragment set:html={socialLink.icon} />
+            ))
-                </LinkButton>
-              ))
           }
         </div>
       </div>

src/utils/socialLinks.ts

@@ -1,70 +0,0 @@
-const socialLinks = [
-  {
-    name: "Github",
-    href: "https://github.com/satnaing",
-    active: true,
-    icon: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="icon-tabler"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <path
-      d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
-    ></path>
-  </svg>`,
-  },
-  {
-    name: "Facebook",
-    href: "https://www.facebook.com/satnaing.dev",
-    active: true,
-    icon: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="icon-tabler"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <path
-      d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"
-    ></path>
-  </svg>`,
-  },
-  {
-    name: "Instagram",
-    href: "https://www.instagram.com/satnaing.dev/",
-    active: true,
-    icon: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="icon-tabler"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <rect x="4" y="4" width="16" height="16" rx="4"></rect>
-    <circle cx="12" cy="12" r="3"></circle>
-    <line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
-  </svg>`,
-  },
-  {
-    name: "Linkedin",
-    href: "https://linkedin.com/satnaing.dev",
-    active: true,
-    icon: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="icon-tabler"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-    <rect x="4" y="4" width="16" height="16" rx="2"></rect>
-    <line x1="8" y1="11" x2="8" y2="16"></line>
-    <line x1="8" y1="8" x2="8" y2="8.01"></line>
-    <line x1="12" y1="16" x2="12" y2="11"></line>
-    <path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
-  </svg>`,
-  },
-];
-
-export default socialLinks;