diff --git a/src/components/instance-select.astro b/src/components/instance-select.astro index 980fa3f..859227b 100644 --- a/src/components/instance-select.astro +++ b/src/components/instance-select.astro @@ -4,21 +4,10 @@ * Licensed under AGPL v3 or later */ -let instances; -try { - const response = await fetch(new URL("/api/instances", Astro.url)); - instances = await response.json(); -} catch (error) { - console.error("Couln't fetch instances:", error); - instances = []; -} - const { prefilledInstance } = Astro.props; --- - - {instances.map((instance: string) => )} - + Fediverse instance @@ -28,7 +17,7 @@ const { prefilledInstance } = Astro.props; name="instance" id="instance" placeholder="mastodon.social" - list="instanceDatalist" + list="instance-list" required aria-describedby="https-label" value={prefilledInstance} @@ -144,3 +133,4 @@ const { prefilledInstance } = Astro.props; return true; }); + diff --git a/src/fetch-instances.ts b/src/fetch-instances.ts new file mode 100644 index 0000000..380ce7f --- /dev/null +++ b/src/fetch-instances.ts @@ -0,0 +1,18 @@ +const instanceList = document.querySelector( + "#instance-list", +) as HTMLDataListElement; + +/** @type {Array} */ +let instances = []; +try { + const response = await fetch("/api/instances"); + instances = await response.json(); +} catch (error) { + console.error("Could not fetch instances:", error); +} + +for (const instaneDomain of instances) { + const $option = document.createElement("option"); + $option.value = instaneDomain; + instanceList.append($option); +}