Modernize and fix website build tooling deps and utilize JS type checking (#3348)

* Modernize and fix website build tooling deps and utilize JS type checking * Upgrade to the latest Node.js
2026-09-19 10:58:04 +08:00 · 2025-11-06 16:30:35 -08:00
parent 96d73a8570
commit 6b315c3b68
18 changed files with 2036 additions and 981 deletions
--- a/website/static/js/book.js
+++ b/website/static/js/book.js
@@ -18,7 +18,7 @@ function trackScrollHeadingInTOC() {

 		// If the next heading isn't fully visible, use the previous heading
 		if (heading && heading.getBoundingClientRect().bottom > window.innerHeight) {
-			prevHeading = firstVisible;
+			let prevHeading = firstVisible;
 			while (prevHeading && !prevHeading.tagName.match(/^H[1-6]$/)) {
 				if (!prevHeading.previousElementSibling) break;
 				prevHeading = prevHeading.previousElementSibling;
@@ -34,7 +34,7 @@ function trackScrollHeadingInTOC() {
 		}

 		// If there is no heading, use the first heading
-		if (!heading) heading = document.querySelector("article > h1");
+		if (!heading) heading = document.querySelector("article > h1") || undefined;

 		// Remove the existing active heading
 		const existingActive = document.querySelector("aside.contents li.active");
@@ -69,7 +69,7 @@ function listenForClickToOpenOrCloseTOC() {
 	// Close the chapter selection if the user clicks outside of it
 	document.querySelector("main")?.addEventListener("click", (e) => {
 		const chapters = document.querySelector("[data-chapters]");
-		if (chapters?.classList.contains("open") && !e.target.closest("[data-chapters]")) {
+		if (chapters?.classList.contains("open") && e.target instanceof HTMLElement && !e.target.closest("[data-chapters]")) {
 			chapters.classList.remove("open");
 		}
 	});
--- a/website/static/js/carousel.js
+++ b/website/static/js/carousel.js
@@ -6,7 +6,22 @@ window.addEventListener("pointerup", () => dragEnd(false));
 window.addEventListener("scroll", () => dragEnd(true));
 window.addEventListener("pointermove", dragMove);

-const carousels = [];
+/**
+ * @typedef {{
+ *   carouselContainer: Element,
+ *   images: NodeListOf<Element>,
+ *   directionPrev: Element | null,
+ *   directionNext: Element | null,
+ *   dots: NodeListOf<Element>,
+ *   descriptions: NodeListOf<Element>,
+ *   dragLastClientX: number | undefined,
+ *   velocityDeltaWindow: Array<{ time: number, delta: number }>,
+ *   jostleNoLongerNeeded: boolean,
+ *   requestAnimationFrameActive: boolean
+ * }} Carousel
+ */
+
+const /** @type {Carousel[]} */ carousels = [];

 function initializeCarousel() {
 	const carouselContainers = document.querySelectorAll("[data-carousel]");
@@ -16,9 +31,11 @@ function initializeCarousel() {
 		const tornLeft = carouselContainer.querySelector("[data-carousel-slide-torn-left]");
 		const tornRight = carouselContainer.querySelector("[data-carousel-slide-torn-right]");
 		[tornLeft, tornRight].forEach((insertInsideElement) => {
+			if (!(insertInsideElement instanceof HTMLElement)) return;
 			slideImages.forEach((image) => {
 				const clonedImage = image.cloneNode(true);
-				if (clonedImage instanceof HTMLImageElement) clonedImage.alt = "";
+				if (!(clonedImage instanceof HTMLImageElement)) return;
+				clonedImage.alt = "";
 				insertInsideElement.insertAdjacentElement("beforeend", clonedImage);
 			});
 		});
@@ -48,60 +65,69 @@ function initializeCarousel() {
 		carousels.push(carousel);

 		images.forEach((image) => {
+			if (!(image instanceof HTMLElement)) return;
 			image.addEventListener("pointerdown", dragBegin);
 		});
-		directionPrev.addEventListener("click", () => slideDirection(carousel, "prev", true, false));
-		directionNext.addEventListener("click", () => slideDirection(carousel, "next", true, false));
+		directionPrev?.addEventListener("click", () => slideDirection(carousel, "prev", true, false));
+		directionNext?.addEventListener("click", () => slideDirection(carousel, "next", true, false));
 		Array.from(dots).forEach((dot) =>
 			dot.addEventListener("click", (event) => {
-				const index = Array.from(dots).indexOf(event.target);
+				const index = event.target instanceof Element ? Array.from(dots).indexOf(event.target) : -1;
 				slideTo(carousel, index, true);
-			})
+			}),
 		);

 		// Jostle hint is a feature to briefly shift the carousel by a bit as a hint to users that it can be interacted with
 		if (performJostleHint) {
 			window.addEventListener("load", () => {
-				new IntersectionObserver((entries) => {
-					entries.forEach((entry) => {
-						if (entry.intersectionRatio === 1 && currentTransform(carousel) === 0 && !carousel.jostleNoLongerNeeded) {
-							const JOSTLE_TIME = 1000;
-							const MAX_JOSTLE_DISTANCE = -10;
+				if (!(directionPrev instanceof HTMLElement)) return;
+				new IntersectionObserver(
+					(entries) => {
+						entries.forEach((entry) => {
+							if (entry.intersectionRatio === 1 && currentTransform(carousel) === 0 && !carousel.jostleNoLongerNeeded) {
+								const JOSTLE_TIME = 1000;
+								const MAX_JOSTLE_DISTANCE = -10;

-							let startTime;
-							const buildUp = (timeStep) => {
-								if (carousel.jostleNoLongerNeeded) {
-									carousel.carouselContainer.classList.remove("jostling");
-									return;
-								}
+								let /** @type {number} */ startTime;
+								const buildUp = (/** @type {number} */ timeStep) => {
+									if (carousel.jostleNoLongerNeeded) {
+										carousel.carouselContainer.classList.remove("jostling");
+										return;
+									}

-								if (!startTime) startTime = timeStep;
-								const elapsedTime = timeStep - startTime;
+									if (!startTime) startTime = timeStep;
+									const elapsedTime = timeStep - startTime;

-								const easeOutCirc = (x) => Math.sqrt(1 - Math.pow(x - 1, 2));
-								const movementFactor = easeOutCirc(Math.min(1, elapsedTime / JOSTLE_TIME));
+									const easeOutCirc = (/** @type {number} */ x) => Math.sqrt(1 - Math.pow(x - 1, 2));
+									const movementFactor = easeOutCirc(Math.min(1, elapsedTime / JOSTLE_TIME));

-								setCurrentTransform(carousel, movementFactor * MAX_JOSTLE_DISTANCE, "%", false, true);
+									setCurrentTransform(carousel, movementFactor * MAX_JOSTLE_DISTANCE, "%", false, true);

-								if (elapsedTime < JOSTLE_TIME) {
-									requestAnimationFrame(buildUp);
-								} else {
-									carousel.carouselContainer.classList.remove("jostling");
-									carousel.jostleNoLongerNeeded = true;
-									slideTo(carousel, 0, true);
-								}
-							};
-							carousel.carouselContainer.classList.add("jostling")
-							requestAnimationFrame(buildUp);
-						};
-					});
-				}, { threshold: 1 })
-					.observe(directionPrev);
+									if (elapsedTime < JOSTLE_TIME) {
+										requestAnimationFrame(buildUp);
+									} else {
+										carousel.carouselContainer.classList.remove("jostling");
+										carousel.jostleNoLongerNeeded = true;
+										slideTo(carousel, 0, true);
+									}
+								};
+								carousel.carouselContainer.classList.add("jostling");
+								requestAnimationFrame(buildUp);
+							}
+						});
+					},
+					{ threshold: 1 },
+				).observe(directionPrev);
 			});
 		}
 	});
 }

+/**
+ * @param {Carousel} carousel
+ * @param {"prev" | "next"} direction
+ * @param {boolean} smooth
+ */
 function slideDirection(carousel, direction, smooth, clamped = false) {
 	const directionIndexOffset = { prev: -1, next: 1 }[direction];
 	const offsetDotIndex = currentClosestImageIndex(carousel) + directionIndexOffset;
@@ -113,9 +139,14 @@ function slideDirection(carousel, direction, smooth, clamped = false) {
 	else slideTo(carousel, nextDotIndex, smooth);
 }

+/**
+ * @param {Carousel} carousel
+ * @param {number} index
+ * @param {boolean} smooth
+ */
 function slideTo(carousel, index, smooth) {
 	const activeDot = carousel.carouselContainer.querySelector("[data-carousel-dot].active");
-	activeDot.classList.remove("active");
+	activeDot?.classList.remove("active");
 	carousel.dots[index].classList.add("active");

 	const activeDescription = carousel.carouselContainer.querySelector("[data-carousel-description].active");
@@ -137,6 +168,9 @@ function slideTo(carousel, index, smooth) {
 	setCurrentTransform(carousel, index * -100, "%", smooth);
 }

+/**
+ * @param {Carousel} carousel
+ */
 function currentTransform(carousel) {
 	const currentTransformMatrix = window.getComputedStyle(carousel.images[1]).transform;
 	// Grab the X value from the format that looks like either of: `matrix(1, 0, 0, 1, -1332.13, 0)` or `none`
@@ -145,6 +179,13 @@ function currentTransform(carousel) {
 	return xValue + carousel.images[1].getBoundingClientRect().width;
 }

+/**
+ * @param {Carousel} carousel
+ * @param {number} x
+ * @param {string} unit
+ * @param {boolean} smooth
+ * @param {boolean} doNotTerminateJostle
+ */
 function setCurrentTransform(carousel, x, unit, smooth, doNotTerminateJostle = false) {
 	const xInitial = currentTransform(carousel);
 	let xValue = x;
@@ -152,6 +193,7 @@ function setCurrentTransform(carousel, x, unit, smooth, doNotTerminateJostle = f
 	if (unit === "px") xValue = x - carousel.images[1].getBoundingClientRect().width;

 	Array.from(carousel.images).forEach((image) => {
+		if (!(image instanceof HTMLElement)) return;
 		image.style.transitionTimingFunction = smooth ? "ease-in-out" : "cubic-bezier(0, 0, 0.2, 1)";
 		image.style.transform = `translateX(${xValue}${unit})`;
 	});
@@ -159,33 +201,39 @@ function setCurrentTransform(carousel, x, unit, smooth, doNotTerminateJostle = f
 	// If the user caused the carousel to move, we can assume they know how to use it and don't need the jostle hint anymore
 	if (!doNotTerminateJostle && x - xInitial < 0.0001) carousel.jostleNoLongerNeeded = true;

-	const distance = unit === "%" ? x : x / carousel.images[1].getBoundingClientRect().width * 100;
+	const distance = unit === "%" ? x : (x / carousel.images[1].getBoundingClientRect().width) * 100;
 	const overSlidingLeft = distance > 0;
 	const overSlidingRight = distance < (carousel.dots.length - 1) * -100;

 	if ((overSlidingLeft || overSlidingRight) && !carousel.requestAnimationFrameActive) updateOverSlide(carousel);
 }

+/**
+ * @param {Carousel} carousel
+ */
 function updateOverSlide(carousel) {
 	const paddingLeft = parseInt(getComputedStyle(carousel.images[1]).paddingLeft);
 	const paddingRight = parseInt(getComputedStyle(carousel.images[carousel.images.length - 2]).paddingRight);
-	const slidLeftDistance = carousel.images[1].getBoundingClientRect().left + paddingLeft - carousel.images[1].parentElement.getBoundingClientRect().left;
-	const slidRightDistance = -(carousel.images[carousel.images.length - 2].getBoundingClientRect().right - paddingRight - carousel.images[1].parentElement.getBoundingClientRect().right);
+	const slidLeftDistance = carousel.images[1].getBoundingClientRect().left + paddingLeft - (carousel.images[1].parentElement?.getBoundingClientRect().left || 0);
+	const slidRightDistance = -(carousel.images[carousel.images.length - 2].getBoundingClientRect().right - paddingRight - (carousel.images[1].parentElement?.getBoundingClientRect().right || 0));
 	const imageWidth = carousel.images[1].getBoundingClientRect().width;
-	const overSlideFactor = Math.min(1, Math.max(0, (Math.max(slidLeftDistance, slidRightDistance) / imageWidth)));
+	const overSlideFactor = Math.min(1, Math.max(0, Math.max(slidLeftDistance, slidRightDistance) / imageWidth));

-	const images = carousel.images[0].closest("[data-carousel]").querySelectorAll("[data-carousel-image]:first-child, [data-carousel-image]:last-child");
+	const images = carousel.images[0].closest("[data-carousel]")?.querySelectorAll("[data-carousel-image]:first-child, [data-carousel-image]:last-child");
+	if (!images) return;

 	// Call again the next frame if we're still sliding past the edge
 	if (overSlideFactor > 0) {
 		images.forEach((image) => {
-			image.style.setProperty("--over-slide-factor", overSlideFactor);
+			if (!(image instanceof HTMLElement)) return;
+			image.style.setProperty("--over-slide-factor", `${overSlideFactor}`);
 		});

 		carousel.requestAnimationFrameActive = true;
 		requestAnimationFrame(() => updateOverSlide(carousel));
 	} else {
 		images.forEach((image) => {
+			if (!(image instanceof HTMLElement)) return;
 			image.style.removeProperty("--over-slide-factor");
 		});

@@ -193,6 +241,9 @@ function updateOverSlide(carousel) {
 	}
 }

+/**
+ * @param {Carousel} carousel
+ */
 function currentClosestImageIndex(carousel) {
 	const currentTransformX = -currentTransform(carousel);

@@ -200,12 +251,19 @@ function currentClosestImageIndex(carousel) {
 	return Math.round(currentTransformX / imageWidth);
 }

+/**
+ * @param {Carousel} carousel
+ */
 function currentActiveDotIndex(carousel) {
 	const activeDot = carousel.carouselContainer.querySelector("[data-carousel-dot].active");
-	return Array.from(carousel.dots).indexOf(activeDot);
+	return activeDot ? Array.from(carousel.dots).indexOf(activeDot) : -1;
 }

+/**
+ * @param {PointerEvent} event
+ */
 function dragBegin(event) {
+	if (!(event.target instanceof HTMLElement)) return;
 	const carouselContainer = event.target.closest("[data-carousel]");
 	const carousel = carousels.find((carousel) => carousel.carouselContainer === carouselContainer);
 	if (!carousel) return;
@@ -215,9 +273,12 @@ function dragBegin(event) {
 	carousel.dragLastClientX = event.clientX;

 	setCurrentTransform(carousel, currentTransform(carousel), "px", false);
-	carouselContainer.classList.add("dragging");
+	carouselContainer?.classList.add("dragging");
 }

+/**
+ * @param {boolean} dropWithoutVelocity
+ */
 function dragEnd(dropWithoutVelocity) {
 	const carousel = carousels.find((carousel) => carousel.dragLastClientX !== undefined);
 	if (!carousel) return;
@@ -254,7 +315,6 @@ function dragEnd(dropWithoutVelocity) {
 		// Negative velocity should go to the next image
 		else {
 			// Don't apply the velocity-based fling if we're already snapping to the next image
-			// eslint-disable-next-line no-lonely-if
 			if (closestImageIndex <= activeDotIndex) {
 				slideDirection(carousel, "next", false, true);
 				return;
@@ -267,7 +327,12 @@ function dragEnd(dropWithoutVelocity) {
 	slideTo(carousel, clamp(closestImageIndex, 0, carousel.dots.length - 1), true);
 }

+/**
+ * @param {PointerEvent} event
+ */
 function dragMove(event) {
+	if (!(event.target instanceof HTMLElement)) return;
+
 	const carouselContainer = event.target.closest("[data-carousel]");
 	const carousel = carousels.find((carousel) => carousel.carouselContainer === carouselContainer);
 	if (!carousel) return;
@@ -292,6 +357,11 @@ function dragMove(event) {
 	carousel.dragLastClientX = event.clientX;
 }

+/**
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ */
 function clamp(value, min, max) {
 	const m = Math; // This is a workaround for a bug in Zola's minifier
 	return m.min(m.max(value, min), max);
--- a/website/static/js/developer-guide-editor-structure.js
+++ b/website/static/js/developer-guide-editor-structure.js
@@ -2,9 +2,9 @@ document.addEventListener("DOMContentLoaded", () => {
 	document.querySelectorAll(".tree-node").forEach((toggle) => {
 		toggle.addEventListener("click", (event) => {
 			// Prevent link click from also toggling parent
-			if (event.target.tagName === "A") return;
-			
-			const nestedList = toggle.parentElement.querySelector(".nested");
+			if (event.target instanceof HTMLElement && event.target.tagName === "A") return;
+
+			const nestedList = toggle.parentElement?.querySelector(".nested");
 			if (nestedList) {
 				toggle.classList.toggle("expanded");
 				nestedList.classList.toggle("active");
@@ -13,5 +13,6 @@ document.addEventListener("DOMContentLoaded", () => {
 	});

 	// Expand the first level by default
-	document.querySelector(".structure-outline > ul > li > .tree-node")?.click();
+	const firstLevel = document.querySelector(".structure-outline > ul > li > .tree-node");
+	if (firstLevel instanceof HTMLElement) firstLevel.click();
 });
--- a/website/static/js/fundraising.js
+++ b/website/static/js/fundraising.js
@@ -6,9 +6,10 @@ function initializeFundraisingBar() {
 	let loaded = false;

 	const fundraising = document.querySelector("[data-fundraising]");
+	if (!fundraising) return;
 	const bar = fundraising.querySelector("[data-fundraising-bar]");
-	const dynamicPercent = fundraising.querySelector("[data-fundraising-percent] [data-dynamic]")
-	const dynamicGoal = fundraising.querySelector("[data-fundraising-goal] [data-dynamic]")
+	const dynamicPercent = fundraising.querySelector("[data-fundraising-percent] [data-dynamic]");
+	const dynamicGoal = fundraising.querySelector("[data-fundraising-goal] [data-dynamic]");
 	if (!(fundraising instanceof HTMLElement && bar instanceof HTMLElement && dynamicPercent instanceof HTMLElement && dynamicGoal instanceof HTMLElement)) return;

 	const setFundraisingGoal = async () => {
@@ -18,15 +19,17 @@ function initializeFundraisingBar() {

 		fundraising.classList.remove("loading");
 		bar.style.setProperty("--fundraising-percent", `${data.percentComplete}%`);
-		dynamicPercent.textContent = data.percentComplete;
-		dynamicGoal.textContent = data.targetValue;
+		dynamicPercent.textContent = `${data.percentComplete}`;
+		dynamicGoal.textContent = `${data.targetValue}`;

 		loaded = true;
 	};
-	new IntersectionObserver((entries) => {
-		entries.forEach((entry) => {
-			if (!loaded && entry.intersectionRatio > VISIBILITY_COVERAGE_FRACTION) setFundraisingGoal();
-		});
-	}, { threshold: VISIBILITY_COVERAGE_FRACTION })
-		.observe(fundraising);
+	new IntersectionObserver(
+		(entries) => {
+			entries.forEach((entry) => {
+				if (!loaded && entry.intersectionRatio > VISIBILITY_COVERAGE_FRACTION) setFundraisingGoal();
+			});
+		},
+		{ threshold: VISIBILITY_COVERAGE_FRACTION },
+	).observe(fundraising);
 }
--- a/website/static/js/image-comparison.js
+++ b/website/static/js/image-comparison.js
@@ -5,7 +5,9 @@ window.addEventListener("DOMContentLoaded", initializeImageComparison);

 function initializeImageComparison() {
 	Array.from(document.querySelectorAll("[data-image-comparison]")).forEach((element) => {
-		const moveHandler = (event) => {
+		if (!(element instanceof HTMLElement)) return;
+
+		const moveHandler = (/** @type {PointerEvent} **/ event) => {
 			const factor = (event.clientX - element.getBoundingClientRect().left) / element.getBoundingClientRect().width;
 			const capped = Math.max(0, Math.min(1, factor));

@@ -14,7 +16,7 @@ function initializeImageComparison() {
 			element.dataset.lastInteraction = "";
 		};

-		const leaveHandler = (event) => {
+		const leaveHandler = (/** @type {PointerEvent} **/ event) => {
 			moveHandler(event);

 			const randomCode = Math.random().toString().substring(2);
@@ -22,8 +24,8 @@ function initializeImageComparison() {

 			setTimeout(() => {
 				if (element.dataset.lastInteraction === randomCode) {
-					element.dataset.recenterStartTime = Date.now();
-					element.dataset.recenterStartValue = parseFloat(element.style.getPropertyValue("--comparison-percent"));
+					element.dataset.recenterStartTime = `${Date.now()}`;
+					element.dataset.recenterStartValue = `${parseFloat(element.style.getPropertyValue("--comparison-percent"))}`;

 					recenterAnimationStep();
 				}
@@ -33,21 +35,21 @@ function initializeImageComparison() {
 		const recenterAnimationStep = () => {
 			if (element.dataset.lastInteraction === "") return;

-			const completionFactor = (Date.now() - element.dataset.recenterStartTime) / (RECENTER_ANIMATION_DURATION * 1000);
+			const completionFactor = (Date.now() - Number(element.dataset.recenterStartTime)) / (RECENTER_ANIMATION_DURATION * 1000);
 			if (completionFactor > 1) {
 				element.dataset.lastInteraction = "";
 				return;
 			}

 			const factor = smootherstep(completionFactor);
-			const newLocation = lerp(element.dataset.recenterStartValue, 50, factor);
+			const newLocation = lerp(Number(element.dataset.recenterStartValue), 50, factor);
 			element.style.setProperty("--comparison-percent", `${newLocation}%`);

 			requestAnimationFrame(recenterAnimationStep);
 		};

-		const lerp = (a, b, t) => (1 - t) * a + t * b;
-		const smootherstep = (x) => x * x * x * (x * (x * 6 - 15) + 10);
+		const lerp = (/** @type {number} **/ a, /** @type {number} **/ b, /** @type {number} **/ t) => (1 - t) * a + t * b;
+		const smootherstep = (/** @type {number} **/ x) => x * x * x * (x * (x * 6 - 15) + 10);

 		element.addEventListener("pointermove", moveHandler);
 		element.addEventListener("pointerenter", moveHandler);
--- a/website/static/js/navbar.js
+++ b/website/static/js/navbar.js
@@ -3,32 +3,35 @@ const RIPPLE_ANIMATION_MILLISECONDS = 100;
 const RIPPLE_WIDTH = 100;
 const HANDLE_STRETCH = 0.4;

-let navButtons;
-let rippleSvg;
-let ripplePath;
-let fullRippleHeight;
-let ripples;
-let activeRippleIndex;
+let /** @type {NodeList | undefined} **/ navButtons;
+let /** @type {Element | undefined} **/ rippleSvg;
+let /** @type {Element | undefined} **/ ripplePath;
+let /** @type {number | undefined} **/ fullRippleHeight;
+let /** @type {{ element: HTMLElement, goingUp: boolean, animationStartTime: number, animationEndTime: number }[]} **/ ripples;
+let /** @type {number} **/ activeRippleIndex;

 window.addEventListener("DOMContentLoaded", initializeRipples);

 function initializeRipples() {
 	window.addEventListener("resize", () => animate(true));

-	navButtons = document.querySelectorAll("header nav a");
-	rippleSvg = document.querySelector("header .ripple");
-	ripplePath = rippleSvg.querySelector("path");
-	fullRippleHeight = Number.parseInt(window.getComputedStyle(rippleSvg).height, 10);
+	navButtons = document.querySelectorAll("header nav a") || undefined;
+	rippleSvg = document.querySelector("header .ripple") || undefined;
+	ripplePath = rippleSvg?.querySelector("path") || undefined;
+	fullRippleHeight = rippleSvg ? Number.parseInt(window.getComputedStyle(rippleSvg).height, 10) || undefined : undefined;

-	ripples = Array.from(navButtons).map((button) => ({
-		element: button,
-		goingUp: false,
-		animationStartTime: 0,
-		animationEndTime: 0,
-	}));
+	ripples = Array.from(navButtons)
+		.filter((x) => x instanceof HTMLElement)
+		.map((button) => ({
+			element: button,
+			goingUp: false,
+			animationStartTime: 0,
+			animationEndTime: 0,
+		}));

 	activeRippleIndex = ripples.findIndex((ripple) => {
 		let link = ripple.element.getAttribute("href");
+		if (!link) return false;
 		if (!link.endsWith("/")) link += "/";
 		let location = window.location.pathname;
 		if (!location.endsWith("/")) location += "/";
@@ -41,7 +44,7 @@ function initializeRipples() {
 	});

 	ripples.forEach((ripple) => {
-		const updateTimings = (goingUp) => {
+		const updateTimings = (/** @type {boolean} **/ goingUp) => {
 			const start = ripple.animationStartTime;
 			const now = Date.now();
 			const stop = ripple.animationStartTime + RIPPLE_ANIMATION_MILLISECONDS;
@@ -61,13 +64,15 @@ function initializeRipples() {
 		ripple.element.addEventListener("pointerleave", () => updateTimings(false));
 	});

-	if (activeRippleIndex >= 0) ripples[activeRippleIndex] = {
-		...ripples[activeRippleIndex],
-		goingUp: true,
-		// Set to non-zero, but very old times (1ms after epoch), so the math works out as if the animation has already completed
-		animationStartTime: 1,
-		animationEndTime: 1 + RIPPLE_ANIMATION_MILLISECONDS,
-	};
+	if (activeRippleIndex >= 0) {
+		ripples[activeRippleIndex] = {
+			...ripples[activeRippleIndex],
+			goingUp: true,
+			// Set to non-zero, but very old times (1ms after epoch), so the math works out as if the animation has already completed
+			animationStartTime: 1,
+			animationEndTime: 1 + RIPPLE_ANIMATION_MILLISECONDS,
+		};
+	}

 	setRipples();
 }
@@ -83,10 +88,12 @@ function animate(forceRefresh = false) {
 }

 function setRipples() {
-	const lerp = (a, b, t) => a + (b - a) * t;
-	const ease = (x) => 1 - (1 - x) * (1 - x);
-	const clamp01 = (x) => Math.min(Math.max(x, 0), 1);
-	
+	const lerp = (/** @type {number} **/ a, /** @type {number} **/ b, /** @type {number} **/ t) => a + (b - a) * t;
+	const ease = (/** @type {number} **/ x) => 1 - (1 - x) * (1 - x);
+	const clamp01 = (/** @type {number} **/ x) => Math.min(Math.max(x, 0), 1);
+
+	if (!rippleSvg || !ripplePath || !navButtons || !fullRippleHeight || !(navButtons[0] instanceof HTMLElement)) return;
+
 	const rippleSvgRect = rippleSvg.getBoundingClientRect();

 	const rippleStrokeWidth = Number.parseInt(window.getComputedStyle(ripplePath).getPropertyValue("--border-thickness"), 10);
@@ -112,7 +119,7 @@ function setRipples() {

 		const buttonRect = ripple.element.getBoundingClientRect();
 		const buttonCenter = buttonRect.width / 2;
-		const rippleCenter = RIPPLE_WIDTH / 2 * mediaQueryScaleFactor;
+		const rippleCenter = (RIPPLE_WIDTH / 2) * mediaQueryScaleFactor;
 		const rippleOffset = rippleCenter - buttonCenter;
 		const rippleStartX = buttonRect.left - rippleSvgRect.left - rippleOffset;
 		const handleRadius = rippleCenter * HANDLE_STRETCH;
--- a/website/static/js/text-justification.js
+++ b/website/static/js/text-justification.js
@@ -1,8 +1,12 @@
 window.addEventListener("DOMContentLoaded", () => {
 	document.querySelectorAll("section p").forEach((paragraph) => {
+		const /** @type {[Text, NodeList][]} */ mutationQueue = [];
+
 		// Recursively traverse the DOM tree and modify the text nodes
-		const recursivelyAddWbr = (node) => {
+		const recursivelyAddWbr = (/** @type {ChildNode} **/ node) => {
 			if (node.nodeType === Node.TEXT_NODE) {
+				if (!(node instanceof Text)) return;
+
 				const newNodes = node.textContent.split("/");
 				for (let i = 0; i < newNodes.length - 1; i++) {
 					newNodes[i] += "/";
@@ -17,12 +21,11 @@ window.addEventListener("DOMContentLoaded", () => {
 				node.childNodes.forEach(recursivelyAddWbr);
 			}
 		};
-		
-		// Perform the recursive traversal and replace the text nodes
-		const mutationQueue = [];
+
+		// Perform the recursive traversal
 		recursivelyAddWbr(paragraph);
-		mutationQueue.forEach(([node, newNodes]) => {
-			node.replaceWith(...newNodes);
-		});
+
+		// Replace the text nodes
+		mutationQueue.forEach(([node, newNodes]) => node.replaceWith(...newNodes));
 	});
 });
--- a/website/static/js/video-autoplay.js
+++ b/website/static/js/video-autoplay.js
@@ -7,16 +7,18 @@ window.addEventListener("DOMContentLoaded", () => {

 		let loaded = false;

-		new IntersectionObserver((entries) => {
-			entries.forEach((entry) => {
-				if (!loaded && entry.intersectionRatio > VISIBILITY_COVERAGE_FRACTION) {
-					player.removeAttribute("preload");
-					player.setAttribute("autoplay", "");
+		new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (!loaded && entry.intersectionRatio > VISIBILITY_COVERAGE_FRACTION) {
+						player.removeAttribute("preload");
+						player.setAttribute("autoplay", "");

-					loaded = true;
-				};
-			});
-		}, { threshold: VISIBILITY_COVERAGE_FRACTION })
-		.observe(player);
+						loaded = true;
+					}
+				});
+			},
+			{ threshold: VISIBILITY_COVERAGE_FRACTION },
+		).observe(player);
 	});
 });
--- a/website/static/js/youtube-embed.js
+++ b/website/static/js/youtube-embed.js
@@ -1,9 +1,24 @@
 window.addEventListener("DOMContentLoaded", () => {
 	document.querySelectorAll("[data-youtube-embed]").forEach((placeholder) => {
+		if (!(placeholder instanceof HTMLElement)) return;
 		placeholder.addEventListener("click", () => {
-			const videoId = placeholder.attributes["data-youtube-embed"].value;
-			const timestamp = placeholder.attributes["data-youtube-timestamp"]?.value
-			placeholder.outerHTML = `<iframe width="1280" height="720" src="https://www.youtube.com/embed/${videoId}?${timestamp ? `start=${timestamp}&` : ""}autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
+			const videoId = placeholder.getAttribute("data-youtube-embed") || "";
+			const timestamp = placeholder.getAttribute("data-youtube-timestamp") || "";
+			placeholder.outerHTML = `
+				<iframe \\
+				width="1280" \\
+				height="720" \\
+				src="https://www.youtube.com/embed/${videoId}?${timestamp ? `start=${timestamp}&` : ""}autoplay=1" \\
+				frameborder="0" \\
+				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" \\
+				allowfullscreen\\
+				>\\
+				</iframe>\\
+				`
+				.split("\n")
+				.map((line) => line.trim())
+				.join("")
+				.replaceAll(`\\`, "");
 		});
 	});
 });