Fix JavaScript not working after switching pages

package.json

@@ -11,24 +11,24 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^2.3.1",
+    "@astrojs/mdx": "^3.1.6",
     "@astrojs/partytown": "^2.1.2",
     "@astrojs/tailwind": "^5.1.1",
     "@iconify-json/ion": "^1.2.0",
     "@iconify-json/mdi": "^1.2.0",
     "@iconify-json/simple-icons": "^1.2.3",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/eslint-plugin": "^8.6.0",
+    "@typescript-eslint/parser": "^8.6.0",
     "accessible-astro-components": "^2.3.6",
     "astro": "^4.15.7",
     "astro-compress": "^2.3.1",
     "astro-icon": "^1.1.1",
-    "eslint": "^8.57.1",
-    "eslint-plugin-astro": "^0.23.0",
+    "eslint": "^9.10.0",
+    "eslint-plugin-astro": "^1.2.4",
     "eslint-plugin-jsx-a11y": "^6.10.0",
-    "prettier": "^2.8.8",
-    "prettier-plugin-astro": "^0.8.1",
-    "prettier-plugin-tailwindcss": "^0.2.8",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "sass": "^1.79.1",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.12"

src/components/ColorPicker.astro

@@ -5,8 +5,8 @@ interface Props {
 const { includeHashtag } = Astro.props
 import { Icon } from 'astro-icon/components'
 ---
-
-<section class="my-6">
+<color-picker>
+  <section class="my-6">
     <div class="">
       <p class="text-lg">Select a color below to get the hex code:</p>
       <div class="flex">
@@ -25,9 +25,13 @@ import { Icon } from 'astro-icon/components'
           <p id="color-label">{includeHashtag ? '#' : ''}000000</p>
       </div>
     </div>
-</section>
+  </section>
+</color-picker>
 
 <script>
+  // Define the behaviour for our new type of HTML element.
+  class ColorPicker extends HTMLElement {
+    connectedCallback() {
       // Get the 2 elements from above
       const colorLabel = document.getElementById("color-label");
       const colorSelect = document.getElementById("color-select");
@@ -46,7 +50,6 @@ import { Icon } from 'astro-icon/components'
       // Add event listener to copy the color to the clipboard
       if (colorLabel) copyButton?.addEventListener('click', () => copyString(colorLabel.innerText, copyButton));
 
-
       async function copyString(text: string, button: HTMLElement) {
         await navigator.clipboard.writeText(text);
 
@@ -67,5 +70,13 @@ import { Icon } from 'astro-icon/components'
           if (successIcon) successIcon.style.display = 'none';
         }, 1000);
       }
+    }
+  }
+
+  
+  // Tell the browser to use our ColorPicker class for <color-picker> elements.
+  customElements.define('color-picker', ColorPicker);
+
+  
 
 </script>

src/layouts/MarkdownLayout.astro

@@ -3,8 +3,22 @@ import DefaultLayout from './DefaultLayout.astro'
 
 const { frontmatter } = Astro.props
 ---
+
+<DefaultLayout title={frontmatter.title}>
+  <div class="container">
+    <div class="space-content my-12">
+      <slot />
+    </div>
+  </div>
+</DefaultLayout>
+
 <!-- Copy Code Buttons based on: https://timneubauer.dev/blog/copy-code-button-in-astro/ -->
 <script>
+  initCopyCodeButtons();
+  document.addEventListener('astro:after-swap', initCopyCodeButtons);
+
+  function initCopyCodeButtons() {
+    console.log("Initializing Copy Code Buttons...");
     let copyButtonLabel = "Copy Code";
     let codeBlocks = Array.from(document.querySelectorAll("pre"));
 
@@ -40,16 +54,9 @@ const { frontmatter } = Astro.props
         button.innerText = copyButtonLabel;
       }, 700);
     }
+  }
 </script>
 
-<DefaultLayout title={frontmatter.title}>
-  <div class="container">
-    <div class="space-content my-12">
-      <slot />
-    </div>
-  </div>
-</DefaultLayout>
-
 <style is:global>
   .copy-code {
     position: absolute;

src/pages/wiki/midnightlib.mdx

@@ -174,12 +174,3 @@ public ConfigScreenFactory<?> getModConfigScreenFactory() {
   return parent -> MidnightConfig.getScreen(parent, "modid");
 }`
 ```
-
-<script>
-        import Alpine from "alpinejs";
-        
-        document.addEventListener('alpine:init', () => {
-            //Alpine.data('versionSelection', () => ({
-            //}))
-        })
-</script>