Add socials.

Author: nikoshell

src/components/Footer.astro

@@ -1,10 +1,23 @@
 ---
-import { Image } from "astro:assets";
+import Icon from "@ui/Icon.astro";
 import links from "@data/links.json";
 import EPSLogo from "../../public/eps-logo.svg";
 
 const buildTimestamp = __TIMESTAMP__;
 const gitVersion = __GIT_VERSION__;
+
+const socialLinks = [
+  { key: "website", icon: "globe", label: "Website" },
+  { key: "blog", icon: "rss", label: "Blog" },
+  { key: "linkedin", icon: "linkedin", label: "LinkedIn" },
+  { key: "github", icon: "github", label: "GitHub" },
+  { key: "mastodon", icon: "mastodon", label: "Mastodon" },
+  { key: "bluesky", icon: "bluesky", label: "Bluesky" },
+  { key: "twitter", icon: "x-twitter", label: "Twitter" },
+  { key: "instagram", icon: "instagram", label: "Instagram" },
+  { key: "youtube", icon: "youtube", label: "YouTube" }
+];
+
 ---
 
   <div
@@ -53,11 +66,65 @@ const gitVersion = __GIT_VERSION__;
     <div
       class="flex flex-col lg:flex-row self-center gap-8 lg:gap-12 justify-end"
     >
-    <div class="flex text-white/40  w-full lg:w-2/3 px-6 items-center">
+    <div class="flex flex-col text-white/40  w-full lg:w-2/3 px-6 items-center">
         <p>Excited about our mission? Want to collaborate or contribute? Let's connect!
 We're open to partnership opportunities and would love to hear your ideas.
 <a class="text-white" href="mailto:[email protected]">[email protected]</a>
 </p>
+        <div class="social-links flex justify-center space-x-4 pt-4">
+          {socialLinks
+            .filter((link) => links.socials?.[link.key])
+            .map((link) => {
+              if (!links.socials) return;
+              const url = links.socials[link.key];
+              let iconColor:string;
+
+              switch(link.key) {
+                case "facebook":
+                  iconColor = "facebook";
+                  break;
+                case "twitter":
+                  iconColor = "twitter";
+                  break;
+                case "linkedin":
+                  iconColor = "linkedin";
+                  break;
+                case "github":
+                  iconColor = "github";
+                  break;
+                case "instagram":
+                  iconColor = "instagram";
+                  break;
+                case "discord":
+                  iconColor = "discord";
+                  break;
+                case "mastodon":
+                  iconColor = "mastodon";
+                  break;
+                case "bluesky":
+                  iconColor = "bluesky";
+                  break;
+                default:
+                  iconColor = "";
+                  break;
+              }
+
+              return (
+                <a
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={link.label}
+                  class={`social-icon ${iconColor}`}
+                >
+                  <span class="social-icon-inner">
+                    <Icon name={link.icon} style="brands" size="fa-lg" />
+                  </span>
+                </a>
+              );
+            })}
+        </div>
+
       </div>
       <div class="flex text-white/40 w-full lg:w-1/3 text-start">
         <div>

src/components/SponsorCard.astro

@@ -185,64 +185,6 @@ const socialLinks = [
 </div>
 
 <style>
-  .social-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    transition: transform 0.3s ease, color 0.3s ease;
-  }
-
-  .social-icon:hover {
-    transform: scale(1.2) rotate(6deg);
-  }
-
-  .social-icon-inner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  /* Platform-specific colors */
-  .social-icon.facebook {
-    color: #1877f2;
-  }
-
-  .social-icon.twitter {
-    color: #1da1f2;
-  }
-
-  .social-icon.linkedin {
-    color: #0a66c2;
-  }
-
-  .social-icon.github {
-    color: #333333;
-  }
-
-  .social-icon.instagram {
-    color: #e4405f;
-  }
-
-  .social-icon.discord {
-    color: #5865F2;
-  }
-
-  .social-icon.mastodon {
-    color: #6364FF;
-  }
-
-  .social-icon.bluesky {
-    color: #0085FF;
-  }
-
-  .social-icon.website {
-    color: #0077b5;
-  }
-
   /* Website button styles */
   .website-btn-container {
  display: flex;

src/data/links.json

@@ -247,6 +247,17 @@
       ]
     }
   ],
+  "socials": {
+    "website": "https://europython-society.org",
+    "blog": "https://blog.europython.eu",
+    "mastodon": "https://fosstodon.org/@europython",
+    "linkedin": "https://linkedin.com/company/europython",
+    "github": "https://github.com/europython",
+    "bluesky": "https://bsky.app/profile/europython.eu",
+    "twitter": "https://x.com/europython",
+    "instagram": "https://instagram.com/europython/",
+    "youtube": "https://youtube.com/channel/UC98CzaYuFNAA_gOINFB0e4Q"
+  },
   "terms": [
     {
       "name": "Contacts",

src/styles/global.css

@@ -270,3 +270,63 @@ main a[href^="#"]::before {
   background-size: 65%;
   background-color: white;
 }
+
+/* Platform-specific colors */
+.social-icon.facebook {
+  color: #1877f2;
+}
+
+.social-icon.twitter {
+  color: #1da1f2;
+}
+
+.social-icon.linkedin {
+  color: #0a66c2;
+}
+
+.social-icon.github {
+  color: #333333;
+}
+
+.social-icon.instagram {
+  color: #e4405f;
+}
+
+.social-icon.discord {
+  color: #5865f2;
+}
+
+.social-icon.mastodon {
+  color: #6364ff;
+}
+
+.social-icon.bluesky {
+  color: #0085ff;
+}
+
+.social-icon.website {
+  color: #0077b5;
+}
+
+.social-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  transition:
+    transform 0.3s ease,
+    color 0.3s ease;
+}
+
+.social-icon:hover {
+  transform: scale(1.2) rotate(6deg);
+}
+
+.social-icon-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}