Conditionally display maps and app store tiles

assets/js/butter-dir-listing.js

@@ -11,6 +11,10 @@ const supported_extensions = ["apk", "deb", "dmg", "pdf", "exe", "jpg", "png", "
 const usbRoot = "usb-butter/";
 const inferredBaseURL = window.location.pathname.split("/" + usbRoot)[0] + "/";
 
+// Don't display these in the dirlisting; they get first-class treatment
+// on the homepage.
+const foldersToHide = ["appstore", "osm-map-files"];
+
 const getFolderDivHTML = (directory_name, number_of_items, href) => {
     return `
     <a class="filerow" href="${href}">
@@ -91,7 +95,7 @@ function extractDirectoryListing(doc) {
 
         // Determine if it's a file or folder based on the class of the row or type
         if (type === 'Directory') {
-            if (name !== '..') {
+            if (name !== '..' && !foldersToHide.includes(name)) {
                 folders.push({
                     name: name.replace('/', ''),  // Remove the trailing slash
                     lastModified: lastModified,

assets/js/main.js

@@ -7,9 +7,9 @@ MicroModal.init({
 });
 
 // Slick Slider [https://kenwheeler.github.io/slick/]
-$(document).ready(function(){
+$(document).ready(function () {
   let prevButton = '<span class="slick-prev icon-chevron-thin-left"><i class="icono-arrow-right"></i></span>';
-	let nextButton = '<span class="slick-next icon-chevron-thin-right"><i class="icono-arrow-left"></i></span>';
+  let nextButton = '<span class="slick-next icon-chevron-thin-right"><i class="icono-arrow-left"></i></span>';
   $('.screens-slider').slick({
     prevArrow: prevButton,
     nextArrow: nextButton,
@@ -35,18 +35,27 @@ if (btnModal) {
   });
 }
 
-// If #usb-butter exists and a request to thishost.tld/usb-butter returns status 200
-// change display of #usb-butter to inherit
-const usbButter = document.querySelector('#usb-butter');
-const usbButterPlaceholder = document.querySelector('#usb-butter-placeholder');
-if (usbButter && usbButterPlaceholder) {
-  fetch(usbButter.dataset.url)
-    .then(response => {
-      console.log(response);
-      if (response.status === 200) {
-        usbButter.style.display = 'flex';
-        usbButterPlaceholder.style.display = 'none';
+function renderPlaceholders() {
+  const usbButter = document.querySelector('#usb-butter');
+  const appstoreCard = document.querySelector('#appstore-card');
+  const mapsCard = document.querySelector('#maps-card');
+  const conditionalCards = [appstoreCard, usbButter, mapsCard];
+  for (let card of conditionalCards) {
+    fetch(card.dataset.url)
+      .then(response => {
+        if (response.status === 200) {
+          card.classList.remove("hidden-card");
+          if (card.dataset.placeholderId) {
+            const placeholder = document.querySelector(`#${card.dataset.placeholderId}`);
+            if (placeholder) {
+              placeholder.classList.add("hidden-card");
+            }
+          }
+        }
       }
-    }
-  );
-}
+      );
+  }
+}
+
+
+renderPlaceholders();