coworking-stream-guide/src/layouts/Layout.astro

---
import { ClientRouter } from "astro:transitions";
import "@/styles/global.css";

export interface Props {
	title: string;
	description: string;
}

const { title, description } = Astro.props;
---

<!doctype html>
<html lang="en" data-theme="dark">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content={description} />
		<meta name="keywords" content="coworking, study, streams" />
		<meta name="author" content="RythonDev" />
		<meta name="theme-color" content="#2B2D31" />
		<meta name="viewport" content="width=device-width" />
		<!-- "X" meta tags -->
		<meta
			name="twitter:image"
			content="/assets/coworking-website-preview.webp"
		/>
		<meta name="twitter:site" content="@RythonDev" />
		<meta name="twitter:title" content="Coworking Streamers Guide" />
		<meta
			name="twitter:description"
			content="A guide for new and existing coworking streamers!"
		/>
		<meta name="twitter:card" content="summary_large_image" />
		<meta name="twitter:image:alt" content="Coworking Streamers Guide" />
		<meta name="twitter:creator" content="@RythonDev" />
		<meta
			name="og:image"
			content="/assets/coworking-website-preview.webp"
		/>
		<meta name="og:title" content="Coworking Streamers Guide" />
		<meta
			name="og:description"
			content="A guide for new and existing coworking streamers!"
		/>
		<meta name="og:url" content="https://coworking-guide.vercel.app/" />
		<meta name="og:site_name" content="Coworking Streamers Guide" />
		<meta name="og:type" content="website" />

		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
		<link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
		<script is:inline>
			(() => {
				const applyTheme = (root) => {
					const savedTheme = localStorage.getItem("theme");
					const theme =
						savedTheme === "light" || savedTheme === "dark"
							? savedTheme
							: window.matchMedia("(prefers-color-scheme: dark)")
									.matches
								? "dark"
								: "light";
					root.dataset.theme = theme;
					root.style.colorScheme = theme;
				};

				applyTheme(document.documentElement);

				if (!window.__themePersistenceReady) {
					document.addEventListener("astro:before-swap", (event) => {
						applyTheme(event.newDocument.documentElement);
					});
					document.addEventListener("astro:after-swap", () => {
						applyTheme(document.documentElement);
					});
					window.__themePersistenceReady = true;
				}
			})();
		</script>
		<script src="/pagefind/pagefind-ui.js" is:inline></script>
		<script is:inline src="/_vercel/insights/script.js"></script>
		<ClientRouter />
		<meta name="generator" content={Astro.generator} />
		<title>{title}</title>
	</head>
	<body>
		<div class="bg-none">
			<slot />
		</div>
		<script>
			// make all <a> attributes have target="_blank" except for Table of Contents
			document
				.querySelectorAll("a:not(.no-target-blank)")
				.forEach((el) => {
					el.setAttribute("target", "_blank");
				});
		</script>

		<style is:global>
			:root {
				--header-height: 3.5rem;
			}

			html {
				font-family: system-ui, sans-serif;
				background-color: var(--background-color);
				color: var(--text-color);
			}

			html,
			body {
				min-height: 100%;
				/* smooth scroll */
				scroll-behavior: smooth;
				font-family: system-ui;
			}

			code {
				font-family:
					Menlo,
					Monaco,
					Lucida Console,
					Liberation Mono,
					DejaVu Sans Mono,
					Bitstream Vera Sans Mono,
					Courier New,
					monospace;
			}

			nav {
				font-family: system-ui, sans-serif;
				font-weight: 500;
			}

			a {
				overflow-wrap: break-word;
				word-wrap: break-word;

				-ms-word-break: break-all;
				/* This is the dangerous one in WebKit, as it breaks things wherever */
				word-break: break-all;
				/* Instead use this non-standard one: */
				word-break: break-word;

				/* Adds a hyphen where the word breaks, if supported (No Blink) */
				-ms-hyphens: auto;
				-moz-hyphens: auto;
				-webkit-hyphens: auto;
				hyphens: auto;
			}

			nav ul a {
				text-decoration: none;
			}

			a.preview {
				text-decoration: none;
			}

			.toc-scrollbar {
				overflow-y: auto;
				max-height: 60vh;

				/* scroll bar */
				scrollbar-width: thin;
				scrollbar-color: #4a4a4a #2b2d31;
				scrollbar-gutter: 10px;
			}
			aside {
				/* scrollbar customize */
				scrollbar-width: thin;
				scrollbar-color: #31343d transparent;
				overflow-y: auto;
				padding-left: 0.5rem;
				padding-right: 0.5rem;

				border-radius: 0.375rem;
			}

			iframe {
				max-width: 100%;
				aspect-ratio: 16 / 9;
			}
		</style>
		<script>
			console.log(
				"%cATTENTION%c",
				"color: red; font-weight: bold; font-size:2rem; ",
				"color: inherit; font-size: 1.5rem"
			);

			console.log(
				"%cThank you for your attention",
				"font-size: 1.2rem; margin-top: 1rem;"
			);
			console.log(
				"%cContribute here: https://github.com/liyunze-coding/coworking-website",
				"font-size: 1.2rem; margin-top: 1rem;"
			);

			console.log(
				"%cDeveloped by RythonDev: https://rython.dev/",
				"font-size: 1.2rem; margin-top: 1rem;"
			);
		</script>
	</body>
</html>