From 08ed1e4cf8f0b10264ba5287f8017c2e91415197 Mon Sep 17 00:00:00 2001
From: Pyrofab <pyrofab@ladysnake.org>
Date: Sat, 4 May 2024 21:25:55 +0200
Subject: [PATCH] Fix scripts running when they should not (#217)

* Make Swagger UI only load on the API page, fixes #215

* Make installer version requests only happen when required, fixes #216
---
 package-lock.json                             |  7 ++++
 package.json                                  |  1 +
 .../parts/install/InstallerVersion.astro      | 41 +++++++++++--------
 src/pages/api.astro                           | 19 +++++----
 4 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1f3cecc80..1bcea6585 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
 				"@types/luxon": "^3.3.3",
 				"@types/prismjs": "^1.26.3",
 				"@types/semver-compare": "^1.0.3",
+				"@types/semver-sort": "^0.0.5",
 				"@types/swagger-ui": "^3.52.4",
 				"astro": "1.6.14",
 				"astro-i18next": "1.0.0-beta.12",
@@ -2687,6 +2688,12 @@
 			"integrity": "sha512-mVZkB2QjXmZhh+MrtwMlJ8BqUnmbiSkpd88uOWskfwB8yitBT0tBRAKt+41VRgZD9zr9Sc+Xs02qGgvzd1Rq/Q==",
 			"dev": true
 		},
+		"node_modules/@types/semver-sort": {
+			"version": "0.0.5",
+			"resolved": "https://registry.npmjs.org/@types/semver-sort/-/semver-sort-0.0.5.tgz",
+			"integrity": "sha512-cIQG7kjdzHcsRrYYkP8N65BogntqItjMjG8uSgPEl1ej4dKj9QC8snCFJb3HHF/Cwqe0s0IflJjUU5wb1yrLDQ==",
+			"dev": true
+		},
 		"node_modules/@types/swagger-ui": {
 			"version": "3.52.4",
 			"resolved": "https://registry.npmjs.org/@types/swagger-ui/-/swagger-ui-3.52.4.tgz",
diff --git a/package.json b/package.json
index 00d3a3f54..ca200e3c6 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
 		"@types/luxon": "^3.3.3",
 		"@types/prismjs": "^1.26.3",
 		"@types/semver-compare": "^1.0.3",
+		"@types/semver-sort": "^0.0.5",
 		"@types/swagger-ui": "^3.52.4",
 		"astro": "1.6.14",
 		"astro-i18next": "1.0.0-beta.12",
diff --git a/src/components/parts/install/InstallerVersion.astro b/src/components/parts/install/InstallerVersion.astro
index a0ad12e14..009751eac 100644
--- a/src/components/parts/install/InstallerVersion.astro
+++ b/src/components/parts/install/InstallerVersion.astro
@@ -3,26 +3,31 @@ import { t } from "i18next";
 ---
 
 <div class="field-label is-normal mt-1">
-	<span class="title is-6" id="installer-version"
-		>{t("install:installer-version-placeholder")}
-	</span>
-
-	<script>
-		import semverSort from "semver-sort";
+	<installer-version class="title is-6">
+		{t("install:installer-version-placeholder")}
+	</installer-version>
+</div>
 
-		const VERSION_REGEX = /<version>(.+?)<\/version>/g;
+<script>
+	import semverSort from "semver-sort";
 
-		const INSTALLER_URL_BASE =
-			"https://maven.quiltmc.org/repository/release/org/quiltmc/quilt-installer/";
-		const MAVEN_METADATA_URL = INSTALLER_URL_BASE + "maven-metadata.xml";
+	const VERSION_REGEX = /<version>(.+?)<\/version>/g;
+	const INSTALLER_URL_BASE =
+		"https://maven.quiltmc.org/repository/release/org/quiltmc/quilt-installer/";
+	const MAVEN_METADATA_URL = INSTALLER_URL_BASE + "maven-metadata.xml";
 
-		const metadataRequest = await fetch(MAVEN_METADATA_URL, { headers: { "User-Agent": "QuiltMC Website API" } })
-		const metadata = await metadataRequest.text()
-		const allVersion = Array.from(metadata.matchAll(VERSION_REGEX)).map(match => match[1])
-		const latest = semverSort.desc(allVersion)[0]
+	class InstallerVersion extends HTMLElement {
+		constructor() {
+			super();
+		}
 
-		if (document.getElementById("installer-version")) {
-			document.getElementById("installer-version").textContent = latest;
+		async connectedCallback() {
+			const metadataRequest = await fetch(MAVEN_METADATA_URL, { headers: { "User-Agent": "QuiltMC Website API" } });
+			const metadata = await metadataRequest.text();
+			const allVersion = Array.from(metadata.matchAll(VERSION_REGEX)).map(match => match[1]);
+			this.textContent = semverSort.desc(allVersion)[0]; // latest
 		}
-	</script>
-</div>
+	}
+
+	customElements.define('installer-version', InstallerVersion);
+</script>
diff --git a/src/pages/api.astro b/src/pages/api.astro
index 97fa071cf..a918cd4b4 100644
--- a/src/pages/api.astro
+++ b/src/pages/api.astro
@@ -5,15 +5,16 @@ import swaggerDarkCss from "../styles/swagger-dark.css?raw";
 ---
 
 <script>
-    import SwaggerUI from 'swagger-ui';
-
-    window.addEventListener("load", () => {
-        window.ui = SwaggerUI({
-            url: '/api/openapi.yaml',
-            dom_id: '#swagger-ui',
-            deepLinking: true,
-        });
-    });
+	const swaggerUiNode = document.getElementById('swagger-ui');
+	if (swaggerUiNode) {
+		import('swagger-ui').then(({ default: renderSwagger }) => {
+			window.ui = renderSwagger({
+				url: '/api/openapi.yaml',
+				domNode: swaggerUiNode,
+				deepLinking: true,
+			});
+		});
+	}
 </script>
 <style is:inline>
     pre.version {