fix: Add id so anchors actually work

Aidoku · Jul 26, 2023 · c08f323 · c08f323
1 parent b2853d5
commit c08f323
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 6 deletions.
diff --git a/internal/build/web/index.html b/internal/build/web/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>An Aidoku source list</title>
+
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/themes/light.css" integrity="sha384-0usmJJJTG5wZwRFlxdECle5gNAqtRYVm8rHBHjGO0+Cpgp83KTGEANVIFUYafjaO" crossorigin="anonymous" />
+	<link rel="stylesheet" href="styles/index.css" />
+
+	<script type="module" src="scripts/elements.js"></script>
+	<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.5.2/cdn/shoelace-autoloader.js" integrity="sha384-ILzDiPYY4je5i95gGzpVe0e88rFqVnoz3i7HPBsRbtEHxfkA7wR8E+PwjCgt1Bin" crossorigin="anonymous"></script>
+
+	<script defer src="scripts/index.js"></script>
+	<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.3/dist/cdn.min.js" integrity="sha384-mPO6U7t0sNHfI1UIWNf5U6FDzprqWgAMKfOGW86JVGCKoU/7HPdy6DwBaWOsi4eV" crossorigin="anonymous"></script>
+</head>
+<body>
+	<header>
+		<p>An Aidoku source list</p>
+		<sl-button class="add-to-aidoku" x-data :href="$store.addUrl">Add to Aidoku</sl-button>
+	</header>
+	<div class="description">
+		On a device with Aidoku installed, tap <a x-data :href="$store.addUrl">Add to Aidoku</a>
+		or use the base URL to add this source list.
+	</div>
+	<div class="base-url" variant="primary">
+		<p class="base-url__description">Base URL:</p>
+		<p class="base-url__url" x-data x-text="$store.sourceUrl"></p>
+	</div>
+	<div x-data="sourceList" class="sources">
+		<h1>Sources</h1>
+		<template x-if="loading === LoadingStatus.Loading">
+			<div class="sources__status">
+				<div aria-label="Loading" class="spinner">
+					<div class="bar0"></div>
+					<div class="bar1"></div>
+					<div class="bar2"></div>
+					<div class="bar3"></div>
+					<div class="bar4"></div>
+					<div class="bar5"></div>
+					<div class="bar6"></div>
+					<div class="bar7"></div>
+				</div>
+			</div>
+		</template>
+		<template x-if="loading === LoadingStatus.Error">
+			<div class="sources__status">
+				<div class="text-red-500">
+					<p>Could not load sources.</p>
+					<p>This source list might not work in the app.</p>
+				</div>
+			</div>
+		</template>
+		<template x-if="loading === LoadingStatus.Loaded">
+			<div>
+				<div class="sources__search" x-effect="updateFilteredList">
+					<sl-input placeholder="Search by name or ID..." x-model="query"></sl-input>
+					<sl-select placeholder="Filter by languages" multiple clearable @sl-change="selectedLanguages = event.target.value">
+						<template x-for="(language, index) in languages" :key="language">
+							<sl-option :value="language" x-text="fullLanguageName(language)"></sl-option>
+						</template>
+					</sl-select>
+					<sl-checkbox @sl-change="nsfw = event.target.checked" :checked="nsfw">Show NSFW sources?</sl-checkbox>
+				</div>
+				<div class="sources__list">
+					<template x-for="source in filtered" :key="source.id">
+						<div class="sources__item" :id="source.id">
+							<a :href="`#${source.id}`" class="sources__anchor">#</a>
+							<div class="sources__icon-wrapper">
+								<img class="sources__icon" :alt="`Icon for ${source.name}`" :src="`./icons/${source.icon}`" loading="lazy" width="42" height="42">
+							</div>
+							<div class="sources__info">
+								<div class="sources__name">
+									<span x-text="source.name"></span>
+									<span class="sources__version" x-text="`v${source.version}`"></span>
+									<sl-badge variant="danger" pill x-cloak x-show="source.nsfw === 2">18+</sl-badge>
+								</div>
+								<div class="sources__version" x-text="languageName(source.lang)[0]"></div>
+							</div>
+							<div class="sources__download">
+								<sl-button size="small" pill download :href="`./sources/${source.file}`">Download</sl-button>
+							</div>
+						</div>
+					</template>
+				</div>
+			</div>
+		</template>
+	</div>
+</body>
+</html>
diff --git a/internal/build/web/scripts/index.js b/internal/build/web/scripts/index.js
@@ -1,4 +1,4 @@
-(function (scope) {
+(function (w) {
     const namesInEnglish = new Intl.DisplayNames(["en"], { type: "language" });
 
     /**
@@ -7,7 +7,7 @@
      * @returns {[string, string]}
      */
     function languageName(code) {
-        if (code == "multi") {
+        if (code === "multi") {
             return ["Multi-Language", ""];
         } else {
             const namesInNative = new Intl.DisplayNames([code], { type: "language" });
@@ -39,8 +39,8 @@
     };
 
     document.addEventListener("alpine:init", () => {
-        Alpine.store("sourceUrl", window.location.href.replace(window.location.hash, ""))
-        Alpine.store("addUrl", `aidoku://addSourceList?url=${window.location.href.replace(window.location.hash, "")}`)
+        Alpine.store("sourceUrl", w.location.href.replace(w.location.hash, ""))
+        Alpine.store("addUrl", `aidoku://addSourceList?url=${w.location.href.replace(w.location.hash, "")}`)
 
         Alpine.data("sourceList", () => ({
             sources: [],
@@ -84,9 +84,9 @@
                     this.loading = LoadingStatus.Error;
                 }
 
-                if (scope.location.hash) {
+                if (w.location.hash) {
                     this.$nextTick(() => { 
-                        scope.location.replace(scope.location.hash);
+                        w.location.replace(w.location.hash);
                     });
                 }
             },