[WIP] Updated react-syntax-highlighter. Added loading state to docs. Replaced search placeholder text.

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

@@ -1,12 +1,7 @@
 export const meta = {
-    title: 'Sol-coverage Usage',
+    title: 'Sol-compiler Usage',
 };
 
-export const codeSample = `import { TruffleArtifactAdapter } from '@0x/sol-coverage';
-const projectRoot = '.';
-const solcVersion = '0.5.0';
-const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`;
-
 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.

packages/website/package.json

@@ -86,7 +86,7 @@
         "react-router-dom": "^5.0.1",
         "react-scroll": "https://github.com/0xProject/react-scroll.git#d2afc2729dc09980e4113d8c38a1b012ba180d81",
         "react-scrollable-anchor": "^0.6.1",
-        "react-syntax-highlighter": "^10.1.1",
+        "react-syntax-highlighter": "^11.0.1",
         "react-tabs": "^3.0.0",
         "react-tooltip": "^3.2.7",
         "react-transition-group": "^4.2.1",

packages/website/ts/components/docs/search/autocomplete.tsx

@@ -67,7 +67,7 @@ export class CustomAutoComplete extends React.Component<AutoCompleteProps, AutoC
         const { value } = this.state;
 
         const inputProps = {
-            placeholder: 'Search docs...',
+            placeholder: 'Search docs',
             onChange: this._onChange.bind(this),
             value,
         };

packages/website/ts/components/docs/search_input.tsx

@@ -63,7 +63,7 @@ const LabelText = styled.span`
 `;
 
 const Input = styled.input.attrs({
-    placeholder: 'Search docs...',
+    placeholder: 'Search docs',
 })<ISearchInputProps>`
     background: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h24v24H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 10.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0zM10.5 3a7.5 7.5 0 1 0 4.55 13.463l4.743 4.744 1.414-1.414-4.744-4.744A7.5 7.5 0 0 0 10.5 3z' fill='%235C5C5C'/%3E%3C/svg%3E")
         transparent left center no-repeat;

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

@@ -2,6 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { match } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { utils } from '@0x/react-shared';
+import _ from 'lodash';
+
 import { MDXProvider } from '@mdx-js/react';
 
 import CircularProgress from 'material-ui/CircularProgress';
@@ -24,6 +27,8 @@ import { Heading, Paragraph } from 'ts/components/text';
 
 import { documentConstants } from 'ts/utils/document_meta_constants';
 
+import { colors } from 'ts/style/colors';
+
 interface IDocsViewProps {
     history: History;
     location: Location;
@@ -40,33 +45,28 @@ interface IDocsViewState {
     Component: React.ReactNode;
 }
 
-const Loader = () => <CircularProgress size={80} thickness={5} />;
-
 export const DocsView: React.FC<IDocsViewProps> = props => {
+    const { page } = props.match.params;
+
     const [state, setState] = useState<IDocsViewState>({
-        title: 'Loading...',
-        Component: Loader,
+        title: _.capitalize(utils.convertDashesToSpaces(page)),
+        Component: null,
     });
 
     const { title, Component } = state;
-    const { page } = props.match.params;
-
-    console.log('props', props);
 
     useEffect(() => {
-        // tslint:disable-next-line: no-console
-        console.log(page);
         void loadPageAsync(page);
     }, [page]);
 
     const loadPageAsync = async (fileName: string) => {
         const component = await import(`../../../md/new-docs/${fileName}.mdx`);
-        if (component) {
-            setState({
-                title: component.meta.title,
-                Component: component.default,
-            });
-        }
+        // if (component) {
+        //     setState({
+        //         title: component.meta.title,
+        //         Component: component.default,
+        //     });
+        // }
         // @TODO: add error handling, loading
     };
 
@@ -75,25 +75,38 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
             <DocumentTitle {...documentConstants.DOCS} />
             <Hero isHome={false} title={title} />
             <Section maxWidth="1030px" isPadded={false} padding="0 0">
-                <Columns>
-                    <aside>
-                        <h3>Sidebar</h3>
-                    </aside>
-                    <ContentWrapper>
-                        <MDXProvider components={mdxComponents}>
-                            {/*
+                {Component ? (
+                    <Columns>
+                        <aside>
+                            <h3>Sidebar</h3>
+                        </aside>
+                        <ContentWrapper>
+                            <MDXProvider components={mdxComponents}>
+                                {/*
                                 // @ts-ignore */}
-                            <Component />
-                        </MDXProvider>
-                        {/* <HelpCallout />
+                                <Component />
+                            </MDXProvider>
+                            {/* <HelpCallout />
                         <HelpfulCta /> */}
-                    </ContentWrapper>
-                </Columns>
+                        </ContentWrapper>
+                    </Columns>
+                ) : (
+                    <LoaderWrapper>
+                        <CircularProgress size={80} thickness={5} color={colors.brandDark} />
+                    </LoaderWrapper>
+                )}
             </Section>
         </SiteWrap>
     );
 };
 
+const LoaderWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+`;
+
 const Columns = styled.div`
     display: grid;
     grid-template-columns: 230px 1fr;

packages/website/ts/style/colors.ts

@@ -30,4 +30,3 @@ export const colors = {
     ...sharedColors,
     ...appColors,
 };
-console.log('sharedColors', sharedColors);