Experimental port to Firebase hosting

modules/client/main/About.js

@@ -1,12 +1,95 @@
-require('./About.css');
+import React from 'react';
 
-const React = require('react');
+import Wrapper from './Wrapper';
 
-const h = require('../utils/createHTML');
-const markup = require('./About.md');
+import cloudflareLogo from './CloudflareLogo.png';
+import herokuLogo from './HerokuLogo.png';
 
-function About() {
-  return <div className="wrapper" dangerouslySetInnerHTML={h(markup)} />;
+const styles = {
+  logoList: {
+    margin: '2em 0',
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  logo: {
+    textAlign: 'center',
+    flex: '1',
+    maxWidth: '80%'
+  },
+  logoImage: {
+    maxWidth: '60%'
+  }
+};
+
+function AboutLogo({ children }) {
+  return <div style={styles.logo}>{children}</div>;
 }
 
-module.exports = About;
+function AboutLogoImage(props) {
+  return <img {...props} style={styles.logoImage} />;
+}
+
+export default function About() {
+  return (
+    <Wrapper>
+      <p>
+        unpkg is an <a href="https://github.com/unpkg">open source</a> project
+        built and maintained by{' '}
+        <a href="https://twitter.com/mjackson">Michael Jackson</a>.
+      </p>
+
+      <h3 id="sponsors">Sponsors</h3>
+      <p>
+        The fast, global infrastructure that powers unpkg is generously donated
+        by <a href="https://www.cloudflare.com">Cloudflare</a> and{' '}
+        <a href="https://www.heroku.com">Heroku</a>.
+      </p>
+
+      <div style={styles.logoList}>
+        <AboutLogo>
+          <a href="https://www.cloudflare.com">
+            <AboutLogoImage src={cloudflareLogo} />
+          </a>
+        </AboutLogo>
+        <AboutLogo>
+          <a href="https://www.heroku.com">
+            <AboutLogoImage src={herokuLogo} />
+          </a>
+        </AboutLogo>
+      </div>
+
+      <h3 id="cache-behavior">Cache Behavior</h3>
+      <p>
+        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.
+      </p>
+      <p>
+        URLs that do not specify a package version number redirect to one that
+        does. This is the <code>latest</code> version when no version is
+        specified, or the <code>maxSatisfying</code> version when a{' '}
+        <a href="https://github.com/npm/node-semver">semver version</a> is
+        given. Redirects are cached for 5 minutes.
+      </p>
+      <p>
+        Browsers are instructed (via the <code>Cache-Control</code> header) to
+        cache assets for 1 year.
+      </p>
+
+      <h3 id="abuse">Abuse</h3>
+      <p>
+        unpkg maintains a list of packages that are known to be malicious. If
+        you find such a package on npm, please let us know!
+      </p>
+
+      <h3 id="support">Support</h3>
+      <p>
+        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 <a href="https://twitter.com/unpkg">@unpkg</a> with any questions or
+        concerns.
+      </p>
+    </Wrapper>
+  );
+}