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"></script>
22
    <script type="text/partytown">
23
			window.dataLayer = window.dataLayer || [];
24
			function gtag() {
25
				dataLayer.push(arguments);
26
			}
27
			gtag("js", new Date());
28
29
			gtag("config", "G-QT67QEFLTG");
30
		</script>
31
		<BaseHead title={title} description={description} ogImage={ogImage} articleDate={articleDate} />
32
		<script define:vars={{ siteConfig }}>
33
			const root = document.documentElement;
34
			const colorThemeMetaTag = document.querySelector("meta[name='theme-color']");
35
36
			// get user preference of dark mode, 1st local storage, 2nd browser
37
			function getThemePreference() {
38
				if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
39
					return localStorage.getItem("theme");
40
				}
41
				return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
42
			}
43
44
			const isDark = getThemePreference() === "dark";
45
46
			// watch document element class attribute and update user preference when it changes.
47
			const observer = new MutationObserver(() => {
48
				const rootIsDark = root.classList.contains("dark");
49
				// set the meta attribute
50
				colorThemeMetaTag.setAttribute(
51
					"content",
52
					siteConfig[rootIsDark ? "themeColorDark" : "themeColorLight"]
53
				);
54
				// store user preference
55
				if (typeof localStorage !== "undefined") {
56
					localStorage.setItem("theme", rootIsDark ? "dark" : "light");
57
				}
58
			});
59
			observer.observe(root, { attributeFilter: ["class"] });
60
61
			// initailse root class attribute
62
			root.classList.toggle("dark", isDark);
63
		</script>
64
	</head>
65
	<body>
66
		<SkipLink />
67
		<Header />
68
		<main id="main" class="flex-1">
69
			<slot />
70
		</main>
71
		<Footer />
72
	</body>
73
</html>