From e2ccaf991fa61b114dabe517ba8f4e437d4bf67a Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Tue, 21 Feb 2023 17:34:12 +0100
Subject: [PATCH] feat(astro): migrate back link

---
 src/layouts/Layout.astro | 49 +++++++++++++++++++++++++++++++++-------
 1 file changed, 41 insertions(+), 8 deletions(-)
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e5dc608..775aba3 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,11 +1,12 @@
 ---
 import '../styles/global.css';
+import { Sprite } from 'astro-icon';
 
 export interface Props {
 	title: string;
 }
 
-const { title } = Astro.props;
+const { title, frontmatter } = Astro.props;
 ---
 
 <!DOCTYPE html>
@@ -47,12 +48,44 @@ const { title } = Astro.props;
 		/>
 	</head>
 	<body class="flex h-screen flex-col font-sans font-normal leading-relaxed">
-		<header class="grid grid-cols-18 grid-rows-layout mbe-layout print:hidden" role="banner">
-			Header
-		</header>
-		<main class="flex grow">
-			<slot />
-		</main>
-		<footer class="grid grid-cols-18 grid-rows-layout mbs-layout print:hidden">Footer</footer>
+		<Sprite.Provider>
+			<header
+				class="page-header grid grid-cols-18 grid-rows-layout mbe-layout print:hidden"
+				role="banner"
+			>
+				<!-- Backlink -->
+				{
+					frontmatter?.backLink ? (
+						<a
+							class="back-link col-span-1 col-start-1 self-center justify-self-center transition-transform duration-500 ease-in-out mie-[15px] hover:-translate-x-1 focus:-translate-x-1 print:hidden"
+							href="{frontmatter.backLink}"
+						>
+							<button
+								class="back-link-button flex h-[40px] w-[40px] cursor-pointer items-center justify-center border-none bg-transparent text-[0]"
+								aria-label="Back to overview"
+								type="button"
+							>
+								<Sprite name="ri:arrow-left-line" />
+							</button>
+						</a>
+					) : (
+						<div class="back-link-spacer col-span-1 col-start-1 h-[40px] w-[40px] justify-center self-center mie-[15px]" />
+					)
+				}
+			</header>
+			<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>
+		</Sprite.Provider>
 	</body>
 </html>
+
+<style>
+	[astro-icon] {
+		width: 24px;
+		height: 24px;
+	}
+</style>
