breadcrumbs

assets/css/butter-dir-listing.css

@@ -1,9 +1,12 @@
 /* Based on the default lighttpd styles, this butters up the UI */
 
-
-
 body {
     font-family: "Poppins", sans-serif;
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
 }
 
 body>h2 {
@@ -21,6 +24,25 @@ div.foot {
     display: none;
 }
 
+.breadcrumbs {
+    display: flex;
+    align-items: center;
+    margin: 10px;
+    height: 34px;
+    .path-next {
+        margin: 0 5px;
+        height: 12px;
+    }
+}
+
+.crumb {
+    align-items: center;
+    color: black;
+    display: flex;
+    font-family: "Poppins", sans-serif;
+    font-size: 14px;
+}
+
 h2 {
     font-size: 18px;
     font-weight: 500;
@@ -33,6 +55,10 @@ hr {
     margin: 20px 10px;
 }
 
+hr.full-width {
+    margin: 0;
+}
+
 .container {
     display: flex;
     align-items: center;
@@ -41,7 +67,6 @@ hr {
     margin: 10px;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
-    text-decoration: none;
 }
 
 .logo-container {

assets/images/home.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="20" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.6923 18.5H17.7692C18.4492 18.5 19 17.9886 19 17.3571V8.48489C19 8.14203 18.8346 7.81775 18.5485 7.6006L12.3446 2.88714C12.0146 2.63714 11.6015 2.5 11.1762 2.5H10.8246C10.3985 2.5 9.98539 2.63714 9.6554 2.88714L3.45154 7.6006C3.16538 7.81775 3 8.14203 3 8.48489V17.3571C3 17.9886 3.55076 18.5 4.23076 18.5H7.30766C7.64766 18.5 7.92304 18.2443 7.92304 17.9286V12.7857C7.92304 12.1543 8.4738 11.6428 9.1538 11.6428H12.8461C13.5261 11.6428 14.0768 12.1543 14.0768 12.7857V17.9286C14.0768 18.2443 14.3523 18.5 14.6923 18.5Z" fill="black"/>
+</svg>
+    

assets/images/next.svg

@@ -0,0 +1,4 @@
+<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.316 2.17H1.926L5.314 5.376L1.926 8.596H0.316L3.704 5.376L0.316" fill="black"/>
+</svg>
+    

assets/js/butter-dir-listing.js

@@ -96,8 +96,39 @@ window.onload = function () {
     const { files, folders } = extractDirectoryListing();
     console.log('Files:', files);
     console.log('Folders:', folders);
+    const listDiv = document.querySelector('div.list');
 
-    // insert a new div before 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, '');
+    console.log("Path:", path);
+
+    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>
+    `;
+    pathSteps = path.split('/');
+    let pathToHere = usbRoot;
+    pathSteps.forEach((step, index) => {
+        pathToHere += step + '/';
+        if (step !== "") {
+            breadcrumbHTML += `
+            <a href="${pathToHere}" class="crumb"><img class="path-next" src="/assets/images/next.svg">${step}</a>`;
+        }
+    });
+    breadcrumbs.innerHTML = breadcrumbHTML;
+    listDiv.parentNode.insertBefore(breadcrumbs, listDiv);
+
+    // hr
+    const fullWithHR = document.createElement('hr');
+    fullWithHR.classList.add('full-width');
+    listDiv.parentNode.insertBefore(fullWithHR, listDiv);
+
+    // Create a folder listing
     const folderListing = document.createElement("div");
     folderListing.classList.add('folder-list');
     folderListing.innerHTML = '<h2>Folders</h2>';
@@ -111,7 +142,6 @@ window.onload = function () {
     });
 
     // do the insertion
-    const listDiv = document.querySelector('div.list');
     listDiv.parentNode.insertBefore(folderListing, listDiv);
 
     if (folders.length > 0 && files.length > 0) {