diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 3b55e1a..6f29a62 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -29,7 +29,7 @@ pages: # Now go build the site we actually want to deploy. - cd .. # simulate the drive being inserted - - mv simulated-usb-butter.html usb-butter.html + - mv simulated-usb-butter usb-butter - "sed -i 's/^baseurl.*/baseurl: \"\\/butter-box-ui\"/' _config.yml" - bundle exec jekyll build -d public artifacts: diff --git a/assets/css/butter-dir-listing.css b/assets/css/butter-dir-listing.css index 8127548..fcd0ccb 100644 --- a/assets/css/butter-dir-listing.css +++ b/assets/css/butter-dir-listing.css @@ -1,58 +1,13 @@ /* Based on the default lighttpd styles, this butters up the UI */ -a, -a:active { - text-decoration: none; - color: blue; -} - -a:visited { - color: #48468F; -} - -a:hover, -a:focus { - text-decoration: underline; - color: red; -} body { -} - -h2 { font-family: "Poppins", sans-serif; - margin-bottom: 12px; } -table { - margin-left: 12px; -} - -th, -td { - font: 90% monospace; - text-align: left; -} - -th { - font-weight: bold; - padding-right: 14px; - padding-bottom: 3px; -} - -td { - padding-right: 14px; -} - -td.s, -th.s { - text-align: right; -} - -/* Don't display the .. nav tool. */ -tbody tr.d:first-of-type -{ +body>h2 { + /* Hide the builtin title "Index of /this/that */ display: none; } @@ -66,25 +21,40 @@ div.foot { display: none; } +h2 { + font-size: 18px; + font-weight: 500; + margin: 10px; +} + +hr { + border: none; + border-top: 1px solid #E6E6E4; + margin: 20px 10px; +} + .container { display: flex; align-items: center; width: 100%; - height: 30px; + height: 44px; + margin: 10px; box-sizing: border-box; + font-family: "Poppins", sans-serif; + text-decoration: none; } .logo-container { display: flex; align-items: center; justify-content: center; - width: 30px; - height: 30px; + width: 32px; + height: 32px; } .logo-container img { - width: 20px; - height: 20px; + width: 32px; + height: 32px; } .text-container { @@ -99,10 +69,13 @@ div.foot { .text-container .upper-text { font-size: 14px; line-height: 18px; + padding: 2px; + color: black; } .text-container .lower-text { font-size: 12px; + padding: 2px; color: gray; } diff --git a/assets/images/explore-home.svg b/assets/images/explore-home.svg new file mode 100644 index 0000000..2390bc8 --- /dev/null +++ b/assets/images/explore-home.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/ext-apk.svg b/assets/images/ext-apk.svg new file mode 100644 index 0000000..89ef6bc --- /dev/null +++ b/assets/images/ext-apk.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/assets/images/ext-deb.svg b/assets/images/ext-deb.svg new file mode 100644 index 0000000..6aa2f95 --- /dev/null +++ b/assets/images/ext-deb.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/assets/images/ext-img.svg b/assets/images/ext-img.svg new file mode 100644 index 0000000..52c8da0 --- /dev/null +++ b/assets/images/ext-img.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/assets/images/ext-pdf.svg b/assets/images/ext-pdf.svg new file mode 100644 index 0000000..6ecc493 --- /dev/null +++ b/assets/images/ext-pdf.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/assets/images/ext-unknown.svg b/assets/images/ext-unknown.svg new file mode 100644 index 0000000..f190336 --- /dev/null +++ b/assets/images/ext-unknown.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/assets/js/butter-dir-listing.js b/assets/js/butter-dir-listing.js index d57c0db..d90823c 100644 --- a/assets/js/butter-dir-listing.js +++ b/assets/js/butter-dir-listing.js @@ -1,5 +1,15 @@ +/** + * This script redraws the default lighttpd directory listing to our custom styles. + * + * Since the person inserting the files has physical access to the box and we serve + * their static sites directly from the USB, ***THIS SCRIPT DOES NOT ATTEMPT TO PREVENT + * INJECTION ATTACKS***. We just pop filenames and the like right into innerHTML. + */ + console.log("butter-dir-listing.js loaded!"); +const supported_extensions = [".apk"]; + const getFolderDivHTML = (directory_name, number_of_items, href) => { return ` @@ -12,7 +22,26 @@ const getFolderDivHTML = (directory_name, number_of_items, href) => {
`; -} +}; + +const getFileDivHTML = (file_name, size, date, href) => { + icon = "ext-unknown.svg"; + extension = file_name.split('.').pop(); + if (supported_extensions.includes(extension)) { + icon = "ext" + extension + ".svg"; + } + return ` + +
+ directory +
+
+
${file_name}
+
${size} | ${date}
+
+
+ `; +}; // Function to extract directory listing information function extractDirectoryListing() { @@ -38,14 +67,16 @@ function extractDirectoryListing() { 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 - }); + if (type === 'Directory') { + if (name !== '..') { + folders.push({ + name: name.replace('/', ''), // Remove the trailing slash + lastModified: lastModified, + size: size, + type: type, + href: href + }); + } } else { files.push({ name: name, @@ -60,7 +91,7 @@ function extractDirectoryListing() { return { files, folders }; } -window.onload = function() { +window.onload = function () { // Example usage const { files, folders } = extractDirectoryListing(); console.log('Files:', files); @@ -69,6 +100,7 @@ window.onload = function() { // insert a new div before div.list const folderListing = document.createElement("div"); folderListing.classList.add('folder-list'); + folderListing.innerHTML = '

Folders

'; // for each folder, add a div to folderListing folders.forEach(folder => { @@ -81,4 +113,24 @@ window.onload = function() { // do the insertion const listDiv = document.querySelector('div.list'); listDiv.parentNode.insertBefore(folderListing, listDiv); + + if (folders.length > 0 && files.length > 0) { + listDiv.parentNode.insertBefore(document.createElement('hr'), listDiv); + } + + // then for files + const fileListing = document.createElement("div"); + fileListing.classList.add('file-list'); + fileListing.innerHTML = '

Files

'; + + // for each file, add a div to fileListing + files.forEach(file => { + const fileDiv = document.createElement('div'); + fileDiv.classList.add('file-row'); + fileDiv.innerHTML = getFileDivHTML(file.name, file.size, file.lastModified, file.href); + fileListing.appendChild(fileDiv); + }); + + // do the insertion + listDiv.parentNode.insertBefore(fileListing, listDiv); } \ No newline at end of file