Feature/build step (#2)

* BundleAnalyzerPlugin

* lazy load highlight.js

* seperate bundles for each page

* prerender apps to html on build

* preload important font files

* dont prerender code copy button

* fix woff2 variant of font

* added missing doctype

* remove metatags component

3 files changed, 29 insertions, 31 deletions

diff --git a/packages/dev-tools-pages/ts/components/Base.tsx b/packages/dev-tools-pages/ts/components/Base.tsx
new file mode 100644
index 000000000..16e9560f0
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Base.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import ThemeContext from 'ts/context';
+import GlobalStyles from 'ts/globalStyles';
+import Header from 'ts/components/Header';
+import Hero from 'ts/components/Hero';
+import Footer from 'ts/components/Footer';
+
+interface BaseProps {
+    context: any;
+    children: React.ReactNode;
+}
+
+function Base(props: BaseProps) {
+    return (
+        <ThemeContext.Provider value={props.context}>
+            <GlobalStyles />
+            <Header />
+            <Hero />
+            {props.children}
+            <Footer />
+        </ThemeContext.Provider>
+    );
+}
+
+export default Base;
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 42d4234f1..074914c2a 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -68,8 +68,8 @@ class Code extends React.Component<CodeProps, CodeState> {
         const { language, children } = this.props;
 
         if (language !== undefined) {
-            const { highlight } = await import(/* webpackChunkName: 'highlight.js' */ 'highlight.js');
-            const { value: hlCode } = highlight(language, children as string);
+            const { default: hljs } = await System.import(/* webpackChunkName: 'highlightjs' */ 'ts/highlight');
+            const { value: hlCode } = hljs.highlight(language, children as string);
             this.setState({ hlCode });
         }
     }
@@ -102,7 +102,7 @@ class Code extends React.Component<CodeProps, CodeState> {
                         <StyledCode>{this.props.children}</StyledCode>
                     )}
                 </StyledPre>
-                <Button onClick={this.handleCopy}>Copy</Button>
+                {navigator.userAgent !== 'ReactSnap' ? <Button onClick={this.handleCopy}>Copy</Button> : null}
                 {!('clipboard' in navigator) ? (
                     <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} />
                 ) : null}
diff --git a/packages/dev-tools-pages/ts/components/MetaTags.tsx b/packages/dev-tools-pages/ts/components/MetaTags.tsx
deleted file mode 100644
index 9bb33f7ab..000000000
--- a/packages/dev-tools-pages/ts/components/MetaTags.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import { withContext, Props } from './withContext';
-
-interface MetaTagsProps extends Props {
-    imgSrc?: string;
-}
-
-function MetaTags(props: MetaTagsProps) {
-    const { title, imgSrc = '/images/og_image.png' } = props;
-    const description = props.tagline;
-    return (
-        <Helmet>
-            <title>{props.title}</title>
-            <meta name="description" content={description} />
-            <link rel="shortcut icon" href={`/favicons/${props.name}.ico`} />
-            <meta property="og:title" content={title} />
-            <meta property="og:description" content={description} />
-            <meta property="og:type" content="website" />
-            <meta property="og:image" content={imgSrc} />
-            <meta name="twitter:site" content="@0xproject" />
-            <meta name="twitter:image" content={imgSrc} />
-        </Helmet>
-    );
-}
-
-export default withContext(MetaTags);