feat: add manual js

i cannot believe this

README.md

@@ -6,6 +6,12 @@ After hand-written HTML and a static site generator comes Nuxt!
 
 **WARN: Nuxt 3 is too new that prerendering actually renders a ton of JS and causes blinking — remove all `Prose*.mjs` to stop it**
 
+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`
+
 Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
 
 ## Setup

components/ColourPicker.vue

@@ -34,7 +34,7 @@ onMounted(() => {
         <IconSun />
       </div>
       <input
-        id="toggle"
+        id="dark-toggle"
         name="toggle"
         type="checkbox"
         :checked="isToggled"

components/CommitStatBox.vue

@@ -7,8 +7,7 @@ const imgUrl = ref("");
 const href = ref("");
 
 onMounted(async () => {
-  const results = (await useFetch(FEED_URL, { initialCache: false }))
+  const results = (await useFetch(FEED_URL)).data as Ref<GithubPushEvent[]>;
-    .data as Ref<GithubPushEvent[]>;
   const latestEvent = results.value.find(
     (event) => event.type === "PushEvent"
   ) as GithubPushEvent;
@@ -22,12 +21,13 @@ onMounted(async () => {
   <div class="prose dark:prose-invert">
     <HomeStatBox
       :href="href"
+      id="github-commit-a"
       color="lightgray"
       darkcolor="slategray"
       title="Latest commit"
       :clearstyles="true"
     >
-      <img class="m-0 w-full h-full" :src="imgUrl" />
+      <img class="m-0 w-full h-full" :src="imgUrl" id="github-commit-img" />
       <!--
         <div>
         <h2>{{ title }}</h2>

components/HomeStatBox.vue

@@ -7,6 +7,7 @@ import { unref as _unref } from "vue";
 
 const {
   href,
+  id,
   color = "pink",
   darkcolor = "#c88994",
   title,
@@ -14,6 +15,7 @@ const {
   forceheight,
 } = defineProps<{
   href?: string;
+  id?: string;
   color?: Color;
   darkcolor?: Color;
   title?: string;
@@ -36,7 +38,11 @@ const cssVars = {
 </script>
 
 <template>
-  <a class="no-underline inline-block flex flex-col items-stretch" :href="href">
+  <a
+    class="no-underline inline-block flex flex-col items-stretch"
+    :href="href"
+    :id="id"
+  >
     <div class="container box" :style="cssVars">
       <p class="m-0 w-full title">{{ title }}</p>
       <div class="main-content">

nuxt.config.ts

@@ -82,7 +82,4 @@ export default defineNuxtConfig({
   experimental: {
     reactivityTransform: true,
   },
-  hooks: {},
-  target: "static",
-  ssr: true,
 });

public/scripts.js

@@ -0,0 +1,32 @@
+"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

@@ -0,0 +1,47 @@
+// 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 {};