SanYeCao-blog/src/layouts/BaseLayout.astro

---
import Footer from "@/components/Footer.astro";
import Header from "@/components/Header.astro";
import { ClientRouter } from "astro:transitions";
import { fade } from "astro:transitions";
import { getLangFromUrl } from "@/i18n";
import "katex/dist/katex.min.css";

const lang = getLangFromUrl(Astro.url);
const htmlLang = lang === "zh" ? "zh-CN" : "en-US";
import SEO from "@/components/SEO.astro";
import FloatingActions from "@/components/FloatingActions.astro";
import Spinner from "@/components/Spinner.astro";

const {
	pageTitle,
	description = "在这里，发现更多（雾）欢迎来到三叶的博客🥳",
	image,
} = Astro.props;
---

<!doctype html>
<html lang={htmlLang}>
	<head>
		<ClientRouter />
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<SEO title={pageTitle} description={description} image={image} />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<link rel="icon" href="/favicon.ico" />
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap"
			rel="stylesheet"
		/>
		<link
			href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap"
			rel="stylesheet"
		/>
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<FloatingActions />
	<script is:inline>
		function addCodeCopyButtons() {
			document.querySelectorAll("pre").forEach((pre) => {
				const code = pre.querySelector("code");
				if (!code) return;

				/* 已经处理过则跳过 */
				if (
					pre.parentElement?.classList.contains("code-block-wrapper")
				) {
					return;
				}

				/* 创建外层容器 */
				const wrapper = document.createElement("div");
				wrapper.className = "code-block-wrapper";

				pre.parentNode?.insertBefore(wrapper, pre);
				wrapper.appendChild(pre);

				/* 创建复制按钮 */
				const button = document.createElement("button");
				button.className = "code-copy-button";
				button.type = "button";
				button.setAttribute("aria-label", "复制代码");
				button.title = "复制代码";

				const icon = document.createElement("img");
				icon.className = "code-copy-icon";
				icon.src = "/images/copy-svgrepo-com.svg";
				icon.alt = "";
				icon.setAttribute("aria-hidden", "true");

				button.appendChild(icon);
				wrapper.appendChild(button);

				button.addEventListener("click", async () => {
					const text = code.textContent ?? "";

					try {
						await navigator.clipboard.writeText(text);
					} catch {
						const textarea = document.createElement("textarea");
						textarea.value = text;
						textarea.style.position = "fixed";
						textarea.style.opacity = "0";
						textarea.style.pointerEvents = "none";

						document.body.appendChild(textarea);
						textarea.select();
						document.execCommand("copy");
						textarea.remove();
					}

					icon.src = "/images/correct-signal-svgrepo-com.svg";
					button.setAttribute("aria-label", "已复制");
					button.title = "已复制";
					button.classList.add("copied");

					window.setTimeout(() => {
						icon.src = "/images/copy-svgrepo-com.svg";
						button.setAttribute("aria-label", "复制代码");
						button.title = "复制代码";
						button.classList.remove("copied");
					}, 1500);
				});
			});
		}

		addCodeCopyButtons();
		document.addEventListener("astro:page-load", addCodeCopyButtons);
	</script>

	<body>
		<Header />
		<Spinner />
		<main
			class="page-content"
			transition:animate={fade({ duration: "0.05s" })}
		>
			<slot />
		</main>
		<Footer />
	</body>
</html>

<style>
	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
	}
</style>