WIP docs

packages/website/package.json

@@ -32,6 +32,8 @@
         "@0x/utils": "^4.5.0",
         "@0x/web3-wrapper": "^6.0.11",
         "@reach/dialog": "^0.1.2",
+        "@reach/tabs": "^0.1.6",
+        "@types/body-scroll-lock": "^2.6.0",
         "@types/react-lazyload": "^2.3.1",
         "@types/react-loadable": "^5.4.2",
         "@types/react-syntax-highlighter": "^0.0.8",
@@ -39,6 +41,7 @@
         "accounting": "^0.4.1",
         "basscss": "^8.0.3",
         "blockies": "^0.0.2",
+        "body-scroll-lock": "^2.6.1",
         "bowser": "^1.9.4",
         "change-case": "^3.0.2",
         "deep-equal": "^1.0.1",
@@ -92,6 +95,7 @@
     },
     "devDependencies": {
         "@0x/tslint-config": "^3.0.1",
+        "@mdx-js/loader": "^1.0.0-rc.4",
         "@types/accounting": "^0.4.1",
         "@types/blockies": "^0.0.0",
         "@types/deep-equal": "^1.0.0",

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

@@ -0,0 +1,79 @@
+import { Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { withTheme } from 'styled-components';
+
+import { Button } from 'ts/components/button';
+import { SearchInput } from 'ts/components/docs/search_input';
+import { Icon } from 'ts/components/icon';
+import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+import { ThemeValuesInterface } from 'ts/components/siteWrap';
+import { Heading, Paragraph } from 'ts/components/text';
+import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+interface WrapperProps {
+    type?: 'standard' | 'alert' | 'success';
+}
+
+export interface CalloutConfig extends WrapperProps {
+    text: string;
+}
+
+const ThemeSettings = {
+    success: {
+        bgColor: 'rgba(0, 174, 153, 0.1)',
+        icon: (
+<svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 27c7.18 0 13-5.82 13-13S21.18 1 14 1 1 6.82 1 14s5.82 13 13 13z" stroke="#00AE99" strokeWidth="1.054" strokeMiterlimit="10"/>
+  <path d="M14.002 26.977c7.167 0 12.977-5.81 12.977-12.976 0-7.166-5.81-12.976-12.976-12.976-7.167 0-12.977 5.81-12.977 12.976 0 7.167 5.81 12.976 12.976 12.976z" stroke="#003831" strokeWidth="1.5" strokeMiterlimit="10"/>
+  <path d="M9 14.667L12.125 18 19 10" stroke="#003831" strokeWidth="1.5"/>
+</svg>
+        )
+    },
+    standard: {
+        bgColor: '#F2F2F2',
+        icon: (
+            <svg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14 27c7.18 0 13-5.82 13-13S21.18 1 14 1 1 6.82 1 14s5.82 13 13 13z" stroke="#00AE99" strokeWidth="1.054" strokeMiterlimit="10"/>
+                <path d="M14.002 26.977c7.167 0 12.977-5.81 12.977-12.976 0-7.166-5.81-12.976-12.976-12.976-7.167 0-12.977 5.81-12.977 12.976 0 7.167 5.81 12.976 12.976 12.976z" stroke="#003831" strokeWidth="1.5" strokeMiterlimit="10"/>
+                <path d="M15.298 9.494V7.641h-1.972v1.853h1.972zm-.034 1.853h-1.921V20h1.921v-8.653z" fill="#003831"/>
+            </svg>
+        )
+    },
+    alert: {
+        bgColor: '#FFFAF3',
+        icon: (
+            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M14.0025 26.9774C21.169 26.9774 26.9786 21.1678 26.9786 14.0013C26.9786 6.83476 21.169 1.02515 14.0025 1.02515C6.83598 1.02515 1.02637 6.83476 1.02637 14.0013C1.02637 21.1678 6.83598 26.9774 14.0025 26.9774Z" stroke="#EA9928" strokeWidth="1.5" strokeMiterlimit="10"/>
+                <path d="M12.819 7.862V12.826L13.176 16.566H14.417L14.774 12.826V7.862H12.819ZM14.893 20V17.722H12.7V20H14.893Z" fill="#EA9928"/>
+            </svg>
+        )
+    },
+}
+
+export const Callout: React.FunctionComponent<CalloutConfig> = ({ type, text }: CalloutConfig) => (
+    <Wrapper type={type}>
+        {ThemeSettings[type].icon}
+        <Text>{text}</Text>
+    </Wrapper>
+);
+
+Callout.defaultProps = {
+    type: 'standard',
+};
+
+const Wrapper = styled.a<WrapperProps>`
+background-color: ${props => ThemeSettings[props.type].bgColor};
+    color: ${colors.textDarkPrimary};
+    padding: 1rem 1rem 1rem 1rem;
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+`;
+
+const Text = styled.span`
+    font-size: 1rem;
+    margin-left: 1rem;
+`;

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

@@ -0,0 +1,54 @@
+import { Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { withTheme } from 'styled-components';
+
+import { Button } from 'ts/components/button';
+import { SearchInput } from 'ts/components/docs/search_input';
+import { Icon } from 'ts/components/icon';
+import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+import { ThemeValuesInterface } from 'ts/components/siteWrap';
+import { Heading, Paragraph } from 'ts/components/text';
+import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+export interface CommunityLinkProps {
+    heading: string;
+    icon: string;
+    description?: string;
+    url: string;
+    shouldOpenInNewTab?: boolean;
+    isHome?: boolean;
+}
+
+interface WrapperProps {
+    isHome?: boolean;
+}
+
+export const CommunityLink: React.FunctionComponent<CommunityLinkProps> = (props: CommunityLinkProps) => (
+    <>
+        <Wrapper isHome={props.isHome} href={props.url}>
+            <div>
+                <Icon color={colors.brandLight} name={props.icon} size={100} margin={[0, 0, 24, 0]} />
+                <Heading size="small" marginBottom="8px">{props.heading}</Heading>
+                <Paragraph size="default" marginBottom="0">{props.description}</Paragraph>
+            </div>
+        </Wrapper>
+    </>
+);
+
+CommunityLink.defaultProps = {
+    isHome: false,
+};
+
+const Wrapper = styled.a<WrapperProps>`
+    background-color: ${colors.backgroundLight};
+    border: 1px solid #DBDFDD;
+    padding: 50px 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+`;

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

@@ -0,0 +1,220 @@
+import { Link } from '@0x/react-shared';
+import _ from 'lodash';
+import * as React from 'react';
+import MediaQuery from 'react-responsive';
+import styled, { css, withTheme } from 'styled-components';
+
+import Headroom from 'react-headroom';
+
+import { SearchInput } from 'ts/components/docs/search_input';
+import { Hamburger } from 'ts/components/hamburger';
+import { Logo } from 'ts/components/logo';
+import { MobileNav } from 'ts/components/mobileNav';
+import { FlexWrap } from 'ts/components/newLayout';
+import { ThemeValuesInterface } from 'ts/components/siteWrap';
+import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
+
+interface HeaderProps {
+    location?: Location;
+    isNavToggled?: boolean;
+    toggleMobileNav?: () => void;
+    theme: ThemeValuesInterface;
+}
+
+interface NavItemProps {
+    url?: string;
+    id?: string;
+    text?: string;
+    dropdownWidth?: number;
+    dropdownComponent?: React.FunctionComponent<any>;
+}
+
+interface DropdownWrapInterface {
+    width?: number;
+}
+
+const navItems: NavItemProps[] = [
+    {
+        id: 'why',
+        url: WebsitePaths.Why,
+        text: 'Core Concepts',
+    },
+    {
+        id: 'api-explorer',
+        url: WebsitePaths.AboutMission,
+        text: 'API Explorer',
+    },
+    {
+        id: 'tutorials',
+        url: WebsitePaths.AboutMission,
+        text: 'Tutorials',
+    },
+    {
+        id: 'tools',
+        url: WebsitePaths.AboutMission,
+        text: 'Tools',
+    },
+];
+
+class HeaderBase extends React.Component<HeaderProps> {
+    public onUnpin = () => {
+        if (this.props.isNavToggled) {
+            this.props.toggleMobileNav();
+        }
+    };
+
+    public render(): React.ReactNode {
+        const { isNavToggled, toggleMobileNav, theme } = this.props;
+
+        return (
+            <Headroom
+                onUnpin={this.onUnpin}
+                downTolerance={4}
+                upTolerance={10}
+                wrapperStyle={{ position: 'relative', zIndex: 2 }}
+            >
+                <StyledHeader isNavToggled={isNavToggled}>
+                    <HeaderWrap>
+                        <LogoWrap>
+                            <Link to={WebsitePaths.Home}>
+                                <Logo />
+                            </Link>
+                            <DocsLogo />
+                        </LogoWrap>
+
+                        <NavLinks>
+                            {_.map(navItems, (link, index) => (
+                                <NavItem key={`navlink-${index}`} link={link} />
+                            ))}
+                        </NavLinks>
+
+                        <MediaQuery minWidth={990}>
+                            <SearchInput isHome={false} />
+                        </MediaQuery>
+
+                        <Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
+                        <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
+                    </HeaderWrap>
+                </StyledHeader>
+            </Headroom>
+        );
+    }
+}
+
+export const Header = withTheme(HeaderBase);
+
+const NavItem = (props: { link: NavItemProps; key: string }) => {
+    const { link } = props;
+    const Subnav = link.dropdownComponent;
+    const linkElement =
+        link.url === undefined ? (
+            <StyledAnchor href="#">{link.text}</StyledAnchor>
+        ) : (
+            <StyledNavLink to={link.url}>{link.text}</StyledNavLink>
+        );
+    return (
+        <LinkWrap>
+            {linkElement}
+        </LinkWrap>
+    );
+};
+
+const DocsLogo = () => {
+    return (
+        <DocsLogoWrap>
+            / <DocsLogoLink to={WebsitePaths.Docs}>Docs</DocsLogoLink>
+        </DocsLogoWrap>
+    );
+};
+
+const StyledHeader = styled.header<HeaderProps>`
+    padding: 30px;
+    background-color: ${props => colors.backgroundLight};
+`;
+
+const DocsLogoWrap = styled.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-size: 1.411764706rem;
+    color: rgba(0, 0, 0, 0.5);
+    margin-left: 0.875rem;
+
+    a {
+        display: block;
+    }
+`;
+
+const DocsLogoLink = styled(Link)`
+    font-size: inherit;
+    color: inherit;
+    margin-left: 0.625rem;
+`;
+
+const LinkWrap = styled.li`
+    position: relative;
+
+    a {
+        display: block;
+    }
+
+    @media (min-width: 800px) {
+        &:hover > div {
+            display: block;
+            visibility: visible;
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+            transition: opacity 0.35s, transform 0.35s, visibility 0s;
+        }
+    }
+`;
+
+const linkStyles = css`
+    color: ${props => props.theme.textColor};
+    opacity: 0.5;
+    transition: opacity 0.35s;
+    padding: 15px 0;
+    margin: 0 30px;
+
+    &:hover {
+        opacity: 1;
+    }
+`;
+
+const StyledNavLink = styled(Link).attrs({
+    activeStyle: { opacity: 1 },
+})`
+    ${linkStyles};
+`;
+
+const StyledAnchor = styled.a`
+    ${linkStyles};
+    cursor: default;
+`;
+
+const HeaderWrap = styled(FlexWrap)`
+    justify-content: space-between;
+    align-items: center;
+
+    @media (max-width: 800px) {
+        padding-top: 0;
+        display: flex;
+        padding-bottom: 0;
+    }
+`;
+
+const NavLinks = styled.ul`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @media (max-width: 800px) {
+        display: none;
+    }
+`;
+
+const LogoWrap = styled.div`
+    display: flex;
+    align-items: center;
+`;

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

@@ -0,0 +1,51 @@
+import { Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { withTheme } from 'styled-components';
+
+import { Button } from 'ts/components/button';
+import { SearchInput } from 'ts/components/docs/search_input';
+import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+import { ThemeValuesInterface } from 'ts/components/siteWrap';
+import { Heading, Paragraph } from 'ts/components/text';
+import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+interface Props {
+    isHome?: boolean;
+    title?: string;
+    description?: string;
+}
+
+interface LinkConfig {
+    label: string;
+    url: string;
+    shouldOpenInNewTab?: boolean;
+}
+
+export const Hero: React.FunctionComponent<Props> = (props: Props) => (
+    <>
+        <Wrapper isHome={props.isHome}>
+            <Heading size="large" isCentered={true} marginBottom={props.isHome || props.description ? '30px' : '0'}>{props.title}</Heading>
+            {props.description && <Paragraph isCentered={true}>{props.description}</Paragraph>}
+            {props.isHome && <SearchInput isHome={true} />}
+        </Wrapper>
+    </>
+);
+
+Hero.defaultProps = {
+    isHome: false,
+};
+
+const Wrapper = styled.div<Props>`
+    background-color: ${colors.backgroundLight};
+    padding-top: ${props => props.isHome && `63px`};
+    padding-bottom: 80px;
+    margin-bottom: 60px;
+    min-height: 15rem;
+    min-height: 21.875rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+`;

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

@@ -0,0 +1,86 @@
+import { Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { withTheme } from 'styled-components';
+
+import { Button } from 'ts/components/button';
+import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+import { ThemeValuesInterface } from 'ts/components/siteWrap';
+import { Heading } from 'ts/components/text';
+import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+interface Props {
+    isHome?: boolean;
+}
+
+interface LinkConfig {
+    label: string;
+    url: string;
+    shouldOpenInNewTab?: boolean;
+}
+
+export const SearchInput: React.FunctionComponent<Props> = (props: Props) => (
+    <>
+        <Wrapper isHome={props.isHome}>
+            <Label>
+                <LabelText>Search query</LabelText>
+                <Input isHome={props.isHome} />
+            </Label>
+        </Wrapper>
+    </>
+);
+
+SearchInput.defaultProps = {
+    isHome: false,
+};
+
+const Wrapper = styled.div<Props>`
+    width: 100%;
+    max-width: 240px;
+
+    ${props => props.isHome && `
+        max-width: 890px;
+        margin: 0 auto;
+    `};
+`;
+
+const Label = styled.label`
+   position: relative;
+`;
+
+const LabelText = styled.span`
+   position: absolute;
+   opacity: 0;
+   visibility: hidden;
+`;
+
+const Input = styled.input.attrs({
+    placeholder: 'Search docs...',
+})<Props>`
+    background: transparent left center 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") no-repeat ;
+    font-size: 1.375rem;
+    padding: 18px 18px 21px 35px;
+    width: 100%;
+    border: 0;
+    border-bottom: 1px solid #B4BEBD;
+    outline: none;
+
+    ${props => !props.isHome && `
+        background-color: #EBEEEC;
+        border-bottom: 0;
+        padding: 13px 21px 15px 52px;
+        background-position: left 21px center;
+        font-size: 1.125rem;
+    `};
+
+    &:before {
+        content: '';
+        width: 30px;
+        height: 30px;
+        opacity: 0.15;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+`;

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

@@ -0,0 +1,51 @@
+import { Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { withTheme } from 'styled-components';
+
+import { Button } from 'ts/components/button';
+import { SearchInput } from 'ts/components/docs/search_input';
+import { Icon } from 'ts/components/icon';
+import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+import { ThemeValuesInterface } from 'ts/components/siteWrap';
+import { Heading, Paragraph } from 'ts/components/text';
+import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+export interface LinkProps {
+    heading: string;
+    icon: string;
+    description?: string;
+    url: string;
+    shouldOpenInNewTab?: boolean;
+    isHome?: boolean;
+}
+
+interface WrapperProps {
+    isHome?: boolean;
+}
+
+export const ShortcutLink: React.FunctionComponent<LinkProps> = (props: LinkProps) => (
+    <>
+        <Wrapper isHome={props.isHome} href={props.url}>
+            <Icon color={colors.brandLight} name={props.icon} size={80} margin={[0, 40, 0, 0]} />
+            <div>
+                <Heading size="small" marginBottom="8px">{props.heading}</Heading>
+                <Paragraph size="default" marginBottom="0">{props.description}</Paragraph>
+            </div>
+        </Wrapper>
+    </>
+);
+
+ShortcutLink.defaultProps = {
+    isHome: false,
+};
+
+const Wrapper = styled.a<WrapperProps>`
+    background-color: ${colors.backgroundLight};
+    border: 1px solid #DBDFDD;
+    padding: 50px 50px;
+    display: flex;
+    align-items: center;
+`;

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

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+import { Header } from 'ts/components/docs/header';
+import { Footer } from 'ts/components/footer';
+import { GlobalStyles } from 'ts/constants/globalStyle';
+
+interface Props {
+    theme?: 'dark' | 'light' | 'gray';
+    isFullScreen?: boolean;
+    children: any;
+}
+
+interface State {
+    isMobileNavOpen: boolean;
+}
+
+interface MainProps {
+    isNavToggled: boolean;
+    isFullScreen?: boolean;
+}
+
+export interface ThemeValuesInterface {
+    bgColor: string;
+    darkBgColor?: string;
+    lightBgColor: string;
+    introTextColor: string;
+    textColor: string;
+    paragraphColor: string;
+    linkColor: string;
+    mobileNavBgUpper: string;
+    mobileNavBgLower: string;
+    mobileNavColor: string;
+    dropdownBg: string;
+    dropdownButtonBg: string;
+    dropdownBorderColor?: string;
+    dropdownColor: string;
+    headerButtonBg: string;
+    footerBg: string;
+    footerColor: string;
+}
+
+export interface ThemeInterface {
+    [key: string]: ThemeValuesInterface;
+}
+
+const GLOBAL_THEMES: ThemeInterface = {
+    dark: {
+        bgColor: '#000000',
+        darkBgColor: '#111A19',
+        lightBgColor: '#003831',
+        introTextColor: 'rgba(255, 255, 255, 0.75)',
+        textColor: '#FFFFFF',
+        paragraphColor: '#FFFFFF',
+        linkColor: colors.brandLight,
+        mobileNavBgUpper: '#003831',
+        mobileNavBgLower: '#022924',
+        mobileNavColor: '#FFFFFF',
+        dropdownBg: '#111A19',
+        dropdownButtonBg: '#003831',
+        dropdownColor: '#FFFFFF',
+        headerButtonBg: '#00AE99',
+        footerBg: '#181818',
+        footerColor: '#FFFFFF',
+    },
+    light: {
+        bgColor: '#FFFFFF',
+        lightBgColor: '#F3F6F4',
+        darkBgColor: '#003831',
+        introTextColor: 'rgba(92, 92, 92, 0.87)',
+        textColor: '#000000',
+        paragraphColor: '#474747',
+        linkColor: colors.brandDark,
+        mobileNavBgUpper: '#FFFFFF',
+        mobileNavBgLower: '#F3F6F4',
+        mobileNavColor: '#000000',
+        dropdownBg: '#FBFBFB',
+        dropdownButtonBg: '#F3F6F4',
+        dropdownColor: '#003831',
+        dropdownBorderColor: '#E4E4E4',
+        headerButtonBg: '#003831',
+        footerBg: '#F2F2F2',
+        footerColor: '#000000',
+    },
+    gray: {
+        bgColor: '#e0e0e0',
+        lightBgColor: '#003831',
+        introTextColor: 'rgba(92, 92, 92, 0.87)',
+        textColor: '#000000',
+        paragraphColor: '#777777',
+        linkColor: colors.brandDark,
+        mobileNavBgUpper: '#FFFFFF',
+        mobileNavBgLower: '#F3F6F4',
+        mobileNavColor: '#000000',
+        dropdownBg: '#FFFFFF',
+        dropdownButtonBg: '#F3F6F4',
+        dropdownColor: '#003831',
+        headerButtonBg: '#003831',
+        footerBg: '#181818',
+        footerColor: '#FFFFFF',
+    },
+};
+
+export class SiteWrap extends React.Component<Props, State> {
+    public state = {
+        isMobileNavOpen: false,
+    };
+
+    public componentDidMount(): void {
+        document.documentElement.style.overflowY = 'auto';
+        window.scrollTo(0, 0);
+    }
+
+    public toggleMobileNav = () => {
+        this.setState({
+            isMobileNavOpen: !this.state.isMobileNavOpen,
+        });
+    };
+
+    public render(): React.ReactNode {
+        const { children, theme = 'dark', isFullScreen } = this.props;
+        const { isMobileNavOpen } = this.state;
+        const currentTheme = GLOBAL_THEMES[theme];
+
+        return (
+            <>
+                <ThemeProvider theme={currentTheme}>
+                    <>
+                        <GlobalStyles />
+
+                        <Header isNavToggled={isMobileNavOpen} toggleMobileNav={this.toggleMobileNav} />
+
+                        <Main isNavToggled={isMobileNavOpen} isFullScreen={isFullScreen}>
+                            {children}
+                        </Main>
+
+                        <Footer />
+                    </>
+                </ThemeProvider>
+            </>
+        );
+    }
+}
+
+const Main = styled.main<MainProps>`
+    transition: transform 0.5s, opacity 0.5s;
+    opacity: ${props => props.isNavToggled && '0.5'};
+    padding-bottom: 70px;
+
+    ${props =>
+        props.isFullScreen &&
+        `
+        display: flex;
+        align-items: center;
+        min-height: calc(100vh - 108px - 381px);
+    `}
+`;

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

@@ -0,0 +1,55 @@
+import { Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { withTheme } from 'styled-components';
+
+import { Button } from 'ts/components/button';
+import { SearchInput } from 'ts/components/docs/search_input';
+import { Icon } from 'ts/components/icon';
+import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+import { ThemeValuesInterface } from 'ts/components/siteWrap';
+import { Heading, Paragraph } from 'ts/components/text';
+import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+export interface StepLinkConfig {
+    title: string;
+    url: string;
+    shouldOpenInNewTab?: boolean;
+}
+
+interface WrapperProps {
+}
+
+export const StepLink: React.FunctionComponent<StepLinkConfig> = (props: StepLinkConfig) => (
+    <>
+        <Wrapper href={props.url}>
+            <Text>{props.title}</Text>
+            <svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fillRule="evenodd" clipRule="evenodd" d="M2 0h11.5v11H12V2.62L1.06 13.56 0 12.5l11-11H2V0z" fill="currentColor"/>
+            </svg>
+        </Wrapper>
+    </>
+);
+
+const Wrapper = styled.a<WrapperProps>`
+    color: ${colors.brandDark};
+    padding: 21px 25px 19px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &:hover {
+        background-color: ${colors.brandDark};
+        color: ${colors.white};
+    }
+
+    & + & {
+        border-top: 1px solid #DBDFDD;
+    }
+`;
+
+const Text = styled.span`
+    font-size: 1.25rem;
+`;

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

@@ -0,0 +1,36 @@
+import { Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { withTheme } from 'styled-components';
+
+import { Button } from 'ts/components/button';
+import { SearchInput } from 'ts/components/docs/search_input';
+import { StepLink, StepLinkConfig } from 'ts/components/docs/step_link';
+import { Icon } from 'ts/components/icon';
+import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+import { ThemeValuesInterface } from 'ts/components/siteWrap';
+import { Heading, Paragraph } from 'ts/components/text';
+import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+export interface LinkProps {
+    links: StepLinkConfig[];
+}
+
+export const StepLinks: React.FunctionComponent<LinkProps> = (props: LinkProps) => (
+    <>
+        <Wrapper>
+            {props.links.map((shortcut, index) => <StepLink key={`step-${index}`} {...shortcut} />)}
+        </Wrapper>
+    </>
+);
+
+StepLinks.defaultProps = {
+    links: [],
+};
+
+const Wrapper = styled.div`
+    background-color: ${colors.backgroundLight};
+    border: 1px solid #DBDFDD;
+`;

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

@@ -0,0 +1,49 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { withTheme } from 'styled-components';
+
+export interface Props {
+    children: React.ReactNode;
+}
+
+interface WrapperProps {
+}
+
+export const TutorialSteps: React.FunctionComponent<Props> = (props: Props) => (
+    <>
+        <Wrapper>
+            {props.children}
+        </Wrapper>
+    </>
+);
+
+TutorialSteps.defaultProps = {
+};
+
+const Wrapper = styled.ul<WrapperProps>`
+    list-style-type: none;
+    counter-reset: tutorialSteps;
+    margin-bottom: 16rem;
+
+    li {
+        font-size: 1rem;
+        display: flex;
+        align-items: center;
+        counter-increment: tutorialSteps;
+        margin-bottom: 1rem;
+        line-height: 1;
+    }
+
+    li:before {
+        border-radius: 50%;
+        background-color: rgba(0, 174, 153, 0.1);
+        content: counter(tutorialSteps);
+        display: flex;
+        justify-content: center;
+        font-feature-settings: 'tnum' on, 'lnum' on;
+        align-items: center;
+        width: 30px;
+        height: 30px;
+        margin-right: 1rem;
+    }
+`;

packages/website/ts/globals.d.ts

@@ -20,6 +20,11 @@ declare module '*.json' {
     /* tslint:enable */
 }
 
+declare module '*.mdx' {
+    let MDXComponent: (props) => JSX.Element;
+    export default MDXComponent;
+}
+
 declare module '*.svg' {
     import { PureComponent, SVGProps } from 'react';
     export default class extends PureComponent<SVGProps<SVGSVGElement>> {}

packages/website/ts/icons/illustrations/0x-coreConcepts.svg

@@ -0,0 +1,17 @@
+<svg width="82" height="82" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="82" height="82">
+<circle cx="41" cy="41" r="40" fill="#00AE99" stroke="#00AE99" stroke-width="2"/>
+</mask>
+<g mask="url(#mask0)">
+<circle cx="41" cy="41" r="40" stroke="#00AE99" stroke-width="2"/>
+<ellipse cx="40.9329" cy="3.33333" rx="13.3333" ry="13.3333" stroke="#00AE99" stroke-width="2"/>
+<ellipse cx="4.33333" cy="41.1331" rx="13.3333" ry="13.3333" stroke="#00AE99" stroke-width="2"/>
+<path d="M30.816 58.5351C33.4107 60.0506 36.4068 61.0094 39.6192 61.2259C44.0671 61.5043 48.2371 60.329 51.7274 58.1021C53.4572 56.9886 55.0016 55.6277 56.3298 54.0503C55.2487 52.5348 54.0749 50.9574 52.8394 49.3491C52.4996 48.9161 52.1599 48.4831 51.8201 48.0501C50.5228 50.1223 48.6077 51.7925 46.3838 52.8441L42.9243 49.4728L30.816 58.5351Z" stroke="#00AE99" stroke-width="2"/>
+<path d="M23.4646 31.1317C21.982 33.7298 21.0553 36.6681 20.8391 39.8538C20.5611 44.3076 21.7349 48.514 23.9588 51.9781C25.0708 53.7101 26.4299 55.2566 28.0052 56.5865C29.5187 55.504 31.094 54.3287 32.7002 53.0915C33.1327 52.7513 33.5651 52.4111 33.9975 52.0709C31.928 50.7409 30.2601 48.8233 29.2098 46.5964L32.6076 43.1323L23.4646 31.1317Z" stroke="#00AE99" stroke-width="2"/>
+<path d="M51.0479 23.7396C48.4533 22.2241 45.4571 21.2653 42.2447 21.0488C37.7968 20.7395 33.596 21.9148 30.1056 24.1726C28.3759 25.2861 26.8314 26.647 25.5032 28.2244C26.5843 29.7399 27.7581 31.3173 28.9936 32.9256C29.3334 33.3586 29.6732 33.7917 30.0129 34.2247C31.3411 32.1524 33.2253 30.4822 35.4802 29.4306L38.7235 32.5545L51.0479 23.7396Z" stroke="#00AE99" stroke-width="2"/>
+<path d="M58.4302 51.0502C59.882 48.4831 60.8086 45.5757 61.0248 42.4209C61.3028 37.9671 60.1291 33.7917 57.9051 30.2966C56.7931 28.5646 55.434 27.0181 53.8587 25.6882C52.3452 26.7707 50.7699 27.946 49.1637 29.1832C48.7313 29.5234 48.2988 29.8636 47.8664 30.2039C49.9668 31.5338 51.6348 33.4514 52.685 35.6783L52.7159 35.7402L49.4417 39.1424L58.4302 51.0502Z" stroke="#00AE99" stroke-width="2"/>
+<path d="M64.4004 27.6001V54.2668H99.0004V27.6001H64.4004Z" stroke="#00AE99" stroke-width="2"/>
+<path d="M66.5273 62.5283L52.5992 76.4564L67.3819 91.2391L81.31 77.311L66.5273 62.5283Z" stroke="#00AE99" stroke-width="2"/>
+<path d="M31.0992 64.3999C31.0992 64.3999 44.3992 64.3999 44.3992 77.6999C44.3992 90.9999 31.0992 90.9999 31.0992 90.9999H-10.7008C-10.7008 90.9999 -24.8008 90.9999 -24.8008 77.6999C-24.8008 64.3999 -10.7008 64.3999 -10.7008 64.3999H31.0992Z" stroke="#00AE99" stroke-width="2"/>
+</g>
+</svg>

packages/website/ts/icons/illustrations/apiExplorer.svg

@@ -0,0 +1,17 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80">
+<path d="M39.999 79.7333C61.9431 79.7333 79.7323 61.944 79.7323 39.9999C79.7323 18.0558 61.9431 0.266602 39.999 0.266602C18.0548 0.266602 0.265625 18.0558 0.265625 39.9999C0.265625 61.944 18.0548 79.7333 39.999 79.7333Z" fill="#00AE99"/>
+</mask>
+<g mask="url(#mask0)">
+<ellipse cx="39.9997" cy="40" rx="38.9333" ry="38.9333" stroke="#00AE99" stroke-width="2"/>
+<ellipse cx="39.9997" cy="40" rx="30.9333" ry="30.9333" stroke="#00AE99" stroke-width="2"/>
+<path d="M60.3641 19.6352L43 69L34.0031 45.9961M60.3641 19.6352L11.0013 36.6057L34.0031 45.9961M60.3641 19.6352L34.0031 45.9961" stroke="#00AE99" stroke-width="2"/>
+<path d="M40 1.06665V9.06665M40 70.9333V78.9333" stroke="#00AE99" stroke-width="2"/>
+<path d="M1.06641 40L9.06641 40M70.9331 40L78.9331 40" stroke="#00AE99" stroke-width="2"/>
+<path d="M6.28125 20.5332L13.2095 24.5332M66.7876 55.4665L73.7158 59.4665" stroke="#00AE99" stroke-width="2"/>
+<path d="M20.5312 6.28259L24.5313 13.2108M55.4646 66.7889L59.4646 73.7171" stroke="#00AE99" stroke-width="2"/>
+<path d="M59.4648 6.28259L55.4648 13.2108M24.5315 66.7889L20.5315 73.7171" stroke="#00AE99" stroke-width="2"/>
+<path d="M73.7168 20.5332L66.7886 24.5332M13.2105 55.4665L6.28229 59.4665" stroke="#00AE99" stroke-width="2"/>
+<path d="M11.4882 36.8321L45.6556 34.3431L43.2797 69.5287" stroke="#00AE99" stroke-width="2"/>
+</g>
+</svg>

packages/website/ts/icons/illustrations/tools.svg

@@ -0,0 +1,18 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.0452 7.52836C30.3124 7.52836 37.0144 14.2303 37.0144 22.4976C37.0144 24.1151 36.7578 25.6727 36.2832 27.132L51.2098 42.0586L51.1787 42.0897L52.706 43.6169C54.2414 43.0852 55.8902 42.7963 57.6066 42.7963C65.8738 42.7963 72.5758 49.4983 72.5758 57.7655C72.5758 59.77 72.1818 61.6824 71.4671 63.4296L63.1357 55.2032L55.1791 55.2032L55.1791 63.4296L63.6752 71.4535C61.8203 72.2771 59.7669 72.7348 57.6066 72.7348C49.3393 72.7348 42.6374 66.0328 42.6374 57.7655C42.6374 56.1478 42.894 54.5901 43.3687 53.1307L28.4425 38.2045L28.4736 38.1734L26.9462 36.646C25.4107 37.1779 23.7617 37.4668 22.0452 37.4668C13.7779 37.4668 7.07595 30.7648 7.07595 22.4976C7.07595 20.4931 7.46992 18.5807 8.18464 16.8336L16.516 25.0599H24.4726L24.4726 16.8336L15.9766 8.80957C17.8315 7.98597 19.8849 7.52836 22.0452 7.52836Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.0452 7.52836C30.3124 7.52836 37.0144 14.2303 37.0144 22.4976C37.0144 24.1151 36.7578 25.6727 36.2832 27.132L51.2098 42.0586L51.1787 42.0897L52.706 43.6169C54.2414 43.0852 55.8902 42.7963 57.6066 42.7963C65.8738 42.7963 72.5758 49.4983 72.5758 57.7655C72.5758 59.77 72.1818 61.6824 71.4671 63.4296L63.1357 55.2032L55.1791 55.2032L55.1791 63.4296L63.6752 71.4535C61.8203 72.2771 59.7669 72.7348 57.6066 72.7348C49.3393 72.7348 42.6374 66.0328 42.6374 57.7655C42.6374 56.1478 42.894 54.5901 43.3687 53.1307L28.4425 38.2045L28.4736 38.1734L26.9462 36.646C25.4107 37.1779 23.7617 37.4668 22.0452 37.4668C13.7779 37.4668 7.07595 30.7648 7.07595 22.4976C7.07595 20.4931 7.46992 18.5807 8.18464 16.8336L16.516 25.0599H24.4726L24.4726 16.8336L15.9766 8.80957C17.8315 7.98597 19.8849 7.52836 22.0452 7.52836Z" fill="#F3F6F4"/>
+<path d="M22.0452 7.52836L22.0452 5.52836L22.0452 5.52836L22.0452 7.52836ZM36.2832 27.132L34.3813 26.5133L34.002 27.6792L34.869 28.5462L36.2832 27.132ZM51.2098 42.0586L52.624 43.4728L54.0383 42.0586L52.624 40.6444L51.2098 42.0586ZM51.1787 42.0897L49.7645 40.6755L48.3503 42.0897L49.7645 43.5039L51.1787 42.0897ZM52.706 43.6169L51.2918 45.0311L52.1772 45.9166L53.3605 45.5068L52.706 43.6169ZM57.6066 42.7963L57.6066 44.7963L57.6066 44.7963L57.6066 42.7963ZM72.5758 57.7655L74.5758 57.7655L72.5758 57.7655ZM71.4671 63.4296L70.0619 64.8527L72.1873 66.9514L73.3182 64.1868L71.4671 63.4296ZM63.1357 55.2032L64.541 53.7801L63.9567 53.2032L63.1357 53.2032L63.1357 55.2032ZM55.1791 55.2032L55.1791 53.2032L53.1791 53.2032L53.1791 55.2032L55.1791 55.2032ZM55.1791 63.4296L53.1791 63.4296L53.1791 64.2917L53.8059 64.8836L55.1791 63.4296ZM63.6752 71.4535L64.4868 73.2815L67.2326 72.0623L65.0484 69.9995L63.6752 71.4535ZM57.6066 72.7348V70.7348L57.6066 70.7348L57.6066 72.7348ZM42.6374 57.7655L44.6374 57.7655L44.6374 57.7655L42.6374 57.7655ZM43.3687 53.1307L45.2706 53.7494L45.6499 52.5835L44.7829 51.7165L43.3687 53.1307ZM28.4425 38.2045L27.0283 36.7903L25.6141 38.2045L27.0283 39.6187L28.4425 38.2045ZM28.4736 38.1734L29.8878 39.5876L31.302 38.1734L29.8878 36.7592L28.4736 38.1734ZM26.9462 36.646L28.3604 35.2318L27.4749 34.3464L26.2917 34.7562L26.9462 36.646ZM22.0452 37.4668L22.0452 39.4668L22.0452 37.4668ZM7.07595 22.4976L5.07595 22.4976L7.07595 22.4976ZM8.18464 16.8336L9.58985 15.4104L7.46443 13.3118L6.33353 16.0763L8.18464 16.8336ZM16.516 25.0599L15.1108 26.483L15.695 27.0599H16.516L16.516 25.0599ZM24.4726 25.0599V27.0599H26.4726V25.0599H24.4726ZM24.4726 16.8336H26.4726V15.9715L25.8458 15.3795L24.4726 16.8336ZM15.9766 8.80957L15.1649 6.98165L12.4192 8.20081L14.6033 10.2636L15.9766 8.80957ZM39.0144 22.4976C39.0144 13.1257 31.417 5.52836 22.0452 5.52836L22.0452 9.52836C29.2079 9.52836 35.0144 15.3349 35.0144 22.4976H39.0144ZM38.1851 27.7506C38.7239 26.094 39.0144 24.3278 39.0144 22.4976H35.0144C35.0144 23.9025 34.7917 25.2514 34.3813 26.5133L38.1851 27.7506ZM52.624 40.6444L37.6974 25.7178L34.869 28.5462L49.7956 43.4728L52.624 40.6444ZM52.593 43.5039L52.624 43.4728L49.7956 40.6444L49.7645 40.6755L52.593 43.5039ZM54.1202 42.2027L52.593 40.6755L49.7645 43.5039L51.2918 45.0311L54.1202 42.2027ZM57.6066 40.7963C55.6645 40.7963 53.7946 41.1234 52.0515 41.727L53.3605 45.5068C54.6882 45.047 56.116 44.7963 57.6066 44.7963L57.6066 40.7963ZM74.5758 57.7655C74.5758 48.3937 66.9784 40.7963 57.6066 40.7963L57.6066 44.7963C64.7693 44.7963 70.5758 50.6028 70.5758 57.7655L74.5758 57.7655ZM73.3182 64.1868C74.1295 62.2034 74.5758 60.0341 74.5758 57.7655L70.5758 57.7655C70.5758 59.5058 70.2341 61.1614 69.616 62.6723L73.3182 64.1868ZM61.7305 56.6264L70.0619 64.8527L72.8723 62.0064L64.541 53.7801L61.7305 56.6264ZM55.1791 57.2032L63.1357 57.2032L63.1357 53.2032L55.1791 53.2032L55.1791 57.2032ZM57.1791 63.4296L57.1791 55.2032L53.1791 55.2032L53.1791 63.4296L57.1791 63.4296ZM65.0484 69.9995L56.5524 61.9755L53.8059 64.8836L62.3019 72.9076L65.0484 69.9995ZM57.6066 74.7348C60.0518 74.7348 62.3813 74.2163 64.4868 73.2815L62.8635 69.6256C61.2593 70.3379 59.4819 70.7348 57.6066 70.7348L57.6066 74.7348ZM40.6374 57.7655C40.6374 67.1374 48.2347 74.7348 57.6066 74.7348L57.6066 70.7348C50.4439 70.7348 44.6374 64.9282 44.6374 57.7655L40.6374 57.7655ZM41.4668 52.512C40.9279 54.1687 40.6374 55.9352 40.6374 57.7655L44.6374 57.7655C44.6374 56.3605 44.8601 55.0114 45.2706 53.7494L41.4668 52.512ZM27.0283 39.6187L41.9545 54.5449L44.7829 51.7165L29.8567 36.7903L27.0283 39.6187ZM27.0594 36.7592L27.0283 36.7903L29.8567 39.6187L29.8878 39.5876L27.0594 36.7592ZM25.532 38.0603L27.0594 39.5876L29.8878 36.7592L28.3604 35.2318L25.532 38.0603ZM22.0452 39.4668C23.9874 39.4668 25.8575 39.1397 27.6008 38.5359L26.2917 34.7562C24.9638 35.2161 23.5359 35.4668 22.0452 35.4668L22.0452 39.4668ZM5.07595 22.4976C5.07595 31.8694 12.6733 39.4668 22.0452 39.4668L22.0452 35.4668C14.8825 35.4668 9.07595 29.6603 9.07595 22.4976L5.07595 22.4976ZM6.33353 16.0763C5.52219 18.0597 5.07595 20.229 5.07595 22.4976L9.07595 22.4976C9.07595 20.7573 9.41765 19.1018 10.0357 17.5908L6.33353 16.0763ZM17.9212 23.6367L9.58985 15.4104L6.77943 18.2567L15.1108 26.483L17.9212 23.6367ZM24.4726 23.0599H16.516L16.516 27.0599L24.4726 27.0599V23.0599ZM22.4726 16.8336V25.0599L26.4726 25.0599L26.4726 16.8336H22.4726ZM14.6033 10.2636L23.0994 18.2876L25.8458 15.3795L17.3498 7.35554L14.6033 10.2636ZM22.0452 5.52836C19.5999 5.52836 17.2704 6.04679 15.1649 6.98165L16.7882 10.6375C18.3925 9.92516 20.1698 9.52836 22.0452 9.52836L22.0452 5.52836Z" fill="#00AE99" mask="url(#path-1-inside-1)"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="-1" y="-1" width="82" height="82">
+<path d="M40.0009 79.04C61.5621 79.04 79.0409 61.5612 79.0409 40C79.0409 18.4388 61.5621 0.959961 40.0009 0.959961C18.4397 0.959961 0.960938 18.4388 0.960938 40C0.960938 61.5612 18.4397 79.04 40.0009 79.04Z" fill="#C4C4C4" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/>
+</mask>
+<g mask="url(#mask0)">
+<mask id="path-4-inside-2" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.4296 22.3507C72.4296 30.618 65.7277 37.3199 57.4604 37.3199C55.8428 37.3199 54.2851 37.0633 52.8258 36.5886L37.8997 51.5148L37.8692 51.4843L36.3416 53.0119C36.8733 54.5473 37.1622 56.1962 37.1622 57.9125C37.1622 66.1798 30.4602 72.8817 22.193 72.8817C20.1885 72.8817 18.2761 72.4878 16.5289 71.773L24.7553 63.4417V55.4851L16.5289 55.4851L8.50496 63.9811C7.68137 62.1262 7.22375 60.0728 7.22375 57.9125C7.22375 49.6453 13.9257 42.9433 22.193 42.9433C23.8107 42.9433 25.3684 43.1999 26.8278 43.6747L41.754 28.7484L41.7845 28.7789L43.3119 27.2515C42.7801 25.716 42.4912 24.0671 42.4912 22.3507C42.4912 14.0834 49.1932 7.3815 57.4604 7.3815C59.4649 7.3815 61.3773 7.77546 63.1245 8.49018L54.8981 16.8215L54.8981 24.7781L63.1245 24.7781L71.1484 16.2821C71.972 18.137 72.4296 20.1904 72.4296 22.3507Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.4296 22.3507C72.4296 30.618 65.7277 37.3199 57.4604 37.3199C55.8428 37.3199 54.2851 37.0633 52.8258 36.5886L37.8997 51.5148L37.8692 51.4843L36.3416 53.0119C36.8733 54.5473 37.1622 56.1962 37.1622 57.9125C37.1622 66.1798 30.4602 72.8817 22.193 72.8817C20.1885 72.8817 18.2761 72.4878 16.5289 71.773L24.7553 63.4417V55.4851L16.5289 55.4851L8.50496 63.9811C7.68137 62.1262 7.22375 60.0728 7.22375 57.9125C7.22375 49.6453 13.9257 42.9433 22.193 42.9433C23.8107 42.9433 25.3684 43.1999 26.8278 43.6747L41.754 28.7484L41.7845 28.7789L43.3119 27.2515C42.7801 25.716 42.4912 24.0671 42.4912 22.3507C42.4912 14.0834 49.1932 7.3815 57.4604 7.3815C59.4649 7.3815 61.3773 7.77546 63.1245 8.49018L54.8981 16.8215L54.8981 24.7781L63.1245 24.7781L71.1484 16.2821C71.972 18.137 72.4296 20.1904 72.4296 22.3507Z" fill="#F3F6F4"/>
+<path d="M72.4296 22.3507H70.4296L70.4296 22.3507L72.4296 22.3507ZM52.8258 36.5886L53.4445 34.6867L52.2786 34.3075L51.4116 35.1744L52.8258 36.5886ZM37.8997 51.5148L36.4854 52.929L37.8997 54.3432L39.3139 52.929L37.8997 51.5148ZM37.8692 51.4843L39.2834 50.0701L37.8692 48.6559L36.455 50.0701L37.8692 51.4843ZM36.3416 53.0119L34.9274 51.5977L34.0419 52.4832L34.4517 53.6664L36.3416 53.0119ZM37.1622 57.9125H35.1622L35.1622 57.9125L37.1622 57.9125ZM22.193 72.8817L22.193 74.8817L22.193 72.8817ZM16.5289 71.773L15.1058 70.3678L13.0072 72.4933L15.7717 73.6242L16.5289 71.773ZM24.7553 63.4417L26.1784 64.8469L26.7553 64.2627L26.7553 63.4417L24.7553 63.4417ZM24.7553 55.4851L26.7553 55.4851L26.7553 53.4851L24.7553 53.4851L24.7553 55.4851ZM16.5289 55.4851L16.5289 53.4851L15.6668 53.4851L15.0749 54.1118L16.5289 55.4851ZM8.50496 63.9811L6.67705 64.7927L7.89621 67.5385L9.95899 65.3544L8.50496 63.9811ZM7.22375 57.9125L5.22375 57.9125L5.22375 57.9125L7.22375 57.9125ZM22.193 42.9433L22.193 40.9433L22.193 40.9433L22.193 42.9433ZM26.8278 43.6747L26.2091 45.5766L27.375 45.9558L28.242 45.0889L26.8278 43.6747ZM41.754 28.7484L43.1682 27.3342L41.754 25.92L40.3398 27.3342L41.754 28.7484ZM41.7845 28.7789L40.3703 30.1931L41.7845 31.6073L43.1987 30.1931L41.7845 28.7789ZM43.3119 27.2515L44.7261 28.6657L45.6116 27.7803L45.2018 26.597L43.3119 27.2515ZM42.4912 22.3507L44.4912 22.3507L44.4912 22.3507H42.4912ZM57.4604 7.3815L57.4604 9.3815H57.4604L57.4604 7.3815ZM63.1245 8.49018L64.5476 9.8954L66.6463 7.76997L63.8817 6.63907L63.1245 8.49018ZM54.8981 16.8215L53.475 15.4163L52.8981 16.0005L52.8981 16.8215L54.8981 16.8215ZM54.8981 24.7781H52.8981V26.7781H54.8981V24.7781ZM63.1245 24.7781V26.7781H63.9866L64.5785 26.1514L63.1245 24.7781ZM71.1484 16.2821L72.9764 15.4705L71.7572 12.7247L69.6944 14.9089L71.1484 16.2821ZM57.4604 39.3199C66.8323 39.3199 74.4296 31.7225 74.4296 22.3507L70.4296 22.3507C70.4296 29.5134 64.6231 35.3199 57.4604 35.3199V39.3199ZM52.2071 38.4905C53.8638 39.0294 55.6301 39.3199 57.4604 39.3199V35.3199C56.0555 35.3199 54.7064 35.0972 53.4445 34.6867L52.2071 38.4905ZM39.3139 52.929L54.24 38.0028L51.4116 35.1744L36.4854 50.1006L39.3139 52.929ZM36.455 52.8985L36.4854 52.929L39.3139 50.1006L39.2834 50.0701L36.455 52.8985ZM37.7558 54.4261L39.2834 52.8985L36.455 50.0701L34.9274 51.5977L37.7558 54.4261ZM39.1622 57.9125C39.1622 55.9704 38.8351 54.1005 38.2315 52.3574L34.4517 53.6664C34.9115 54.9942 35.1622 56.422 35.1622 57.9125L39.1622 57.9125ZM22.193 74.8817C31.5648 74.8817 39.1622 67.2844 39.1622 57.9125H35.1622C35.1622 65.0752 29.3557 70.8817 22.193 70.8817L22.193 74.8817ZM15.7717 73.6242C17.7551 74.4355 19.9244 74.8817 22.193 74.8817L22.193 70.8817C20.4527 70.8817 18.7972 70.54 17.2862 69.9219L15.7717 73.6242ZM23.3321 62.0365L15.1058 70.3678L17.9521 73.1783L26.1784 64.8469L23.3321 62.0365ZM22.7553 55.4851V63.4417L26.7553 63.4417L26.7553 55.4851H22.7553ZM16.5289 57.4851L24.7553 57.4851V53.4851L16.5289 53.4851L16.5289 57.4851ZM9.95899 65.3544L17.983 56.8583L15.0749 54.1118L7.05093 62.6079L9.95899 65.3544ZM5.22375 57.9125C5.22375 60.3578 5.74219 62.6873 6.67705 64.7927L10.3329 63.1695C9.62056 61.5652 9.22375 59.7879 9.22375 57.9125L5.22375 57.9125ZM22.193 40.9433C12.8211 40.9433 5.22375 48.5407 5.22375 57.9125L9.22375 57.9125C9.22375 50.7498 15.0303 44.9433 22.193 44.9433L22.193 40.9433ZM27.4465 41.7728C25.7898 41.2338 24.0233 40.9433 22.193 40.9433L22.193 44.9433C23.598 44.9433 24.9471 45.166 26.2091 45.5766L27.4465 41.7728ZM40.3398 27.3342L25.4136 42.2604L28.242 45.0889L43.1682 30.1627L40.3398 27.3342ZM43.1987 27.3647L43.1682 27.3342L40.3398 30.1627L40.3703 30.1931L43.1987 27.3647ZM41.8977 25.8373L40.3703 27.3647L43.1987 30.1931L44.7261 28.6657L41.8977 25.8373ZM40.4912 22.3507C40.4912 24.2929 40.8183 26.1629 41.422 27.906L45.2018 26.597C44.7419 25.2692 44.4912 23.8413 44.4912 22.3507L40.4912 22.3507ZM57.4604 5.3815C48.0886 5.3815 40.4912 12.9789 40.4912 22.3507L44.4912 22.3507C44.4912 15.188 50.2977 9.3815 57.4604 9.3815L57.4604 5.3815ZM63.8817 6.63907C61.8983 5.82773 59.729 5.3815 57.4604 5.3815L57.4604 9.3815C59.2007 9.3815 60.8562 9.72319 62.3672 10.3413L63.8817 6.63907ZM56.3213 18.2268L64.5476 9.8954L61.7013 7.08497L53.475 15.4163L56.3213 18.2268ZM56.8981 24.7781V16.8215L52.8981 16.8215L52.8981 24.7781H56.8981ZM63.1245 22.7781H54.8981V26.7781L63.1245 26.7781L63.1245 22.7781ZM69.6944 14.9089L61.6704 23.4049L64.5785 26.1514L72.6025 17.6553L69.6944 14.9089ZM74.4296 22.3507C74.4296 19.9055 73.9112 17.576 72.9764 15.4705L69.3205 17.0937C70.0328 18.698 70.4296 20.4754 70.4296 22.3507L74.4296 22.3507Z" fill="#00AE99" mask="url(#path-4-inside-2)"/>
+<path d="M40.0009 79.04C61.5621 79.04 79.0409 61.5612 79.0409 40C79.0409 18.4388 61.5621 0.959961 40.0009 0.959961C18.4397 0.959961 0.960938 18.4388 0.960938 40C0.960938 61.5612 18.4397 79.04 40.0009 79.04Z" stroke="#00AE99" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+</svg>

packages/website/ts/index.tsx

@@ -10,6 +10,7 @@ import { Wiki } from 'ts/containers/wiki';
 import { createLazyComponent } from 'ts/lazy_component';
 import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
 import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage';
+import { DocsPageTemplate } from 'ts/pages/docs/page_template';
 import { store } from 'ts/redux/store';
 import { WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
 import { muiTheme } from 'ts/utils/mui_theme';
@@ -217,6 +218,7 @@ render(
                                     path={`${WebsitePaths.AssetSwapperDocs}/:version?`}
                                     component={LazyAssetSwapperDocumentation}
                                 />
+                                <Route path={`${WebsitePaths.Docs}/template`} component={DocsPageTemplate as any} />
                                 <Route path={WebsitePaths.Docs} component={DocsHome as any} />
                                 {/* Legacy endpoints */}
                                 <Route

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

@@ -0,0 +1,161 @@
+import { utils as sharedUtils } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
+import { Hero } from 'ts/components/docs/hero';
+import { SearchInput } from 'ts/components/docs/search_input';
+import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
+import { SiteWrap } from 'ts/components/docs/siteWrap';
+import { StepLinkConfig } from 'ts/components/docs/step_link';
+import { StepLinks } from 'ts/components/docs/step_links';
+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 {
+    location: Location;
+    theme: {
+        bgColor: string;
+        textColor: string;
+        linkColor: string;
+    };
+}
+
+const shortcuts: LinkProps[] = [
+    {
+        heading: 'Core Concepts',
+        description: 'Understand the fundamentals of 0x development',
+        icon: '0x-coreConcepts',
+        url: '/docs/core-concepts',
+    },
+    {
+        heading: 'API Explorer',
+        description: 'Browse and filter through all the open-source 0x developer tools',
+        icon: 'apiExplorer',
+        url: '/docs/core-concepts',
+    },
+    {
+        heading: 'Guides',
+        description: 'Dive into intermediate and advanced 0x development  topics',
+        icon: 'getStarted',
+        url: '/docs/get-started',
+    },
+    {
+        heading: 'Tools',
+        description: 'Explore the core 0x library and how to use it',
+        icon: 'tools',
+        url: '/docs/core-concepts',
+    },
+];
+
+const usefulLinks: StepLinkConfig[] = [
+    {
+        title: 'Core Concepts',
+        url: '/docs/core-concepts',
+    },
+    {
+        title: 'API Explorer',
+        url: '/docs/core-concepts',
+    },
+    {
+        title: 'Guides',
+        url: '/docs/get-started',
+    },
+    {
+        title: 'Tools',
+        url: '/docs/core-concepts',
+    },
+];
+
+const communityShortcuts: CommunityLinkProps[] = [
+    {
+        heading: 'Discord',
+        description: 'Chat with the 0x community',
+        icon: '0x-coreConcepts',
+        url: '/docs/core-concepts',
+    },
+    {
+        heading: 'Forum',
+        description: 'Nerd out with 0x researchers',
+        icon: 'apiExplorer',
+        url: '/docs/core-concepts',
+    },
+    {
+        heading: 'GitHub',
+        description: 'Contribute to development',
+        icon: 'getStarted',
+        url: '/docs/get-started',
+    },
+];
+
+export class DocsHome extends React.Component<Props> {
+    public state = {
+    };
+    public componentDidMount(): void {
+    }
+    public render(): React.ReactNode {
+        return (
+            <SiteWrap theme="light">
+                <DocumentTitle {...documentConstants.DOCS} />
+                <Hero isHome={true} title="0x Docs" />
+                <Section maxWidth={'1150px'} isPadded={false} padding="0 0">
+                    <ShortcutsWrapper>
+                        {shortcuts.map((shortcut, index) => <ShortcutLink key={`shortcut-${index}`} {...shortcut} />)}
+                    </ShortcutsWrapper>
+                    <Separator/>
+                    <Columns>
+                        <div>
+                            <Heading size="default">Get Started</Heading>
+                        </div>
+                        <div>
+                            <Heading size="default">Useful Links</Heading>
+                            <StepLinks links={usefulLinks} />
+                        </div>
+                    </Columns>
+                    <Separator/>
+                    <CommunityWrapper>
+                        {communityShortcuts.map((shortcut, index) => <CommunityLink key={`communityLink-${index}`} {...shortcut} />)}
+                    </CommunityWrapper>
+                </Section>
+            </SiteWrap>
+        );
+    }
+}
+
+const ShortcutsWrapper = styled.div`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 30px;
+    grid-row-gap: 30px;
+`;
+
+const CommunityWrapper = styled.div`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 30px;
+    grid-row-gap: 30px;
+`;
+
+const Columns = styled.div<{ count?: number }>`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 70px;
+    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;
+`;

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

@@ -0,0 +1,134 @@
+import { utils as sharedUtils } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+import { Callout } from 'ts/components/docs/callout';
+import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
+import { Hero } from 'ts/components/docs/hero';
+import { SearchInput } from 'ts/components/docs/search_input';
+import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
+import { SiteWrap } from 'ts/components/docs/siteWrap';
+import { StepLinkConfig } from 'ts/components/docs/step_link';
+import { StepLinks } from 'ts/components/docs/step_links';
+import { TutorialSteps } from 'ts/components/docs/tutorial_steps';
+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 {
+    location: Location;
+    theme: {
+        bgColor: string;
+        textColor: string;
+        linkColor: string;
+    };
+}
+
+const usefulLinks: StepLinkConfig[] = [
+    {
+        title: 'Core Concepts',
+        url: '/docs/core-concepts',
+    },
+    {
+        title: 'API Explorer',
+        url: '/docs/core-concepts',
+    },
+    {
+        title: 'Guides',
+        url: '/docs/get-started',
+    },
+    {
+        title: 'Tools',
+        url: '/docs/core-concepts',
+    },
+];
+
+export class DocsPageTemplate extends React.Component<Props> {
+    public render(): React.ReactNode {
+        return (
+            <SiteWrap theme="light">
+                <DocumentTitle {...documentConstants.DOCS} />
+                <Hero isHome={false} title={`Page Template`} description="This a subheader for the page" />
+                <Section maxWidth={'1150px'} isPadded={false} padding="0 0">
+                    <Columns>
+                        <aside>
+                            <Paragraph>Sidebar</Paragraph>
+                        </aside>
+                        <article>
+                            <LargeHeading>Large Heading</LargeHeading>
+                            <LargeIntro>Large Heading</LargeIntro>
+                            <Heading asElement="h2" size="default">Notifications</Heading>
+                            <Callout text="This is' a pretty standard information callout" />
+                            <Callout text="This is an indication that something isn’t quite right" type="alert" />
+                            <Callout text="This is a success message" type="success" />
+                            <Heading asElement="h2" size="default">Tutorial Steps</Heading>
+                            <TutorialSteps>
+                                <li>Step 1</li>
+                                <li>Step 2</li>
+                                <li>Step 3</li>
+                            </TutorialSteps>
+                            <Heading asElement="h2" size="default">Standard Heading</Heading>
+                            <Paragraph>
+                                This would be paragraph text.
+                            </Paragraph>
+                            <Paragraph>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
+                            </Paragraph>
+                            <Paragraph>
+                                And here is a table:
+                            </Paragraph>
+                            <Heading asElement="h3" size="default">Subheading</Heading>
+                            <Paragraph>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
+                            </Paragraph>
+                            <ul>
+                                <li>List items</li>
+                                <li>List items</li>
+                                <li>List items</li>
+                                <li>List items</li>
+                            </ul>
+                            <Heading asElement="h2" size="default">Tabbed Code Snippet</Heading>
+                            <Heading asElement="h2" size="default">Run Code Snippet</Heading>
+                            <Heading asElement="h2" size="default">Next Steps</Heading>
+                            <StepLinks links={usefulLinks} />
+                        </article>
+                    </Columns>
+                </Section>
+            </SiteWrap>
+        );
+    }
+}
+
+const Columns = styled.div<{ count?: number }>`
+    display: grid;
+    grid-template-columns: 314px 1fr;
+    grid-column-gap: 40px;
+    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',
+})`
+`;