Add code from express-unpkg repo

server/middleware/components/DirectoryListing.js

@@ -0,0 +1,50 @@
+const React = require('react')
+const prettyBytes = require('pretty-bytes')
+const { getContentType } = require('../FileUtils')
+
+const e = React.createElement
+
+const formatTime = (time) =>
+  new Date(time).toISOString()
+
+const DirectoryListing = ({ dir, entries }) => {
+  const rows = entries.map(({ file, stats }, index) => {
+    const isDir = stats.isDirectory()
+    const href = file + (isDir ? '/' : '')
+
+    return (
+      e('tr', { key: file, className: index % 2 ? 'odd' : 'even' },
+        e('td', null, e('a', { title: file, href }, file)),
+        e('td', null, isDir ? '-' : getContentType(file)),
+        e('td', null, isDir ? '-' : prettyBytes(stats.size)),
+        e('td', null, isDir ? '-' : formatTime(stats.mtime))
+      )
+    )
+  })
+
+  if (dir !== '/')
+    rows.unshift(
+      e('tr', { key: '..', className: 'odd' },
+        e('td', null, e('a', { title: 'Parent directory', href: '../' }, '..')),
+        e('td', null, '-'),
+        e('td', null, '-'),
+        e('td', null, '-')
+      )
+    )
+
+  return (
+    e('table', null,
+      e('thead', null,
+        e('tr', null,
+          e('th', null, 'Name'),
+          e('th', null, 'Type'),
+          e('th', null, 'Size'),
+          e('th', null, 'Last Modified')
+        )
+      ),
+      e('tbody', null, rows)
+    )
+  )
+}
+
+module.exports = DirectoryListing

server/middleware/components/IndexPage.css

@@ -0,0 +1,39 @@
+body {
+  font-size: 16px;
+  font-family: -apple-system,
+               BlinkMacSystemFont,
+               "Segoe UI",
+               Roboto,
+               Helvetica,
+               Arial,
+               sans-serif;
+  line-height: 1.5;
+  padding: 0px 10px 5px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font: 0.85em Monaco, monospace;
+}
+tr.even {
+  background-color: #eee;
+}
+th {
+  text-align: left;
+}
+th, td {
+  padding: 0.1em 0.25em;
+}
+
+.version-wrapper {
+  line-height: 2.25em;
+  float: right;
+}
+#version {
+  font-size: 1em;
+}
+
+address {
+  text-align: right;
+}

server/middleware/components/IndexPage.js

@@ -0,0 +1,48 @@
+const semver = require('semver')
+const React = require('react')
+const PropTypes = require('prop-types')
+const DirectoryListing = require('./DirectoryListing')
+const { readCSS } = require('../StyleUtils')
+
+const e = React.createElement
+
+const IndexPageStyle = readCSS(__dirname, 'IndexPage.css')
+const IndexPageScript = `
+var s = document.getElementById('version'), v = s.value
+s.onchange = function () {
+  window.location.href = window.location.href.replace('@' + v, '@' + s.value)
+}
+`
+
+const byVersion = (a, b) =>
+  semver.lt(a, b) ? -1 : (semver.gt(a, b) ? 1 : 0)
+
+const IndexPage = ({ packageInfo, version, dir, entries }) => {
+  const versions = Object.keys(packageInfo.versions).sort(byVersion)
+  const options = versions.map(v => (
+    e('option', { key: v, value: v }, `${packageInfo.name}@${v}`)
+  ))
+
+  return (
+    e('html', null,
+      e('head', null,
+        e('meta', { charSet: 'utf-8' }),
+        e('title', null, `Index of ${dir}`),
+        e('style', { dangerouslySetInnerHTML: { __html: IndexPageStyle } })
+      ),
+      e('body', null,
+        e('div', { className: 'version-wrapper' },
+          e('select', { id: 'version', defaultValue: version }, options)
+        ),
+        e('h1', null, `Index of ${dir}`),
+        e('script', { dangerouslySetInnerHTML: { __html: IndexPageScript } }),
+        e('hr'),
+        e(DirectoryListing, { dir, entries }),
+        e('hr'),
+        e('address', null, `${packageInfo.name}@${version}`)
+      )
+    )
+  )
+}
+
+module.exports = IndexPage