crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created a reusable page wrapper for docs pages

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-24 14:07:49 +02:00
committed by fabioberger
parent 27832741e4
commit bb33609164
19 changed files with 343 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/website/ts/components/docs/hero.tsx
View File

@@ -8,28 +8,18 @@ import { colors } from 'ts/style/colors';
interface IHeroProps {
isHome?: boolean;
title?: string;
description?: string;
subtitle?: string;
}
export const Hero: React.FC<IHeroProps> = ({ description, isHome, title }) => {
return (
<HeroWrapper isHome={isHome}>
<Heading
size={isHome ? 'large' : 'medium'}
isCentered={true}
marginBottom={isHome || description ? '30px' : '0'}
>
{title}
</Heading>
{description && <Paragraph isCentered={true}>{description}</Paragraph>}
{isHome && <SearchInput isHome={true} />}
</HeroWrapper>
);
};
Hero.defaultProps = {
isHome: false,
};
export const Hero: React.FC<IHeroProps> = ({ isHome = false, subtitle, title }) => (
<HeroWrapper isHome={isHome}>
<Heading size={isHome ? 'large' : 'medium'} isCentered={true} marginBottom={isHome || subtitle ? '30px' : '0'}>
{title}
</Heading>
{subtitle && <Paragraph isCentered={true}>{subtitle}</Paragraph>}
{isHome && <SearchInput isHome={true} />}
</HeroWrapper>
);
const HeroWrapper = styled.div<{ isHome: boolean }>`
background-color: ${colors.backgroundLight};

60
packages/website/ts/components/docs/layout/docs_page_layout.tsx Normal file
View File

@@ -0,0 +1,60 @@
import React from 'react';
import styled from 'styled-components';
import CircularProgress from 'material-ui/CircularProgress';
import { Hero } from 'ts/components/docs/hero';
import { SiteWrap } from 'ts/components/docs/siteWrap';
import { DocumentTitle } from 'ts/components/document_title';
import { Section } from 'ts/components/newLayout';
import { documentConstants } from 'ts/utils/document_meta_constants';
import { colors } from 'ts/style/colors';
interface IDocsPageLayoutProps {
children: React.ReactNode;
title: string;
subtitle?: string;
loading?: boolean;
isHome?: boolean;
}
export const DocsPageLayout: React.FC<IDocsPageLayoutProps> = props => {
return (
<SiteWrap theme="light">
<DocumentTitle {...documentConstants.DOCS} />
<Hero title={props.title} subtitle={props.subtitle} isHome={props.isHome} />
<Section maxWidth="1150px" isPadded={false} overflow="visible">
{props.loading ? (
<LoaderWrapper>
<CircularProgress size={40} thickness={2} color={colors.brandLight} />
</LoaderWrapper>
) : (
props.children
)}
</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: 130px 0 1fr;
// grid-column-gap: 60px;
// @media (min-width: 1440px) {
// grid-template-columns: 230px 0 1fr;
// }
// @media (max-width: 900px) {
// grid-template-columns: 1fr;
// }
// `;

2
packages/website/ts/components/docs/code.tsx → packages/website/ts/components/docs/mdx/code.tsx
View File

@@ -3,7 +3,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { Button } from 'ts/components/button';
import { CodeRun } from 'ts/components/docs/code_run';
import { CodeRun } from 'ts/components/docs/mdx/code_run';
import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme';

0
packages/website/ts/components/docs/code_run.tsx → packages/website/ts/components/docs/mdx/code_run.tsx
View File

0
packages/website/ts/components/docs/code_tabs.tsx → packages/website/ts/components/docs/mdx/code_tabs.tsx
View File

0
packages/website/ts/components/docs/headings.tsx → packages/website/ts/components/docs/mdx/headings.tsx
View File

0
packages/website/ts/components/docs/help_callout.tsx → packages/website/ts/components/docs/mdx/help_callout.tsx
View File

0
packages/website/ts/components/docs/helpful_cta.tsx → packages/website/ts/components/docs/mdx/helpful_cta.tsx
View File

0
packages/website/ts/components/docs/inline_code.tsx → packages/website/ts/components/docs/mdx/inline_code.tsx
View File

0
packages/website/ts/components/docs/inline_link.tsx → packages/website/ts/components/docs/mdx/inline_link.tsx
View File

0
packages/website/ts/components/docs/notification.tsx → packages/website/ts/components/docs/mdx/notification.tsx
View File

0
packages/website/ts/components/docs/ordered_list.tsx → packages/website/ts/components/docs/mdx/ordered_list.tsx
View File

0
packages/website/ts/components/docs/table.tsx → packages/website/ts/components/docs/mdx/table.tsx
View File

0
packages/website/ts/components/docs/unordered_list.tsx → packages/website/ts/components/docs/mdx/unordered_list.tsx
View File

27
packages/website/ts/pages/docs/guides.tsx
View File

@@ -1,14 +1,9 @@
import React from 'react';
import styled from 'styled-components';
import { Hero } from 'ts/components/docs/hero';
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
import { Resource } from 'ts/components/docs/resource/resource';
import { Filters } from 'ts/components/docs/sidebar/filters';
import { SiteWrap } from 'ts/components/docs/siteWrap';
import { DocumentTitle } from 'ts/components/document_title';
import { Section } from 'ts/components/newLayout';
import { documentConstants } from 'ts/utils/document_meta_constants';
import { Hits, InstantSearch } from 'react-instantsearch-dom';
@@ -17,18 +12,14 @@ import algoliasearch from 'algoliasearch/lite';
const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e16c');
export const DocsGuides: React.FC = () => (
<SiteWrap theme="light">
<DocumentTitle {...documentConstants.DOCS} />
<Hero title="Guides" />
<Section maxWidth="1030px" isPadded={false}>
<InstantSearch searchClient={searchClient} indexName="0x_guides_test">
<Columns>
<Filters filters={filters} />
<Hits hitComponent={Resource} />
</Columns>
</InstantSearch>
</Section>
</SiteWrap>
<DocsPageLayout title="Guides">
<InstantSearch searchClient={searchClient} indexName="0x_guides_test">
<Columns>
<Filters filters={filters} />
<Hits hitComponent={Resource} />
</Columns>
</InstantSearch>
</DocsPageLayout>
);
const Columns = styled.div`

60
packages/website/ts/pages/docs/home.tsx
View File

@@ -3,52 +3,44 @@ import styled from 'styled-components';
import { CommunityLink, ICommunityLinkProps } from 'ts/components/docs/community_link';
import { GetStartedLink, IGetStartedLinkProps } from 'ts/components/docs/get_started_link';
import { Hero } from 'ts/components/docs/hero';
import { Separator } from 'ts/components/docs/separator';
import { IShortcutLinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
import { SiteWrap } from 'ts/components/docs/siteWrap';
import { IStepLinkConfig } from 'ts/components/docs/step_link';
import { StepLinks } from 'ts/components/docs/step_links';
import { DocumentTitle } from 'ts/components/document_title';
import { Section } from 'ts/components/newLayout';
import { Heading } from 'ts/components/text';
import { documentConstants } from 'ts/utils/document_meta_constants';
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
const SEPARATOR_MARGIN = '60px 0';
export const DocsHome: React.FC = () => {
return (
<SiteWrap theme="light">
<DocumentTitle {...documentConstants.DOCS} />
<Hero isHome={true} title="0x Docs" />
<Section maxWidth="1150px" isPadded={false}>
<ShortcutsWrapper>
{shortcuts.map((shortcut, index) => (
<ShortcutLink key={`shortcut-${index}`} {...shortcut} />
<DocsPageLayout isHome={true} title="0x Docs">
<ShortcutsWrapper>
{shortcuts.map((shortcut, index) => (
<ShortcutLink key={`shortcut-${index}`} {...shortcut} />
))}
</ShortcutsWrapper>
<Separator margin={SEPARATOR_MARGIN} />
<GetStartedWrapper>
<div>
<Heading size="default">Get Started</Heading>
{getStartedLinks.map((link, index) => (
<GetStartedLink key={`getStarted-${index}`} {...link} />
))}
</ShortcutsWrapper>
<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>
<Separator margin={SEPARATOR_MARGIN} />
<CommunityWrapper>
{communityShortcuts.map((shortcut, index) => (
<CommunityLink key={`communityLink-${index}`} {...shortcut} />
))}
</CommunityWrapper>
</Section>
</SiteWrap>
</div>
<div>
<Heading size="default">Useful Links</Heading>
<StepLinks links={usefulLinks} />
</div>
</GetStartedWrapper>
<Separator margin={SEPARATOR_MARGIN} />
<CommunityWrapper>
{communityShortcuts.map((shortcut, index) => (
<CommunityLink key={`communityLink-${index}`} {...shortcut} />
))}
</CommunityWrapper>
</DocsPageLayout>
);
};

430
packages/website/ts/pages/docs/page_template.tsx
View File

@@ -1,60 +1,168 @@
import React from 'react';
import styled from 'styled-components';
import { Code } from 'ts/components/docs/code';
import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/code_tabs';
import { FeatureLink } from 'ts/components/docs/feature_link';
import { HelpCallout } from 'ts/components/docs/help_callout';
import { HelpfulCta } from 'ts/components/docs/helpful_cta';
import { Hero } from 'ts/components/docs/hero';
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
import { NewsletterWidget } from 'ts/components/docs/newsletter_widget';
import { Note } from 'ts/components/docs/note';
import { Notification } from 'ts/components/docs/notification';
import { OrderedList } from 'ts/components/docs/ordered_list';
import { Resource } from 'ts/components/docs/resource/resource';
import { Separator } from 'ts/components/docs/separator';
import { Filters } from 'ts/components/docs/sidebar/filters';
import { SiteWrap } from 'ts/components/docs/siteWrap';
import { IStepLinkConfig } from 'ts/components/docs/step_link';
import { StepLinks } from 'ts/components/docs/step_links';
import { Table } from 'ts/components/docs/table';
import { UnorderedList } from 'ts/components/docs/unordered_list';
import { DocumentTitle } from 'ts/components/document_title';
import { Section } from 'ts/components/newLayout';
import { Heading, Paragraph } from 'ts/components/text';
import { documentConstants } from 'ts/utils/document_meta_constants';
import { Code } from 'ts/components/docs/mdx/code';
import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/mdx/code_tabs';
import { HelpCallout } from 'ts/components/docs/mdx/help_callout';
import { HelpfulCta } from 'ts/components/docs/mdx/helpful_cta';
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';
import { UnorderedList } from 'ts/components/docs/mdx/unordered_list';
import { Heading, Paragraph } from 'ts/components/text';
export const DocsPageTemplate: React.FC = () => {
return (
<SiteWrap theme="light">
<DocumentTitle {...documentConstants.DOCS} />
<Hero title={`Page Template`} description="This a subheader for the page" />
<Section maxWidth="1150px" isPadded={false} overflow="visible">
<Columns>
<Filters filters={filters} />
<Separator />
<ContentWrapper>
<LargeHeading>Large Heading</LargeHeading>
<LargeIntro>Larger introduction text</LargeIntro>
<Heading asElement="h2" size="default">
Notifications
</Heading>
<Notification>This is a standard information callout</Notification>
<Notification type="alert">This is an indication that something isn’t quite right</Notification>
<Notification type="success">This is a success message</Notification>
<Heading asElement="h2" size="default">
Tutorial Steps
</Heading>
<OrderedList>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</OrderedList>
<Heading asElement="h2" size="default">
Standard Heading
</Heading>
<Paragraph>This would be paragraph text.</Paragraph>
<DocsPageLayout title="Page template" subtitle="Test subtitle">
<Columns>
<h1>test</h1>
<Separator />
<ContentWrapper>
<LargeHeading>Large Heading</LargeHeading>
<LargeIntro>Larger introduction text</LargeIntro>
<Heading asElement="h2" size="default">
Notifications
</Heading>
<Notification>This is a standard information callout</Notification>
<Notification type="alert">This is an indication that something isn’t quite right</Notification>
<Notification type="success">This is a success message</Notification>
<Heading asElement="h2" size="default">
Tutorial Steps
</Heading>
<OrderedList>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</OrderedList>
<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>
<Table>
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>makerAddress</td>
<td>
Address that created the order. The maker is one of the two parties that will be
involved in the trade if the order gets filled.
</td>
</tr>
<tr>
<td>takerAddress</td>
<td>
Address that is allowed to fill the order. If set to 0, anyone is allowed to fill
the order. This field allows makers to decide who can fill an order, rendering it
useless to eavesdroppers or outside parties.
</td>
</tr>
<tr>
<td>feeRecipientAddress</td>
<td>
The address that will receive the fees stipulated by the order. This is typically
used to incentivize off-chain order relay.
</td>
</tr>
<tr>
<td>senderAddress</td>
<td>
Is an advanced feature that can be defaulted to the 0 address. It allows the maker
to enforce that the order must flow through some additional logic residing in an
additional Ethereum smart contract before it can be filled (e.g a KYC whitelist
contract) -- more on "extension contracts" later.
</td>
</tr>
<tr>
<td>makerAssetAmount</td>
<td>Amount of the maker'sAsset being offered by the maker. Must be greater than 0.</td>
</tr>
<tr>
<td>makerFee</td>
<td>
The fee to be paid by the order maker to the <code>feeRecipientAddress</code> in the
event of an order fill. Partial fills result in partial fees.
</td>
</tr>
</tbody>
</Table>
<H3>Tabbed Code Snippet</H3>
<Tabs>
<TabList>
<Tab>Typescript</Tab>
<Tab>Python</Tab>
<Tab>Solidity</Tab>
</TabList>
<TabPanel>
<Code>{codeSample}</Code>
</TabPanel>
<TabPanel>
<Code>{codeSample}</Code>
</TabPanel>
<TabPanel>
<Code>{codeSample}</Code>
</TabPanel>
</Tabs>
<H3>Runnable Code Snippet</H3>
<Tabs>
<TabList>
<Tab>Typescript</Tab>
<Tab>Python</Tab>
<Tab>Solidity</Tab>
</TabList>
<TabPanel>
<Code canRun={true}>{codeSample}</Code>
</TabPanel>
<TabPanel>
<Code>{codeSample}</Code>
</TabPanel>
<TabPanel>
<Code>{codeSample}</Code>
</TabPanel>
</Tabs>
<H3>Subheading</H3>
<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>
<div>
<Note
heading="Information"
description="This is a side-info callout used to explain things a little more when needed."
/>
<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.
@@ -64,173 +172,54 @@ export const DocsPageTemplate: React.FC = () => {
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>
<Table>
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>makerAddress</td>
<td>
Address that created the order. The maker is one of the two parties that will be
involved in the trade if the order gets filled.
</td>
</tr>
<tr>
<td>takerAddress</td>
<td>
Address that is allowed to fill the order. If set to 0, anyone is allowed to
fill the order. This field allows makers to decide who can fill an order,
rendering it useless to eavesdroppers or outside parties.
</td>
</tr>
<tr>
<td>feeRecipientAddress</td>
<td>
The address that will receive the fees stipulated by the order. This is
typically used to incentivize off-chain order relay.
</td>
</tr>
<tr>
<td>senderAddress</td>
<td>
Is an advanced feature that can be defaulted to the 0 address. It allows the
maker to enforce that the order must flow through some additional logic residing
in an additional Ethereum smart contract before it can be filled (e.g a KYC
whitelist contract) -- more on "extension contracts" later.
</td>
</tr>
<tr>
<td>makerAssetAmount</td>
<td>
Amount of the maker'sAsset being offered by the maker. Must be greater than 0.
</td>
</tr>
<tr>
<td>makerFee</td>
<td>
The fee to be paid by the order maker to the <code>feeRecipientAddress</code> in
the event of an order fill. Partial fills result in partial fees.
</td>
</tr>
</tbody>
</Table>
<H3>Tabbed Code Snippet</H3>
<Tabs>
<TabList>
<Tab>Typescript</Tab>
<Tab>Python</Tab>
<Tab>Solidity</Tab>
</TabList>
<TabPanel>
<Code>{codeSample}</Code>
</TabPanel>
<TabPanel>
<Code>{codeSample}</Code>
</TabPanel>
<TabPanel>
<Code>{codeSample}</Code>
</TabPanel>
</Tabs>
<H3>Runnable Code Snippet</H3>
<Tabs>
<TabList>
<Tab>Typescript</Tab>
<Tab>Python</Tab>
<Tab>Solidity</Tab>
</TabList>
<TabPanel>
<Code canRun={true}>{codeSample}</Code>
</TabPanel>
<TabPanel>
<Code>{codeSample}</Code>
</TabPanel>
<TabPanel>
<Code>{codeSample}</Code>
</TabPanel>
</Tabs>
<H3>Subheading</H3>
<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>
<div>
<Note
heading="Information"
description="This is a side-info callout used to explain things a little more when needed."
/>
<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>
</div>
<UnorderedList>
<li>List items</li>
<li>List items</li>
<li>List items</li>
<li>List items</li>
</UnorderedList>
</div>
<UnorderedList>
<li>List items</li>
<li>List items</li>
<li>List items</li>
<li>List items</li>
</UnorderedList>
<Heading asElement="h2" size="default">
Next Steps
</Heading>
<StepLinks links={usefulLinks} />
<HelpCallout />
<HelpfulCta page="test" />
<div>
<Heading asElement="h2" size="default">
Next Steps
Resources
</Heading>
<StepLinks links={usefulLinks} />
<HelpCallout />
<HelpfulCta page="test" />
<div>
<Heading asElement="h2" size="default">
Resources
</Heading>
{/* {resources.map((resource, index) => (
{/* {resources.map((resource, index) => (
<Resource key={`resource-${index}`} {...resource} />
))} */}
</div>
<div>
<Heading asElement="h2" size="default">
Feature Links
</Heading>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="/"
/>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="/"
/>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="/"
/>
</div>
<NewsletterWidget />
</ContentWrapper>
</Columns>
</Section>
</SiteWrap>
</div>
<div>
<Heading asElement="h2" size="default">
Feature Links
</Heading>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="/"
/>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="/"
/>
<FeatureLink
heading="RadarRelay SDK"
description="A description could possibly go here but could be tight."
icon="flexibleIntegration"
url="/"
/>
</div>
<NewsletterWidget />
</ContentWrapper>
</Columns>
</DocsPageLayout>
);
};
@@ -286,36 +275,7 @@ const usefulLinks: IStepLinkConfig[] = [
},
];
const filters = [
{
attribute: 'Topic',
heading: 'Topic',
},
{
attribute: 'Difficulty',
heading: 'Level',
},
];
const codeSample = `import { TruffleArtifactAdapter } from '@0x/sol-coverage';
const projectRoot = '.';
const solcVersion = '0.5.0';
const artifactAdapter = new TruffleArtifactAdapter(projectRoot, solcVersion);`;
const resources = [
{
heading: '0x Mesh - your gateway to networked liquidity',
description:
'Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity.',
tags: ['Relayer'],
url: 'https://0x.org',
isCommunity: true,
},
{
heading: '0x Mesh - your gateway to networked liquidity',
description:
'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs',
tags: ['Api explorer', 'Relayer'],
url: 'https://0x.org',
},
];

55
packages/website/ts/pages/docs/tools.tsx
View File

@@ -2,16 +2,11 @@ import React from 'react';
import styled from 'styled-components';
import { FeatureLink } from 'ts/components/docs/feature_link';
import { Hero } from 'ts/components/docs/hero';
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
import { Resource } from 'ts/components/docs/resource/resource';
import { Filters } from 'ts/components/docs/sidebar/filters';
import { SiteWrap } from 'ts/components/docs/siteWrap';
import { DocumentTitle } from 'ts/components/document_title';
import { Section } from 'ts/components/newLayout';
import { Heading } from 'ts/components/text';
import { documentConstants } from 'ts/utils/document_meta_constants';
import { Hits, InstantSearch } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';
@@ -20,17 +15,14 @@ const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e1
export const DocsTools: React.FC = () => {
return (
<SiteWrap theme="light">
<DocumentTitle {...documentConstants.DOCS} />
<Hero title="Tools" />
<Section maxWidth="1030px" isPadded={false}>
<InstantSearch searchClient={searchClient} indexName="0x_tools_test">
<Columns>
<Filters filters={filters} />
<article>
<Hits hitComponent={Resource} />
<DocsPageLayout title="Tools">
<InstantSearch searchClient={searchClient} indexName="0x_tools_test">
<Columns>
<Filters filters={filters} />
<article>
<Hits hitComponent={Resource} />
{/* <FeaturedToolsWrapper>
{/* <FeaturedToolsWrapper>
<Heading asElement="h2" size="default">
Featured Tools
</Heading>
@@ -45,7 +37,7 @@ export const DocsTools: React.FC = () => {
))}
</FeaturedToolsWrapper> */}
{/* <ResourcesWrapper>
{/* <ResourcesWrapper>
<Heading asElement="h2" size="default">
Docker Images
</Heading>
@@ -54,7 +46,7 @@ export const DocsTools: React.FC = () => {
<Resource key={`resource-${index}`} {...resource} />
))}
</ResourcesWrapper> */}
{/*
{/*
<ResourcesWrapper>
<Heading asElement="h2" size="default">
TypeScript Libraries
@@ -64,11 +56,10 @@ export const DocsTools: React.FC = () => {
<Resource key={`resource-${index}`} {...resource} />
))}
</ResourcesWrapper> */}
</article>
</Columns>
</InstantSearch>
</Section>
</SiteWrap>
</article>
</Columns>
</InstantSearch>
</DocsPageLayout>
);
};
@@ -112,21 +103,3 @@ const featuredLinks = [
url: 'https://0x.org',
},
];
const resources = [
{
heading: '0x Mesh - your gateway to networked liquidity',
description:
'Learn about the 0x peer-to-peer network for sharing orders and how you can use it to tap into networked liquidity.',
tags: ['Relayer', 'Dogs', 'Bells and whistles', 'Interstellar', 'Maharaji'],
url: 'https://0x.org',
isCommunity: true,
},
{
heading: '0x Mesh - your gateway to networked liquidity',
description:
'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs',
tags: ['Api explorer', 'Relayer'],
url: 'https://0x.org',
},
];

80
packages/website/ts/pages/docs/view.tsx
View File

@@ -7,31 +7,24 @@ import capitalize from 'lodash/capitalize';
import { MDXProvider } from '@mdx-js/react';
import CircularProgress from 'material-ui/CircularProgress';
import { Code } from 'ts/components/docs/mdx/code';
import { CodeTabs } from 'ts/components/docs/mdx/code_tabs';
import { H1, H2, H3, H4 } from 'ts/components/docs/mdx/headings';
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 { Notification } from 'ts/components/docs/mdx/notification';
import { OrderedList } from 'ts/components/docs/mdx/ordered_list';
import { Table } from 'ts/components/docs/mdx/table';
import { UnorderedList } from 'ts/components/docs/mdx/unordered_list';
import { Code } from 'ts/components/docs/code';
import { CodeTabs } from 'ts/components/docs/code_tabs';
import { H1, H2, H3, H4 } from 'ts/components/docs/headings';
import { HelpCallout } from 'ts/components/docs/help_callout';
import { HelpfulCta } from 'ts/components/docs/helpful_cta';
import { Hero } from 'ts/components/docs/hero';
import { InlineCode } from 'ts/components/docs/inline_code';
import { InlineLink } from 'ts/components/docs/inline_link';
import { Notification } from 'ts/components/docs/notification';
import { OrderedList } from 'ts/components/docs/ordered_list';
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
import { Separator } from 'ts/components/docs/separator';
import { IContents, TableOfContents } from 'ts/components/docs/sidebar/table_of_contents';
import { SiteWrap } from 'ts/components/docs/siteWrap';
import { Table } from 'ts/components/docs/table';
import { UnorderedList } from 'ts/components/docs/unordered_list';
import { DocumentTitle } from 'ts/components/document_title';
import { Section } from 'ts/components/newLayout';
import { Paragraph } from 'ts/components/text';
import { documentConstants } from 'ts/utils/document_meta_constants';
import { colors } from 'ts/style/colors';
interface IDocsViewProps {
match: match<any>;
}
@@ -68,45 +61,28 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
contents: component.tableOfContents(),
});
}
// @TODO: add error handling if needed
// @INFO: add error handling if needed
};
return (
<SiteWrap theme="light">
<DocumentTitle {...documentConstants.DOCS} />
<Hero title={title} />
<Section maxWidth="1150px" isPadded={false} overflow="visible">
{Component ? (
<Columns>
<TableOfContents contents={contents} />
<Separator />
<ContentWrapper>
<MDXProvider components={mdxComponents}>
{/*
<DocsPageLayout title={title} loading={!Component}>
<Columns>
<TableOfContents contents={contents} />
<Separator />
<ContentWrapper>
<MDXProvider components={mdxComponents}>
{/*
// @ts-ignore */}
<Component />
</MDXProvider>
<HelpCallout />
<HelpfulCta page={page} />
</ContentWrapper>
</Columns>
) : (
<LoaderWrapper>
<CircularProgress size={40} thickness={2} color={colors.brandLight} />
</LoaderWrapper>
)}
</Section>
</SiteWrap>
<Component />
</MDXProvider>
<HelpCallout />
<HelpfulCta page={page} />
</ContentWrapper>
</Columns>
</DocsPageLayout>
);
};
const LoaderWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
height: 300px;
`;
const Columns = styled.div`
display: grid;
grid-template-columns: 130px 0 1fr;