Add view template + mdx example

packages/website/md/new-docs/usage.mdx

@@ -0,0 +1,77 @@
+---
+title: 'Sol-coverage Usage'
+---
+
+Sol-coverage uses transaction traces in order to figure out which lines of Solidity source code have been covered by your tests. In order for it to gather these traces, you must add the `CoverageSubprovider` to the [ProviderEngine](https://github.com/MetaMask/provider-engine) instance you use when running your Solidity tests. If you're unfamiliar with `ProviderEngine`, please read the [Web3 Provider explained](https://0x.org/wiki#Web3-Provider-Explained) wiki article.
+
+The CoverageSubprovider eavesdrops on the `eth_sendTransaction` and `eth_call` RPC calls and collects traces after each call using `debug_traceTransaction`. `eth_call`'s' don't generate traces - so we take a snapshot, re-submit it as a transaction, get the trace and then revert the snapshot.
+
+Coverage subprovider needs some info about your contracts (`srcMap`, `bytecode`). It gets that info from your project's artifacts. Some frameworks have their own artifact format. Some artifact formats don't actually contain all the neccessary data.
+
+In order to use `CoverageSubprovider` with your favorite framework you need to pass an `artifactsAdapter` to it.
+
+### Sol-compiler
+
+If you are generating your artifacts with [@0x/sol-compiler](https://0x.org/docs/sol-compiler) you can use the `SolCompilerArtifactAdapter` we've implemented for you.
+
+```typescript
+import { SolCompilerArtifactAdapter } from '@0x/sol-coverage';
+// Both artifactsDir and contractsDir are optional and will be fetched from compiler.json if not passed in
+const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir);
+```
+
+### Truffle
+
+If your project is using [Truffle](https://truffleframework.com/), we've written a `TruffleArtifactsAdapter`for you.
+
+```typescript
+import { TruffleArtifactAdapter } from '@0x/sol-coverage';
+const projectRoot = '.';
+const solcVersion = '0.5.0';
+const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);
+```
+
+Because truffle artifacts don't have all the data we need - we actually will recompile your contracts under the hood. That's why you don't need to pass an `artifactsPath`.
+
+### Other framework/toolset
+
+You'll need to write your own artifacts adapter. It should extend `AbstractArtifactsAdapter`.
+
+```typescript
+import { AbstractArtifactAdapter } from '@0x/sol-trace';
+
+class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...};
+const artifactAdapter = new YourCustomArtifactsAdapter(...);
+```
+
+### Usage
+
+```typescript
+import { CoverageSubprovider } from '@0x/sol-coverage';
+import ProviderEngine = require('web3-provider-engine');
+
+const provider = new ProviderEngine();
+// Some calls might not have `from` address specified. Nevertheless - transactions need to be submitted from an address with at least some funds. defaultFromAddress is the address that will be used to submit those calls as transactions from.
+const defaultFromAddress = '0x5409ed021d9299bf6814279a6a1411a7e866a631';
+const coverageSubprovider = new CoverageSubprovider(artifactsAdapter, defaultFromAddress);
+
+provider.addProvider(coverageSubprovider);
+// Add all your other providers
+provider.start();
+```
+
+After your test suite is complete (e.g in the Mocha global `after` hook), you'll need to call:
+
+```typescript
+await coverageSubprovider.writeCoverageAsync();
+```
+
+This will create a `coverage.json` file in a `coverage` directory. This file has an [Istanbul format](https://github.com/gotwarlost/istanbul/blob/master/coverage.json.md) - so you can use it with any of the existing Istanbul reporters.
+
+```bash
+yarn add -D istanbul
+istanbul report html
+open coverage/index.html
+```
+
+Use [Ganache](https://github.com/trufflesuite/ganache-cli) as a backing node.

packages/website/ts/index.tsx

@@ -13,6 +13,7 @@ import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage';
 import { DocsGuides } from 'ts/pages/docs/guides';
 import { DocsPageTemplate } from 'ts/pages/docs/page_template';
 import { DocsTools } from 'ts/pages/docs/tools';
+import { DocsView } from 'ts/pages/docs/view';
 import { store } from 'ts/redux/store';
 import { WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
 import { muiTheme } from 'ts/utils/mui_theme';
@@ -221,7 +222,12 @@ render(
                                     component={LazyAssetSwapperDocumentation}
                                 />
                                 <Route path={`${WebsitePaths.Docs}/template`} component={DocsPageTemplate as any} />
-                                <Route path={`${WebsitePaths.Docs}/guides`} component={DocsGuides as any} />
+                                <Route
+                                    exact={true}
+                                    path={`${WebsitePaths.Docs}/guides`}
+                                    component={DocsGuides as any}
+                                />
+                                <Route path={`${WebsitePaths.Docs}/guides/:page`} component={DocsView as any} />
                                 <Route path={`${WebsitePaths.Docs}/tools`} component={DocsTools as any} />
                                 <Route path={WebsitePaths.Docs} component={DocsHome as any} />
                                 {/* Legacy endpoints */}

packages/website/ts/pages/docs/view.tsx

@@ -0,0 +1,122 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+// import { Tabs } from 'react-tabs';
+import { match } from 'react-router-dom';
+import { Callout } from 'ts/components/docs/callout';
+import { Code } from 'ts/components/docs/code';
+import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
+import { FeatureLink } from 'ts/components/docs/feature_link';
+import { HelpCallout } from 'ts/components/docs/help_callout';
+import { HelpfulCta } from 'ts/components/docs/helpful_cta';
+import { Hero } from 'ts/components/docs/hero';
+import { NewsletterSignup } from 'ts/components/docs/newsletter_signup';
+import { Note } from 'ts/components/docs/note';
+import { Resource } from 'ts/components/docs/resource/resource';
+import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
+import { ChapterLinks } from 'ts/components/docs/sidebar/chapter_links';
+import { Filters } from 'ts/components/docs/sidebar/filters';
+import { SiteWrap } from 'ts/components/docs/siteWrap';
+import { StepLinkConfig } from 'ts/components/docs/step_link';
+import { StepLinks } from 'ts/components/docs/step_links';
+import { Table } from 'ts/components/docs/table';
+import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/tabs';
+import { TutorialSteps } from 'ts/components/docs/tutorial_steps';
+import { UnorderedList } from 'ts/components/docs/unordered_list';
+import { DocumentTitle } from 'ts/components/document_title';
+import { Section, SectionProps } from 'ts/components/newLayout';
+import { Heading, Paragraph } from 'ts/components/text';
+import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
+import { documentConstants } from 'ts/utils/document_meta_constants';
+
+interface Props {
+    history: History;
+    location: Location;
+    match: match<any>;
+    theme: {
+        bgColor: string;
+        textColor: string;
+        linkColor: string;
+    };
+}
+
+interface State {
+    Component: JSX.Element | string;
+}
+
+export class DocsView extends React.Component<Props, State> {
+    public state = {
+        Component: '',
+    };
+    public componentDidMount(): void {
+        // tslint:disable-next-line: no-console
+        console.log(this.props.match.params.page);
+        this._addComponentAsync(this.props.match.params.page);
+    }
+    public componentDidUpdate(prevProps: Props, prevState: State): void {
+        console.log(this.props);
+    }
+    public render(): React.ReactNode {
+        const { Component } = this.state;
+        return (
+            <SiteWrap theme="light">
+                <DocumentTitle {...documentConstants.DOCS} />
+                <Hero isHome={false} title={`Page Template`} description="This a subheader for the page" />
+                <Section maxWidth={'1030px'} isPadded={false} padding="0 0">
+                    <Columns>
+                        <aside>
+                            <ChapterLinks />
+                        </aside>
+                        <article>{Component ? <Component /> : null}</article>
+                    </Columns>
+                </Section>
+            </SiteWrap>
+        );
+    }
+    private async _addComponentAsync(name: string): Promise<void> {
+        return import(`../../../md/new-docs/${name}.mdx`)
+            .then(component => {
+                // tslint:disable-next-line: no-debugger
+                debugger;
+                this.setState({
+                    Component: component.default,
+                });
+            })
+            .catch(() => {
+                this.setState({
+                    Component: '',
+                });
+            });
+    }
+}
+
+const Columns = styled.div<{ count?: number }>`
+    display: grid;
+    grid-template-columns: 230px 1fr;
+    grid-column-gap: 118px;
+    grid-row-gap: 30px;
+`;
+
+Columns.defaultProps = {
+    count: 2,
+};
+
+const Separator = styled.hr`
+    border-width: 0 0 1px;
+    border-color: #e4e4e4;
+    height: 0;
+    margin-top: 60px;
+    margin-bottom: 60px;
+`;
+
+const LargeHeading = styled(Heading).attrs({
+    asElement: 'h1',
+})`
+    font-size: 2.125rem !important;
+`;
+
+const LargeIntro = styled(Paragraph).attrs({
+    size: 'medium',
+})``;

packages/website/webpack.config.js

@@ -69,9 +69,15 @@ const config = {
             {
                 test: /\.mdx$/,
                 use: [
-                    'babel-loader',
-                    '@mdx-js/loader'
-                ]
+                    {
+                        loader: 'babel-loader',
+                        options: {
+                            plugins: ['syntax-object-rest-spread'],
+                            presets: ['env', 'react'],
+                        },
+                    },
+                    '@mdx-js/loader',
+                ],
             },
             {
                 test: /\.svg$/,
@@ -131,9 +137,7 @@ module.exports = (_env, argv) => {
     let plugins = [];
     if (argv.mode === 'development') {
         config.mode = 'development';
-        plugins.concat([
-            new BundleAnalyzerPlugin(),
-        ]);
+        plugins.concat([new BundleAnalyzerPlugin()]);
 
         // SSL certs
         if (fs.existsSync('./server.cert') && fs.existsSync('./server.key')) {
@@ -141,7 +145,7 @@ module.exports = (_env, argv) => {
                 ...config.devServer.https,
                 key: fs.readFileSync('./server.key'),
                 cert: fs.readFileSync('./server.cert'),
-            }
+            };
         }
     } else {
         config.mode = 'production';