diff --git a/public/script.js b/public/script.js new file mode 100644 index 0000000..7bce2a1 --- /dev/null +++ b/public/script.js @@ -0,0 +1,29 @@ +// 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 +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"); +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()); +const latestEvent = results.find((e) => e.type === "PushEvent"); +const latestCommit = latestEvent.payload.commits[0]; +const commitImg = document.getElementById("github-commit-img"); +const commitAnchor = document.getElementById("github-commit-a"); +commitImg.src = `https://opengraph.githubassets.com/hash/${latestEvent.repo.name}/commit/${latestCommit.sha}`; +commitAnchor.href = `https://github.com/${latestEvent.repo.name}/commit/${latestCommit.sha}`; +export {}; diff --git a/public/script.ts b/public/script.ts new file mode 100644 index 0000000..100100c --- /dev/null +++ b/public/script.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 {};