layouts/RootLayout.astro at master · myolog/layouts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
---
import "./styles/global.css";
import "./styles/acrylic.css";
import "./styles/glass.css";

import type { Props as SeoProps } from "astro-seo";
import { Header, Footer, RootBackground } from "@myolog/layouts/section";
import { SEO } from "astro-seo";
import { Pagefind } from "@myolog/components/pagefind";

export interface Props {
	seo?: SeoProps;
}

const { seo } = Astro.props as { seo: SeoProps };
---

<html lang="ko">
	<head>
		<link rel="icon" href="/icon/code.svg" type="image/svg+xml" />
		<SEO {...seo} charset="utf-8" />
	</head>
	<Pagefind />

	<RootBackground>
		<Header />
		<div class="h-20"></div>
		<body>
			<slot />
		</body>
		<Footer />
	</RootBackground>

{
		import.meta.env.RPOD && (
	<script
		is:inline
		src="https://www.googletagmanager.com/gtag/js?id=G-NQSNB090RC"></script>
	<script is:inline>
		window.dataLayer = window.dataLayer || [];
		function gtag() {
			dataLayer.push(arguments);
		}
		gtag("js", new Date());

		gtag("config", "G-NQSNB090RC");
	</script>
)}
	<script>
		import mermaid from "mermaid";
		declare global {
			interface Window {
				theme: {
					value: "dark" | "light";
					isDark: boolean;
					set: (theme: "dark" | "light") => void;
				};
			}
		}

		window.theme ??= {
			value:
				(localStorage.getItem("theme") ??
				window.matchMedia("(prefers-color-scheme: dark)").matches)
					? "dark"
					: "light",
			isDark: window.matchMedia("(prefers-color-scheme: dark)").matches,
			set: (theme) => {},
		};

		window.theme.set = (theme) => {
			localStorage.setItem("theme", theme);
			window.theme.isDark = theme === "dark";
			if (
				window.theme.value === "dark" &&
				!document.documentElement.classList.contains("dark")
			) {
				document.documentElement.classList.add("dark");
			} else {
				document.documentElement.classList.remove("dark");
			}
		};

		if (
			!("first" in localStorage) ||
			localStorage.getItem("first") !== "false"
		) {
			localStorage.setItem("first", "false");
			window.theme.value = window.matchMedia(
				"(prefers-color-scheme: dark)"
			).matches
				? "dark"
				: "light";
			localStorage.setItem("theme", window.theme.value);
		} else {
			window.theme.value = localStorage.getItem("theme") as
				| "dark"
				| "light";
		}
		window.theme.isDark = window.theme.value === "dark";
		window.theme.set(window.theme.value);

		document.addEventListener("DOMContentLoaded", () => {
			mermaid.initialize({
				theme: "dark",
			});
		});
	</script>
</html>