initial rerendering of dirlist

.gitignore

@@ -6,4 +6,5 @@ _site
 .bundle
 vendor/bundle
 .DS_Store
-Gemfile.lock
+Gemfile.lock
+usb-butter*

assets/css/butter-dir-listing.css

@@ -18,7 +18,6 @@ a:focus {
 }
 
 body {
-    background-color: #FFDF3F;
 }
 
 h2 {
@@ -58,14 +57,56 @@ tbody tr.d:first-of-type
 }
 
 div.list {
-    background-color: white;
+    /* Hide the builtin listing, we're going to render our own. */
-    border-top: 1px solid #646464;
+    display: none;
-    border-bottom: 1px solid #646464;
-    padding-top: 10px;
-    padding-bottom: 14px;
 }
 
 div.foot {
     /* No need to display the lighttpd version; this is user-facing. */
     display: none;
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 30px;
+    box-sizing: border-box;
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+}
+
+.logo-container img {
+    width: 20px;
+    height: 20px;
+}
+
+.text-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-grow: 1;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+
+.text-container .upper-text {
+    font-size: 14px;
+    line-height: 18px;
+}
+
+.text-container .lower-text {
+    font-size: 12px;
+    color: gray;
+}
+
+.empty-block {
+    width: 30px;
+    height: 30px;
 }

assets/images/directory.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9757 6H24.7535L26.6498 7.73281H13.5637C13.8132 6.76612 14.7691 6 15.9757 6Z" fill="#7571ED" stroke="#7571ED"/>
+<path d="M13.0377 5H4.00943C2.35425 5 1.01505 6.2375 1.01505 7.75L1 24.25C1 25.7625 2.35425 27 4.00943 27H28.0849C29.7401 27 31 25.7512 31 24.2387V10.5C31 8.9875 29.7307 7.8 28.0755 7.8H16.0943L13.0377 5Z" fill="#C6C5C3"/>
+</svg>

assets/js/butter-dir-listing.js

@@ -1 +1,84 @@
-console.log("butter-dir-listing.js loaded!");
+console.log("butter-dir-listing.js loaded!");
+
+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">
+        </div>
+        <div class="text-container">
+            <div class="upper-text">${directory_name}</div>
+            <div class="lower-text">${number_of_items} items</div>
+        </div>
+        <div class="empty-block"></div>
+    </a>`;
+}
+
+// Function to extract directory listing information
+function extractDirectoryListing() {
+    // Get all rows in the table body
+    const rows = document.querySelectorAll('tbody tr');
+    console.log('Rows:', rows)
+
+    // Initialize arrays to hold file and folder information
+    const files = [];
+    const folders = [];
+
+    // Iterate over each row
+    rows.forEach(row => {
+        const nameCell = row.querySelector('td.n a');
+        const modifiedCell = row.querySelector('td.m');
+        const sizeCell = row.querySelector('td.s');
+        const typeCell = row.querySelector('td.t');
+
+        const name = nameCell.textContent;
+        const lastModified = modifiedCell.textContent.trim();
+        const size = sizeCell.textContent.trim();
+        const type = typeCell.textContent.trim();
+        const href = nameCell.getAttribute('href');
+
+        // Determine if it's a file or folder based on the class of the row or type
+        if (type === 'Directory' && name !== '..') {
+            folders.push({
+                name: name.replace('/', ''),  // Remove the trailing slash
+                lastModified: lastModified,
+                size: size,
+                type: type,
+                href: href
+            });
+        } else {
+            files.push({
+                name: name,
+                lastModified: lastModified,
+                size: size,
+                type: type,
+                href: href
+            });
+        }
+    });
+
+    return { files, folders };
+}
+
+window.onload = function() {
+    // Example usage
+    const { files, folders } = extractDirectoryListing();
+    console.log('Files:', files);
+    console.log('Folders:', folders);
+
+    // insert a new div before div.list
+    const folderListing = document.createElement("div");
+    folderListing.classList.add('folder-list');
+
+    // for each folder, add a div to folderListing
+    folders.forEach(folder => {
+        const folderDiv = document.createElement('div');
+        folderDiv.classList.add('folder-row');
+        folderDiv.innerHTML = getFolderDivHTML(folder.name, 0, folder.href);
+        folderListing.appendChild(folderDiv);
+    });
+
+    // do the insertion
+    const listDiv = document.querySelector('div.list');
+    listDiv.parentNode.insertBefore(folderListing, listDiv);
+}

simulated-usb-butter/index.html

@@ -29,24 +29,11 @@ layout: empty
                 </tr>
             </thead>
             <tbody>
-                <tr class="d">
+                <tr class="d"><td class="n"><a href="../">..</a>/</td><td class="m">&nbsp;</td><td class="s">- &nbsp;</td><td class="t">Directory</td></tr>
-                    <td class="n"><a href="../">..</a>/</td>
+                <tr class="d"><td class="n"><a href="John%27s%20Folder/">John&#x27;s Folder</a>/</td><td class="m">2024-Jun-05 12:29:30</td><td class="s">- &nbsp;</td><td class="t">Directory</td></tr>
-                    <td class="m">&nbsp;</td>
+                <tr class="d"><td class="n"><a href="johns_folder/">johns_folder</a>/</td><td class="m">2024-May-01 15:39:05</td><td class="s">- &nbsp;</td><td class="t">Directory</td></tr>
-                    <td class="s">- &nbsp;</td>
+                <tr class="d"><td class="n"><a href="ocw/">ocw</a>/</td><td class="m">2024-Mar-29 20:42:52</td><td class="s">- &nbsp;</td><td class="t">Directory</td></tr>
-                    <td class="t">Directory</td>
+                <tr><td class="n"><a href="some_file.txt">some_file.txt</a></td><td class="m">2024-Jun-05 11:54:57</td><td class="s">0.0K</td><td class="t">text/plain;charset=utf-8</td></tr>                
-                </tr>
-                <tr class="d">
-                    <td class="n"><a href="johns_folder/">johns_folder</a>/</td>
-                    <td class="m">2024-May-01 15:39:05</td>
-                    <td class="s">- &nbsp;</td>
-                    <td class="t">Directory</td>
-                </tr>
-                <tr class="d">
-                    <td class="n"><a href="ocw/">ocw</a>/</td>
-                    <td class="m">2024-Mar-29 20:42:52</td>
-                    <td class="s">- &nbsp;</td>
-                    <td class="t">Directory</td>
-                </tr>
             </tbody>
         </table>
     </div>