From 78d5e6e7aed2b79dc54f3509b3fd6be7a128dfd7 Mon Sep 17 00:00:00 2001
From: thiloho <123883702+thiloho@users.noreply.github.com>
Date: Tue, 29 Apr 2025 07:54:48 +0200
Subject: [PATCH] Use unique id instead of class for theme toggle and toc

---
 src/components/Button.astro          | 8 ++++----
 src/components/Nav.astro             | 4 ++--
 src/components/TableOfContents.astro | 3 ++-
 src/pages/blog/[slug].astro          | 4 ++--
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/Button.astro b/src/components/Button.astro
index 68dc9e5..337bdf7 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -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>
   )
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 84c0f59..c42c1f1 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -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;
diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
index d4b293b..2acc694 100644
--- a/src/components/TableOfContents.astro
+++ b/src/components/TableOfContents.astro
@@ -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"
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index 18c5757..86f24c3 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -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");
       });
     }
   };