diff --git a/modules/client/browse/App.js b/modules/client/browse/App.js
index 1d73b54..dcf8173 100644
--- a/modules/client/browse/App.js
+++ b/modules/client/browse/App.js
@@ -5,8 +5,7 @@ import PropTypes from 'prop-types';
import { fontSans, fontMono } from '../utils/style.js';
-import { PackageInfoProvider } from './PackageInfo.js';
-import DirectoryViewer from './DirectoryViewer.js';
+import FolderViewer from './FolderViewer.js';
import FileViewer from './FileViewer.js';
import { TwitterIcon, GitHubIcon } from './Icons.js';
@@ -128,30 +127,52 @@ function Link({ css, ...rest }) {
css={{
color: '#0076ff',
textDecoration: 'none',
- ':hover': {
- textDecoration: 'underline'
- },
+ ':hover': { textDecoration: 'underline' },
...css
}}
/>
);
}
-export default function App({
+function AppHeader() {
+ return (
+
+
+ UNPKG
+
+
+ {/*
+
+ */}
+
+
+
+
+ +
+ ); +} + +function AppContent({ packageName, packageVersion, target }) { + return target.type === 'directory' ? ( +- -
-© {new Date().getFullYear()} UNPKG
- The origin infrastructure runs on{' '}
+ The origin servers run on world-class auto-scaling infrastructure
+ provided by{' '}
Google Cloud which
- automatically scales the number of available servers to meet the
- current demand.
+ dynamically adjusts the number of available servers to meet the
+ current demand for maximum efficiency and uptime.
@@ -120,71 +120,48 @@ function BinaryViewer() {
);
}
-export default function FileViewer({ path, details }) {
- const { packageName, packageVersion } = usePackageInfo();
- const { highlights, uri, language, size } = details;
-
- const segments = path.split('/');
- const filename = segments[segments.length - 1];
+export default function FileViewer({
+ packageName,
+ packageVersion,
+ path,
+ details
+}) {
+ let { highlights, uri, language, size } = details;
return (
-
-
@@ -102,40 +106,44 @@ export default function DirectoryViewer({ path, details: entries }) {
);
});
- files
- .sort(sortBy('path'))
- .forEach(({ path: filename, size, contentType }) => {
- const relName = getRelName(filename, path);
- const href = relName;
+ files.forEach(({ path: filename, size, contentType }) => {
+ const relName = getRelName(filename, path);
+ const href = relName;
- rows.push(
-
-
- );
- });
+ rows.push(
+
-
-
-
- {relName}
-
-
- {formatBytes(size)}
- {contentType}
-
+
+ );
+ });
+
+ let counts = [];
+ if (files.length > 0) {
+ counts.push(`${files.length} file${files.length === 1 ? '' : 's'}`);
+ }
+ if (subdirs.length > 0) {
+ counts.push(`${subdirs.length} folder${subdirs.length === 1 ? '' : 's'}`);
+ }
return (
-
+ {contentType === 'text/plain' || contentType === 'text/markdown' ? (
+
+
+
+ {relName}
+
+
+ {formatBytes(size)}
+ {contentType}
+
@@ -167,12 +178,12 @@ export default function DirectoryViewer({ path, details: entries }) {
{rows}
-