sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

⚡ make socials show up without need for javascript

Browse source 
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2024-02-22 15:14:29 +01:00
parent bf654334f1
commit de636d43d6
Signed by untrusted user who does not match committer: sidski
GPG key ID: D2BBDF3EDE6BA9A6
8 changed files with 59 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/Footer.astro
View file

@ -1,20 +1,20 @@
---
const today = new Date();
---
<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 githubImage = document.getElementById('githubImage');
const spotifyImage = document.getElementById('spotifyImage');
const webringImage = document.getElementById('webringImage');
const updateImageForTheme = () => {
const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
themeImage.src = currentTheme === 'dark' ? '/webring_dark.svg' : '/webring_light.svg';
githubImage.src = currentTheme === 'dark' ? '/socials/github_dark.svg' : '/socials/github_light.svg';
spotifyImage.src = currentTheme === 'dark' ? '/socials/spotify_dark.svg' : '/socials/spotify_light.svg';
webringImage.src = currentTheme === 'dark' ? '/socials/webring_dark.svg' : '/socials/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);
@ -23,15 +23,15 @@ const today = new Date();
<footer class="flex justify-between py-5 mt-5 footerbg">
<div>Sindre Kjelsrud &copy; {today.getFullYear()}</div>
<div class="flex social">
<div class="flex gap-1">
<a href="https://github.com/SindreKjelsrud" aria-label="Link to my GitHub">
<iconify-icon icon="ri:github-line" width="30" height="30" />
<img id="githubImage" height="30" width="30" src="/socials/github_light.svg" alt="GitHub"/>
</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>
<img id="spotifyImage" height="30" width="30" src="/socials/spotify_light.svg" alt="Spotify"/>
</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"/>
<img id="webringImage" height="30" width="30" src="/socials/webring_light.svg" alt="XXIIVV webring"/>
</a>
</div>
</footer>