diff --git a/modules/client/browse/App.js b/modules/client/browse/App.js index 828d9f9..1d73b54 100644 --- a/modules/client/browse/App.js +++ b/modules/client/browse/App.js @@ -33,6 +33,7 @@ const globalStyles = css` ${fontSans} font-size: 16px; line-height: 1.5; + overflow-wrap: break-word; background: white; color: black; } @@ -119,13 +120,22 @@ const lightCodeStyles = css` } `; -const linkStyle = { - color: '#0076ff', - textDecoration: 'none', - ':hover': { - textDecoration: 'underline' - } -}; +function Link({ css, ...rest }) { + return ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ); +} export default function App({ packageName, @@ -148,11 +158,7 @@ export default function App({ } else { let url = `/browse/${packageName}@${packageVersion}`; - breadcrumbs.push( - - {packageName} - - ); + breadcrumbs.push({packageName}); const segments = filename .replace(/^\/+/, '') @@ -163,11 +169,7 @@ export default function App({ segments.forEach(segment => { url += `/${segment}`; - breadcrumbs.push( - - {segment} - - ); + breadcrumbs.push({segment}); }); breadcrumbs.push(lastSegment); @@ -177,182 +179,195 @@ export default function App({ const maxContentWidth = 940; return ( - - - - + + + -
-
-
-

- - UNPKG - -

- {/* +
+
+
+

+ + UNPKG + +

+ {/* */} -
+
-
+

+ +

+

-

-

-
+ + +

+ +
-
+ {target.type === 'directory' ? ( ) : target.type === 'file' ? ( ) : null} -
+ + - - - +

© {new Date().getFullYear()} UNPKG

+

+ + + + + + +

+ + + ); } diff --git a/modules/client/main/App.js b/modules/client/main/App.js index d33f5c6..9609906 100644 --- a/modules/client/main/App.js +++ b/modules/client/main/App.js @@ -11,7 +11,7 @@ import { fontSans, fontMono } from '../utils/style.js'; import { TwitterIcon, GitHubIcon } from './Icons.js'; import CloudflareLogo from './images/CloudflareLogo.png'; -import AngularLogo from './images/AngularLogo.png'; +import GoogleCloudLogo from './images/GoogleCloudLogo.png'; const globalStyles = css` html { @@ -34,6 +34,7 @@ const globalStyles = css` ${fontSans} font-size: 16px; line-height: 1.5; + overflow-wrap: break-word; background: white; color: black; } @@ -47,27 +48,30 @@ const globalStyles = css` margin-left: 0; padding-left: 25px; } - - #root { - display: flex; - flex-direction: column; - } `; -const linkStyle = { - color: '#0076ff', - textDecoration: 'none', - ':hover': { - textDecoration: 'underline' - } -}; +function Link(props) { + return ( + // eslint-disable-next-line jsx-a11y/anchor-has-content + + ); +} function AboutLogo({ children }) { return
{children}
; } function AboutLogoImage(props) { - /* eslint-disable-next-line jsx-a11y/alt-text */ + // eslint-disable-next-line jsx-a11y/alt-text return ; } @@ -114,373 +118,276 @@ export default function App() { return ( -
- + -
-

- unpkg -

+
+
+
+

+ UNPKG +

+ +

+ unpkg is a fast, global content delivery network for everything on{' '} + npm. Use it to quickly + and easily load any file from any package using a URL like: +

+ +
+ unpkg.com/:package@:version/:file +
+ + {hasStats && } +
+ +

+ Examples +

+ +

Using a fixed version:

+ +
    +
  • + + unpkg.com/react@16.7.0/umd/react.production.min.js + +
    • +
  • + + unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js + +
    • +

- unpkg is a fast, global content delivery network for everything on{' '} - - npm - - . Use it to quickly and easily load any file from any package using - a URL like: + You may also use a{' '} + semver range{' '} + or a tag{' '} + instead of a fixed version number, or omit the version/tag entirely + to use the latest tag. +

+ +
    +
  • + + unpkg.com/react@^16/umd/react.production.min.js + +
    • +
  • + + unpkg.com/react/umd/react.production.min.js + +
    • +
+ +

+ If you omit the file path (i.e. use a “bare” URL), unpkg + will serve the file specified by the unpkg field in{' '} + package.json, or fall back to main. +

+ +
    +
  • + unpkg.com/jquery +
    • +
  • + unpkg.com/three +
    • +
+ +

+ Append a / at the end of a URL to view a listing of all + the files in a package. +

+ +
    +
  • + unpkg.com/react/ +
    • +
  • + unpkg.com/react-router/ +
    • +
+ +

+ Query Parameters +

+ +
+
+ ?meta +
+
+ Return metadata about any file in a package as JSON (e.g. + /any/file?meta) +
+ +
+ ?module +
+
+ Expands all{' '} + + “bare” import specifiers + {' '} + in JavaScript modules to unpkg URLs. This feature is{' '} + very experimental +
+
+ +

+ Cache Behavior +

+ +

+ The CDN caches files based on their permanent URL, which includes + the npm package version. This works because npm does not allow + package authors to overwrite a package that has already been + published with a different one at the same version number. +

+

+ Browsers are instructed (via the Cache-Control header) + to cache assets indefinitely (1 year). +

+

+ URLs that do not specify a package version number redirect to one + that does. This is the latest version when no version + is specified, or the maxSatisfying version when a{' '} + + semver version + {' '} + is given. Redirects are cached for 10 minutes at the CDN, 1 minute + in browsers. +

+

+ If you want users to be able to use the latest version when you cut + a new release, the best policy is to put the version number in the + URL directly in your installation instructions. This will also load + more quickly because we won't have to resolve the latest + version and redirect them. +

+ +

+ Workflow +

+ +

+ For npm package authors, unpkg relieves the burden of publishing + your code to a CDN in addition to the npm registry. All you need to + do is include your{' '} + UMD build in your + npm package (not your repo, that's different!). +

+ +

You can do this easily using the following setup:

+ +
    +
  • + Add the umd (or dist) directory to your{' '} + .gitignore file +
    • +
  • + Add the umd directory to your{' '} + + files array + {' '} + in package.json +
    • +
  • + Use a build script to generate your UMD build in the{' '} + umd directory when you publish +
    • +
+ +

+ That's it! Now when you npm publish you'll + have a version available on unpkg as well. +

+ +

+ About +

+ +

+ unpkg is an{' '} + open source{' '} + project built and maintained by{' '} + Michael Jackson. + unpkg is not affiliated with or supported by npm, Inc. in any way. + Please do not contact npm for help with unpkg. Instead, please reach + out to @unpkg with any + questions or concerns. +

+ +

+ The unpkg CDN is powered by{' '} + Cloudflare, one of + the world's largest and fastest cloud network platforms.{' '} + {hasStats && ( + + In the past month, Cloudflare served over{' '} + {formatBytes(stats.totals.bandwidth.all)} to{' '} + {formatNumber(stats.totals.uniques.all)} unique + unpkg users all over the world. + + )}

- unpkg.com/:package@:version/:file + + + + +
- {hasStats && } -
+

+ The origin infrastructure runs on{' '} + Google Cloud which + automatically scales the number of available servers to meet the + current demand. +

-

- Examples -

- -

Using a fixed version:

- - - -

- You may also use a{' '} - - semver range - {' '} - or a{' '} - - tag - {' '} - instead of a fixed version number, or omit the version/tag entirely to - use the latest tag. -

- - - -

- If you omit the file path (i.e. use a “bare” URL), unpkg - will serve the file specified by the unpkg field in{' '} - package.json, or fall back to main. -

- - - -

- Append a / at the end of a URL to view a listing of all - the files in a package. -

- - - -

- Query Parameters -

- -
-
- ?meta -
-
- Return metadata about any file in a package as JSON (e.g. - /any/file?meta) -
- -
- ?module -
-
- Expands all{' '} - - “bare” import specifiers - {' '} - in JavaScript modules to unpkg URLs. This feature is{' '} - very experimental -
-
- -

- Cache Behavior -

- -

- The CDN caches files based on their permanent URL, which includes the - npm package version. This works because npm does not allow package - authors to overwrite a package that has already been published with a - different one at the same version number. -

-

- Browsers are instructed (via the Cache-Control header) to - cache assets indefinitely (1 year). -

-

- URLs that do not specify a package version number redirect to one that - does. This is the latest version when no version is - specified, or the maxSatisfying version when a{' '} - - semver version - {' '} - is given. Redirects are cached for 10 minutes at the CDN, 1 minute in - browsers. -

-

- If you want users to be able to use the latest version when you cut a - new release, the best policy is to put the version number in the URL - directly in your installation instructions. This will also load more - quickly because we won't have to resolve the latest version and - redirect them. -

- -

- Workflow -

- -

- For npm package authors, unpkg relieves the burden of publishing your - code to a CDN in addition to the npm registry. All you need to do is - include your{' '} - - UMD - {' '} - build in your npm package (not your repo, that's different!). -

- -

You can do this easily using the following setup:

- - - -

- That's it! Now when you npm publish you'll have - a version available on unpkg as well. -

- -

- About -

- -

- unpkg is an{' '} - - open source - {' '} - project built and maintained by{' '} - - Michael Jackson - - . unpkg is not affiliated with or supported by npm, Inc. in any way. - Please do not contact npm for help with unpkg. Instead, please reach - out to{' '} - - @unpkg - {' '} - with any questions or concerns. -

- -

- The unpkg CDN is powered by{' '} - - Cloudflare - - , one of the world's largest and fastest cloud network platforms.{' '} - {hasStats && ( - - In the past month, Cloudflare served over{' '} - {formatBytes(stats.totals.bandwidth.all)} to{' '} - {formatNumber(stats.totals.uniques.all)} unique - unpkg users all over the world. - - )} -

- -
- - - - - -
- -

- The origin servers for unpkg are powered by{' '} - - Google Cloud - {' '} - and made possible by a generous donation from the{' '} - - Angular web framework - - , one of the world's most popular libraries for building - incredible user experiences on both desktop and mobile. -

- -
- - - - - + + + + + +
@@ -505,7 +412,6 @@ export default function App() {

© {new Date().getFullYear()} UNPKG