From b8b5bae125624f4ba7bdd5e95c9b09254a49f9ff Mon Sep 17 00:00:00 2001
From: Alex van de Sandt <me@alexvds.com>
Date: Sun, 19 Jul 2026 17:32:26 -0500
Subject: [PATCH] Build social icons from metadata

---
 sass/style.scss      | 18 +++++++++++++-----
 templates/index.html | 13 ++++++++++---
 zola.toml            | 15 +++++++++++++++
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/sass/style.scss b/sass/style.scss
index 9968854..ab033a9 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -19,9 +19,17 @@ h1 {
   font-family: $header-font-stack;
 }
 
-img.social-icon {
-  width: 2em;
-  height: 2em;
-  padding: 0.5em;
-}
+div#social-container {
+  display: inline-flex;
+  flex-direction: row;
+
+  a {
+    text-decoration: none;
+  }
 
+  .social-icon img {
+    width: 32px;
+    height: 32px;
+    padding: 0.5em;
+  }
+}
diff --git a/templates/index.html b/templates/index.html
index d3e9201..2897119 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,9 +3,16 @@
 {% block content %}
 <header class="center-block">
     <h1>Alex van de Sandt</h1>
-    <a href="https://github.com/igneousflock" target="_blank"><img src="github.svg" class="social-icon" /></a>
-    <a href="https://tangled.org/igneousflock.dev" target="_blank"><img src="tangled.svg" class="social-icon" /></a>
-    <a href="https://www.linkedin.com/in/alexvds/" target="_blank"><img src="linkedin.png" class="social-icon" /></a>
+
+    <div id="social-container">
+        {% for social in config.extra.socials %}
+        <div class="social-icon">
+            <a href="{{social.url}}" target="_blank">
+                <img src="{{social.icon}}" alt="Visit my {{social.alt}} profile" />
+            </a>
+        </div>
+        {% endfor %}
+    </div>
 </header>
 
 <main class="center-block">
diff --git a/zola.toml b/zola.toml
index 61da9f6..322f29b 100644
--- a/zola.toml
+++ b/zola.toml
@@ -14,3 +14,18 @@ theme = "catppuccin-mocha"
 
 [extra]
 # Put all your custom variables here
+
+[[extra.socials]]
+icon = "github.svg"
+url = "https://github.com/igneousflock"
+alt = "GitHub"
+
+[[extra.socials]]
+icon = "tangled.svg"
+url = "https://tangled.org/igneousflock.dev"
+alt = "Tangled"
+
+[[extra.socials]]
+icon = "linkedin.png"
+url = "https://www.linkedin.com/in/alexvds/"
+alt = "LinkedIn"
-- 
2.51.2