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;
variant?: "text" | "icon";
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 =
"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 />
</a>
) : (
<button class={classes} title={title}>
<button {id} class={classes} title={title}>
<slot />
</button>
)

4
src/components/Nav.astro
View File

@@ -24,7 +24,7 @@ const routes = ["blog", "tracks"];
</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="sun" class="hidden dark:block" />
</Button>
@@ -37,7 +37,7 @@ const routes = ["blog", "tracks"];
<script>
const setToggleListener = () => {
const toggleBtn = document.querySelector(".theme-toggle");
const toggleBtn = document.querySelector("#theme-toggle");
toggleBtn?.addEventListener("click", () => {
const element = document.documentElement;

3
src/components/TableOfContents.astro
View File

@@ -10,7 +10,8 @@ const { headings } = Astro.props;
---
<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
title="Table of contents"

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

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