display usb-butter section if the usb-butter directory yields 200

_i18n/en.yml

@@ -35,6 +35,10 @@ ipfs_text: 'Upload a file from your device to the Interplanetary File System.  T
 ipfs_button_text: 'Upload'
 ipfs_secondary_cta: 'See what others have uploaded'
 ipfs_image_alt: 'Interplanetary File System logo'
+file_folder_title: 'More data available with or without Internet'
+file_folder_image_alt: 'File folder icon'
+file_folder_text: 'The administrator of this Butter Box uploaded additional content.'
+file_folder_cta: 'View files'
 upload:
   ui_source_ack: "Upload UI upstream source"
   page_title: Upload files to

assets/js/main.js

@@ -32,3 +32,15 @@ const btnModal = document.querySelector('.btn-modal');
 btnModal.addEventListener('click', (event) => {
   event.preventDefault();
 });
+
+// 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');
+if (usbButter) {
+  fetch('/usb-butter')
+    .then(response => {
+      if (response.status === 200) {
+        usbButter.style.display = 'inherit';
+      }
+    });
+}

index.html

@@ -68,6 +68,19 @@ layout: default
       </div>
     </div>
     {% endif %}
+    <!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
+    <div id="usb-butter" class="content-area-wrapper" style="display: none;">
+      <div class="split-content">
+        <div class="left-img">
+          <img src="/assets/images/placeholder-file-folder.webp" alt="{% t file_folder_image_alt %}" />
+        </div>
+        <div class="right-content">
+          <p class="content-subtitle text-black ls-40 mb-2">{% t file_folder_title %}</p>
+          <p class="content-text text-black ls-40 mb-2">{% t file_folder_text %}</p>
+          <a class="btn-main uppercase" href="/usb-butter/">{% t file_folder_cta %}</a>
+        </div>
+      </div>
+    </div>
   </div>
 </section>