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;
 }
@@ -156,3 +158,47 @@ a {
   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,10 +140,9 @@ 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;
@@ -226,6 +225,15 @@ function main(json) {
                 </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;