refactor(ui): migrate social links to site config and footer component

src/components/layout/Footer.astro

@@ -1,24 +1,44 @@
 ---
-import { menuLinks, siteConfig } from "@/site.config";
+import { Icon } from "astro-icon/components";
+import { menuLinks, siteConfig, socialLinks } from "@/site.config";
 
 const year = new Date().getFullYear();
 ---
 
 <footer
-	class="text-muted mt-auto flex w-full flex-col items-center justify-center gap-y-2 pt-20 pb-4 text-center align-top font-semibold sm:flex-row sm:justify-between sm:text-xs"
+	class="text-muted border-global-text/15 mt-auto flex w-full flex-col items-center gap-y-6 border-t pt-8 pb-6 text-center text-sm font-semibold"
 >
-	<div class="me-0 sm:me-4">
-		&copy; {siteConfig.author}
-		{year}.<span class="inline-block">&nbsp;🚀&nbsp;{siteConfig.title}&nbsp;🌵&nbsp;</span>
-	</div>
-	<nav aria-labelledby="footer_links" class="sm:divide-muted flex gap-x-2 sm:gap-x-0 sm:divide-x">
+	{/* Row 1: site nav */}
+	<nav aria-labelledby="footer_links" class="flex flex-wrap justify-center gap-x-1 gap-y-1">
 		<p id="footer_links" class="sr-only">More on this site</p>
 		{
 			menuLinks.map((link) => (
-				<a class="hover:text-global-text px-4 py-2 hover:underline sm:py-0" href={link.path}>
+				<a class="hover:text-global-text px-3 py-1 hover:underline" href={link.path}>
 					{link.title}
 				</a>
 			))
 		}
 	</nav>
+
+	{/* Row 2: social icons */}
+	<ul class="flex items-center justify-center gap-x-4">
+		{
+			socialLinks.map(({ friendlyName, isWebmention, link, name }) => (
+				<li class="flex">
+					<a
+						class="hover:text-link inline-block"
+						href={link}
+						rel={`noreferrer ${isWebmention ? "me authn" : ""}`}
+						target={link.startsWith("mailto:") ? undefined : "_blank"}
+					>
+						<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name={name} />
+						<span class="sr-only">{friendlyName}</span>
+					</a>
+				</li>
+			))
+		}
+	</ul>
+
+	{/* Row 3: copyright */}
+	<p class="text-xs font-normal">&copy; {year} {siteConfig.author}</p>
 </footer>