mirror of
https://github.com/thiloho/thiloho.github.io.git
synced 2026-01-11 21:04:48 +01:00
50 lines
1.9 KiB
Plaintext
50 lines
1.9 KiB
Plaintext
---
|
|
import Head from "../components/Head.astro";
|
|
import Nav from "../components/Nav.astro";
|
|
import Header from "../components/Header.astro";
|
|
import Footer from "../components/Footer.astro";
|
|
|
|
interface Props {
|
|
title: string;
|
|
description: string;
|
|
pubDate?: Date;
|
|
modDate?: Date;
|
|
slug?: string;
|
|
}
|
|
|
|
const { title, description, pubDate, modDate, slug } = Astro.props;
|
|
---
|
|
|
|
<html lang="en" class="scroll-smooth" transition:animate="none">
|
|
<Head {title} {description} />
|
|
<body class="flex min-h-screen flex-col">
|
|
<Nav />
|
|
<Header {title} {pubDate} {modDate} {slug} />
|
|
<main class="flex-1 bg-white dark:bg-neutral-800">
|
|
<div
|
|
class={`relative prose prose-neutral dark:prose-invert mx-auto px-4 ${pubDate ? "pt-0" : "pt-8"} pb-16 ${Astro.originPathname === "/" ? "prose-headings:scroll-mt-12" : "prose-headings:scroll-mt-24 lg:prose-headings:scroll-mt-16"} prose-table:text-base prose-h1:font-bold prose-pre:!bg-neutral-700 prose-a:font-normal prose-table:m-0 prose-a:not-in-prose-headings:text-blue-800 prose-a:not-in-prose-headings:dark:text-blue-300 prose-a:hover:no-underline prose-a:active:bg-neutral-200 prose-a:active:dark:bg-neutral-700 prose-a:in-prose-headings:font-bold prose-a:in-prose-headings:decoration-2 prose-a:in-prose-headings:no-underline prose-a:in-prose-headings:hover:underline`}
|
|
>
|
|
<slot />
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</body>
|
|
</html>
|
|
|
|
<script>
|
|
const setToggleListener = () => {
|
|
const toggleBtn = document.querySelector("#theme-toggle");
|
|
|
|
toggleBtn?.addEventListener("click", () => {
|
|
const element = document.documentElement;
|
|
element.classList.toggle("dark");
|
|
|
|
const isDark = element.classList.contains("dark");
|
|
localStorage.setItem("theme", isDark ? "dark" : "light");
|
|
});
|
|
};
|
|
|
|
setToggleListener();
|
|
document.addEventListener("astro:after-swap", setToggleListener);
|
|
</script>
|