From 01411afdffe82ff7abc270c096db06648507a49d Mon Sep 17 00:00:00 2001
From: Ben Liu <ben196888@gmail.com>
Date: Sat, 16 Sep 2023 01:09:04 +0700
Subject: [PATCH] feat(homepage): add customised social media component

---
 homepage/_data/social_media.json        | 12 ++++
 homepage/src/components/banner.jsx      |  4 +-
 homepage/src/components/social.jsx      | 79 ------------------------
 homepage/src/components/socialMedia.jsx | 82 +++++++++++++++++++++++++
 homepage/src/layouts/footer.jsx         |  4 +-
 homepage/src/pages/admin/config.json    | 36 ++++++-----
 6 files changed, 120 insertions(+), 97 deletions(-)
 create mode 100644 homepage/_data/social_media.json
 delete mode 100644 homepage/src/components/social.jsx
 create mode 100644 homepage/src/components/socialMedia.jsx

diff --git a/homepage/_data/social_media.json b/homepage/_data/social_media.json
new file mode 100644
index 00000000..2dd679da
--- /dev/null
+++ b/homepage/_data/social_media.json
@@ -0,0 +1,12 @@
+{
+  "links": [
+    {
+      "type": "github",
+      "url": "https://github.com/ocftw/open-star-ter-village"
+    },
+    {
+      "type": "discord",
+      "url": "https://discord.gg/JnTHGnxwYS"
+    }
+  ]
+}
diff --git a/homepage/src/components/banner.jsx b/homepage/src/components/banner.jsx
index 1b9c3eb5..8022bacd 100644
--- a/homepage/src/components/banner.jsx
+++ b/homepage/src/components/banner.jsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import Social from './social';
+import SocialMedia from './socialMedia';
 
 const Banner = ({ heroImage, title, subtitle = '', highlights = [] }) => (
   <div className="banner">
@@ -20,7 +20,7 @@ const Banner = ({ heroImage, title, subtitle = '', highlights = [] }) => (
             <li key={`sub-data-${highlight}`}>{highlight}</li>
           ))}
         </ul>
-        <Social />
+        <SocialMedia />
       </div>
     </div>
   </div>
diff --git a/homepage/src/components/social.jsx b/homepage/src/components/social.jsx
deleted file mode 100644
index 595370d5..00000000
--- a/homepage/src/components/social.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-const Social = ({
-  facebook,
-  twitter,
-  instagram,
-  linkedin,
-  discord,
-  github,
-}) => (
-  <ul className="social">
-    {facebook && (
-      <li>
-        <a
-          className="fab fa-facebook-f"
-          href={facebook}
-          target="_blank"
-          rel="noopener noreferrer"
-        ></a>
-      </li>
-    )}
-    {twitter && (
-      <li>
-        <a
-          className="fab fa-twitter"
-          href={twitter}
-          target="_blank"
-          rel="noopener noreferrer"
-        ></a>
-      </li>
-    )}
-    {instagram && (
-      <li>
-        <a
-          className="fab fa-instagram"
-          href={instagram}
-          target="_blank"
-          rel="noopener noreferrer"
-        ></a>
-      </li>
-    )}
-    {linkedin && (
-      <li>
-        <a
-          className="fab fa-linkedin-in"
-          href={linkedin}
-          target="_blank"
-          rel="noopener noreferrer"
-        ></a>
-      </li>
-    )}
-    {discord && (
-      <li>
-        <a
-          className="fab fa-discord"
-          href={discord}
-          target="_blank"
-          rel="noopener noreferrer"
-        ></a>
-      </li>
-    )}
-    {github && (
-      <li>
-        <a
-          className="fab fa-github"
-          href={github}
-          target="_blank"
-          rel="noopener noreferrer"
-        ></a>
-      </li>
-    )}
-  </ul>
-);
-
-Social.defaultProps = {
-  instagram: `https://instagram.com/openstartervillage/`,
-  discord: `https://discord.gg/JnTHGnxwYS`,
-  github: `https://github.com/ocftw/open-star-ter-village`,
-};
-
-export default Social;
diff --git a/homepage/src/components/socialMedia.jsx b/homepage/src/components/socialMedia.jsx
new file mode 100644
index 00000000..4a00396f
--- /dev/null
+++ b/homepage/src/components/socialMedia.jsx
@@ -0,0 +1,82 @@
+import Link from 'next/link';
+import socialMedia from '../../_data/social_media.json';
+
+const SocialMedia = ({ links = null }) => {
+  const socialMediaList = links || socialMedia.links || [];
+
+  const socialMediaLinks = socialMediaList.map((link) => {
+    const { type, url } = link;
+    switch (type) {
+      case 'facebook':
+        return (
+          <li key="social_media__facebook">
+            <Link
+              className="fab fa-facebook-f"
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+            />
+          </li>
+        );
+      case 'twitter':
+        return (
+          <li key="social_media__twitter">
+            <Link
+              className="fab fa-twitter"
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+            />
+          </li>
+        );
+      case 'instagram':
+        return (
+          <li key="social_media__instagram">
+            <Link
+              className="fab fa-instagram"
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+            />
+          </li>
+        );
+      case 'linkedin':
+        return (
+          <li key="social_media__linkedin">
+            <Link
+              className="fab fa-linkedin-in"
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+            />
+          </li>
+        );
+      case 'discord':
+        return (
+          <li key="social_media__discord">
+            <Link
+              className="fab fa-discord"
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+            />
+          </li>
+        );
+      case 'github':
+        return (
+          <li key="social_media__github">
+            <Link
+              className="fab fa-github"
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+            />
+          </li>
+        );
+    }
+  });
+
+  return <ul className="social">{socialMediaLinks}</ul>;
+};
+
+export default SocialMedia;
diff --git a/homepage/src/layouts/footer.jsx b/homepage/src/layouts/footer.jsx
index bc748d36..1887b915 100644
--- a/homepage/src/layouts/footer.jsx
+++ b/homepage/src/layouts/footer.jsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import Social from '../components/social';
+import SocialMedia from '../components/socialMedia';
 import Logo from '../components/logo';
 
 const Footer = ({ siteData }) => (
@@ -19,7 +19,7 @@ const Footer = ({ siteData }) => (
         ))}
       </div>
       <span>{siteData.title}</span>
-      <Social />
+      <SocialMedia />
       <div className="flex flex-row flex-justify-center logos margin-2-percent">
         <Logo
           text="Initiator"
diff --git a/homepage/src/pages/admin/config.json b/homepage/src/pages/admin/config.json
index 091f10ad..dfbbcdad 100644
--- a/homepage/src/pages/admin/config.json
+++ b/homepage/src/pages/admin/config.json
@@ -344,27 +344,35 @@
           ]
         },
         {
-          "name": "authors",
-          "label": "Authors",
-          "file": "homepage/_data/authors.yml",
-          "description": "Author descriptions",
+          "name": "social_media",
+          "label": "Social Media",
+          "file": "homepage/_data/social_media.json",
+          "description": "Social media link switches",
           "fields": [
             {
-              "name": "authors",
-              "label": "Authors",
-              "label_singular": "Author",
+              "name": "links",
+              "label": "Links",
+              "label_singular": "Link",
               "widget": "list",
               "fields": [
                 {
-                  "label": "Name",
-                  "name": "name",
-                  "widget": "string",
-                  "hint": "First and Last"
+                  "label": "Type`",
+                  "name": "type",
+                  "widget": "select",
+                  "options": [
+                    "facebook",
+                    "twitter",
+                    "instagram",
+                    "linkedin",
+                    "discord",
+                    "github"
+                  ]
                 },
                 {
-                  "label": "Description",
-                  "name": "description",
-                  "widget": "markdown"
+                  "label": "Url",
+                  "name": "url",
+                  "widget": "string",
+                  "hint": "https://<social_media>/<account|username>"
                 }
               ]
             }