feat(socials): add socials from config file to /

Author: kymppi

src/components/LastFMWidget.svelte

@@ -10,7 +10,7 @@
 <div class="wrapper flex">
   {#if data.track}
     {#if data.track.image[3]}
-      <img src={data.track.image[3].uri} alt={`Cover for ${data.track.name}`} />
+      <img src={data.track.image[3].uri} alt="" />
     {/if}
 
     <div class="info flex">

src/components/Socials.astro

@@ -0,0 +1,38 @@
+---
+import { Icon } from "astro-icon";
+const { default: socials } = await import("../../config/socials.json");
+---
+
+<div class="wrapper flex">
+  {
+    socials.map((item) => (
+      <a href={item.link} target="_blank" aria-label={item.name}>
+        <Icon alt={`Logo for ${item.name}`} name={item.icon} />
+      </a>
+    ))
+  }
+</div>
+
+<style lang="scss">
+  .wrapper {
+    --gap: 0.5em;
+
+    width: 100%;
+    height: 100%;
+    justify-content: space-between;
+    align-items: center;
+
+    a {
+      color: hsl(var(--clr-white));
+      transition: color 0.2s ease-in-out;
+      display: grid;
+      place-items: center;
+      height: 2.5em;
+      width: 2.5em;
+
+      &:hover {
+        color: hsl(var(--clr-primary));
+      }
+    }
+  }
+</style>

src/layouts/BaseLayout.astro

@@ -39,12 +39,16 @@ const { title = "new.midka.dev", class: className }: Props = Astro.props;
   .noise-container {
     position: relative;
     isolation: isolate;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     /* background-color: hsl(var(--clr-background)); */
   }
 
   .noise-underlay {
     z-index: -2;
     position: relative;
+    width: 100%;
   }
 
   .noise {

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import LastFMWidget from "../components/LastFMWidget.svelte";
+import Socials from "../components/Socials.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import { LastFMClient } from "../lib/LastFM.client";
 import "../styles/global.css";
@@ -22,15 +23,17 @@ const lastFMData = {
   </section>
   <section class="about noise-container">
     <div class="noise"></div>
-    <div class="noise-underlay">About Me</div>
+    <div class="noise-underlay">Hi! I'm Midka</div>
   </section>
   <section class="something noise-container">
     <div class="noise"></div>
     <div class="noise-underlay">Something</div>
   </section>
   <section class="socials noise-container">
     <div class="noise"></div>
-    <div class="noise-underlay">Socials</div>
+    <div class="noise-underlay">
+      <Socials />
+    </div>
   </section>
   <section class="project1 noise-container">
     <div class="noise"></div>