Add source information to app.html

app.html

@@ -98,6 +98,18 @@
         </div>
       </div>
     </div>
+    <div id="source" class="section">
+      <div class="header">
+        <h2>Discover More From</h2>
+      </div>
+      <a class="container" target="_blank">
+        <div class="row">
+          <p class="row-title">Unknown</p>
+          <p class="row-subtitle">Source</p>
+        </div>
+        <i class="bi bi-arrow-up-right-square"></i>
+      </a>
+    </div>
   </div>
   <script src="js/shared.js"></script>
   <script src="js/app.js"></script>

css/app.css

@@ -101,12 +101,14 @@ a {
 /* What's new */
 
 #whats-new,
-#permissions {
+#permissions,
+#source {
   padding: 1em;
 }
 
 #whats-new .header,
-#permissions .header {
+#permissions .header,
+#source .header {
   margin: 0.35em 0;
   padding: 0;
 }
@@ -155,4 +157,48 @@ a {
 #permissions .permission .description {
   font-size: 0.9em;
   opacity: 0.5;
+}
+
+/* Source */
+#source {
+  padding-top: 0;
+}
+
+#source .row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15em;
+  /* justify-content: space-between; */
+  /* margin: 1em 0; */
+}
+
+#source .container {
+  color: unset;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#source .row>.row-title {
+  font-size: 1.05em;
+  color: var(--app-tint-color);
+}
+
+#source .bi {
+  -webkit-text-stroke: 0.25px;
+  color: var(--app-tint-color);
+}
+
+#source .row>.row-subtitle {
+  color: unset;
+  font-size: 0.9em;
+  opacity: 0.5;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  position: relative;
+  word-wrap: break-word
 }

js/app.js

@@ -140,14 +140,13 @@ function main(json) {
     const permissions = document.getElementById("permissions");
     
     // If permissions specified
-    if (app.permissions)
+    if (app.permissions) {
         // Remove placeholder permission
         permissions.querySelector(".permission").remove();
-    else return;
-
-    app.permissions?.forEach(permission => {
-        var permissionType, icon;
-        switch (permission.type) {
+    
+        app.permissions?.forEach(permission => {
+            var permissionType, icon;
+            switch (permission.type) {
             // AltStore-supported permissions
             case "background-audio":
                 permissionType = "Background Audio";
@@ -214,18 +213,27 @@ function main(json) {
             default:
                 permissionType = permission.type.replaceAll("-", " ");
                 icon = "gear-wide-connected";
-                break;
-        }
+                    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>`);
+        });
+    }
 
-        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>`);
-    });
+    const source = document.getElementById("source");
+    const sourceContainer = source.querySelector(".container");
+    const sourceTitle = source.querySelector(".row-title");
+    const sourceSubtitle = source.querySelector(".row-subtitle");
+    sourceTitle.innerText = json.name;
+    sourceContainer.href = `index.html?source=${sourceURL}`;
+    sourceSubtitle.innerText = json.description ?? "A cool AltStore source.";
 }
 
 function exit() {

js/shared.js

@@ -1,5 +1,5 @@
 const urlSearchParams = new URLSearchParams(window.location.search);
-const sourceURL = urlSearchParams.get('source').replaceAll("+", "%2B");
+const sourceURL = urlSearchParams.get('source')?.replaceAll("+", "%2B");
 // https://stackoverflow.com/a/8943487
 const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;