docs: migrate website to Gatsby v2 (#1623)

* website: initial conversion to gatsby v2 * fix unexpected history use warning * use commonjs only to fix gatsby error * fix gatsby import error with sidecar * remove unused postcss-colour-functions * remove unused prop * lowercase layout filename import to match actual file * chore(lint): format code
2018-08-23 17:58:38 -04:00
parent a1677b0e24
commit f58db5fb08
17 changed files with 4084 additions and 4662 deletions
--- a/website/src/components/layout.js
+++ b/website/src/components/layout.js
@ -0,0 +1,77 @@
+import React, { Fragment } from 'react';
+import Helmet from 'react-helmet';
+import classnames from 'classnames';
+import { graphql, StaticQuery } from 'gatsby';
+
+import Header from './header';
+import Footer from './footer';
+
+import '../css/imports/base.css';
+import '../css/imports/utilities.css';
+import '../css/imports/gitter.css';
+
+const Layout = ({ children }) => {
+  return (
+    <StaticQuery
+      query={graphql`
+        query layoutQuery {
+          site {
+            siteMetadata {
+              title
+              description
+            }
+          }
+          footer: file(relativePath: { regex: "/global/" }) {
+            childDataYaml {
+              footer {
+                buttons {
+                  url
+                  name
+                }
+              }
+            }
+          }
+          notifs: file(relativePath: { regex: "/notifications/" }) {
+            childDataYaml {
+              notifications {
+                published
+                loud
+                message
+                url
+              }
+            }
+          }
+        }
+      `}
+    >
+      {data => {
+        const { title, description } = data.site.siteMetadata;
+        const notifs = data.notifs.childDataYaml.notifications.filter(notif => notif.published);
+
+        return (
+          <Fragment>
+            <Helmet defaultTitle={title} titleTemplate={`%s | ${title}`}>
+              <meta name="description" content={description} />
+            </Helmet>
+            {notifs.map((node, i) => (
+              <a
+                key={i}
+                href={node.url}
+                className={classnames('notification', {
+                  'notification-loud': node.loud,
+                })}
+              >
+                {node.message}
+              </a>
+            ))}
+            <Header notifications={notifs} />
+            {children}
+            <Footer buttons={data.footer.childDataYaml.footer.buttons} />
+          </Fragment>
+        );
+      }}
+    </StaticQuery>
+  );
+};
+
+export default Layout;