Use unique id instead of class for theme toggle and toc

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>
   )

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;

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"

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");
       });
     }
   };