use new assignLastCommitToElement

src/generateLastCommitText.ts

@@ -1,7 +1,3 @@
-const versionSpan = document.getElementById("last-updated") as HTMLSpanElement;
-
-
-
 type GithubCommit = {
 	commit: {
 		author: {
@@ -13,42 +9,33 @@ type GithubCommit = {
 
 
 
-type SimplifiedCommit = {
-	date: string;
-	sha: string;
-}
-
-
-
-async function fetchLastCommit(repository: string): Promise<string | SimplifiedCommit> {
+async function fetchLastCommit(repository: string): Promise<GithubCommit | null> {
 	return await fetch(`https://api.github.com/repos/${repository}/commits?per_page=1`)
-		.then(res => res.json())
-		.then((res: GithubCommit[]) => {
-			return {
-				date: res[0].commit.author.date,
-				sha: res[0].sha
-			}
-		})
-		.catch(err => {
-			return "Unable to load version";
-		});
+		.then(res => res.ok ? res.json() : null) // if res is not ok, return null;
+		.then((res: GithubCommit[]) => res[0]) // then this will error trying to perform null[0]
+		.catch(() => null); // and be caught here
 }
 
 
 
-export default async function generateLastCommitText(repository: string) {
+async function generateLastCommitText(repository: string) {
 	const lastCommit = await fetchLastCommit(repository);
 
-	// i really hate how i had to write this it feels so clunky surely there's a better way
-	if(typeof lastCommit === "string") {
-		versionSpan.textContent = "Unable to load version";
-		return;
+	if(lastCommit === null) {
+		return "Unable to load version";
 	}
 
 
-	const date = new Date(lastCommit.date).toLocaleDateString("en-US", {dateStyle: "short"});
-	const commit = lastCommit.sha.slice(0, 7);
+	const commitDate = lastCommit.commit.author.date;
+	const formattedDate = new Date(commitDate).toLocaleDateString("en-US", {dateStyle: "short"});
+
+	const formattedHash = lastCommit.sha.slice(0, 7);
+
+	return `Last updated ${formattedDate} (commit ${formattedHash})`;
+}
+
+
 
-	// i also hate this directly accessing the element jhghjgdfhjkdfg
-	versionSpan.textContent = `Last updated ${date} (commit ${commit})`;
+export default async function assignLastCommitToElement(element: HTMLElement, repository: string) {
+	element.textContent = await generateLastCommitText(repository);
 }

src/main.ts

@@ -1,15 +1,18 @@
 import FigletDoomFont from "./FigletDoomFont.js";
+import assignLastCommitToElement from "./generateLastCommitText.js";
 import generateLastCommitText from "./generateLastCommitText.js";
 
 
 
-
 // TODO: might need to completely restructure this code
 const inputBox = document.getElementById("wiring-closet-input") as HTMLInputElement;
 inputBox.addEventListener("keyup", generateBanner);
 
 const outputBox = document.getElementById("output") as HTMLTextAreaElement;
 
+const lastUpdated = document.getElementById("last-updated") as HTMLSpanElement;
+assignLastCommitToElement(lastUpdated, "jessamine-dto/switch-banner-creator");
+
 
 const figlet = new FigletDoomFont();
 await figlet.load("./assets/Doom.flf");
@@ -103,11 +106,4 @@ function centerArray(lines: string[], length: number): string[] {
 
 
 
-
-// iife for page load (script tag has defer, this won't load until after the page is loaded)
-(async () => {
-	generateExtremeBanner();
-	// initializeButtons();
-
-	await generateLastCommitText("jessamine-dto/switch-banner-creator");
-})();
+generateExtremeBanner();

styles/tool-info.css

@@ -5,11 +5,12 @@ body {
 
 
 /* the point of this wrapper is essentially that
-	whenever a user hovers over the info icon, they shouldn't hover the info icon...
-	...and then when it fully expands it automatically closes because they're not hovering it anymore
-	instead, this can be circumvented (and i think it's generally nicer ux)
-	to have a wrapper around the tool's expanded position so that hovering anywhere in it will cause it to expand
-	padding on the bottom was originally so the box shadow didn't get cropped
+	a user hovers over the info icon, but when the tool expands they're not hovering it anymore (because of the margin)
+	thus the tool closes, intersecting the cursor, causing it to expand, causing it to not be hovered; ping-ponging
+	instead, this can be circumvented (and i think it's generally nicer ux) by having a wrapper
+	that goes around the tool's expanded position, so that hovering anywhere in it will cause it to expand
+
+	the padding on the bottom was originally so the box shadow didn't get cropped
 	but might as well add it to the top and call it a feature
 */
 #tool-wrapper {