From db710d5d9aec15fbfe57ea54445c2cdf793bbbc1 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ayo@ayco.io>
Date: Sat, 12 Apr 2025 11:48:09 +0200
Subject: [PATCH] feat: initial icons for social links

---
 src/components/Footer.astro | 23 +++++++++++++++--------
 src/constants/links.ts      | 10 +++++++++-
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index edb5f14..58267eb 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,10 +1,11 @@
 ---
+import Icon from 'astro-iconify'
 import { footerLinks as links } from '../constants/links'
 const year = new Date().getFullYear()
 ---
 
 <footer>
-  <ul>
+  <ul id="internal-links">
     <li>
       <a href="/about">About me</a>
     </li>
@@ -28,7 +29,9 @@ const year = new Date().getFullYear()
     {
       links.map((linkObj) => (
         <li>
-          <a href={linkObj.url}>{linkObj.text}</a>
+          <a href={linkObj.url}>
+            <Icon pack={linkObj.set ?? 'mdi'} name={linkObj.icon} />
+          </a>
         </li>
       ))
     }
@@ -45,9 +48,6 @@ const year = new Date().getFullYear()
 <style>
   footer {
     margin-top: 2em;
-    /* grid-template-columns: auto auto;
-    display: grid;
-    gap: 1rem; */
     padding: 0;
 
     ul {
@@ -55,14 +55,21 @@ const year = new Date().getFullYear()
       padding: 0;
 
       li {
-        display: inline;
+        display: inline-block;
 
-        &:not(:last-child)::after {
-          content: ' • ';
+        a svg {
+          width: 1.5rem;
+          margin-right: 1em;
         }
       }
     }
 
+    #internal-links li {
+      &:not(:last-child)::after {
+        content: ' • ';
+      }
+    }
+
     p,
     ul {
       margin: 0 0 1em;
diff --git a/src/constants/links.ts b/src/constants/links.ts
index 8b2a2d8..40c904a 100644
--- a/src/constants/links.ts
+++ b/src/constants/links.ts
@@ -35,37 +35,45 @@ export const links: Link[] = [
 
 export default links
 
-export const footerLinks = [
+export const footerLinks: Link[] = [
   {
     text: 'SourceHut',
     url: 'https://sr.ht/~ayoayco',
+    icon: 'sourcehut',
   },
   {
     text: 'GitHub',
     url: 'https://github.com/ayoayco',
+    icon: 'github',
   },
   {
     text: 'LinkedIn',
     url: 'https://www.linkedin.com/in/ayoayco',
+    icon: 'linkedin',
   },
   {
     text: 'Pixelfed',
     url: 'https://metapixl.com/@ayo',
+    icon: 'pixelfed',
   },
   {
     text: 'SoundCloud',
     url: 'https://SoundCloud.com/ayoayco',
+    icon: 'soundcloud',
   },
   {
     text: 'NPM',
     url: 'https://www.npmjs.com/~aayco',
+    icon: 'npm',
   },
   {
     text: 'Instagram',
     url: 'https://instagram.com/ayoayco',
+    icon: 'instagram',
   },
   {
     text: 'Mastodon',
     url: 'https://main.elk.zone/social.ayco.io/@ayo',
+    icon: 'mastodon',
   },
 ]