Abstract Socials into list to make it easy to add more

src/components/Footer.astro

@@ -1,10 +1,14 @@
 ---
 import { GLOBAL } from "../lib/variables";
+import { socials } from "../lib/socials";
 import Anchor from "./common/Anchor.astro";
 import Section from "./common/Section.astro";
+import SocialIcon from "./common/SocialIcon.astro";
 
 const date = new Date();
 const year = date.getFullYear();
+
+const footerSocials = socials.filter(social => social.showInFooter);
 ---
 
 <footer class="mt-16 mb-8">
@@ -12,52 +16,14 @@ const year = date.getFullYear();
     <div class="flex flex-col gap-6">
       <!-- Social icons row - now above the links -->
       <div class="flex justify-center gap-4">
-        {GLOBAL.githubProfile && (
+        {footerSocials.map((social) => (
-          <Anchor url={GLOBAL.githubProfile} aria-label="GitHub Profile">
+          <SocialIcon 
-            <svg
+            name={social.name}
-              xmlns="http://www.w3.org/2000/svg"
+            url={social.url}
-              width="32"
+            icon={social.icon}
-              height="32"
+            alt={social.alt}
-              viewBox="0 0 24 24"
+          />
-            >
+        ))}
-              <path
-                class="zag-fill zag-transition"
-                d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
-              ></path>
-            </svg>
-          </Anchor>
-        )}
-        {GLOBAL.giteaProfile && (
-          <Anchor url={GLOBAL.giteaProfile} aria-label="Gitea Profile">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="32"
-              height="32"
-              viewBox="0 0 24 24"
-            >
-              <path
-                class="zag-fill zag-transition"
-                d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
-              ></path>
-            </svg>
-          </Anchor>
-        )}
-        {GLOBAL.linkedinProfile && (
-          <Anchor url={GLOBAL.linkedinProfile} aria-label="LinkedIn Profile">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="32"
-              height="32"
-              viewBox="0 0 24 24"
-            >
-              <path
-                class="zag-fill zag-transition"
-                fill="currentColor"
-                d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11.12 19h-3.08v-9h3.08v9zm-1.54-10.29c-.99 0-1.79-.8-1.79-1.79s.8-1.79 1.79-1.79 1.79.8 1.79 1.79-.8 1.79-1.79 1.79zm13.16 10.29h-3.08v-4.89c0-1.16-.02-2.64-1.61-2.64s-1.86 1.26-1.86 2.57v4.96h-3.08v-9h2.96v1.23h.04c.41-.78 1.4-1.6 2.88-1.6 3.08 0 3.65 2.03 3.65 4.66v4.71z"
-              ></path>
-            </svg>
-          </Anchor>
-        )}
       </div>
       
       <!-- Navigation links row - now below the icons -->

src/components/common/SocialIcon.astro

@@ -0,0 +1,27 @@
+---
+import Anchor from "./Anchor.astro";
+
+export interface Props {
+  name: string;
+  url: string;
+  icon: string;
+  alt: string;
+  size?: "sm" | "md" | "lg";
+}
+
+const { name, url, icon, alt, size = "md" } = Astro.props;
+
+const sizeClasses = {
+  sm: "w-6 h-6",
+  md: "w-8 h-8",
+  lg: "w-10 h-10"
+};
+---
+
+<Anchor url={url} aria-label={alt}>
+  <img 
+    src={icon} 
+    alt={alt} 
+    class={`${sizeClasses[size]} zag-transition`} 
+  />
+</Anchor>

src/lib/socials.ts

@@ -0,0 +1,31 @@
+import { type SocialMedia } from "./types";
+
+/**
+ * Social media profiles
+ */
+export const socials: SocialMedia[] = [
+  {
+    name: "GitHub",
+    url: "https://github.com/justindeal",
+    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/github-dark.svg",
+    alt: "GitHub Profile",
+    showInFooter: true,
+    showInAbout: true
+  },
+  {
+    name: "Gitea",
+    url: "https://code.justin.deal/dealjus",
+    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/gitea-dark.svg",
+    alt: "Gitea Profile",
+    showInFooter: true,
+    showInAbout: true
+  },
+  {
+    name: "LinkedIn",
+    url: "https://www.linkedin.com/in/justin-deal/",
+    icon: "https://cdn.jsdelivr.net/gh/selfhst/icons/svg/linkedin-dark.svg",
+    alt: "LinkedIn Profile",
+    showInFooter: true,
+    showInAbout: true
+  }
+];

src/lib/types.ts

@@ -124,3 +124,38 @@ export type Service = {
 export type ServiceCategory = {
   [category: string]: Service[];
 };
+
+/**
+ * Represents a social media profile
+ */
+export type SocialMedia = {
+  /**
+   * The name of the social media platform
+   */
+  name: string;
+  
+  /**
+   * The URL to your profile
+   */
+  url: string;
+  
+  /**
+   * The URL to the icon from selfh.st/icons
+   */
+  icon: string;
+  
+  /**
+   * Alternative text for the icon
+   */
+  alt: string;
+  
+  /**
+   * Whether to show this social media profile in the footer
+   */
+  showInFooter?: boolean;
+  
+  /**
+   * Whether to show this social media profile on the about page
+   */
+  showInAbout?: boolean;
+};

src/lib/variables.ts

@@ -6,9 +6,6 @@
  * @property {string} rootUrl - The root URL of the site
  * @property {string} shortDescription - A short description of the site
  * @property {string} longDescription - A longer description of the site
- * @property {string} githubProfile - The GitHub profile URL
- * @property {string} giteaProfile - The Gitea profile URL
- * @property {string} linkedinProfile - The LinkedIn profile URL
  * @property {string} articlesName - The name used for articles
  * @property {string} projectsName - The name used for projects
  * @property {string} viewAll - The text used for "View All" links
@@ -30,11 +27,6 @@ export const GLOBAL = {
   shortDescription: "My personal slice of the internet",
   longDescription: "My personal blog, portfolio, and homelab dashboard built with Astro, TypeScript, TailwindCSS, and Alpine.js.",
   
-  // Social media links
-  githubProfile: "https://github.com/justindeal",
-  giteaProfile: "https://code.justin.deal/dealjus",
-  linkedinProfile: "https://www.linkedin.com/in/justin-deal/",
-  
   // Common text names used throughout the site
   articlesName: "Articles",
   projectsName: "Projects",

src/pages/about.astro

@@ -1,8 +1,11 @@
 ---
 import { GLOBAL } from "../lib/variables";
+import { socials } from "../lib/socials";
 import Layout from "../layouts/Layout.astro";
 import Section from "../components/common/Section.astro";
 import Prose from "../components/Prose.astro";
+
+const aboutSocials = socials.filter(social => social.showInAbout);
 ---
 
 <Layout>
@@ -294,28 +297,12 @@ import Prose from "../components/Prose.astro";
       <h2 class="text-2xl font-display mb-6">Connect</h2>
       
       <div class="flex flex-wrap gap-4">
-        <a href={GLOBAL.githubProfile} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 zag-bg-alt p-4 rounded-lg shadow-sm hover:zag-bg-accent-light transition-colors">
+        {aboutSocials.map((social) => (
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="zag-text">
+          <a href={social.url} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 zag-bg-alt p-4 rounded-lg shadow-sm hover:zag-bg-accent-light transition-colors">
-            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+            <img src={social.icon} alt={social.alt} class="w-6 h-6 zag-text" />
-          </svg>
+            <span>{social.name}</span>
-          <span>GitHub</span>
+          </a>
-        </a>
+        ))}
-        
-        <a href={GLOBAL.linkedinProfile} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 zag-bg-alt p-4 rounded-lg shadow-sm hover:zag-bg-accent-light transition-colors">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="zag-text">
-            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
-            <rect x="2" y="9" width="4" height="12"></rect>
-            <circle cx="4" cy="4" r="2"></circle>
-          </svg>
-          <span>LinkedIn</span>
-        </a>
-        
-        <a href={GLOBAL.giteaProfile} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 zag-bg-alt p-4 rounded-lg shadow-sm hover:zag-bg-accent-light transition-colors">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="zag-text">
-            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
-          </svg>
-          <span>Gitea</span>
-        </a>
       </div>
     </div>
   </Section>