src/layouts/Base.astro 2.2 K raw
1
---
2
import type { SiteMeta } from "@/data/siteMeta";
3
import BaseHead from "@/components/BaseHead";
4
import Header from "@/components/layout/Header";
5
import Footer from "@/components/layout/Footer";
6
import SkipLink from "@/components/SkipLink";
7
import siteConfig from "@/site-config";
8
9
interface Props {
10
	meta: SiteMeta;
11
}
12
13
const {
14
	meta: { title, description = siteConfig.description, ogImage, articleDate },
15
} = Astro.props;
16
---
17
18
<html lang={siteConfig.lang}>
19
	<head>
20
		<!-- Google tag (gtag.js) -->
21
		<script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-QT67QEFLTG"
22
		></script>
23
		<script type="text/partytown">
24
			window.dataLayer = window.dataLayer || [];
25
			function gtag() {
26
				dataLayer.push(arguments);
27
			}
28
			gtag("js", new Date());
29
30
			gtag("config", "G-QT67QEFLTG");
31
		</script>
32
		<BaseHead title={title} description={description} ogImage={ogImage} articleDate={articleDate} />
33
		<script define:vars={{ siteConfig }}>
34
			const root = document.documentElement;
35
			const colorThemeMetaTag = document.querySelector("meta[name='theme-color']");
36
37
			// get user preference of dark mode, 1st local storage, 2nd browser
38
			function getThemePreference() {
39
				if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
40
					return localStorage.getItem("theme");
41
				}
42
				return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
43
			}
44
45
			const isDark = getThemePreference() === "dark";
46
47
			// watch document element class attribute and update user preference when it changes.
48
			const observer = new MutationObserver(() => {
49
				const rootIsDark = root.classList.contains("dark");
50
				// set the meta attribute
51
				colorThemeMetaTag.setAttribute(
52
					"content",
53
					siteConfig[rootIsDark ? "themeColorDark" : "themeColorLight"]
54
				);
55
				// store user preference
56
				if (typeof localStorage !== "undefined") {
57
					localStorage.setItem("theme", rootIsDark ? "dark" : "light");
58
				}
59
			});
60
			observer.observe(root, { attributeFilter: ["class"] });
61
62
			// initailse root class attribute
63
			root.classList.toggle("dark", isDark);
64
		</script>
65
	</head>
66
	<body>
67
		<SkipLink />
68
		<Header />
69
		<main id="main" class="flex-1">
70
			<slot />
71
		</main>
72
		<Footer />
73
	</body>
74
</html>