feat: add footer with legal, social icons, and up link

src/components/Legal.astro

@@ -0,0 +1,13 @@
+---
+import LegalDate from './LegalDate.svelte';
+import { site } from '../data/site';
+---
+
+<div class="legal flex flex-1 shrink-0 items-center">
+	<span class="legal-copyright text-[14px] mie-[0.25em]">©</span>
+	<strong class="legal-author shrink-0 uppercase tracking-wider">{site.author}</strong>
+	<span class="legal-bullet mli-[0.25em]">/</span>
+	<span class="legal-year shrink-0">
+		<LegalDate client:idle />
+	</span>
+</div>

src/components/LegalDate.svelte

@@ -0,0 +1,7 @@
+<script>
+	const currentDate = new Date();
+	const isoDate = currentDate.toISOString();
+	const currentYear = currentDate.getFullYear();
+</script>
+
+<time datetime={isoDate}>2006–{currentYear}</time>

src/components/PageFooter.astro

@@ -0,0 +1,16 @@
+---
+import Legal from './Legal.astro';
+import SocialLinks from './SocialLinks.astro';
+import UpLink from './UpLink.astro';
+---
+
+<footer
+	class="page-footer bg-shibui-200 mbs-layout pli-halfcolumn pbe-[calc(2.775vw/2)] pbs-halfcolumn border-bs-2 border-bs-shibui-250 dark:bg-shibui-950 dark:border-bs-shibui-850 print:hidden"
+>
+	<div class="meta">Meta Footer</div>
+	<div class="small flex flex-wrap gap-4 text-[12px]">
+		<Legal />
+		<SocialLinks />
+		<UpLink />
+	</div>
+</footer>

src/components/SocialLinks.astro

@@ -0,0 +1,22 @@
+---
+import { Sprite } from 'astro-icon';
+import data from '../data/social-links.json';
+---
+
+<div class="flex flex-1 justify-center">
+	{
+		data.map(({ text, url, icon, props = {} }) => (
+			<a
+				aria-label={text}
+				class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
+				href={url}
+				rel="nofollow noopener noreferrer external"
+				target="_blank"
+				title={text}
+				{...props}
+			>
+				<Sprite name={icon} class="h-icon-small w-icon-small" />
+			</a>
+		))
+	}
+</div>

src/components/ThemeBox.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, onDestroy } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 
 	let observer;
 	let isDarkMode = false;

src/components/UpLink.astro

@@ -0,0 +1,30 @@
+---
+import { Sprite } from 'astro-icon';
+---
+
+<div class="flex flex-1 justify-end">
+	<a
+		id="up-link"
+		class="up-link transition-transform duration-500 ease-in-out hover:-translate-y-1 focus:-translate-y-1"
+		href="#top"
+	>
+		<button
+			aria-label="Back to top"
+			class="up-link-button flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
+		>
+			<Sprite name="ri:arrow-up-line" class="h-icon-small w-icon-small" />
+		</button>
+	</a>
+
+	<script>
+		const button = document.getElementById('up-link');
+		button?.addEventListener('click', (event) => {
+			event.preventDefault();
+			window.scrollTo({
+				top: 0,
+				left: 0,
+				behavior: 'smooth',
+			});
+		});
+	</script>
+</div>

src/data/site.ts

@@ -0,0 +1,3 @@
+export const site = {
+	author: 'Stefan Imhoff',
+};

src/data/social-links.json

@@ -0,0 +1,23 @@
+[
+	{
+		"text": "Mail",
+		"url": "#protected-email",
+		"icon": "ri:mail-fill",
+		"props": {
+			"data-domain": "stefanimhoff",
+			"data-name": "hey",
+			"data-tld": "de",
+			"onclick": "window.open(`mailto:${this.dataset.name}@${this.dataset.domain}.${this.dataset.tld}`, '_blank')"
+		}
+	},
+	{
+		"text": "Twitter",
+		"url": "https://twitter.com/kogakure",
+		"icon": "ri:twitter-fill"
+	},
+	{
+		"text": "GitHub",
+		"url": "https://github.com/kogakure",
+		"icon": "ri:github-fill"
+	}
+]

src/layouts/Layout.astro

@@ -4,6 +4,7 @@ import { Sprite } from 'astro-icon';
 
 import ThemeProvider from '../components/ThemeProvider.astro';
 import PageHeader from '../components/PageHeader.astro';
+import PageFooter from '../components/PageFooter.astro';
 
 export interface Props {
 	title: string;
@@ -57,9 +58,7 @@ const { title, backLink } = Astro.props;
 			<main class="page-content flex grow">
 				<slot />
 			</main>
-			<footer class="page-footer grid grid-cols-18 grid-rows-layout mbs-layout print:hidden">
-				Footer
-			</footer>
+			<PageFooter />
 		</Sprite.Provider>
 	</body>
 </html>