fix: use same directory listing format as nginx

nodejs · Nov 13, 2023 · 559e284 · 559e284
1 parent b854489
commit 559e284
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 44 deletions.
diff --git a/scripts/compile-handlebars.js b/scripts/compile-handlebars.js
@@ -36,9 +36,9 @@ templatesToParse.then(files => {
 
     // The Handlebars.precompile returns a JavaScript object
     // and then we make a default export of the object
-    const javascriptTemplate = `export default ${removeStringIndents(
+    const javascriptTemplate = `export default ${
       compiledTemplate
-    )}`;
+    }`;
 
     const outputFilename = filePath.replace('.hbs', '.out.js');
 

diff --git a/src/handlers/strategies/directoryListing.ts b/src/handlers/strategies/directoryListing.ts
@@ -35,17 +35,7 @@ export function renderDirectoryListing(
   env: Env
 ): Response {
   // Holds the contents of the listing (directories and files)
-  const tableElements = [];
-
-  // There shouldn't really be a case where we're listing the root
-  //  directory (/) when this is deployed, so always add the option
-  //  to go up a directory
-  tableElements.push({
-    href: '../',
-    name: '../',
-    lastModified: '-',
-    size: '-',
-  });
+  const tableElements: object[] = [];
 
   const urlPathname = `${url.pathname}${url.pathname.endsWith('/') ? '' : '/'}`;
 
@@ -54,7 +44,7 @@ export function renderDirectoryListing(
     const extra = encodeURIComponent(name.substring(0, name.length - 1));
 
     tableElements.push({
-      href: `${urlPathname}${extra}/`,
+      href: `${extra}/`,
       name,
       lastModified: '-',
       size: '-',

diff --git a/src/templates/directoryListing.hbs b/src/templates/directoryListing.hbs
@@ -1,31 +1,9 @@
 <html>
-  <head>
-    <title>Index of {{pathname}}</title>
-    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
-    <meta charset='utf-8' />
-    <style type='text/css'>
-      td { padding-right: 16px; text-align: right; font-family: monospace }
-      td:nth-of-type(1) { text-align: left; overflow-wrap: anywhere }
-      td:nth-of-type(3) { white-space: nowrap } th { text-align: left; } @media
-      (prefers-color-scheme: dark) { body { color: white; background-color:
-      #1c1b22; } a { color: #3391ff; } a:visited { color: #C63B65; } }
-    </style>
-  </head>
-  <body>
-    <h1>Index of {{pathname}}</h1>
-    <table>
-      <tr>
-        <th>Filename</th>
-        <th>Modified</th>
-        <th>Size</th>
-      </tr>
-      {{#each entries}}
-        <tr>
-          <td><a href='{{href}}'>{{name}}</a></td>
-          <td>{{lastModified}}</td>
-          <td>{{size}}</td>
-        </tr>
-      {{/each}}
-    </table>
-  </body>
+<head><title>Index of {{pathname}}</title></head>
+<body>
+<h1>Index of {{pathname}}</h1><hr><pre><a href="../">../</a><br />
+{{#each entries}}
+<a href="{{href}}">{{name}}</a> {{lastModified}} {{size}}<br />
+{{/each}}
+</pre><hr></body>
 </html>
diff --git a/src/templates/directoryListing.out.js b/src/templates/directoryListing.out.js