fix: use correct id

README.md

@@ -9,8 +9,8 @@ After hand-written HTML and a static site generator comes Nuxt!
 Post-build instructions (while prerendering is bork)
 
  - Strip all <script /> tags in every HTML file
- - Compile `/script.ts` to `/script.js`
- - Remove `/api` and `/_nuxt`
+ - Compile `/script.ts` to `/script.js` (`tsc script.ts -m esnext -t esnext --moduleReslution node`)
+ - Remove `/api` and `/_nuxt/*.mjs`
 
 Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
 

components/ColourPicker.vue

@@ -27,7 +27,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <label for="toggle" :class="['toggle-wrapper']">
+  <label for="dark-toggle" :class="['toggle-wrapper']">
     <div :class="['toggle', isToggled ? 'enabled' : 'disabled']">
       <div class="icons">
         <IconMoon />
@@ -35,7 +35,7 @@ onMounted(() => {
       </div>
       <input
         id="dark-toggle"
-        name="toggle"
+        name="dark-toggle"
         type="checkbox"
         :checked="isToggled"
         ref="darkToggleEl"

composables/metadata.ts

@@ -17,5 +17,13 @@ export function useTitle(title: string, description?: string) {
         href: "https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css",
       },
     ],
+    script: [
+      {
+        defer: true,
+        src: "/script.js",
+        hid: "stupidEmergencyScript",
+        type: "module",
+      },
+    ],
   });
 }

nuxt.config.ts

@@ -43,6 +43,7 @@ export default defineNuxtConfig({
         defer: true,
         src: "/script.js",
         hid: "stupidEmergencyScript",
+        type: "module",
       },
     ],
   },

public/scripts.js

@@ -1,32 +0,0 @@
-"use strict";
-// the only damn js needed in this site instead
-// of all the nuxt bs while we wait for static generation
-// to actually become a thing in nuxt 3
-var _a;
-exports.__esModule = true;
-var html = document.getElementsByTagName("html")[0];
-html.className = (_a = localStorage.theme) !== null && _a !== void 0 ? _a : "light";
-// dark mode toggle
-function toggleDarkMode() {
-    var storageVars = ["dark-mode-toggle", "nuxt-color-mode", "theme"];
-    var currentTheme = html.className;
-    var newTheme = currentTheme === "light" ? "dark" : "light";
-    html.className = newTheme;
-    for (var _i = 0, storageVars_1 = storageVars; _i < storageVars_1.length; _i++) {
-        var v = storageVars_1[_i];
-        localStorage[v] = newTheme;
-    }
-}
-var darkToggle = document.getElementById("dark-toggle");
-darkToggle.checked = html.className === "dark";
-darkToggle.onclick = toggleDarkMode;
-// github commit fetcher
-// pulled from CommitStatBox.vue
-var FEED_URL = "https://api.github.com/users/potatoeggy/events";
-var results = (await (await fetch(FEED_URL)).json());
-var latestEvent = results.find(function (e) { return e.type === "PushEvent"; });
-var latestCommit = latestEvent.payload.commits[0];
-var commitImg = document.getElementById("github-commit-img");
-var commitAnchor = document.getElementById("github-commit-a");
-commitImg.src = "https://opengraph.githubassets.com/hash/".concat(latestEvent.repo.name, "/commit/").concat(latestCommit.sha);
-commitAnchor.href = "https://github.com/".concat(latestEvent.repo.name, "/commit/").concat(latestCommit.sha);

public/scripts.ts

@@ -1,47 +0,0 @@
-// the only damn js needed in this site instead
-// of all the nuxt bs while we wait for static generation
-// to actually become a thing in nuxt 3
-
-import type { GithubPushEvent } from "../shared/github";
-
-const html = document.getElementsByTagName("html")[0];
-html.className = localStorage.theme ?? "light";
-
-// dark mode toggle
-function toggleDarkMode() {
-  const storageVars = ["dark-mode-toggle", "nuxt-color-mode", "theme"];
-
-  const currentTheme = html.className;
-
-  const newTheme = currentTheme === "light" ? "dark" : "light";
-  html.className = newTheme;
-  for (const v of storageVars) {
-    localStorage[v] = newTheme;
-  }
-}
-
-const darkToggle = document.getElementById("dark-toggle") as HTMLInputElement;
-darkToggle.checked = html.className === "dark";
-darkToggle.onclick = toggleDarkMode;
-
-// github commit fetcher
-// pulled from CommitStatBox.vue
-const FEED_URL = "https://api.github.com/users/potatoeggy/events";
-const results = (await (await fetch(FEED_URL)).json()) as GithubPushEvent[];
-const latestEvent = results.find(
-  (e) => e.type === "PushEvent"
-) as GithubPushEvent;
-const latestCommit = latestEvent.payload.commits[0];
-
-const commitImg = document.getElementById(
-  "github-commit-img"
-) as HTMLImageElement;
-const commitAnchor = document.getElementById(
-  "github-commit-a"
-) as HTMLAnchorElement;
-
-commitImg.src = `https://opengraph.githubassets.com/hash/${latestEvent.repo.name}/commit/${latestCommit.sha}`;
-commitAnchor.href = `https://github.com/${latestEvent.repo.name}/commit/${latestCommit.sha}`;
-
-// to make this an esm module for top-level await
-export {};