unpkg/server/middleware/components/IndexPage.js

55 lines
1.5 KiB
JavaScript

const React = require("react")
const semver = require("semver")
const DirectoryListing = require("./DirectoryListing")
const readCSS = require("../utils/readCSS")
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: "content-wrapper" },
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