From e78ccc97583e40d580a6225724bca26346d82c20 Mon Sep 17 00:00:00 2001
From: John Hess <john@jthess.com>
Date: Wed, 5 Jun 2024 14:26:24 -0500
Subject: [PATCH] calculate a baseurl

---
 assets/js/butter-dir-listing.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/assets/js/butter-dir-listing.js b/assets/js/butter-dir-listing.js
index 819628d..dc5f9f3 100644
--- a/assets/js/butter-dir-listing.js
+++ b/assets/js/butter-dir-listing.js
@@ -9,12 +9,15 @@
 console.log("butter-dir-listing.js loaded!");
 
 const supported_extensions = [".apk"];
+const usbRoot = "/usb-butter/";
+const inferredBaseURL = window.location.pathname.split("/usb-butter/")[0] + "/";
+console.log("Inferred Base URL:", inferredBaseURL);
 
 const getFolderDivHTML = (directory_name, number_of_items, href) => {
     return `
     <a class="container" href="${href}">
         <div class="logo-container">
-            <img src="/assets/images/directory.svg" alt="directory">
+            <img src="${inferredBaseURL}assets/images/directory.svg" alt="directory">
         </div>
         <div class="text-container">
             <div class="upper-text">${directory_name}</div>
@@ -33,7 +36,7 @@ const getFileDivHTML = (file_name, size, date, href) => {
     return `
     <a class="container" href="${href}">
         <div class="logo-container">
-            <img src="/assets/images/${icon}" alt="directory">
+            <img src="${inferredBaseURL}assets/images/${icon}" alt="directory">
         </div>
         <div class="text-container">
             <div class="upper-text">${file_name}</div>
@@ -99,7 +102,6 @@ window.onload = function () {
     const listDiv = document.querySelector('div.list');
 
     // Header with breadcrumbs
-    const usbRoot = "/usb-butter/";
     const h2Path = document.querySelector('h2').textContent;
     console.log("H2 Path:", h2Path);
     const path = h2Path.replace('Index of ', '').replace(usbRoot, '');
@@ -108,8 +110,8 @@ window.onload = function () {
     const breadcrumbs = document.createElement("div");
     breadcrumbs.classList.add('breadcrumbs');
     let breadcrumbHTML = `
-        <a href="/"><img class="home-icon" src="/assets/images/home.svg" alt="home"></a>
-        <a href="${usbRoot}" class="crumb"><img class="path-next" src="/assets/images/next.svg">Explore</a>
+        <a href="/"><img class="home-icon" src="${inferredBaseURL}assets/images/home.svg" alt="home"></a>
+        <a href="${usbRoot}" class="crumb"><img class="path-next" src="${inferredBaseURL}assets/images/next.svg">Explore</a>
     `;
     pathSteps = path.split('/');
     let pathToHere = usbRoot;
@@ -117,7 +119,7 @@ window.onload = function () {
         pathToHere += step + '/';
         if (step !== "") {
             breadcrumbHTML += `
-            <a href="${pathToHere}" class="crumb"><img class="path-next" src="/assets/images/next.svg">${step}</a>`;
+            <a href="${pathToHere}" class="crumb"><img class="path-next" src="${inferredBaseURL}assets/images/next.svg">${step}</a>`;
         }
     });
     breadcrumbs.innerHTML = breadcrumbHTML;