From 580e574c841fb9b0ba9d37a50bd5a0f787799ff2 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Fri, 19 Oct 2018 15:02:15 +0100
Subject: 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
---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages/Compiler.tsx')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 79c9f52e4..35c810cb3 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/compiler';
-import Base from './Base';
+import Base from 'ts/components/Base';
 import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
@@ -11,7 +12,7 @@ import InlineCode from 'ts/components/InlineCode';
 import List from 'ts/components/List';
 import CompilerComponent from 'ts/components/Compiler';
 
-function Compiler(props: any) {
+function Compiler() {
     return (
         <Base context={context}>
             <Container>
@@ -52,4 +53,10 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
     );
 }
 
-export default Compiler;
+const root = document.getElementById('app');
+
+if (root.hasChildNodes()) {
+    hydrate(<Compiler />, root);
+} else {
+    render(<Compiler />, root);
+}
-- 
cgit v1.2.3


From e485a9814333a3178e6a156230ed15b047f11005 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 13:14:48 +0200
Subject: support dark alternative of Main component

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 69 +++++++++++++++-----------
 1 file changed, 39 insertions(+), 30 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages/Compiler.tsx')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 35c810cb3..e7336f1b1 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -15,40 +15,49 @@ import CompilerComponent from 'ts/components/Compiler';
 function Compiler() {
     return (
         <Base context={context}>
-            <Container>
-                <CompilerComponent />
-                <Main>
-                    <ContentBlock title="Required steps">
-                        <List items={['Step 1', 'Step 2']} />
-                    </ContentBlock>
-                    <ContentBlock title="Prerequisites">
-                        <Code>npm install @0x/sol-trace --save</Code>
-                        <p>
-                            Sol-trace is a subprovider that needs to be prepended to your{' '}
-                            <a href="#">provider engine</a>. Depending on your project setup, you will need to use a
-                            specific ArtifactAdapter. Sol-trace ships with the{' '}
-                            <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
-                            <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can
-                            also write your own and support any artifact format.
-                        </p>
-                    </ContentBlock>
+            <CompilerComponent />
+            <Main>
+                <ContentBlock title="Required steps">
+                    <List items={['Step 1', 'Step 2']} />
+                </ContentBlock>
+                <ContentBlock title="Prerequisites">
+                    <Code>npm install @0x/sol-trace --save</Code>
+                    <p>
+                        Sol-trace is a subprovider that needs to be prepended to your <a href="#">provider engine</a>.
+                        Depending on your project setup, you will need to use a specific ArtifactAdapter. Sol-trace
+                        ships with the <InlineCode>SolCompilerArtifactAdapter</InlineCode> for use with Sol-compiler and{' '}
+                        <InlineCode>TruffleArtifactAdapter</InlineCode> for use with the Truffle framework. You can also
+                        write your own and support any artifact format.
+                    </p>
+                </ContentBlock>
 
-                    <ContentBlock title="Installation">
-                        <Tabs>
-                            <TabBlock title="Sol-compiler">
-                                <Code language="js">
-                                    {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
+                <ContentBlock title="Installation">
+                    <Tabs>
+                        <TabBlock title="Sol-compiler">
+                            <Code language="js">
+                                {`import { SolCompilerArtifactAdapter } from '@0x/sol-trace';
 
 // Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
 const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);`}
-                                </Code>
-                            </TabBlock>
-                            <TabBlock title="Truffle">Truffle</TabBlock>
-                            <TabBlock title="Custom">Custom</TabBlock>
-                        </Tabs>
-                    </ContentBlock>
-                </Main>
-            </Container>
+                            </Code>
+                        </TabBlock>
+                        <TabBlock title="Truffle">Truffle</TabBlock>
+                        <TabBlock title="Custom">Custom</TabBlock>
+                    </Tabs>
+                </ContentBlock>
+            </Main>
+            <Main
+                title="Artifacts"
+                subtitle="Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need."
+                dark
+            >
+                <ContentBlock title="Production">
+                    <p>
+                        Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
+                        define which parts of the artifact you need.
+                    </p>
+                </ContentBlock>
+            </Main>
         </Base>
     );
 }
-- 
cgit v1.2.3


From 97c54f84f0b0f3daf41773690cc79296c983b346 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 13:15:54 +0200
Subject: remove container from all pages

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages/dev-tools-pages/ts/pages/Compiler.tsx')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index e7336f1b1..c6e67021e 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -3,7 +3,6 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/compiler';
 import Base from 'ts/components/Base';
-import Container from 'ts/components/Container';
 import Main from 'ts/components/Main';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
-- 
cgit v1.2.3


From 8cf720986eb464a39e634ca59c4c3b20b3cd368d Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 13:18:51 +0200
Subject: rename Main to Content

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages/Compiler.tsx')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index c6e67021e..8e2c7f058 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -3,7 +3,7 @@ import { render, hydrate } from 'react-dom';
 
 import context from 'ts/context/compiler';
 import Base from 'ts/components/Base';
-import Main from 'ts/components/Main';
+import Content from 'ts/components/Content';
 import ContentBlock from 'ts/components/ContentBlock';
 import { Tabs, TabBlock } from 'ts/components/Tabs';
 import Code from 'ts/components/Code';
@@ -15,7 +15,7 @@ function Compiler() {
     return (
         <Base context={context}>
             <CompilerComponent />
-            <Main>
+            <Content>
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
@@ -44,8 +44,8 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         <TabBlock title="Custom">Custom</TabBlock>
                     </Tabs>
                 </ContentBlock>
-            </Main>
-            <Main
+            </Content>
+            <Content
                 title="Artifacts"
                 subtitle="Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need."
                 dark
@@ -56,7 +56,7 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                         define which parts of the artifact you need.
                     </p>
                 </ContentBlock>
-            </Main>
+            </Content>
         </Base>
     );
 }
-- 
cgit v1.2.3


From 00afb2440dfe41f19c40030de60ffd274a782a04 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Mon, 22 Oct 2018 13:24:43 +0200
Subject: remove contentBlock from content component

---
 packages/dev-tools-pages/ts/pages/Compiler.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

(limited to 'packages/dev-tools-pages/ts/pages/Compiler.tsx')

diff --git a/packages/dev-tools-pages/ts/pages/Compiler.tsx b/packages/dev-tools-pages/ts/pages/Compiler.tsx
index 8e2c7f058..96f26a978 100644
--- a/packages/dev-tools-pages/ts/pages/Compiler.tsx
+++ b/packages/dev-tools-pages/ts/pages/Compiler.tsx
@@ -16,6 +16,7 @@ function Compiler() {
         <Base context={context}>
             <CompilerComponent />
             <Content>
+                <ContentBlock main title="Get started" />
                 <ContentBlock title="Required steps">
                     <List items={['Step 1', 'Step 2']} />
                 </ContentBlock>
@@ -45,11 +46,14 @@ const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDi
                     </Tabs>
                 </ContentBlock>
             </Content>
-            <Content
-                title="Artifacts"
-                subtitle="Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can define which parts of the artifact you need."
-                dark
-            >
+            <Content dark>
+                <ContentBlock main title="Artifacts">
+                    <p>
+                        Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
+                        define which parts of the artifact you need.
+                    </p>
+                </ContentBlock>
+
                 <ContentBlock title="Production">
                     <p>
                         Sol compiler uses solidity standard JSON output format for the artifacts. This way, you can
-- 
cgit v1.2.3

