Fixed some layout issues

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 FolderViewer from './FolderViewer.js';
-import DirectoryViewer from './DirectoryViewer.js';
 import FileViewer from './FileViewer.js';
 import { TwitterIcon, GitHubIcon } from './Icons.js';
 
@@ -128,69 +127,15 @@ function Link({ css, ...rest }) {
       css={{
         color: '#0076ff',
         textDecoration: 'none',
-        ':hover': {
+        ':hover': { textDecoration: 'underline' },
-          textDecoration: 'underline'
-        },
         ...css
       }}
     />
   );
 }
 
-export default function App({
+function AppHeader() {
-  packageName,
-  packageVersion,
-  availableVersions = [],
-  filename,
-  target
-}) {
-  function handleChange(event) {
-    window.location.href = window.location.href.replace(
-      '@' + packageVersion,
-      '@' + event.target.value
-    );
-  }
-
-  const breadcrumbs = [];
-
-  if (filename === '/') {
-    breadcrumbs.push(packageName);
-  } else {
-    let url = `/browse/${packageName}@${packageVersion}`;
-
-    breadcrumbs.push(<Link href={`${url}/`}>{packageName}</Link>);
-
-    const segments = filename
-      .replace(/^\/+/, '')
-      .replace(/\/+$/, '')
-      .split('/');
-
-    const lastSegment = segments.pop();
-
-    segments.forEach(segment => {
-      url += `/${segment}`;
-      breadcrumbs.push(<Link href={`${url}/`}>{segment}</Link>);
-    });
-
-    breadcrumbs.push(lastSegment);
-  }
-
-  // TODO: Provide a user pref to go full width?
-  const maxContentWidth = 940;
-
   return (
-    <Fragment>
-      <Global styles={globalStyles} />
-      <Global styles={lightCodeStyles} />
-
-      <div css={{ flex: '1 0 auto' }}>
-        <div
-          css={{
-            maxWidth: maxContentWidth,
-            padding: '0 20px',
-            margin: '0 auto'
-          }}
-        >
     <header css={{ marginTop: '2rem' }}>
       <h1
         css={{
@@ -211,7 +156,46 @@ export default function App({
         </nav>
         */}
     </header>
+  );
+}
 
+function AppNavigation({
+  packageName,
+  packageVersion,
+  availableVersions,
+  filename
+}) {
+  function handleVersionChange(nextVersion) {
+    window.location.href = window.location.href.replace(
+      '@' + packageVersion,
+      '@' + nextVersion
+    );
+  }
+
+  let breadcrumbs = [];
+
+  if (filename === '/') {
+    breadcrumbs.push(packageName);
+  } else {
+    let url = `/browse/${packageName}@${packageVersion}`;
+
+    breadcrumbs.push(<Link href={`${url}/`}>{packageName}</Link>);
+
+    let segments = filename
+      .replace(/^\/+/, '')
+      .replace(/\/+$/, '')
+      .split('/');
+    let lastSegment = segments.pop();
+
+    segments.forEach(segment => {
+      url += `/${segment}`;
+      breadcrumbs.push(<Link href={`${url}/`}>{segment}</Link>);
+    });
+
+    breadcrumbs.push(lastSegment);
+  }
+
+  return (
     <header
       css={{
         display: 'flex',
@@ -237,15 +221,26 @@ export default function App({
               {index !== 0 && (
                 <span css={{ paddingLeft: 5, paddingRight: 5 }}>/</span>
               )}
-                    {index === array.length - 1 ? (
+              {index === array.length - 1 ? <strong>{item}</strong> : item}
-                      <strong>{item}</strong>
-                    ) : (
-                      item
-                    )}
             </Fragment>
           ))}
         </nav>
       </h1>
+      <PackageVersionPicker
+        packageVersion={packageVersion}
+        availableVersions={availableVersions}
+        onChange={handleVersionChange}
+      />
+    </header>
+  );
+}
+
+function PackageVersionPicker({ packageVersion, availableVersions, onChange }) {
+  function handleChange(event) {
+    if (onChange) onChange(event.target.value);
+  }
+
+  return (
     <p
       css={{
         marginLeft: 20,
@@ -294,13 +289,66 @@ export default function App({
         </select>
       </label>
     </p>
-          </header>
+  );
-        </div>
+}
 
+function AppContent({ packageName, packageVersion, target }) {
+  return target.type === 'directory' ? (
+    <FolderViewer path={target.path} details={target.details} />
+  ) : target.type === 'file' ? (
+    <FileViewer
+      packageName={packageName}
+      packageVersion={packageVersion}
+      path={target.path}
+      details={target.details}
+    />
+  ) : null;
+}
+
+export default function App({
+  packageName,
+  packageVersion,
+  availableVersions = [],
+  filename,
+  target
+}) {
+  let maxContentWidth = 940;
+  // TODO: Make this changeable
+  let isFullWidth = false;
+
+  return (
+    <Fragment>
+      <Global styles={globalStyles} />
+      <Global styles={lightCodeStyles} />
+
+      <div css={{ flex: '1 0 auto' }}>
         <div
           css={{
             maxWidth: maxContentWidth,
             padding: '0 20px',
+            margin: '0 auto'
+          }}
+        >
+          <AppHeader />
+        </div>
+        <div
+          css={{
+            maxWidth: isFullWidth ? undefined : maxContentWidth,
+            padding: '0 20px',
+            margin: '0 auto'
+          }}
+        >
+          <AppNavigation
+            packageName={packageName}
+            packageVersion={packageVersion}
+            availableVersions={availableVersions}
+            filename={filename}
+          />
+        </div>
+        <div
+          css={{
+            maxWidth: isFullWidth ? undefined : maxContentWidth,
+            padding: '0 20px',
             margin: '0 auto',
             '@media (max-width: 700px)': {
               padding: 0,
@@ -308,16 +356,11 @@ export default function App({
             }
           }}
         >
-          <PackageInfoProvider
+          <AppContent
             packageName={packageName}
             packageVersion={packageVersion}
-          >
+            target={target}
-            {target.type === 'directory' ? (
+          />
-              <DirectoryViewer path={target.path} details={target.details} />
-            ) : target.type === 'file' ? (
-              <FileViewer path={target.path} details={target.details} />
-            ) : null}
-          </PackageInfoProvider>
         </div>
       </div>
 
@@ -342,7 +385,6 @@ export default function App({
           <p>&copy; {new Date().getFullYear()} UNPKG</p>
           <p css={{ fontSize: '1.5rem' }}>
             <a
-              title="Twitter"
               href="https://twitter.com/unpkg"
               css={{
                 color: '#aaa',
@@ -353,13 +395,12 @@ export default function App({
               <TwitterIcon />
             </a>
             <a
-              title="GitHub"
               href="https://github.com/mjackson/unpkg"
               css={{
                 color: '#aaa',
                 display: 'inline-block',
-                marginLeft: '1rem',
+                ':hover': { color: 'white' },
-                ':hover': { color: 'white' }
+                marginLeft: '1rem'
               }}
             >
               <GitHubIcon />

modules/client/browse/ContentArea.js

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+
+const maxWidth = 700;
+
+export function ContentArea({ children, css }) {
+  return (
+    <div
+      css={{
+        border: '1px solid #dfe2e5',
+        borderRadius: 3,
+        [`@media (max-width: ${maxWidth}px)`]: {
+          borderRightWidth: 0,
+          borderLeftWidth: 0
+        },
+        ...css
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ContentAreaHeaderBar({ children, css }) {
+  return (
+    <div
+      css={{
+        padding: 10,
+        background: '#f6f8fa',
+        color: '#424242',
+        border: '1px solid #d1d5da',
+        borderTopLeftRadius: 3,
+        borderTopRightRadius: 3,
+        margin: '-1px -1px 0',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        [`@media (max-width: ${maxWidth}px)`]: {
+          paddingRight: 20,
+          paddingLeft: 20
+        },
+        ...css
+      }}
+    >
+      {children}
+    </div>
+  );
+}

modules/client/browse/FileViewer.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import { formatBytes } from '../utils/format.js';
 import { createHTML } from '../utils/markup.js';
 
-import { usePackageInfo } from './PackageInfo.js';
+import { ContentArea, ContentAreaHeaderBar } from './ContentArea.js';
 
 function getBasename(path) {
-  const segments = path.split('/');
+  let segments = path.split('/');
   return segments[segments.length - 1];
 }
 
@@ -21,8 +21,8 @@ function ImageViewer({ path, uri }) {
 }
 
 function CodeListing({ highlights }) {
-  const lines = highlights.slice(0);
+  let lines = highlights.slice(0);
-  const hasTrailingNewline = lines.length && lines[lines.length - 1] === '';
+  let hasTrailingNewline = lines.length && lines[lines.length - 1] === '';
   if (hasTrailingNewline) {
     lines.pop();
   }
@@ -46,7 +46,7 @@ function CodeListing({ highlights }) {
       >
         <tbody>
           {lines.map((line, index) => {
-            const lineNumber = index + 1;
+            let lineNumber = index + 1;
 
             return (
               <tr key={index}>
@@ -120,51 +120,27 @@ function BinaryViewer() {
   );
 }
 
-export default function FileViewer({ path, details }) {
+export default function FileViewer({
-  const { packageName, packageVersion } = usePackageInfo();
+  packageName,
-  const { highlights, uri, language, size } = details;
+  packageVersion,
-
+  path,
-  const segments = path.split('/');
+  details
-  const filename = segments[segments.length - 1];
+}) {
+  let { highlights, uri, language, size } = details;
 
   return (
-    <div
+    <ContentArea>
-      css={{
+      <ContentAreaHeaderBar>
-        border: '1px solid #dfe2e5',
+        <span>{formatBytes(size)}</span>
-        borderRadius: 3,
+        <span>{language}</span>
-        '@media (max-width: 700px)': {
+        <span>
-          borderRightWidth: 0,
-          borderLeftWidth: 0
-        }
-      }}
-    >
-      <div
-        css={{
-          padding: 10,
-          background: '#f6f8fa',
-          color: '#424242',
-          border: '1px solid #d1d5da',
-          borderTopLeftRadius: 3,
-          borderTopRightRadius: 3,
-          margin: '-1px -1px 0',
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          '@media (max-width: 700px)': {
-            paddingRight: 20,
-            paddingLeft: 20
-          }
-        }}
-      >
-        <span>{formatBytes(size)}</span> <span>{language}</span>{' '}
           <a
-          title={filename}
             href={`/${packageName}@${packageVersion}${path}`}
             css={{
               display: 'inline-block',
-            textDecoration: 'none',
+              marginLeft: 8,
               padding: '2px 8px',
+              textDecoration: 'none',
               fontWeight: 600,
               fontSize: '0.9rem',
               color: '#24292e',
@@ -184,7 +160,8 @@ export default function FileViewer({ path, details }) {
           >
             View Raw
           </a>
-      </div>
+        </span>
+      </ContentAreaHeaderBar>
 
       {highlights ? (
         <CodeListing highlights={highlights} />
@@ -193,7 +170,7 @@ export default function FileViewer({ path, details }) {
       ) : (
         <BinaryViewer />
       )}
-    </div>
+    </ContentArea>
   );
 }
 

modules/client/browse/FolderViewer.js

@@ -6,7 +6,8 @@ import sortBy from 'sort-by';
 
 import { formatBytes } from '../utils/format.js';
 
-import { DirectoryIcon, CodeFileIcon } from './Icons.js';
+import { ContentArea, ContentAreaHeaderBar } from './ContentArea.js';
+import { FolderIcon, FileIcon, FileCodeIcon } from './Icons.js';
 
 const linkStyle = {
   color: '#0076ff',
@@ -48,7 +49,26 @@ function getRelName(path, base) {
   return path.substr(base.length > 1 ? base.length + 1 : 1);
 }
 
-export default function DirectoryViewer({ path, details: entries }) {
+export default function FolderViewer({ path, details: entries }) {
+  const { subdirs, files } = Object.keys(entries).reduce(
+    (memo, key) => {
+      const { subdirs, files } = memo;
+      const entry = entries[key];
+
+      if (entry.type === 'directory') {
+        subdirs.push(entry);
+      } else if (entry.type === 'file') {
+        files.push(entry);
+      }
+
+      return memo;
+    },
+    { subdirs: [], files: [] }
+  );
+
+  subdirs.sort(sortBy('path'));
+  files.sort(sortBy('path'));
+
   const rows = [];
 
   if (path !== '/') {
@@ -66,30 +86,14 @@ export default function DirectoryViewer({ path, details: entries }) {
     );
   }
 
-  const { subdirs, files } = Object.keys(entries).reduce(
+  subdirs.forEach(({ path: dirname }) => {
-    (memo, key) => {
-      const { subdirs, files } = memo;
-      const entry = entries[key];
-
-      if (entry.type === 'directory') {
-        subdirs.push(entry);
-      } else if (entry.type === 'file') {
-        files.push(entry);
-      }
-
-      return memo;
-    },
-    { subdirs: [], files: [] }
-  );
-
-  subdirs.sort(sortBy('path')).forEach(({ path: dirname }) => {
     const relName = getRelName(dirname, path);
     const href = relName + '/';
 
     rows.push(
       <tr key={relName}>
         <td css={iconCellStyle}>
-          <DirectoryIcon />
+          <FolderIcon />
         </td>
         <td css={tableCellStyle}>
           <a title={relName} href={href} css={linkStyle}>
@@ -102,16 +106,18 @@ export default function DirectoryViewer({ path, details: entries }) {
     );
   });
 
-  files
+  files.forEach(({ path: filename, size, contentType }) => {
-    .sort(sortBy('path'))
-    .forEach(({ path: filename, size, contentType }) => {
     const relName = getRelName(filename, path);
     const href = relName;
 
     rows.push(
       <tr key={relName}>
         <td css={iconCellStyle}>
-            <CodeFileIcon />
+          {contentType === 'text/plain' || contentType === 'text/markdown' ? (
+            <FileIcon />
+          ) : (
+            <FileCodeIcon />
+          )}
         </td>
         <td css={tableCellStyle}>
           <a title={relName} href={href} css={linkStyle}>
@@ -124,18 +130,20 @@ export default function DirectoryViewer({ path, details: entries }) {
     );
   });
 
-  return (
+  let counts = [];
-    <div
+  if (files.length > 0) {
-      css={{
+    counts.push(`${files.length} file${files.length === 1 ? '' : 's'}`);
-        border: '1px solid #dfe2e5',
-        borderRadius: 3,
-        borderTopWidth: 0,
-        '@media (max-width: 700px)': {
-          borderRightWidth: 0,
-          borderLeftWidth: 0
   }
-      }}
+  if (subdirs.length > 0) {
-    >
+    counts.push(`${subdirs.length} folder${subdirs.length === 1 ? '' : 's'}`);
+  }
+
+  return (
+    <ContentArea>
+      <ContentAreaHeaderBar>
+        <span>{counts.join(', ')}</span>
+      </ContentAreaHeaderBar>
+
       <table
         css={{
           width: '100%',
@@ -146,6 +154,9 @@ export default function DirectoryViewer({ path, details: entries }) {
             '& th + th + th + th, & td + td + td + td': {
               display: 'none'
             }
+          },
+          '& tr:first-child td': {
+            borderTop: 0
           }
         }}
       >
@@ -167,12 +178,12 @@ export default function DirectoryViewer({ path, details: entries }) {
         </thead>
         <tbody>{rows}</tbody>
       </table>
-    </div>
+    </ContentArea>
   );
 }
 
 if (process.env.NODE_ENV !== 'production') {
-  DirectoryViewer.propTypes = {
+  FolderViewer.propTypes = {
     path: PropTypes.string.isRequired,
     details: PropTypes.objectOf(
       PropTypes.shape({

modules/client/browse/Icons.js

@@ -1,18 +1,27 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { GoFileDirectory, GoFile } from 'react-icons/go';
+import {
+  GoArrowBoth,
+  GoFile,
+  GoFileCode,
+  GoFileDirectory
+} from 'react-icons/go';
 import { FaTwitter, FaGithub } from 'react-icons/fa';
 
 function createIcon(Type, { css, ...rest }) {
   return <Type css={{ ...css, verticalAlign: 'text-bottom' }} {...rest} />;
 }
 
-export function DirectoryIcon(props) {
+export function FileIcon(props) {
-  return createIcon(GoFileDirectory, props);
+  return createIcon(GoFile, props);
 }
 
-export function CodeFileIcon(props) {
+export function FileCodeIcon(props) {
-  return createIcon(GoFile, props);
+  return createIcon(GoFileCode, props);
+}
+
+export function FolderIcon(props) {
+  return createIcon(GoFileDirectory, props);
 }
 
 export function TwitterIcon(props) {
@@ -22,3 +31,7 @@ export function TwitterIcon(props) {
 export function GitHubIcon(props) {
   return createIcon(FaGithub, props);
 }
+
+export function ArrowBothIcon(props) {
+  return createIcon(GoArrowBoth, props);
+}

modules/client/browse/PackageInfo.js

@@ -1,11 +0,0 @@
-import React, { createContext, useContext } from 'react';
-
-const Context = createContext();
-
-export function PackageInfoProvider({ children, ...rest }) {
-  return <Context.Provider children={children} value={rest} />;
-}
-
-export function usePackageInfo() {
-  return useContext(Context);
-}

modules/client/main/App.js

@@ -41,6 +41,9 @@ const globalStyles = css`
 
   code {
     ${fontMono}
+    font-size: 1rem;
+    padding: 0 3px;
+    background-color: #eee;
   }
 
   dd,
@@ -58,9 +61,7 @@ function Link(props) {
       css={{
         color: '#0076ff',
         textDecoration: 'none',
-        ':hover': {
+        ':hover': { textDecoration: 'underline' }
-          textDecoration: 'underline'
-        }
       }}
     />
   );
@@ -127,7 +128,10 @@ export default function App() {
               css={{
                 textAlign: 'center',
                 fontSize: '4.5em',
-                letterSpacing: '0.05em'
+                letterSpacing: '0.05em',
+                '@media (min-width: 700px)': {
+                  margin: '1.5em 0 1em'
+                }
               }}
             >
               UNPKG
@@ -365,10 +369,11 @@ export default function App() {
           </div>
 
           <p>
-            The origin infrastructure runs on{' '}
+            The origin servers run on world-class auto-scaling infrastructure
+            provided by{' '}
             <Link href="https://cloud.google.com/">Google Cloud</Link> which
-            automatically scales the number of available servers to meet the
+            dynamically adjusts the number of available servers to meet the
-            current demand.
+            current demand for maximum efficiency and uptime.
           </p>
 
           <div