Merge pull request #427 from 0xProject/fix/doc_bugs

Miscellaneous Doc Fixes

28 files changed, 130 insertions, 61 deletions

diff --git a/packages/website/md/docs/connect/installation.md b/packages/website/md/docs/connect/installation.md
index 184fa6e0d..950bf92ca 100644
--- a/packages/website/md/docs/connect/installation.md
+++ b/packages/website/md/docs/connect/installation.md
@@ -12,4 +12,4 @@ import { HttpClient } from '@0xproject/connect';
 
 ### Wiki
 
-Check out our [0x Connect introduction tutorial](https://0xproject.com/wiki#Intro-Tutorial:-Connect) for information on how to integrate relayers into your application.
+Check out our [0x Connect introduction tutorial](https://0xproject.com/wiki#Intro-Tutorial) for information on how to integrate relayers into your application.
diff --git a/packages/website/package.json b/packages/website/package.json
index ceb3853f9..07122cc7c 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -43,10 +43,10 @@
         "react-document-title": "^2.0.3",
         "react-dom": "15.6.1",
         "react-ga": "^2.4.1",
-        "react-highlight": "^0.10.0",
+        "react-highlight": "0xproject/react-highlight",
         "react-html5video": "^2.1.0",
         "react-inlinesvg": "^0.5.5",
-        "react-markdown": "^2.5.0",
+        "react-markdown": "^3.2.2",
         "react-recaptcha": "^2.3.2",
         "react-redux": "^5.0.3",
         "react-router-dom": "^4.1.1",
diff --git a/packages/website/public/images/doc_icons/connect.png b/packages/website/public/images/doc_icons/connect.png
index ba9bb8a3a..244f504b3 100644
--- a/packages/website/public/images/doc_icons/connect.png
+++ b/packages/website/public/images/doc_icons/connect.png
diff --git a/packages/website/public/images/doc_icons/contracts.png b/packages/website/public/images/doc_icons/contracts.png
index f5c6545ca..03956f162 100644
--- a/packages/website/public/images/doc_icons/contracts.png
+++ b/packages/website/public/images/doc_icons/contracts.png
diff --git a/packages/website/public/images/doc_icons/zeroExJs.png b/packages/website/public/images/doc_icons/zeroExJs.png
index 029777ffe..fe0c49a0f 100644
--- a/packages/website/public/images/doc_icons/zeroExJs.png
+++ b/packages/website/public/images/doc_icons/zeroExJs.png
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index 85b4e892f..156dc44e8 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -69,14 +69,6 @@ export class Blockchain {
     private _cachedProviderNetworkId: number;
     private _ledgerSubprovider: LedgerWalletSubprovider;
     private _defaultGasPrice: BigNumber;
-    private static async _onPageLoadAsync(): Promise<void> {
-        if (document.readyState === 'complete') {
-            return; // Already loaded
-        }
-        return new Promise<void>((resolve, reject) => {
-            window.onload = () => resolve();
-        });
-    }
     private static _getNameGivenProvider(provider: Web3.Provider): string {
         if (!_.isUndefined((provider as any).isMetaMask)) {
             return constants.PROVIDER_NAME_METAMASK;
@@ -710,7 +702,7 @@ export class Blockchain {
         return tokenByAddress;
     }
     private async _onPageLoadInitFireAndForgetAsync() {
-        await Blockchain._onPageLoadAsync(); // wait for page to load
+        await utils.onPageLoadAsync(); // wait for page to load
 
         // Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in
         // order to properly instantiate the web3Wrapper. Since we must use the async call, we cannot
diff --git a/packages/website/ts/containers/about.tsx b/packages/website/ts/containers/about.ts
index ce8fd3afb..ce8fd3afb 100644
--- a/packages/website/ts/containers/about.tsx
+++ b/packages/website/ts/containers/about.ts
diff --git a/packages/website/ts/containers/connect_documentation.tsx b/packages/website/ts/containers/connect_documentation.ts
index 464bdcd74..464bdcd74 100644
--- a/packages/website/ts/containers/connect_documentation.tsx
+++ b/packages/website/ts/containers/connect_documentation.ts
diff --git a/packages/website/ts/containers/faq.tsx b/packages/website/ts/containers/faq.ts
index b539e33c9..b539e33c9 100644
--- a/packages/website/ts/containers/faq.tsx
+++ b/packages/website/ts/containers/faq.ts
diff --git a/packages/website/ts/containers/generate_order_form.tsx b/packages/website/ts/containers/generate_order_form.ts
index 8c5deb690..8c5deb690 100644
--- a/packages/website/ts/containers/generate_order_form.tsx
+++ b/packages/website/ts/containers/generate_order_form.ts
diff --git a/packages/website/ts/containers/landing.tsx b/packages/website/ts/containers/landing.ts
index a620bb12e..a620bb12e 100644
--- a/packages/website/ts/containers/landing.tsx
+++ b/packages/website/ts/containers/landing.ts
diff --git a/packages/website/ts/containers/not_found.tsx b/packages/website/ts/containers/not_found.ts
index dd151e2c8..dd151e2c8 100644
--- a/packages/website/ts/containers/not_found.tsx
+++ b/packages/website/ts/containers/not_found.ts
diff --git a/packages/website/ts/containers/portal.tsx b/packages/website/ts/containers/portal.ts
index befa16bdb..befa16bdb 100644
--- a/packages/website/ts/containers/portal.tsx
+++ b/packages/website/ts/containers/portal.ts
diff --git a/packages/website/ts/containers/smart_contracts_documentation.tsx b/packages/website/ts/containers/smart_contracts_documentation.ts
index a839529aa..a839529aa 100644
--- a/packages/website/ts/containers/smart_contracts_documentation.tsx
+++ b/packages/website/ts/containers/smart_contracts_documentation.ts
diff --git a/packages/website/ts/containers/wiki.tsx b/packages/website/ts/containers/wiki.ts
index 2cb87d0a1..2cb87d0a1 100644
--- a/packages/website/ts/containers/wiki.tsx
+++ b/packages/website/ts/containers/wiki.ts
diff --git a/packages/website/ts/containers/zero_ex_js_documentation.tsx b/packages/website/ts/containers/zero_ex_js_documentation.ts
index 500bf8d96..500bf8d96 100644
--- a/packages/website/ts/containers/zero_ex_js_documentation.tsx
+++ b/packages/website/ts/containers/zero_ex_js_documentation.ts
diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx
index 23cfd96bd..5f177e97e 100644
--- a/packages/website/ts/pages/documentation/comment.tsx
+++ b/packages/website/ts/pages/documentation/comment.tsx
@@ -15,7 +15,7 @@ const defaultProps = {
 export const Comment: React.SFC<CommentProps> = (props: CommentProps) => {
     return (
         <div className={`${props.className} comment`}>
-            <ReactMarkdown source={props.comment} renderers={{ CodeBlock: MarkdownCodeBlock }} />
+            <ReactMarkdown source={props.comment} renderers={{ code: MarkdownCodeBlock }} />
         </div>
     );
 };
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 7eed78fc3..699bef7a8 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -29,11 +29,11 @@ import {
     TypescriptMethod,
 } from 'ts/types';
 import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
 const TOP_BAR_HEIGHT = 60;
-const SCROLL_TOP_ID = 'docsScrollTop';
 
 const networkNameToColor: { [network: string]: string } = {
     [Networks.Kovan]: colors.purple,
@@ -76,7 +76,8 @@ const styles: Styles = {
 export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
     public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
         if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
-            this._scrollToHash();
+            const hash = this.props.location.hash.slice(1);
+            utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
         }
     }
     public render() {
@@ -115,8 +116,12 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                 className="relative col lg-col-9 md-col-9 sm-col-12 col-12"
                                 style={{ backgroundColor: colors.white }}
                             >
-                                <div id="documentation" style={styles.mainContainers} className="absolute px1">
-                                    <div id={SCROLL_TOP_ID} />
+                                <div
+                                    id={configs.SCROLL_CONTAINER_ID}
+                                    style={styles.mainContainers}
+                                    className="absolute px1"
+                                >
+                                    <div id={configs.SCROLL_TOP_ID} />
                                     {this._renderDocumentation()}
                                 </div>
                             </div>
@@ -325,17 +330,4 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
             />
         );
     }
-    private _scrollToHash(): void {
-        const hashWithPrefix = this.props.location.hash;
-        let hash = hashWithPrefix.slice(1);
-        if (_.isEmpty(hash)) {
-            hash = SCROLL_TOP_ID; // scroll to the top
-        }
-
-        scroller.scrollTo(hash, {
-            duration: 0,
-            offset: 0,
-            containerId: 'documentation',
-        });
-    }
 }
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index 0e53e38e7..e62c9ecbd 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -25,9 +25,10 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
     }
     public render() {
         const event = this.props.event;
+        const id = `${this.props.sectionName}-${event.name}`;
         return (
             <div
-                id={`${this.props.sectionName}-${event.name}`}
+                id={id}
                 className="pb2"
                 style={{ overflow: 'hidden', width: '100%' }}
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
@@ -36,7 +37,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
                 <AnchorTitle
                     headerSize={HeaderSizes.H3}
                     title={`Event ${event.name}`}
-                    id={event.name}
+                    id={id}
                     shouldShowAnchor={this.state.shouldShowAnchor}
                 />
                 <div style={{ fontSize: 16 }}>
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
index 98ca3aee6..6dfb74554 100644
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_code_block.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import * as HighLight from 'react-highlight';
 
 interface MarkdownCodeBlockProps {
-    literal: string;
+    value: string;
     language: string;
 }
 
@@ -13,12 +13,12 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M
     // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying
     // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed.
     public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) {
-        return nextProps.literal !== this.props.literal || nextProps.language !== this.props.language;
+        return nextProps.value !== this.props.value || nextProps.language !== this.props.language;
     }
     public render() {
         return (
             <span style={{ fontSize: 14 }}>
-                <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight>
+                <HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight>
             </span>
         );
     }
diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx
new file mode 100644
index 000000000..e4553c87f
--- /dev/null
+++ b/packages/website/ts/pages/shared/markdown_link_block.tsx
@@ -0,0 +1,46 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { configs } from 'ts/utils/configs';
+import { utils } from 'ts/utils/utils';
+
+interface MarkdownLinkBlockProps {
+    href: string;
+}
+
+interface MarkdownLinkBlockState {}
+
+export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, MarkdownLinkBlockState> {
+    // Re-rendering a linkBlock causes it to remain unclickable.
+    // We therefore noop re-renders on this component if it's props haven't changed.
+    public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) {
+        return nextProps.href !== this.props.href;
+    }
+    public render() {
+        const href = this.props.href;
+        const isLinkToSection = _.startsWith(href, '#');
+        // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons
+        if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) {
+            return (
+                <a href={href} target="_blank" rel="nofollow noreferrer noopener">
+                    {this.props.children}
+                </a>
+            );
+        } else if (isLinkToSection) {
+            return (
+                <a
+                    style={{ cursor: 'pointer', textDecoration: 'underline' }}
+                    onClick={this._onHashUrlClick.bind(this, href)}
+                >
+                    {this.props.children}
+                </a>
+            );
+        } else {
+            return <a href={href}>{this.props.children}</a>;
+        }
+    }
+    private _onHashUrlClick(href: string) {
+        const hash = href.split('#')[1];
+        utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
+        utils.setUrlHash(hash);
+    }
+}
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx
index 4d7d8b4ca..7253072d9 100644
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ b/packages/website/ts/pages/shared/markdown_section.tsx
@@ -5,6 +5,7 @@ import * as ReactMarkdown from 'react-markdown';
 import { Element as ScrollElement } from 'react-scroll';
 import { AnchorTitle } from 'ts/pages/shared/anchor_title';
 import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
+import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block';
 import { HeaderSizes } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
@@ -64,7 +65,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                         </div>
                     </div>
                     <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
-                    <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} />
+                    <ReactMarkdown
+                        source={this.props.markdownContent}
+                        escapeHtml={false}
+                        renderers={{
+                            code: MarkdownCodeBlock,
+                            link: MarkdownLinkBlock,
+                        }}
+                    />
                 </ScrollElement>
             </div>
         );
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 1a08ca9f9..82a40eb7e 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -86,14 +86,14 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                         docs
                     </div>
                 </div>
-                <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 14, height: 17 }}>
+                <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
                     |
                 </div>
                 <div className="flex">
                     <div>
-                        <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="24" />
+                        <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" />
                     </div>
-                    <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}>
+                    <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
                         {this.props.title}
                     </div>
                 </div>
diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx
index a5f5f52cf..52a1f30d9 100644
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ b/packages/website/ts/pages/shared/section_header.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Element as ScrollElement } from 'react-scroll';
 import { AnchorTitle } from 'ts/pages/shared/anchor_title';
 import { HeaderSizes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 interface SectionHeaderProps {
@@ -34,7 +35,19 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe
                 <ScrollElement name={id}>
                     <AnchorTitle
                         headerSize={this.props.headerSize}
-                        title={<span style={{ textTransform: 'capitalize' }}>{sectionName}</span>}
+                        title={
+                            <span
+                                style={{
+                                    textTransform: 'uppercase',
+                                    color: colors.grey,
+                                    fontFamily: 'Roboto Mono',
+                                    fontWeight: 300,
+                                    fontSize: 27,
+                                }}
+                            >
+                                {sectionName}
+                            </span>
+                        }
                         id={id}
                         shouldShowAnchor={this.state.shouldShowAnchor}
                     />
diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx
index 3b331af9b..1b4dbb375 100644
--- a/packages/website/ts/pages/shared/version_drop_down.tsx
+++ b/packages/website/ts/pages/shared/version_drop_down.tsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash';
 import DropDownMenu from 'material-ui/DropDownMenu';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
+import { utils } from 'ts/utils/utils';
 
 interface VersionDropDownProps {
     selectedVersion: string;
@@ -31,8 +32,6 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
         return items;
     }
     private _updateSelectedVersion(e: any, index: number, semver: string) {
-        const port = window.location.port;
-        const hasPort = !_.isUndefined(port);
         let path = window.location.pathname;
         const lastChar = path[path.length - 1];
         if (_.isFinite(_.parseInt(lastChar))) {
@@ -40,7 +39,7 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
             pathSections.pop();
             path = pathSections.join('/');
         }
-        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}${path}`;
-        window.location.href = `${baseUrl}/${semver}${window.location.hash}`;
+        const baseUrl = utils.getCurrentBaseUrl();
+        window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`;
     }
 }
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 56c3be0fe..4bb6052a2 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -135,11 +135,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                                 }}
                             >
                                 <div
-                                    id="documentation"
+                                    id={configs.SCROLL_CONTAINER_ID}
                                     style={{ ...mainContainersStyle, overflow: 'auto' }}
                                     className="absolute"
                                 >
-                                    <div id="0xProtocolWiki" />
+                                    <div id={configs.SCROLL_TOP_ID} />
                                     <div id="wiki" style={{ paddingRight: 2 }}>
                                         {this._renderWikiArticles()}
                                     </div>
@@ -188,19 +188,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             </div>
         );
     }
-    private _scrollToHash(): void {
-        const hashWithPrefix = this.props.location.hash;
-        let hash = hashWithPrefix.slice(1);
-        if (_.isEmpty(hash)) {
-            hash = '0xProtocolWiki'; // scroll to the top
-        }
-
-        scroller.scrollTo(hash, {
-            duration: 0,
-            offset: 0,
-            containerId: 'documentation',
-        });
-    }
     private async _fetchArticlesBySectionAsync(): Promise<void> {
         const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`;
         const response = await fetch(endpoint);
@@ -224,8 +211,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                 {
                     articlesBySection,
                 },
-                () => {
-                    this._scrollToHash();
+                async () => {
+                    await utils.onPageLoadAsync();
+                    const hash = this.props.location.hash.slice(1);
+                    utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
                 },
             );
         }
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 7e9ba69de..388fc8530 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -94,6 +94,8 @@ export const configs = {
         [3]: [`https://ropsten.infura.io/${INFURA_API_KEY}`],
         [4]: [`https://rinkeby.infura.io/${INFURA_API_KEY}`],
     } as PublicNodeUrlsByNetworkId,
+    SCROLL_CONTAINER_ID: 'documentation',
+    SCROLL_TOP_ID: 'pageScrollTop',
     SHOULD_DEPRECATE_OLD_WETH_TOKEN: true,
     SYMBOLS_OF_MINTABLE_KOVAN_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'],
     SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS: [
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index c38f84c92..a1e045af7 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -4,6 +4,7 @@ import deepEqual = require('deep-equal');
 import isMobile = require('is-mobile');
 import * as _ from 'lodash';
 import * as moment from 'moment';
+import { scroller } from 'react-scroll';
 import {
     EtherscanLinkSuffixes,
     Networks,
@@ -290,4 +291,30 @@ export const utils = {
         );
         return isTestNetwork;
     },
+    getCurrentBaseUrl() {
+        const port = window.location.port;
+        const hasPort = !_.isUndefined(port);
+        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
+        return baseUrl;
+    },
+    scrollToHash(hash: string, containerId: string): void {
+        let finalHash = hash;
+        if (_.isEmpty(hash)) {
+            finalHash = configs.SCROLL_TOP_ID; // scroll to the top
+        }
+
+        scroller.scrollTo(finalHash, {
+            duration: 0,
+            offset: 0,
+            containerId,
+        });
+    },
+    async onPageLoadAsync(): Promise<void> {
+        if (document.readyState === 'complete') {
+            return; // Already loaded
+        }
+        return new Promise<void>((resolve, reject) => {
+            window.onload = () => resolve();
+        });
+    },
 };