unpkg/server/components/IndexPage.js

60 lines
1.5 KiB
JavaScript

const semver = require("semver");
const DirectoryListing = require("./DirectoryListing");
const readCSS = require("./utils/readCSS");
const e = require("./utils/createElement");
const s = require("./utils/createStyle");
const x = require("./utils/createScript");
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);
};
`;
function byVersion(a, b) {
return semver.lt(a, b) ? -1 : semver.gt(a, b) ? 1 : 0;
}
function IndexPage({ packageInfo, version, filename, entry, 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 ${filename}`),
s(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 ${filename}`),
x(IndexPageScript),
e("hr"),
e(DirectoryListing, { filename, entry, entries }),
e("hr"),
e("address", null, `${packageInfo.name}@${version}`)
)
)
);
}
module.exports = IndexPage;