From 96e9adb5132fd8c4a4fdf19a05e479c3ecb9a8ef Mon Sep 17 00:00:00 2001
From: Jewgeni Lewash <j.lewash@gmail.com>
Date: Sun, 25 Feb 2024 22:35:23 +0100
Subject: [PATCH] refactor(layout): create baselayout component

---
 src/layouts/BaseLayout.astro | 45 ++++++++++++++++++++++++++++++++++++
 src/pages/index.astro        | 44 ++++-------------------------------
 2 files changed, 49 insertions(+), 40 deletions(-)
 create mode 100644 src/layouts/BaseLayout.astro
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
new file mode 100644
index 0000000..b323107
--- /dev/null
+++ b/src/layouts/BaseLayout.astro
@@ -0,0 +1,45 @@
+---
+import '@/styles/globals.css';
+import { ModeToggle } from '@/components/ModeToggle';
+
+const { title } = Astro.props;
+---
+
+<script is:inline>
+	const getThemePreference = () => {
+		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+			return localStorage.getItem('theme');
+		}
+		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	};
+	const isDark = getThemePreference() === 'dark';
+	document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
+
+	if (typeof localStorage !== 'undefined') {
+		const observer = new MutationObserver(() => {
+			const isDark = document.documentElement.classList.contains('dark');
+			localStorage.setItem('theme', isDark ? 'dark' : 'light');
+		});
+		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+	}
+</script>
+
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="theme-color" content="#61a8e1" />
+		<link rel="icon" href="/favicon.ico" sizes="48x48" />
+		<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
+		<link rel="manifest" href="/site.webmanifest" />
+		<title>{title}</title>
+	</head>
+	<body class="dark:bg-black">
+		<div class="flex items-center justify-center pt-4 dark:text-white">
+			<ModeToggle client:load />
+		</div>
+		<main>
+			<slot />
+		</main>
+	</body>
+</html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b12bc92..45898cd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,43 +1,7 @@
 ---
-import '@/styles/globals.css';
-import { ModeToggle } from '@/components/ModeToggle';
+import BaseLayout from '@/layouts/BaseLayout.astro';
 ---
 
-<!doctype html>
-<script is:inline>
-	const getThemePreference = () => {
-		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-			return localStorage.getItem('theme');
-		}
-		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-	};
-	const isDark = getThemePreference() === 'dark';
-	document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
-
-	if (typeof localStorage !== 'undefined') {
-		const observer = new MutationObserver(() => {
-			const isDark = document.documentElement.classList.contains('dark');
-			localStorage.setItem('theme', isDark ? 'dark' : 'light');
-		});
-		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
-	}
-</script>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<meta name="theme-color" content="#61a8e1" />
-		<link rel="icon" href="/favicon.ico" sizes="48x48" />
-		<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
-		<link rel="manifest" href="/site.webmanifest" />
-		<title>Astro Deploy</title>
-	</head>
-	<body class="dark:bg-black">
-		<main>
-			<div class="flex items-center justify-center px-4 pt-48 dark:text-white">Hello World</div>
-			<div class="flex items-center justify-center pt-4 dark:text-white">
-				<ModeToggle client:load />
-			</div>
-		</main>
-	</body>
-</html>
+<BaseLayout title="Astro Deploy">
+	<div class="flex items-center justify-center px-4 pt-48 dark:text-white">Hello World</div>
+</BaseLayout>
