Provide a list of Mastodon servers from joinmastodon.org

src/index.pug

@@ -28,7 +28,11 @@ html(lang="en")
                     label(for="text") Post text
                     textarea#text(rows=6, name="text", required)
                 section
-                    label(for="instance") Mastodon instance URL
+                    label(for="choose_instance") Choose your Mastodon instance
+                    select#choose_instance()
+                        option(value="") -- Choose an instance --
+                section
+                    label(for="instance") Or type the instance URL
                     input#instance(type="url", name="instance", placeholder="https://", required)
 
                 section.remember
@@ -43,4 +47,4 @@ html(lang="en")
             section
                 a(href="https://github.com/NickKaramoff/toot") This project on GitHub
 
-        script(src="index.js")
+        script(src="index.js")

src/script/index.js

@@ -8,6 +8,8 @@ function normalizeUrl(url) {
     return url;
 }
 
+const instance = document.getElementById('instance');
+const choose_instance = document.getElementById('choose_instance');
 var prefillInstance = window.localStorage.getItem('mastodon_instance');
 
 var paramPairs = window.location.search.substr(1).split('&');
@@ -24,10 +26,58 @@ for (var i = 0; i < paramPairsLength; i++) {
 delete i
 delete paramPair
 
-if (prefillInstance != null) {
-    document.getElementById('instance').value = normalizeUrl(prefillInstance);
+function add_instance(text, disabled, selected) {
+    const opt = document.createElement('option');
+    opt.innerText = text;
+    if (disabled) {
+        opt.setAttribute('disabled', true);
+    }
+    if (selected) {
+        opt.setAttribute('selected', true);
+    }
+    choose_instance.appendChild(opt);
 }
 
+if (prefillInstance != null) {
+    const url = normalizeUrl(prefillInstance);
+    instance.value = url;
+    add_instance(url.slice(8, url.length - 1), false, true);
+}
+
+choose_instance.addEventListener('focus', function (e) {
+    if (choose_instance.children.length < 3) {
+        if (choose_instance.children.length > 1) {
+            choose_instance.children[1].remove();
+        }
+        add_instance("... loading ...", true);
+        fetch('https://api.joinmastodon.org/servers')
+          .then(response => {
+              if (!response.ok) {
+                  throw new Error('Failure response from joinmastodon.');
+              }
+              return response.json();
+          })
+          .then(servers => {
+              choose_instance.children[1].remove();
+              const domains = servers.map(obj => obj.domain);
+              domains.sort();
+              for (const domain of domains) {
+                  add_instance(domain);
+              }
+          })
+          .catch(error => {
+              choose_instance.children[1].remove();
+              add_instance("--LOADING FAILED--", true);
+              console.error(
+                'Failed to fetch servers list from joinmastodon.', error);
+          });
+    }
+})
+
+choose_instance.addEventListener('change', function (e) {
+    instance.value = `https://${choose_instance.value}`;
+});
+
 document
   .getElementById('form')
   .addEventListener('submit', function (e) {
@@ -42,4 +92,4 @@ document
 
     var shareUrl = instance + "share?text=" + encodeURIComponent(text);
     window.open(shareUrl, '_blank', 'noopener,noreferrer')
-})
+  })

src/style/main.scss

@@ -100,6 +100,7 @@ main {
             transition: background-color 300ms ease, border 300ms ease;
         }
 
+        select,
         textarea,
         input[type=url] {
             color: inherit;