in directory listings, print file size and modification date

warren-bank · Dec 22, 2021 · 829c1d3 · 829c1d3
1 parent 47d5e3f
commit 829c1d3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 9 deletions.
diff --git a/lib/serve-handler/src/directory.js b/lib/serve-handler/src/directory.js
@@ -44,10 +44,18 @@ const staticTemplateStrings = {
         font-style: normal;
       }
       body > main > ul#files {
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: column;
         margin: 0;
         padding: 1.5em 0 0 0;
       }
       body > main > ul#files > li {
+        flex-grow: 1;
+        justify-content: flex-start;
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: row;
         list-style: none;
         font-size: 14px;
       }
@@ -60,19 +68,23 @@ const staticTemplateStrings = {
         line-height: 20px;
       }
       body > main > ul#files > li > a {
-        color: #000;
+        flex-grow: 1;
+        justify-content: flex-start;
+        display: inline-block;
+        white-space: nowrap;
         padding: 10px 0;
         margin: 0;
-        white-space: nowrap;
+        color: #000;
+        width: auto;
+        max-width: 100%;
         overflow: hidden;
-        display: block;
-        width: 100%;
         text-overflow: ellipsis;
       }
       body > main > ul#files > li > a:hover {
         text-decoration: underline;
       }
       body > main > ul#files > li > a::before {
+        flex-grow: 0;
         display: inline-block;
         vertical-align: middle;
         margin-right: 10px;
@@ -81,6 +93,7 @@ const staticTemplateStrings = {
         line-height: 12px;
       }
       body > main > ul#files > li > svg {
+        flex-grow: 0;
         height: 13px;
         vertical-align: text-bottom;
       }
@@ -102,6 +115,12 @@ const staticTemplateStrings = {
       body > main > ul#files > li > a.file.svg::before {
         content: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='6' width='68' height='68' rx='5' ry='5'/><circle cx='24' cy='24' r='8'/><path d='M73 49L59 34 37 52m16 20L27 42 7 58'/></svg>");
       }
+      body > main > ul#files > li > div.file-stats {
+        flex-grow: 0;
+        display: none;
+        padding: 10px 0 10px 1.5em;
+        white-space: nowrap;
+      }
       ::selection {
         background-color: #79FFE1;
         color: #000;
@@ -114,15 +133,20 @@ const staticTemplateStrings = {
         body > main > header > h1 > img#layout_list_grid_toggle {
           display: inline-block;
         }
+        body > main > ul#files > li > div.file-stats {
+          display: inline-block;
+        }
         body > main.grid > ul#files {
-          display: flex;
           flex-wrap: wrap;
+          flex-direction: row;
         }
         body > main.grid > ul#files > li {
           width: 230px;
           padding-right: 1.5em;
           box-sizing: border-box;
-          justify-content: flex-start;
+        }
+        body > main.grid > ul#files > li > div.file-stats {
+          display: none;
         }
       }
     </style>
@@ -205,7 +229,13 @@ const directoryTemplate = spec => {
 
   if (Array.isArray(files) && files.length) {
     for (let file of files) {
-      html += `<li><a href="${encodeHTML(file.relative)}" title="${encodeHTML(file.title)}" class="${encodeHTML(file.type)} ${encodeHTML(file.ext)}">${encodeHTML(file.base)}</a></li>`
+      html += '<li>'
+      html +=   `<a href="${encodeHTML(file.relative)}" title="${encodeHTML(file.title)}" class="${encodeHTML(file.type)} ${encodeHTML(file.ext)}">${encodeHTML(file.base)}</a>`
+
+      if ((file.stats instanceof Object) && file.stats.mtime)
+        html += `<div class="file-stats">${file.stats.size ? `${file.stats.size} | ` : ''}${file.stats.mtime}</div>`
+
+      html += '</li>'
     }
   }
 

diff --git a/lib/serve-handler/src/index.js b/lib/serve-handler/src/index.js
@@ -373,6 +373,9 @@ const renderDirectory = async (acceptsJSON, handlers, methods, config, paths) =>
     }
 
     details.relative = path.posix.join(relativePath, details.base)
+    details.stats = {
+      mtime: (new Date(stats.mtimeMs)).toLocaleString([], {month: '2-digit', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true})
+    }
 
     if (stats.isDirectory()) {
       details.base += slashSuffix
@@ -391,9 +394,10 @@ const renderDirectory = async (acceptsJSON, handlers, methods, config, paths) =>
       details.ext = details.ext.split('.')[1] || 'txt'
       details.type = 'file'
 
-      details.size = bytes(stats.size, {
+      details.stats.size = bytes(stats.size, {
         unitSeparator: ' ',
-        decimalPlaces: 0
+        decimalPlaces: 2,
+        fixedDecimals: true
       })
     }