Refactor

2025-12-19 11:03:32 +00:00 · 2023-04-30 00:33:30 -07:00
parent 09c95032fa
commit 660e88e360
13 changed files with 409 additions and 433 deletions
--- a/app.html
+++ b/app.html
@@ -4,9 +4,9 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" href="css/main.css">
-	<link rel="stylesheet" href="css/app.css">
+	<link rel="stylesheet" href="css/shared.css">
 	<link rel="stylesheet" href="css/uibanner.css">
+	<link rel="stylesheet" href="css/app.css">
 </head>
 <body class="loading">
 	<div id="loading">
@@ -99,6 +99,7 @@
 			</div>
 		</div>
 	</div>
+	<script src="js/shared.js"></script>
 	<script src="js/main.js"></script>
 	<script src="js/app.js"></script>
 </body>
--- a/apps.html
+++ b/apps.html
@@ -4,9 +4,9 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" href="css/main.css">
-	<link rel="stylesheet" href="css/apps.css">
+	<link rel="stylesheet" href="css/shared.css">
 	<link rel="stylesheet" href="css/uibanner.css">
+	<link rel="stylesheet" href="css/apps.css">
 </head>
 <body class="loading">
 	<div id="loading">
@@ -18,7 +18,8 @@
 	<div id="main">
 		<div id="apps"></div>
 	</div>
-	<script src="js/main.js"></script>
+	<script src="js/shared.js"></script>
 	<script src="js/apps.js"></script>
+	<script src="js/main.js"></script>
 </body>
 </html>
--- a/css/shared.css
+++ b/css/shared.css
--- a/home.html
+++ b/home.html
@@ -1,14 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="css/shared.css">
 	<link rel="stylesheet" href="css/uibanner.css">
-	<link rel="stylesheet" href="css/main.css">
 </head>
-
 <body class="loading">
 	<div id="loading">
 		<img src="img/loading.gif" alt="loading">
@@ -41,8 +39,8 @@
 			</div>
 		</div>
 	</div>
-	<script src="js/main.js"></script>
+	<script src="js/shared.js"></script>
 	<script src="js/home.js"></script>
+	<script src="js/main.js"></script>
 </body>
-
 </html>
--- a/index.html
+++ b/index.html
@@ -4,8 +4,8 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="css/shared.css">
 	<link rel="stylesheet" href="css/uibanner.css">
-	<link rel="stylesheet" href="css/main.css">
 	<link rel="stylesheet" href="css/index.css">
 </head>
 <body>
@@ -56,6 +56,7 @@
 			</a>
 		</div>
 	</div>
+	<script src="js/shared.js"></script>
 	<script src="js/index.js"></script>
 </body>
 </html>
--- a/js/app.js
+++ b/js/app.js
@@ -1,9 +1,10 @@
+if (!urlSearchParams.has('id')) exit();
 const bundleId = urlSearchParams.get('id');
-if (!urlSearchParams.has('id') || !bundleId) nope();

-// Hide/show navigation bar title & install button
-let hidden = false;
-window.onscroll = function (e) {
+(function () {
+	// Hide/show navigation bar title & install button
+	let hidden = false;
+	window.onscroll = function (e) {
 		const appName = document.querySelector(".app-header .text>.title");
 		const title = document.getElementById("title");
 		const button = document.querySelector("#nav-bar .install");
@@ -19,173 +20,61 @@ window.onscroll = function (e) {
 			button.classList.remove("hidden");
 			button.disaled = false;
 		}
-}
-
-fetch(sourceURL)
-	.then(response => response.json())
-	.then(json => {
-		const apps = json.apps.filter(app => app.bundleIdentifier === bundleId);
-		const app = apps[0];
-		if (!app) {
-			alert(`Unable to find app matching bundle identifier "${bundleId}".\nYou will now be redirected to the home page.`);
-			nope();
 	}
+})();

+function main(json) {
+	const app = getAppWithBundleId(bundleId);
+	if (!app) exit();
+
+	// Set tab title
 	document.title = `${app.name} - ${json.name}`;

 	const tintColor = `#${app.tintColor}`;
-
-		if (tintColor)
-			document.querySelector(':root').style.setProperty("--app-tint-color", `${tintColor}`);
+	// Set tint color
+	if (tintColor) document.querySelector(':root').style.setProperty("--app-tint-color", `${tintColor}`);

 	// Tint back button
-		const backButton = document.getElementById("back");
-		backButton.style.color = tintColor;
+	document.getElementById("back").style.color = tintColor;

-		const installButtons = document.querySelectorAll("a.install");
-		installButtons.forEach(button => {
+	// Set up install buttons
+	document.querySelectorAll("a.install").forEach(button => {
 		button.href = `altstore://install?url=${app.downloadURL}`;
 	});

-		const downloadButton = document.getElementById("download");
-		downloadButton.href = app.downloadURL;
+	// Set up download button
+	document.getElementById("download").href = app.downloadURL;

 	// 
 	// Navigation bar
-		//
-		const navBar = document.getElementById("nav-bar");
-		const navBarIcon = navBar.querySelector("#title>img");
-		const navBarTitle = navBar.querySelector("#title>p");
-		const navBarInstallButton = navBar.querySelector(".uibutton");
-
-		navBarTitle.textContent = app.name;
-		navBarIcon.src = app.iconURL;
-		navBarInstallButton.style.backgroundColor = `${tintColor}`;
+	const navigationBar = document.getElementById("nav-bar");
+	// Title
+	navigationBar.querySelector("#title>p").textContent = app.name;
+	// App icon
+	navigationBar.querySelector("#title>img").src = app.iconURL;
+	// Install button
+	navigationBar.querySelector(".uibutton").style.backgroundColor = `${tintColor}`;

 	// 
 	// App header
-		//
 	const appHeader = document.querySelector("#main .app-header");
-		const appHeaderIcon = appHeader.querySelector("img");
-		const appHeaderTitle = appHeader.querySelector(".title");
-		const appHeaderSubtitle = appHeader.querySelector(".subtitle");
-		const appHeaderInstallButton = appHeader.querySelector(".uibutton");
-		const appHeaderBackground = appHeader.querySelector(".background");
-
-		appHeaderIcon.src = app.iconURL;
-		appHeaderTitle.textContent = app.name;
-		appHeaderSubtitle.textContent = app.developerName;
-		appHeaderInstallButton.style.backgroundColor = tintColor;
-		appHeaderBackground.style.backgroundColor = tintColor;
-
-		// 
-		// Preview
-		// 
-		const preview = document.getElementById("preview");
-		const previewSubtitle = preview.querySelector("#subtitle");
-		const previewScreenshots = preview.querySelector("#screenshots");
-		const previewDescription = preview.querySelector("#description");
-
-		previewSubtitle.textContent = app.subtitle;
-		app.screenshotURLs.forEach(url => {
-			previewScreenshots.insertAdjacentHTML("beforeend", `<img src="${url}" alt="">`);
-		});
-
-		previewDescription.innerHTML = formatString(app.localizedDescription);
+	// Icon
+	appHeader.querySelector("img").src = app.iconURL;
+	// App name
+	appHeader.querySelector(".title").textContent = app.name;
+	// Developer name
+	appHeader.querySelector(".subtitle").textContent = app.developerName;
+	// Install button
+	appHeader.querySelector(".uibutton").style.backgroundColor = tintColor;
+	// Background
+	appHeader.querySelector(".background").style.backgroundColor = tintColor;

 	const more = `
 	<a id="more" onclick="revealTruncatedText(this);">
 		<button style="color: ${tintColor};">more</button>
 	</a>`;

-		if (previewDescription.scrollHeight > previewDescription.clientHeight)
-			previewDescription.insertAdjacentHTML("beforeend", more);
-
-		// 
-		// Version info
-		// 
-		const versionDate = document.getElementById("version-date");
-		const version = document.getElementById("version");
-		const versionSize = document.getElementById("version-size");
-		const versionDescription = document.getElementById("version-description");
-
-		// Version date
-		const versionDateObject = new Date(app.versionDate),
-			month = versionDateObject.toUTCString().split(" ")[2],
-			date = versionDateObject.getDate(),
-			dateString = `${month} ${date}, ${versionDateObject.getFullYear()}`;
-		const today = new Date();
-		const msPerDay = 60 * 60 * 24 * 1000;
-		const msDifference = today.valueOf() - versionDateObject.valueOf();
-		versionDate.textContent = dateString;
-		if (msDifference <= msPerDay) // Today
-			versionDate.textContent = "Today";
-		else if (msDifference <= msPerDay * 2) // Yesterday
-			versionDate.textContent = "Yesterday";
-
-		// Version number
-		version.textContent = `Version ${app.version}`;
-
-		// Version size
-		const units = ["B", "KB", "MB", "GB"];
-		var appSize = app.size, c = 0;
-		while (appSize > 1024) {
-			appSize = parseFloat(appSize / 1024).toFixed(1);
-			c++;
-		}
-		versionSize.textContent = `${appSize} ${units[c]}`;
-
-		// Version description
-		versionDescription.innerHTML = formatString(app.versionDescription);
-		if (versionDescription.scrollHeight > versionDescription.clientHeight)
-			versionDescription.insertAdjacentHTML("beforeend", more);
-
-		// 
-		// Permissions
-		// 
-		const permissions = document.getElementById("permissions");
-
-		if (app.permissions)
-			permissions.querySelector(".permission").remove();
-
-		app.permissions?.forEach(permission => {
-			let permissionType = "Unknown", icon = "gear-wide-connected";
-			switch (permission.type) {
-				case "background-audio":
-					permissionType = "Background Audio";
-					// icon = "audio";
-					icon = "volume-up-fill";
-					break;
-				case "background-fetch":
-					permissionType = "Background Fetch";
-					// icon = "fetch";
-					icon = "arrow-repeat"
-					break;
-				case "photos":
-					permissionType = "Photos"
-					// icon = "photos";
-					icon = "image-fill";
-					break;
-				default:
-					break;
-			}
-
-			const html = `
-			<div class="permission">
-				<i class="bi-${icon}" style="color: ${tintColor};"></i>
-				<div class="text">
-					<p class="title">${permissionType}</p>
-					<p class="description">${permission.usageDescription ?? "No description provided."}</p>
-				</div>
-			</div>`;
-
-			permissions.insertAdjacentHTML("beforeend", html);
-		});
-
-		waitForAllImagesToLoad();
-	});
-
-function revealTruncatedText(moreButton) {
+	this.revealTruncatedText = moreButton => {
 		const textId = moreButton.parentNode.id;
 		const text = document.getElementById(textId);
 		text.style.display = "block";
@@ -193,8 +82,102 @@ function revealTruncatedText(moreButton) {
 		text.style.webkitLineClamp = "none";
 		text.style.lineClamp = "none";
 		text.removeChild(moreButton)
+	}
+
+	// 
+	// Preview
+	const preview = document.getElementById("preview");
+	// Subtitle
+	preview.querySelector("#subtitle").textContent = app.subtitle;
+	// Screenshots
+	app.screenshotURLs.forEach(url => {
+		preview.querySelector("#screenshots").insertAdjacentHTML("beforeend", `<img src="${url}" alt="">`);
+	});
+	// Description
+	const previewDescription = preview.querySelector("#description");
+	previewDescription.innerHTML = formatString(app.localizedDescription);
+	if (previewDescription.scrollHeight > previewDescription.clientHeight)
+		previewDescription.insertAdjacentHTML("beforeend", more);
+
+	// 
+	// Version info
+	const versionDateElement = document.getElementById("version-date");
+	const versionNumberElement = document.getElementById("version");
+	const versionSizeElement = document.getElementById("version-size");
+	const versionDescriptionElement = document.getElementById("version-description");
+
+	const versionDate = new Date(app.versionDate),
+		month = versionDate.toUTCString().split(" ")[2],
+		date = versionDate.getDate();
+	const today = new Date();
+	const msPerDay = 60 * 60 * 24 * 1000;
+	const msDifference = today.valueOf() - versionDate.valueOf();
+
+	// Version date
+	versionDateElement.textContent = `${month} ${date}, ${versionDate.getFullYear()}`;
+	if (msDifference <= msPerDay)
+		versionDateElement.textContent = "Today";
+	else if (msDifference <= msPerDay * 2)
+		versionDateElement.textContent = "Yesterday";
+
+	// Version number
+	versionNumberElement.textContent = `Version ${app.version}`;
+
+	// Version size
+	const units = ["B", "KB", "MB", "GB"];
+	var appSize = app.size, i = 0;
+	while (appSize > 1024) { i++;
+		appSize = parseFloat(appSize / 1024).toFixed(1);
+	}
+	versionSizeElement.textContent = `${appSize} ${units[i]}`;
+
+	// Version description
+	versionDescriptionElement.innerHTML = formatString(app.versionDescription);
+	if (versionDescriptionElement.scrollHeight > versionDescriptionElement.clientHeight)
+		versionDescriptionElement.insertAdjacentHTML("beforeend", more);
+
+	// 
+	// Permissions
+	const permissions = document.getElementById("permissions");
+	
+	// If permissions specified
+	if (app.permissions)
+		// Remove placeholder permission
+		permissions.querySelector(".permission").remove();
+	else return;
+
+	app.permissions?.forEach(permission => {
+		var permissionType, icon;
+		switch (permission.type) {
+			case "background-audio":
+				permissionType = "Background Audio";
+				icon = "volume-up-fill";
+				break;
+			case "background-fetch":
+				permissionType = "Background Fetch";
+				icon = "arrow-repeat"
+				break;
+			case "photos":
+				permissionType = "Photos"
+				icon = "image-fill";
+				break;
+			default:
+				permissionType = permission.type.replaceAll("-", " ");
+				icon = "gear-wide-connected";
+				break;
+		}
+
+		permissions.insertAdjacentHTML("beforeend", `
+		<div class="permission">
+			<i class="bi-${icon}" style="color: ${tintColor};"></i>
+			<div class="text">
+				<p class="title">${permissionType}</p>
+				<p class="description">${permission.usageDescription ?? "No description provided."}</p>
+			</div>
+		</div>`);
+	});
 }

-function nope() {
-	window.location.replace("index.html");
+function exit() {
+	window.location.replace(`home.html?source=${sourceURL}`);
 }
--- a/js/apps.js
+++ b/js/apps.js
@@ -1,29 +1,25 @@
-addNavigationBar("All Apps");
-
-fetch(sourceURL)
-	.then(response => response.json())
-	.then(json => {
-		if (json.tintColor) setTintColor(json.tintColor)
+insertNavigationBar("All Apps");

+function main(json) {
+	// Set tab title
 	document.title = `Apps - ${json.name}`;

+	// Sort apps in decending order of version date (newest first)
 	json.apps.sort((a, b) => (new Date(b.versionDate)).valueOf() - (new Date(a.versionDate)).valueOf());
+
+	// Create & insert app items
 	json.apps.forEach(app => {
 		if (app.beta) return; // Ignore beta apps

-			const urls = app.screenshotURLs;
-
 		let html = `
-			<div class="app-container">`;
-			html +=
-				appHeaderHTML(app);
-			html += `
+		<div class="app-container">
+			${appHeaderHTML(app) }
 			<p style="text-align: center; font-size: 0.9em;">${app.subtitle ?? ""}</p>`;
-			if (urls) {
+		if (app.screenshotURLs) {
 			html += `
 			<div class="screenshots">`;
-				for (let i = 0; i < urls.length, i < 2; i++) html += `
-					<img src="${urls[i]}" class="screenshot">`;
+			for (let i = 0; i < app.screenshotURLs.length, i < 2; i++) html += `
+				<img src="${app.screenshotURLs[i]}" class="screenshot">`;
 			html += `
 			</div>`;
 		}
@@ -32,6 +28,4 @@ fetch(sourceURL)

 		document.getElementById("apps").insertAdjacentHTML("beforeend", html);
 	});
-
-		waitForAllImagesToLoad();
-	});
+}
--- a/js/home.js
+++ b/js/home.js
@@ -1,38 +1,33 @@
-fetch(sourceURL)
-	.then(response => response.json())
-	.then(json => {
+function main(json) {
+	// Set "View All News" link
 	document.querySelector("#news a").href = `news.html?source=${sourceURL}`;
+	// Set "View All Apps" link
 	document.querySelector("#apps a").href = `apps.html?source=${sourceURL}`;

-		if (json.tintColor) setTintColor(json.tintColor)
-
+	// Set tab title
 	document.title = json.name;
+	// Set page title
 	document.getElementById("title").innerText = json.name;

-		// Sort apps in descending order
-		json.apps.sort((a, b) => {
-			// If b < a
-			return (new Date(b.versionDate)).valueOf() - (new Date(a.versionDate)).valueOf();
-		});
-
-		if (json.news && json.news.length >= 1) {
-			// Sort news in decending order (latest first)
-			json.news.sort((a, b) => (new Date(b.date)).valueOf() - (new Date(a.date)).valueOf());
-
+	// 
 	// News
-			if (json.news.length == 1) {
-				document.getElementById("news-items").insertAdjacentHTML("beforeend", newsItemHTML(json.news[0], json.apps, true));
-				document.getElementById("news-items").classList.add("one");
-			} else if (json.news.length > 1) {
-				for (let i = 0; i < 5 && i < json.news.length; i++) {
-					document.getElementById("news-items").insertAdjacentHTML("beforeend", newsItemHTML(json.news[i], json.apps, true));
-				}
-			}
-		} else {
-			document.getElementById("news").remove();
-		}
+	if (json.news && json.news.length >= 1) {
+		// Sort news in decending order of date (latest first)
+		json.news.sort((a, b) => // If b < a
+			(new Date(b.date)).valueOf() - (new Date(a.date)).valueOf());

-		// Apps
+		if (json.news.length == 1) {
+			document.getElementById("news-items").insertAdjacentHTML("beforeend", newsItemHTML(json.news[0], true));
+			document.getElementById("news-items").classList.add("one");
+		} else for (let i = 0; i < 5 && i < json.news.length; i++)
+			document.getElementById("news-items").insertAdjacentHTML("beforeend", newsItemHTML(json.news[i], true));
+	} else document.getElementById("news").remove();
+
+	// Sort apps in descending order of version date
+	json.apps.sort((a, b) => (new Date(b.versionDate)).valueOf() - (new Date(a.versionDate)).valueOf());
+	
+	// 
+	// Featured apps
 	let count = 1;
 	json.apps.forEach(app => {
 		// Max: 3 featured apps if not specified
@@ -49,16 +44,13 @@ fetch(sourceURL)
 		count++;
 	});

+	// 
+	// About
 	var description = formatString(json.description);
-		if (description) {
-			document.getElementById("about").insertAdjacentHTML("beforeend", `
+	if (description) document.getElementById("about").insertAdjacentHTML("beforeend", `
 		<div class="item">
 			<p>${description}</p>
 		</div>
 	`); 
-		} else {
-			document.getElementById("about").remove();
-		}
-
-		waitForAllImagesToLoad();
-	});
+	else document.getElementById("about").remove();
+}
--- a/js/index.js
+++ b/js/index.js
@@ -1,16 +1,17 @@
-const textField = document.querySelector("input");
+(function main() {
+	// If source specified, go straight to home page
+	if (urlSearchParams.has('source') && sourceURL.match(urlRegex))
+		window.location.replace(`home.html?source=${sourceURL}`);

-textField.addEventListener("keypress", function (event) {
-	// If the user presses the "Enter" key on the keyboard
+	const textField = document.querySelector("input");
+	textField.addEventListener("keypress", function (event) {
 		if (event.key === "Enter") {
 			event.preventDefault();

 			const url = textField.value;
-		const urlRegex = /(https?:\/\/[^ ]*)/g;
-
 			if (!url.match(urlRegex))
 				alert("Invalid URL.");
-		else 
-			window.location.replace(`home.html?source=${url}`);
+			else window.location.replace(`home.html?source=${url}`);
 		}
-});
+	});
+})();
--- a/js/main.js
+++ b/js/main.js
@@ -1,50 +1,23 @@
-const urlSearchParams = new URLSearchParams(window.location.search);
-const sourceURL = urlSearchParams.get('source');
-
-// If no source
-if (!urlSearchParams.has('source') || !sourceURL) {
-	alert(`No source provided.`);
+(function () {
+	// If no source or source is not a URL
+	if (!urlSearchParams.has('source') || !sourceURL.match(urlRegex))
 		window.location.replace("index.html");
-}
+	insertAddToAltStoreBanner();
+})()

-const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig; // https://stackoverflow.com/a/8943487
-function formatString(string) {
-	if (!string) return undefined;
+fetch(sourceURL, {
+	cache: "force-cache"
+})
+	.then(response => response.json())
+	.then(json => {
+		// Set tint color
+		if (json.tintColor) setTintColor(json.tintColor);

-	// URLs
-	const urlArray = string.match(urlRegex);
-	const urlSet = [...new Set(urlArray)]; // Converting to set to remove duplicates
-	urlSet.forEach(url => string = string.replaceAll(url, `<a href="${url}">${url}</a>`));
-
-	// New lines
-	return string.replaceAll("\n", "<br>");
-}
-
-// If source is not a URL
-if (!sourceURL.match(urlRegex)) {
-	alert("Invalid URL.");
-	window.location.replace("index.html");
-}
-
-// Back button
-document.getElementById("back")?.addEventListener("click", () => history.back(1));
-
-// Add to AltStore banner
-document.getElementById("top")?.insertAdjacentHTML("afterbegin", `
-	<div class="uibanner">
-		<img src="https://user-images.githubusercontent.com/705880/65270980-1eb96f80-dad1-11e9-9367-78ccd25ceb02.png" alt="altstore-icon" class="icon">
-		<div class="content">
-			<div class="text-container">
-				<p class="title-text">AltStore <span class="small beta badge"></span></p>
-				<p class="detail-text">
-					Add this source to AltStore to receive app updates (requires AltStore beta)
-				</p>
-			</div>
-			<a href="altstore://source?url=${sourceURL}">
-				<button>Add</button>
-			</a>
-		</div>
-	</div>`);
+		setApps(json.apps);
+		main(json);
+		waitForAllImagesToLoad();
+	})
+	.catch(error => console.error("An error occurred.", error));

 function waitForAllImagesToLoad() {
 	const allImages = document.querySelectorAll("img");
@@ -54,89 +27,15 @@ function waitForAllImagesToLoad() {
 		// New img element that won't be rendered to the DOM
 		var newImage = document.createElement("img");
 		// Attach load listener
-		newImage.addEventListener("load", imageLoaded);
+		newImage.addEventListener("load", loaded);
 		// Set src
 		newImage.src = image.src;
-	})
+	});

-	function imageLoaded() {
+	function loaded() {
 		if (++count == allImages.length) {
 			document.querySelector("body").classList.remove("loading");
 			document.getElementById("loading").remove();
 		}
 	}
 }
-
-function setTintColor(color) {
-	document.querySelector(':root').style.setProperty("--accent-color", `#${color}`);
-}
-
-function addNavigationBar(title) {
-	document.getElementById("top").insertAdjacentHTML("beforeend", `
-	<div id="nav-bar">
-		<button id="back" type="button">
-			<i class="bi bi-chevron-left"></i>
-			Back
-		</button>
-		<div id="title">
-			<p>${title ?? ""}</p>
-		</div>
-		<button id="back" class="hidden">
-			<i class="bi bi-chevron-left"></i>
-			Back
-		</button>
-	</div>`);
-	document.getElementById("back")?.addEventListener("click", () => history.back(1));
-}
-
-function newsItemHTML(news, apps, minimal) {
-	let html = `
-	<div class="news-item-wrapper">`;
-
-	if (news.url) html += `
-		<a href="${news.url}">`;
-	html += `
-		<div class="item" style="background-color: #${news.tintColor};">
-			<div class="text">
-				<h3>${news.title}</h3>
-				<p>${news.caption}</p>
-			</div>`;
-	if (news.imageURL && !minimal) html += `
-			<div class="image-wrapper">
-				<img src="${news.imageURL}">
-			</div>`;
-	html += `
-		</div>`;
-	if (news.url) html +=
-		"</a>";
-
-	if (news.appID && !minimal) {
-		const app = apps.find(app => app.bundleIdentifier == news.appID);
-		if (app) html += appHeaderHTML(app);
-	}
-
-	html += "</div>";
-
-	return html;
-}
-
-function appHeaderHTML(app) {
-	return `
-	<div class="item">
-		<div class="app-header">
-			<div class="content">
-				<img src="${app.iconURL}" alt="">
-				<div class="right">
-					<div class="text">
-						<p class="title">${app.name}</p>
-						<p class="subtitle">${app.developerName}</p>
-					</div>
-					<a href="app.html?source=${sourceURL}&id=${app.bundleIdentifier}">
-					<button class="uibutton" style="background-color: #${app.tintColor};">View</button>
-					</a>
-				</div>
-			</div>
-			<div class="background" style="background-color: #${app.tintColor};"></div>
-		</div>
-	</div>`;
-}
--- a/js/news.js
+++ b/js/news.js
@@ -1,16 +1,12 @@
-addNavigationBar("All News");
-
-fetch(sourceURL)
-	.then(response => response.json())
-	.then(json => {
-		if (json.tintColor) setTintColor(json.tintColor)
+insertNavigationBar("All News");

+function main(json) {
+	// Set tab title
 	document.title = `News - ${json.name}`;

+	// Sort news by latest
 	json.news.sort((a, b) => (new Date(b.date)).valueOf() - (new Date(a.date)).valueOf());
-		json.news.forEach(news =>
-			document.getElementById("news").insertAdjacentHTML("beforeend", newsItemHTML(news, json.apps))
-		);

-		waitForAllImagesToLoad();
-	});
+	// Create & insert news items
+	json.news.forEach(news => document.getElementById("news").insertAdjacentHTML("beforeend", newsItemHTML(news)));
+}
--- a/js/shared.js
+++ b/js/shared.js
@@ -0,0 +1,109 @@
+const urlSearchParams = new URLSearchParams(window.location.search);
+const sourceURL = urlSearchParams.get('source');
+// https://stackoverflow.com/a/8943487
+const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
+
+(function (global) {
+	var apps;
+	global.setApps = array => 
+		apps = array;
+	global.getAppWithBundleId = bundleId =>
+		apps?.find(app => app.bundleIdentifier == bundleId) ?? undefined;
+
+	setUpBackButton();
+})(this);
+
+const newsItemHTML = (news, minimal = false) => `
+<div class="news-item-wrapper"> ${news.url ? 
+	"<a href='" + news.url + "'>" : ""}
+		<div class="item" style="background-color: #${news.tintColor};">
+			<div class="text">
+				<h3>${news.title}</h3>
+				<p>${news.caption}</p>
+			</div>${news.imageURL && !minimal ? 
+			"<div class='image-wrapper'>" +
+				"<img src='" + news.imageURL + "'>" +
+			"</div>" : ""} 
+		</div> ${news.url ? 
+	"</a>" : ""} ${news.appID && !minimal ?  
+	appHeaderHTML(getAppWithBundleId(news.appID)) ?? "" : ""}
+</div>`;
+
+const appHeaderHTML = app => app ? `
+<div class="item">
+	<div class="app-header">
+		<div class="content">
+			<img src="${app.iconURL}" alt="">
+			<div class="right">
+				<div class="text">
+					<p class="title">${app.name}</p>
+					<p class="subtitle">${app.developerName}</p>
+				</div>
+				<a href="app.html?source=${sourceURL}&id=${app.bundleIdentifier}">
+					<button class="uibutton" style="background-color: #${app.tintColor};">View</button>
+				</a>
+			</div>
+		</div>
+		<div class="background" style="background-color: #${app.tintColor};"></div>
+	</div>
+</div>` : undefined;
+
+function formatString(string) {
+	if (!string) return undefined;
+
+	// URLs
+	const urlArray = string.match(urlRegex);
+	const urlSet = [...new Set(urlArray)]; // Converting to set to remove duplicates
+	urlSet.forEach(url => string = string.replaceAll(url, `<a href="${url}">${url}</a>`));
+
+	// New lines
+	return string.replaceAll("\n", "<br>");
+}
+
+function insertAddToAltStoreBanner() {
+	document.getElementById("top")?.insertAdjacentHTML("afterbegin", `
+	<div class="uibanner">
+		<img src="https://user-images.githubusercontent.com/705880/65270980-1eb96f80-dad1-11e9-9367-78ccd25ceb02.png" alt="altstore-icon" class="icon">
+		<div class="content">
+			<div class="text-container">
+				<p class="title-text">AltStore <span class="small beta badge"></span></p>
+				<p class="detail-text">
+					Add this source to AltStore to receive app updates (requires AltStore beta)
+				</p>
+			</div>
+			<a href="altstore://source?url=${sourceURL}">
+				<button>Add</button>
+			</a>
+		</div>
+	</div>`);
+}
+
+function insertNavigationBar(title) {
+	document.getElementById("top")?.insertAdjacentHTML("beforeend", `
+	<div id="nav-bar">
+		<button id="back" type="button">
+			<i class="bi bi-chevron-left"></i>
+			Back
+		</button>
+		<div id="title">
+			<p>${title ?? ""}</p>
+		</div>
+		<button id="back" class="hidden">
+			<i class="bi bi-chevron-left"></i>
+			Back
+		</button>
+	</div>`);
+	setUpBackButton();
+}
+
+function setTintColor(color) {
+	document.querySelector(':root')?.style.setProperty("--accent-color", `#${color}`);
+}
+
+function setUpBackButton() {
+	document.getElementById("back")?.addEventListener("click", () => history.back(1));
+}
+
+const $ = selector => selector.startsWith("#") && !selector.includes(".") && !selector.includes(" ")
+	? document.getElementById(selector.substring(1))
+	: document.querySelectorAll(selector);
--- a/news.html
+++ b/news.html
@@ -4,9 +4,9 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" href="css/main.css">
-	<link rel="stylesheet" href="css/news.css">
+	<link rel="stylesheet" href="css/shared.css">
 	<link rel="stylesheet" href="css/uibanner.css">
+	<link rel="stylesheet" href="css/news.css">
 </head>
 <body class="loading">
 	<div id="loading">
@@ -18,7 +18,8 @@
 	<div id="main">
 		<div id="news"></div>
 	</div>
-	<script src="js/main.js"></script>
+	<script src="js/shared.js"></script>
 	<script src="js/news.js"></script>
+	<script src="js/main.js"></script>
 </body>
 </html>