Merge pull request #234 from ocftw/feature/customise-social-media

feat(homepage): add customised social media component
ocftw · Sep 16, 2023 · 7e2ef41 · 7e2ef41
2 parents 475f5d1 + 01411af
commit 7e2ef41
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 97 deletions.
diff --git a/homepage/_data/social_media.json 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
@@ -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
diff --git a/homepage/src/components/socialMedia.jsx 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
@@ -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
@@ -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>"
                 }
               ]
             }