From df5085c41d9f91071d4570191c5106664c462785 Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Fri, 12 Aug 2022 21:04:50 -0400
Subject: [PATCH] fix: use correct id
---
README.md | 4 ++--
components/ColourPicker.vue | 4 ++--
composables/metadata.ts | 8 +++++++
nuxt.config.ts | 1 +
public/scripts.js | 32 -------------------------
public/scripts.ts | 47 -------------------------------------
6 files changed, 13 insertions(+), 83 deletions(-)
delete mode 100644 public/scripts.js
delete mode 100644 public/scripts.ts
diff --git a/README.md b/README.md
index 92c2077..e9463a6 100644
--- a/README.md
+++ b/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.
diff --git a/components/ColourPicker.vue b/components/ColourPicker.vue
index 3bfa1cb..3f6e028 100644
--- a/components/ColourPicker.vue
+++ b/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"
diff --git a/composables/metadata.ts b/composables/metadata.ts
index 0a5132c..d93edbd 100644
--- a/composables/metadata.ts
+++ b/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",
+ },
+ ],
});
}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1e9f003..5432cd0 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -43,6 +43,7 @@ export default defineNuxtConfig({
defer: true,
src: "/script.js",
hid: "stupidEmergencyScript",
+ type: "module",
},
],
},
diff --git a/public/scripts.js b/public/scripts.js
deleted file mode 100644
index 1314f61..0000000
--- a/public/scripts.js
+++ /dev/null
@@ -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);
diff --git a/public/scripts.ts b/public/scripts.ts
deleted file mode 100644
index 100100c..0000000
--- a/public/scripts.ts
+++ /dev/null
@@ -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 {};