Conditionally display maps and app store tiles

.gitignore

@@ -9,3 +9,4 @@ vendor/bundle
 Gemfile.lock
 usb-butter*
 simulated-usb-butter/appstore/*
+simulated-usb-butter/osm-map-files/*

_scss/pages/home.scss

@@ -222,6 +222,12 @@ h1.homepage-title {
   text-decoration: none;
 }
 
+// Apply/Remove this class to conditionally 
+// display the card
+.hidden-card {
+  display: none;
+}
+
 .card-icon {
   width: 60px;
   height: 60px;

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();

index.html

@@ -15,8 +15,8 @@ layout: default
       <div id="usb-butter-placeholder" class="card">
         {% t explore_missing %}
       </div>
-      <a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}"
-        class="card">
+      <a href="{{ site.usb_butter_url }}" id="usb-butter" data-url="{{ site.usb_butter_url }}" data-placeholder-id="usb-butter-placeholder"
+        class="card hidden-card">
         <img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon">
         {% t explore %}
       </a>
@@ -24,11 +24,11 @@ layout: default
         <img src="{{ site.baseurl }}/assets/images/message-icon.svg" alt="Message Icon" class="card-icon">
         {% t message_board %}
       </a>
-      <a href="{{ site.baseurl }}/apps" class="card">
+      <a href="{{ site.usb_butter_url}}/appstore/" id="appstore-card" class="card hidden-card" data-url="{{ site.usb_butter_url}}/appstore/">
         <img src="{{ site.baseurl }}/assets/images/appstore-icon.svg" alt="App Store Icon" class="card-icon">
         {% t app_store %}
       </a>
-      <a href="{{ site.baseurl }}/maps" class="card">
+      <a href="{{ site.baseurl }}/maps" id="maps-card" class="card hidden-card" data-url="{{ site.usb_butter_url}}/osm-map-files/">
         <img src="{{ site.baseurl }}/assets/images/maps-icon.svg" alt="Maps Icon" class="card-icon">
         {% t offline_maps %}
       </a>