thohlt/thiloho.github.io
1
0
Fork 0
mirror of https://github.com/thiloho/thiloho.github.io.git synced 2025-11-22 02:11:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use unique id instead of class for theme toggle and toc

Browse Source
This commit is contained in:
thiloho
2025-04-29 07:54:48 +02:00
parent 0d9d84ab68
commit 78d5e6e7ae
4 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Button.astro
View File

@@ -3,14 +3,14 @@ interface Props {
href?: string; href?: string;
variant?: "text" | "icon"; variant?: "text" | "icon";
title?: string; title?: string;
class?: string; id?: string;
} }
const { href, variant = "text", title, class: className = "" } = Astro.props; const { href, variant = "text", title, id } = Astro.props;
const baseClasses = const baseClasses =
"border-transparent border-b-2 p-2 cursor-pointer hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700 active:bg-neutral-200 active:dark:bg-neutral-700 active:border-neutral-300 active:dark:border-neutral-600"; "border-transparent border-b-2 p-2 cursor-pointer hover:border-neutral-300 hover:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700 active:bg-neutral-200 active:dark:bg-neutral-700 active:border-neutral-300 active:dark:border-neutral-600";
const classes = `${baseClasses} ${variant === "icon" && href ? "inline-grid place-content-center" : "inline-block"} ${className}`; const classes = `${baseClasses} ${variant === "icon" && href ? "inline-grid place-content-center" : "inline-block"}`;
--- ---
{ {
@@ -19,7 +19,7 @@ const classes = `${baseClasses} ${variant === "icon" && href ? "inline-grid plac
<slot /> <slot />
</a> </a>
) : ( ) : (
<button class={classes} title={title}> <button {id} class={classes} title={title}>
<slot /> <slot />
</button> </button>
) )

4
src/components/Nav.astro
View File

@@ -24,7 +24,7 @@ const routes = ["blog", "tracks"];
</Button> </Button>
)) ))
} }
<Button variant="icon" title="Toggle dark mode" class="theme-toggle"> <Button id="theme-toggle" variant="icon" title="Toggle dark mode">
<Icon name="moon" class="dark:hidden" /> <Icon name="moon" class="dark:hidden" />
<Icon name="sun" class="hidden dark:block" /> <Icon name="sun" class="hidden dark:block" />
</Button> </Button>
@@ -37,7 +37,7 @@ const routes = ["blog", "tracks"];
<script> <script>
const setToggleListener = () => { const setToggleListener = () => {
const toggleBtn = document.querySelector(".theme-toggle"); const toggleBtn = document.querySelector("#theme-toggle");
toggleBtn?.addEventListener("click", () => { toggleBtn?.addEventListener("click", () => {
const element = document.documentElement; const element = document.documentElement;

3
src/components/TableOfContents.astro
View File

@@ -10,7 +10,8 @@ const { headings } = Astro.props;
--- ---
<details <details
class="toc sticky top-10 z-10 -translate-y-px border border-neutral-300 bg-white lg:top-2 dark:border-neutral-600 dark:bg-neutral-800" id="toc"
class="sticky top-10 z-10 -translate-y-px border border-neutral-300 bg-white lg:top-2 dark:border-neutral-600 dark:bg-neutral-800"
> >
<summary <summary
title="Table of contents" title="Table of contents"

4
src/pages/blog/[slug].astro
View File

@@ -30,11 +30,11 @@ const { Content, headings } = await render(article);
<script> <script>
const setAnchorListener = () => { const setAnchorListener = () => {
const tocLinks = document.querySelectorAll(".toc a"); const tocLinks = document.querySelectorAll("#toc a");
for (const link of tocLinks) { for (const link of tocLinks) {
link.addEventListener("click", () => { link.addEventListener("click", () => {
document.querySelector(".toc")?.removeAttribute("open"); document.querySelector("#toc")?.removeAttribute("open");
}); });
} }
}; };