Refactored docs components structure

packages/website/ts/components/docs/home/get_started_links.tsx

@@ -6,12 +6,24 @@ import { Paragraph } from 'ts/components/text';
 
 import { colors } from 'ts/style/colors';
 
+interface IGetStartedLinksProps {
+    links: IGetStartedLinkProps[];
+}
+
 export interface IGetStartedLinkProps {
     heading: string;
     description: string;
     url: string;
 }
 
+export const GetStartedLinks: React.FC<IGetStartedLinksProps> = ({ links }) => (
+    <>
+        {links.map((link, index) => (
+            <GetStartedLink key={`getStartedLink-${index}`} {...link} />
+        ))}
+    </>
+);
+
 export const GetStartedLink: React.FC<IGetStartedLinkProps> = props => (
     <>
         <GetStartedButton color={colors.brandDark} to={props.url} isWithArrow={true}>

packages/website/ts/components/docs/home/middle_section.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Heading } from 'ts/components/text';
+
+import { GetStartedLinks, IGetStartedLinkProps } from 'ts/components/docs/home/get_started_links';
+import { IStepLinkProps, StepLinks } from 'ts/components/docs/home/step_links';
+
+interface IMiddleSectionProps {
+    getStartedLinks: IGetStartedLinkProps[];
+    usefulLinks: IStepLinkProps[];
+}
+
+export const MiddleSection: React.FC<IMiddleSectionProps> = ({ getStartedLinks, usefulLinks }) => (
+    <MiddleSectionWrapper>
+        <div>
+            <Heading size="default">Get Started</Heading>
+            <GetStartedLinks links={getStartedLinks} />
+        </div>
+        <div>
+            <Heading size="default">Useful Links</Heading>
+            <StepLinks links={usefulLinks} />
+        </div>
+    </MiddleSectionWrapper>
+);
+
+const MiddleSectionWrapper = styled.div`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 70px;
+    grid-row-gap: 30px;
+
+    @media (max-width: 900px) {
+        grid-template-columns: 1fr;
+    }
+`;

packages/website/ts/components/docs/home/shortcut_links.tsx

@@ -7,6 +7,10 @@ import { Heading, Paragraph } from 'ts/components/text';
 import { Link } from '@0x/react-shared';
 
 import { colors } from 'ts/style/colors';
+
+interface IShortcutLinksProps {
+    links: IShortcutLinkProps[];
+}
 export interface IShortcutLinkProps {
     heading: string;
     icon: string;
@@ -14,6 +18,14 @@ export interface IShortcutLinkProps {
     url: string;
 }
 
+export const ShortcutLinks: React.FC<IShortcutLinksProps> = ({ links }) => (
+    <ShortcutsWrapper>
+        {links.map((link, index) => (
+            <ShortcutLink key={`shortcutLink-${index}`} {...link} />
+        ))}
+    </ShortcutsWrapper>
+);
+
 export const ShortcutLink: React.FC<IShortcutLinkProps> = props => (
     <ShortcutLinkWrapper to={props.url}>
         <ShortcutIcon color={colors.brandLight} name={props.icon} />
@@ -28,6 +40,17 @@ export const ShortcutLink: React.FC<IShortcutLinkProps> = props => (
     </ShortcutLinkWrapper>
 );
 
+const ShortcutsWrapper = styled.div`
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 30px;
+    grid-row-gap: 30px;
+
+    @media (max-width: 500px) {
+        grid-template-columns: 1fr;
+    }
+`;
+
 const ShortcutIcon = styled(Icon)`
     margin-bottom: 1rem;
 

packages/website/ts/components/docs/layout/docs_page_layout.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import CircularProgress from 'material-ui/CircularProgress';
 
-import { Hero } from 'ts/components/docs/hero';
+import { Hero } from 'ts/components/docs/layout/hero';
 import { ScrollTopArrow } from 'ts/components/docs/layout/scroll_top_arrow';
 import { SiteWrap } from 'ts/components/docs/layout/siteWrap';
 

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

@@ -1,13 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
 
-import { CommunityLinks, ICommunityLinkProps } from 'ts/components/docs/community_links';
-import { GetStartedLink, IGetStartedLinkProps } from 'ts/components/docs/get_started_link';
-import { IShortcutLinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
-import { IStepLinkProps, StepLinks } from 'ts/components/docs/step_links';
+import { CommunityLinks } from 'ts/components/docs/home/community_links';
+import { MiddleSection } from 'ts/components/docs/home/middle_section';
+import { ShortcutLinks } from 'ts/components/docs/home/shortcut_links';
 
 import { Separator } from 'ts/components/docs/separator';
-import { Heading } from 'ts/components/text';
 
 import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 
@@ -20,53 +17,16 @@ const SEPARATOR_MARGIN = '60px 0';
 export const DocsHome: React.FC = () => {
     return (
         <DocsPageLayout isHome={true} title="0x Docs">
-            <ShortcutsWrapper>
-                {shortcuts.map((shortcut, index) => (
-                    <ShortcutLink key={`shortcut-${index}`} {...shortcut} />
-                ))}
-            </ShortcutsWrapper>
+            <ShortcutLinks links={shortcutLinks} />
             <Separator margin={SEPARATOR_MARGIN} />
-            <GetStartedWrapper>
-                <div>
-                    <Heading size="default">Get Started</Heading>
-                    {getStartedLinks.map((link, index) => (
-                        <GetStartedLink key={`getStarted-${index}`} {...link} />
-                    ))}
-                </div>
-                <div>
-                    <Heading size="default">Useful Links</Heading>
-                    <StepLinks links={usefulLinks} />
-                </div>
-            </GetStartedWrapper>
+            <MiddleSection getStartedLinks={getStartedLinks} usefulLinks={usefulLinks} />
             <Separator margin={SEPARATOR_MARGIN} />
             <CommunityLinks links={communityLinks} />
         </DocsPageLayout>
     );
 };
 
-const ShortcutsWrapper = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-column-gap: 30px;
-    grid-row-gap: 30px;
-
-    @media (max-width: 500px) {
-        grid-template-columns: 1fr;
-    }
-`;
-
-const GetStartedWrapper = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-column-gap: 70px;
-    grid-row-gap: 30px;
-
-    @media (max-width: 900px) {
-        grid-template-columns: 1fr;
-    }
-`;
-
-const shortcuts: IShortcutLinkProps[] = [
+const shortcutLinks = [
     {
         heading: 'Core Concepts',
         description: 'Understand the fundamentals of 0x development',
@@ -93,7 +53,7 @@ const shortcuts: IShortcutLinkProps[] = [
     },
 ];
 
-const usefulLinks: IStepLinkProps[] = [
+const usefulLinks = [
     {
         title: 'Core Concepts',
         url: WebsitePaths.DocsCoreConcepts,
@@ -112,7 +72,7 @@ const usefulLinks: IStepLinkProps[] = [
     },
 ];
 
-const getStartedLinks: IGetStartedLinkProps[] = [
+const getStartedLinks = [
     {
         heading: 'Launch an exchange in 30 seconds',
         description: 'Learn how to spin up an exchange or marketplace in seconds.',
@@ -135,7 +95,7 @@ const getStartedLinks: IGetStartedLinkProps[] = [
     },
 ];
 
-const communityLinks: ICommunityLinkProps[] = [
+const communityLinks = [
     {
         heading: 'Discord',
         description: 'Chat with the 0x community',

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { connectHits, InstantSearch } from 'react-instantsearch-dom';
 import styled from 'styled-components';
 
-import { FeatureLink } from 'ts/components/docs/feature_link';
+import { FeatureLink } from 'ts/components/docs/tools/feature_link';
 
 import { Resource } from 'ts/components/docs/resource/resource';
 import { Filters } from 'ts/components/docs/sidebar/filters';

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

@@ -10,6 +10,7 @@ import { HelpCallout } from 'ts/components/docs/mdx/help_callout';
 import { HelpfulCta } from 'ts/components/docs/mdx/helpful_cta';
 import { InlineCode } from 'ts/components/docs/mdx/inline_code';
 import { InlineLink } from 'ts/components/docs/mdx/inline_link';
+import { NewsletterWidget } from 'ts/components/docs/mdx/newsletter_widget';
 import { Notification } from 'ts/components/docs/mdx/notification';
 import { OrderedList } from 'ts/components/docs/mdx/ordered_list';
 import { Table } from 'ts/components/docs/mdx/table';
@@ -19,7 +20,6 @@ import { Columns } from 'ts/components/docs/layout/columns';
 import { ContentWrapper } from 'ts/components/docs/layout/content_wrapper';
 import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 
-import { NewsletterWidget } from 'ts/components/docs/newsletter_widget';
 import { Separator } from 'ts/components/docs/separator';
 import { IContents, TableOfContents } from 'ts/components/docs/sidebar/table_of_contents';