From bf654334f10f6684ff64c43ef75a9715a97298da Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
Date: Wed, 21 Feb 2024 23:36:26 +0100
Subject: [PATCH] :sparkles: add webring

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 public/webring_dark.svg     |  1 +
 public/webring_light.svg    |  1 +
 src/components/Footer.astro | 26 ++++++++++++++++++++++----
 3 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 public/webring_dark.svg
 create mode 100644 public/webring_light.svg

diff --git a/public/webring_dark.svg b/public/webring_dark.svg
new file mode 100644
index 0000000..ff32084
--- /dev/null
+++ b/public/webring_dark.svg
@@ -0,0 +1 @@
+<svg fill="none" height="300" stroke="#9AD3BB" stroke-linecap="square" stroke-width="28" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M201.962 210a60 60 0 10-103.924-60l-50 86.603"/><path d="M98.038 210a60 60 0 10103.924-60l-50-86.603"/><path d="M150 120a60 60 0 100 120h100"/></svg>
\ No newline at end of file
diff --git a/public/webring_light.svg b/public/webring_light.svg
new file mode 100644
index 0000000..e7fa904
--- /dev/null
+++ b/public/webring_light.svg
@@ -0,0 +1 @@
+<svg fill="none" height="300" stroke="#3B2C29" stroke-linecap="square" stroke-width="28" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M201.962 210a60 60 0 10-103.924-60l-50 86.603"/><path d="M98.038 210a60 60 0 10103.924-60l-50-86.603"/><path d="M150 120a60 60 0 100 120h100"/></svg>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 9488cbd..4ab4789 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,18 +2,36 @@
 const today = new Date();
 ---
 <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
-<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
-<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
-<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
+
+<script type="module" client:load>
+  const themeImage = document.getElementById('themeImage');
+
+  const updateImageForTheme = () => {
+    const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+    themeImage.src = currentTheme === 'dark' ? '/webring_dark.svg' : '/webring_light.svg';
+  };
+
+  // Initial update on page load
+  updateImageForTheme();
+
+  // Listen for theme changes if your theme toggle updates a class or attribute
+  const themeToggle = document.getElementById('themeToggle');
+  if (themeToggle) {
+    themeToggle.addEventListener('click', updateImageForTheme);
+  }
+</script>
 
 <footer class="flex justify-between py-5 mt-5 footerbg">
 	<div>Sindre Kjelsrud &copy; {today.getFullYear()}</div>
-	<div class="social">
+	<div class="flex social">
     <a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub">
       <iconify-icon icon="ri:github-line" width="30" height="30" />
     </a>
     <a href="https://open.spotify.com/user/kjelsrud!" aria-label="Link to my Spotify">
 				<iconify-icon icon="mdi:spotify" width="30" height="30" />
 		</a>
+    <a href="https://webring.xxiivv.com/#sid" target="_blank" rel="noopener">
+      <img id="themeImage" height="30" width="30" src="/webring_light.svg" alt="XXIIVV webring"/>
+    </a>
   </div>
 </footer>