Merge pull request #231 from MarshDeer/main

Add Nitter redirection support

static/openInApp.js

@@ -13,21 +13,21 @@ function detectOS() {
 }
 
 function openTweet(tweetId){
-    var preference = localStorage.getItem("openLinksPreference");
+    if (localStorage.getItem("openLinksPreference") === "true") {
-    if (preference === "true"){
         const os = detectOS();
-
         url = `twitter://status?id=${tweetId}`
         if(os === 'android'){
             window.location = url;
         }else if (os === 'ios'){
             window.location.replace(url);
         }
-    }else{
+    } else if (localStorage.getItem("frontendToggle") === "true" && localStorage.getItem("frontendUrl") !== null) {
+        window.location = `${localStorage.getItem("frontendUrl")}/i/status/${tweetId}`
+    } else {
         window.location = `https://x.com/i/status/${tweetId}`
     }
 
     setTimeout(() => {
         window.location = `https://x.com/i/status/${tweetId}`
     }, 1000)
-}
+}

static/preferences.html

@@ -6,10 +6,8 @@
 	<link rel="icon" href="/favicon.ico">
 	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 	<script>
-		function savePreference() {
+		function savePreference(name, value) {
-			/* Open Links in App*/
+			localStorage.setItem(name, value);
-			var openlinksToggle = document.getElementById("openLinksCheckbox");
-			localStorage.setItem("openLinksPreference", openlinksToggle.checked);
 		}
 
 		function loadPreference() {
@@ -17,6 +15,36 @@
 			var openlinksToggle = document.getElementById("openLinksCheckbox");
 			var openlinksPreference = localStorage.getItem("openLinksPreference");
 			openlinksToggle.checked = openlinksPreference === "true";
+			/* Nitter toggle */
+			document.getElementById("frontendToggle").checked = localStorage.getItem("frontendToggle") === "true";
+		}
+
+		function queryInstances() {
+			let instanceList = document.getElementById("instanceList");
+			fetch("https://status.d420.de/api/v1/instances")
+				.then(response => response.json())
+				.then(data => {
+					let i = 0;
+					for (const instance of data.hosts) {
+						if (instance.points > 0) {
+							let labelOpen = `<label for="instance${i}">`;
+							let labelClose = `</label>`;
+							let row = document.createElement("tr");
+							let input = document.createElement("td");
+							input.innerHTML = `${labelOpen} <input type="radio" name="instance" id="instance${i}" value="${instance.url}" onclick="savePreference('frontendUrl', this.value)"> ${labelClose}`;
+							let name = document.createElement("td");
+							name.innerHTML = `${labelOpen} ${instance.domain} ${labelClose}`
+							let health = document.createElement("td");
+							health.innerHTML = `${labelOpen} ${instance.healthy} ${labelClose}`;
+							let score = document.createElement("td");
+							score.innerHTML = `${labelOpen} ${instance.points} ${labelClose}`;
+							row.append(input, name, health, score);
+							instanceList.append(row);
+							i++;
+						}
+					}
+					document.getElementById("instancePicker").style.removeProperty("display");
+				})
 		}
 	</script>
 	<link rel="stylesheet" type="text/css" href="/style.css">
@@ -35,17 +63,50 @@
 	</header>
 
 	<main>
-		<section class="optiongroup" id="redirectionSettings">
+		<section class="optiongroup" id="appSettings">
-			<h2 labels="redirectionSettings"> Redirection settings </h2>
+			<h2 labels="appSettings"> App settings </h2>
 			<label for="openLinksCheckbox">
 				<div class="checkboxcontainer">
-					<input type="checkbox" id="openLinksCheckbox" onchange="savePreference()">
+					<input type="checkbox" id="openLinksCheckbox" onchange="savePreference('openLinksPreference', this.checked)">
 					<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M9.64 18.952l-5.55-4.861 1.317-1.504 3.951 3.459 8.459-10.948L19.4 6.32 9.64 18.952z"></path></svg>
 				</div>
 				<h3> Open links in app </h3>
 				<p> When you open a link on this device, vxTwitter will try to redirect you to the official X (formerly Twitter) app instead of using your browser. </p>
 			</label>
 		</section>
+
+		<section class="optiongroup" id="frontendSettings">
+			<h2 labels="frontendSettings"> Frontend settings <em>(EXPERIMENTAL)</em> </h2>
+			<label for="frontendToggle">
+				<div class="checkboxcontainer">
+					<input type="checkbox" id="frontendToggle" onchange="savePreference('frontendToggle', this.checked)">
+					<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M9.64 18.952l-5.55-4.861 1.317-1.504 3.951 3.459 8.459-10.948L19.4 6.32 9.64 18.952z"></path></svg>
+				</div>
+				<h3> Redirect to Nitter </h3>
+				<p> When you open a link on this browser, vxTwitter will redirect you to your chosen Nitter instance instead of X&nbsp;/&nbsp;Twitter </p>
+			</label>
+			<label for="instanceSearch">
+				<button onclick="queryInstances()" id="instanceSearch"> Search </button>
+				<h3> Search for Nitter instances </h3>
+				<p> Use the <a href="https://status.d420.de/about" target="_blank">Nitter health tracker API</a> to query available instances. </p>
+			</label>
+			<label id="instancePicker" style="display: none;">
+				<h3> Choose a Nitter instance </h3>
+				<p> Choose which instance to use for redirection. You can only pick one instance, and Nitter is currently <a href="https://status.d420.de/rip" target="_blank">almost dead</a>, so the instance with the highest score is probably your best bet. </p>
+				<table>
+					<thead>
+						<tr>
+							<th scope="col"> Selected </th>
+							<th scope="col"> Instance </th>
+							<th scope="col"> Healthy </th>
+							<th scope="col"> Score </th>
+						</tr>
+					</thead>
+					<tbody id="instanceList">
+						<!-- queryInstances() appends instance data here -->
+					</tbody>
+				</table>
+			</label>
 	</main>
 
 	<aside class="bottom">

static/style.css

@@ -70,32 +70,56 @@ main {
 	grid-area: main;
 }
 
-label :has(input) {
+em {
+	color: var(--accent);
+}
+
+.optiongroup:not(:first-of-type) {
+	margin: 1em auto;
+	border-top: 1px solid var(--lowcontrast);
+}
+
+label :where(:has(input), input) {
 	grid-area: input;
 }
 
-label h3 {
+h3 {
 	grid-area: title;
 	margin: 0;
 }
 
-label p {
+p {
 	grid-area: text;
 	color: var(--gray);
 	margin: 0;
 }
 
-/* Checkbox settings */
+a {
-label:has(input[type=checkbox]) {
+	color: var(--accent);
+	text-decoration: underline 1px dotted var(--accent);
+	transition: .2s all;
+}
+
+label a:where(:hover, :focus) {
+	color: var(--fg);
+	text-decoration-color: var(--fg);
+}
+
+label {
 	display: grid;
 	grid-template-columns: 1fr auto;
 	grid-template-rows: auto auto;
 	grid-template-areas:
 		"title input"
-		"text text";
+		"text text"
+		"options options";
 }
 
-label:has(input[type=checkbox]):hover {
+label:not(:first-of-type) {
+	margin: 1em auto;
+}
+
+label:not(#instancePicker):hover {
 	cursor: pointer;
 }
 
@@ -103,16 +127,26 @@ label:has(input[type=checkbox]):hover {
 	position: relative;
 }
 
-input[type=checkbox] {
+input[type=checkbox],
+input[type=radio] {
 	appearance: none;
-	width: 20px;
-	height: 20px;
 	border: 2px solid var(--gray);
-	border-radius: 5px;
 	background: var(--bg);
 	transition: .2s all;
 }
 
+input[type=checkbox] {
+	width: 20px;
+	height: 20px;
+	border-radius: 5px;
+}
+
+input[type=radio] {
+	width: 15px;
+	height: 15px;
+	border-radius: 100%;
+}
+
 input[type=checkbox]+svg {
 	display: none;
 	width: 20px;
@@ -122,11 +156,13 @@ input[type=checkbox]+svg {
 	inset: 1px 2px;
 }
 
-input[type=checkbox]:hover {
+input[type=checkbox]:hover,
+input[type=radio]:hover {
 	box-shadow: 0 0 0 5px var(--lowcontrast);
 }
 
-input[type=checkbox]:checked {
+input[type=checkbox]:checked,
+input[type=radio]:checked {
 	background: var(--accent);
 	border-color: var(--accent);
 }
@@ -135,6 +171,57 @@ input[type=checkbox]:checked+svg {
 	display: block;
 }
 
+button {
+	background: var(--accent);
+	color: var(--fg);
+	padding: 0 1ch;
+	border: none;
+	cursor: pointer;
+	border-radius: 1.5em;
+	font-weight: bold;
+	font-family: 'Roboto', sans-serif;
+	transition: .2s all;
+}
+
+button:where(:hover, :focus) {
+	background: var(--fg);
+	color: var(--bg);
+}
+
+#instancePicker {
+	animation: fadein ease-in .3s 1 forwards;
+}
+
+	@keyframes fadein {
+		from { opacity: 0;}
+		to { opacity: 1;}
+	}
+
+table {
+	grid-area: options;
+	width: fit-content;
+	width: 100%;
+	text-align: center;
+	margin: 1em auto;
+}
+
+th {
+	padding: 0 0.5ch;
+}
+
+tbody {
+	color: var(--gray);
+}
+
+tbody tr:has(input[type=radio]:checked) {
+	color: var(--fg);
+}
+
+td label input {
+	grid-area: options;
+	margin: auto;
+}
+
 /* Popup */
 main:has(.popup) {
 	justify-content: center;
@@ -162,23 +249,11 @@ main:has(.popup) {
 }
 
 .popup button {
-	background: var(--accent);
-	color: var(--fg);
 	width: 60%;
 	height: 3em;
-	border-radius: 1.5em;
 	border: none;
-	cursor: pointer;
 	margin: 1em auto;
 	font-size: larger;
-	font-weight: bold;
-	font-family: 'Roboto', sans-serif;
-	transition: .2s all;
-}
-
-.popup button:where(:hover, :focus) {
-	background: var(--fg);
-	color: var(--bg);
 }
 
 /* "Not a phishing site" warning tape */