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.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",

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>

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 {