Improved UX/UI. Fixed https://github.com/libredirect/libredirect/issues/552

7 files changed, 103 insertions, 61 deletions

diff --git a/src/assets/javascripts/services.js b/src/assets/javascripts/services.js
index 4f3b6be3..845c5f4e 100644
--- a/src/assets/javascripts/services.js
+++ b/src/assets/javascripts/services.js
@@ -22,24 +22,16 @@ function init() {
 init()
 browser.storage.onChanged.addListener(init)
 
-function fetchFrontendInstanceList(service, frontend, redirects, options, config) {
-	let tmp = []
-	if (config.services[service].frontends[frontend].instanceList) {
-		for (const network in config.networks) {
-			tmp.push(...options[frontend])
-		}
-	}
-	return tmp
-}
-
-function all(service, frontend, options, config, redirects) {
+function all(service, frontend, options, config) {
 	let instances = []
 	if (!frontend) {
 		for (const frontend in config.services[service].frontends) {
-			instances.push(...fetchFrontendInstanceList(service, frontend, redirects[frontend], options, config))
+			if (options[frontend]) {
+				instances.push(...options[frontend])
+			}
 		}
 	} else {
-		instances.push(...fetchFrontendInstanceList(service, frontend, redirects[frontend], options, config))
+		instances.push(...options[frontend])
 	}
 	return instances
 }
@@ -77,7 +69,7 @@ function redirect(url, type, initiator, forceRedirection) {
 
 		if (!regexArray(service, url, config, frontend)) continue
 
-		if (initiator && all(service, null, options, config, redirects).includes(initiator.origin)) return "BYPASSTAB"
+		if (initiator && all(service, null, options, config).includes(initiator.origin)) return "BYPASSTAB"
 
 		let instanceList = []
 		for (const network in options[frontend]) {
@@ -427,7 +419,7 @@ function computeService(url, returnFrontend) {
 							return
 						} else {
 							for (const frontend in config.services[service].frontends) {
-								if (all(service, frontend, options, config, redirects).includes(utils.protocolHost(url))) {
+								if (all(service, frontend, options, config).includes(utils.protocolHost(url))) {
 									if (returnFrontend) resolve([service, frontend, utils.protocolHost(url)])
 									else resolve(service)
 									return
@@ -446,7 +438,7 @@ function switchInstance(url) {
 		await init()
 		const protocolHost = utils.protocolHost(url)
 		for (const service in config.services) {
-			if (!all(service, null, options, config, redirects).includes(protocolHost)) continue
+			if (!all(service, null, options, config).includes(protocolHost)) continue
 
 			let instancesList = []
 			if (Object.keys(config.services[service].frontends).length == 1) {
@@ -489,7 +481,7 @@ function reverse(url, urlString) {
 		if (!urlString) protocolHost = utils.protocolHost(url)
 		else protocolHost = url.match(/https?:\/{2}(?:[^\s\/]+\.)+[a-zA-Z0-9]+/)[0]
 		for (const service in config.services) {
-			if (!all(service, null, options, config, redirects).includes(protocolHost)) continue
+			if (!all(service, null, options, config).includes(protocolHost)) continue
 
 			switch (service) {
 				case "instagram":
diff --git a/src/config.json b/src/config.json
index 97e84f61..14d80d5e 100644
--- a/src/config.json
+++ b/src/config.json
@@ -23,7 +23,8 @@
 				"invidious": {
 					"name": "Invidious",
 					"embeddable": true,
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://invidious.io/"
 				},
 				"piped": {
 					"excludeTargets": [
@@ -32,7 +33,8 @@
 					],
 					"name": "Piped",
 					"embeddable": true,
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/TeamPiped/Piped"
 				},
 				"pipedMaterial": {
 					"excludeTargets": [
@@ -41,12 +43,14 @@
 					],
 					"name": "Piped-Material",
 					"embeddable": false,
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/mmjee/Piped-Material"
 				},
 				"cloudtube": {
 					"name": "CloudTube",
 					"embeddable": false,
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://sr.ht/~cadence/tube/"
 				},
 				"freetube": {
 					"excludeTargets": [
@@ -55,7 +59,8 @@
 					],
 					"name": "FreeTube",
 					"embeddable": false,
-					"instanceList": false
+					"instanceList": false,
+					"url": "https://github.com/FreeTubeApp/FreeTube"
 				},
 				"yattee": {
 					"excludeTargets": [
@@ -64,10 +69,12 @@
 					],
 					"name": "Yattee",
 					"embeddable": false,
-					"instanceList": false
+					"instanceList": false,
+					"url": "https://github.com/yattee/yattee"
 				}
 			},
 			"targets": [
+				"^https?:\\/{2}redirect\\.invidious\\.io\\/.*",
 				"^https?:\\/{2}(?:www\\.|m\\.|)youtube.com(\\/|$)(?!iframe_api\\/|redirect\\/)",
 				"^https?:\\/{2}img\\.youtube.com\\/vi\\/.*\\/..*",
 				"^https?:\\/{2}(?:i|s)\\.ytimg.com\\/vi\\/.*\\/..*",
@@ -89,11 +96,13 @@
 			"frontends": {
 				"beatbump": {
 					"name": "Beatbump",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/snuffyDev/Beatbump"
 				},
 				"hyperpipe": {
 					"name": "Hyperpipe",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://codeberg.org/Hyperpipe/Hyperpipe"
 				}
 			},
 			"targets": [
@@ -113,7 +122,8 @@
 				"nitter": {
 					"name": "Nitter",
 					"embeddable": true,
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/zedeus/nitter"
 				}
 			},
 			"targets": [
@@ -135,7 +145,8 @@
 			"frontends": {
 				"bibliogram": {
 					"name": "Bibliogram",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://sr.ht/~cadence/bibliogram/"
 				}
 			},
 			"targets": [
@@ -153,7 +164,8 @@
 			"frontends": {
 				"proxiTok": {
 					"name": "ProxiTok",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/pablouser1/ProxiTok"
 				}
 			},
 			"targets": [
@@ -171,11 +183,13 @@
 			"frontends": {
 				"libreddit": {
 					"name": "Libreddit",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/spikecodes/libreddit"
 				},
 				"teddit": {
 					"name": "Teddit",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://codeberg.org/teddit/teddit"
 				}
 			},
 			"targets": [
@@ -195,7 +209,8 @@
 			"frontends": {
 				"rimgo": {
 					"name": "rimgo",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://codeberg.org/video-prize-ranch/rimgo"
 				}
 			},
 			"targets": [
@@ -214,7 +229,8 @@
 			"frontends": {
 				"scribe": {
 					"name": "Scribe",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://sr.ht/~edwardloveall/Scribe/"
 				}
 			},
 			"targets": [
@@ -249,7 +265,8 @@
 			"frontends": {
 				"quetre": {
 					"name": "Quetre",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/zyachel/quetre"
 				}
 			},
 			"targets": [
@@ -267,7 +284,8 @@
 			"frontends": {
 				"libremdb": {
 					"name": "libremdb",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/zyachel/libremdb"
 				}
 			},
 			"targets": [
@@ -285,7 +303,8 @@
 			"frontends": {
 				"breezeWiki": {
 					"name": "BreezeWiki",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://breezewiki.com"
 				}
 			},
 			"targets": [
@@ -304,12 +323,14 @@
 				"librarian": {
 					"name": "Librarian",
 					"embeddable": true,
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://codeberg.org/librarian/librarian"
 				},
 				"lbryDesktop": {
 					"name": "LBRY Desktop",
 					"embeddable": false,
-					"instanceList": false
+					"instanceList": false,
+					"url": "https://lbry.com/get"
 				}
 			},
 			"targets": [
@@ -328,21 +349,25 @@
 		},
 		"search": {
 			"frontends": {
-				"searx": {
-					"name": "SearX",
-					"instanceList": true
-				},
 				"searxng": {
 					"name": "SearXNG",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/searxng/searxng"
+				},
+				"searx": {
+					"name": "SearX",
+					"instanceList": true,
+					"url": "https://searx.github.io/searx/"
 				},
 				"whoogle": {
 					"name": "Whoogle",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://benbusby.com/projects/whoogle-search/"
 				},
 				"librex": {
 					"name": "LibreX",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/hnhx/librex"
 				}
 			},
 			"targets": [
@@ -361,15 +386,18 @@
 			"frontends": {
 				"simplyTranslate": {
 					"name": "SimplyTranslate",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://git.sr.ht/~metalune/simplytranslate_web"
 				},
 				"lingva": {
 					"name": "Lingva Translate",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/TheDavidDelta/lingva-translate"
 				},
 				"libreTranslate": {
 					"name": "LibreTranslate",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/LibreTranslate/LibreTranslate"
 				}
 			},
 			"targets": [
@@ -389,11 +417,13 @@
 			"frontends": {
 				"facil": {
 					"name": "FacilMap",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://github.com/FacilMap/facilmap"
 				},
 				"osm": {
 					"name": "OpenStreetMap",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://www.openstreetmap.org/"
 				}
 			},
 			"targets": [
@@ -413,7 +443,8 @@
 			"frontends": {
 				"send": {
 					"name": "Send",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://gitlab.com/timvisee/send"
 				}
 			},
 			"targets": [
@@ -433,7 +464,8 @@
 			"frontends": {
 				"privateBin": {
 					"name": "PrivateBin",
-					"instanceList": true
+					"instanceList": true,
+					"url": "https://privatebin.info/"
 				}
 			},
 			"targets": [
diff --git a/src/pages/options/index.js b/src/pages/options/index.js
index 6fb8e452..3c3f6d1f 100644
--- a/src/pages/options/index.js
+++ b/src/pages/options/index.js
@@ -73,6 +73,13 @@ function loadPage(path) {
 			})
 		}
 
+		const frontend_name_element = document.getElementById(`${service}_page`).getElementsByClassName("frontend_name")[0]
+		if (divs[service].frontend) {
+			frontend_name_element.href = config.services[service].frontends[divs[service].frontend.value].url
+		} else {
+			frontend_name_element.href = Object.values(config.services[service].frontends)[0].url
+		}
+
 		if (Object.keys(config.services[service].frontends).length > 1) {
 			changeFrontendsSettings(service)
 		}
@@ -85,7 +92,6 @@ function loadPage(path) {
 	}
 }
 
-
 async function processDefaultCustomInstances(frontend, networks, document) {
 	let customInstances = []
 	let options
diff --git a/src/pages/options/widgets/about.pug b/src/pages/options/widgets/about.pug
index 93830a1d..3ef0e86d 100644
--- a/src/pages/options/widgets/about.pug
+++ b/src/pages/options/widgets/about.pug
@@ -6,19 +6,19 @@ section(class="option-block" id="about_page")
         div(class="some-block option-block")
             h4 Donate: ♥️
             h4 
-                a(href="https://libredirect.github.io/donate") https://libredirect.github.io/donate
+                a(href="https://libredirect.github.io/donate" target="_blank") https://libredirect.github.io/donate
 
         div(class="some-block option-block")
             h4 FAQ:
             h4 
-                a(href="https://libredirect.github.io/faq") https://libredirect.github.io/faq
+                a(href="https://libredirect.github.io/faq" target="_blank") https://libredirect.github.io/faq
 
         div(class="some-block option-block")
             h4 Docs:
             h4 
-                a(href="https://libredirect.github.io/docs") https://libredirect.github.io/docs
+                a(href="https://libredirect.github.io/docs" target="_blank") https://libredirect.github.io/docs
 
         div(class="some-block option-block")
             h4 Source Code:
             h4 
-                a(href="https://libredirect.github.io/source_code") https://libredirect.github.io/source_code
\ No newline at end of file
+                a(href="https://libredirect.github.io/source_code" target="_blank") https://libredirect.github.io/source_code
\ No newline at end of file
diff --git a/src/pages/options/widgets/services.pug b/src/pages/options/widgets/services.pug
index dc527c78..22b8ab2d 100644
--- a/src/pages/options/widgets/services.pug
+++ b/src/pages/options/widgets/services.pug
@@ -1,7 +1,8 @@
 each val, service in services
     section(class="option-block" id=service+"_page")
         div(class="some-block option-block")
-            h1(data-localise="__MSG_"+service+"__")=services[service].name
+            h1
+                a(href=services[service].url)=services[service].name
 
         hr
 
@@ -15,10 +16,15 @@ each val, service in services
 
         if Object.keys(services[service].frontends).length> 1
             div(class="some-block option-block")
-                h4(data-localise="__MSG_frontend__") Frontend
+                h4
+                    a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend
                 select(id=service+"-frontend")
                     each val, frontend in services[service].frontends
                         option(value=frontend)=services[service].frontends[frontend].name
+        else 
+            div(class="some-block option-block")
+                h4
+                    a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend
 
         if services[service].embeddable
             div(class="some-block option-block")
@@ -35,14 +41,14 @@ each val, service in services
                 div(id=frontend)
                     div(class="some-block option-block")
                         h4(data-localise="__MSG_instances__") Add your favorite instances
-                    
+
                     form(class="custom-instance-form")
                         div(class="some-block option-block")
                             input(class="custom-instance" placeholder=`http://${frontend}.com` type="url" )
                             button(class="add add-instance" type="submit")
                                 svg(xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor")
                                     path(d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z")
-                    
+
                     div(class="checklist custom-checklist")                    
                     each val, network in networks
                         div(class=network)
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index 5f2871e4..24628f5c 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -126,6 +126,12 @@ section.links div {
 }
 
 a {
+	text-decoration: none;
+	color: var(--text);
+	transition: 0.1s;
+}
+
+a:hover {
 	color: var(--active);
 }
 
diff --git a/src/pages/widgets/switches.pug b/src/pages/widgets/switches.pug
index 7054ea72..9fbf5201 100644
--- a/src/pages/widgets/switches.pug
+++ b/src/pages/widgets/switches.pug
@@ -1,6 +1,6 @@
 each val, service in services    
     div(class=service + " some-block")
-        a(class="title" href=services[service].url)
+        a(class="title" href=`/pages/options/index.html#${services[service].name.toLowerCase()}`)
             if services[service].imageType == 'svgMono'
                 img(src=`../../assets/images/${service}-icon.svg`)
             else