Merge branch 'feature/new-docs' of github.com:0xProject/0x-monorepo into feature/new-docs

2019-08-31 11:17:49 +02:00
parent 1a4699ecac a425d3a234
commit 2547e0e5b1
12 changed files with 32 additions and 85 deletions
--- a/packages/website/mdx/guides/integrate-instant.mdx
+++ b/packages/website/mdx/guides/integrate-instant.mdx
@@ -8,7 +8,7 @@ Check out a live example on [mainnet](http://0x-instant-staging.s3-website-us-ea

 ## Libraries

-0x Instant has two main libraries: the `0x Instant UI component` that users will see and the `Asset Buyer` library, a JavaScript / TypeScript library that abstracts out many of the complexities of sourcing orders and performing market buys. Most developers who want to add simple token access will just use the out-of-the-box package that includes the UI and Asset Buyer, but teams may also write their own custom UI and just plug into the Asset Buyer as they see fit. Check out the `@0x/asset-buyer` documentation [here](https://0x.org/docs/tools/asset-buyer).
+0x Instant has two main libraries: the `0x Instant UI component` that users will see and the `Asset Swapper` library, a JavaScript / TypeScript library that abstracts out many of the complexities of sourcing orders and performing market buys. Most developers who want to add simple token access will just use the out-of-the-box package that includes the UI and Asset Swapper, but teams may also write their own custom UI and just plug into the Asset Swapper as they see fit. Check out the `@0x/asset-swapper` documentation [here](https://0x.org/docs/tools/asset-swapper).

 ## Orders

@@ -20,7 +20,7 @@ As an end host of 0x Instant, you can charge users a fee on all trades made thro

 # UI Integration

-The 0x Instant UI and Asset Buyer are bundled together in a convenient JS package for you. You can either download and serve the package yourself, or use the CDN-hosted version from 0x.
+The 0x Instant UI and Asset Swapper are bundled together in a convenient JS package for you. You can either download and serve the package yourself, or use the CDN-hosted version from 0x.

 ```html
 <!DOCTYPE html>
@@ -212,7 +212,7 @@ zeroExInstant.render(
 );
 ```

-# Asset Buyer
+# Asset Swapper

 Behind the scenes, the `AssetBuyer` class is aggregating liquidity and calculating the orders that need to be filled for a given user request. For teams that require a more custom integration or advanced functionality, they can use the AssetBuyer class directly and skip the Instant UI. Below are the methods you will most likely be interacting with.

@@ -465,7 +465,7 @@ We provide assetMetaData for a subset of ERC20 tokens. You can call the helper f

 ### Q: Do users need to have ZRX to pay for fees on orders?

-Nope! The Asset Buyer will calculate the ZRX required to pay for fees on the desired orders, and automatically purchase ZRX from your order source to cover your fees as part of the order. Note that Instant cannot use a user's existing ZRX balance and the liquidity source must be able to provide ZRX / ETH orders.
+Nope! The Asset Swapper will calculate the ZRX required to pay for fees on the desired orders, and automatically purchase ZRX from your order source to cover your fees as part of the order. Note that Instant cannot use a user's existing ZRX balance and the liquidity source must be able to provide ZRX / ETH orders.

 ### Q: Does this work with order matching relayers (vs. open orderbook)?

@@ -495,7 +495,7 @@ Join us on [Discord](https://discord.gg/d3FTX3M) and join the #instant channel t

 ### Q: How can I make 0x Instant work in my mobile app?

-For apps using React Native or apps that have a web view, the asset buyer engine will work out of the box with your application. For apps that are written in a native language like Java or Swift, you will need to wrap the asset-buyer logic in a JS interpreter.
+For apps using React Native or apps that have a web view, the Asset Swapper engine will work out of the box with your application. For apps that are written in a native language like Java or Swift, you will need to wrap the asset-swapper logic in a JS interpreter.

 ## Affiliates

--- a/packages/website/scripts/algolia_helpers.ts
+++ b/packages/website/scripts/algolia_helpers.ts
@@ -48,7 +48,7 @@ const settings: ObjectMap<IAlgoliaSettings> = {
    },
    tools: {
        ...sharedSettings,
-        attributesForFaceting: ['type', 'tags', 'difficulty', 'isCommunity'],
+        attributesForFaceting: ['type', 'tags', 'difficulty'],
    },
 };

--- a/packages/website/ts/components/docs/mdx/code.tsx
+++ b/packages/website/ts/components/docs/mdx/code.tsx
@@ -21,7 +21,7 @@ export const Code: React.FC<ICodeProps> = ({ children, className = 'language-typ
    const copyButtonText = isCopied ? 'Copied!' : 'Copy';

    // Passing in LANGUAGE to code in mdx results in classname 'language-<LANGUAGE>'
-    const language = className.replace('language-', '');
+    const language = className.replace(/language-/, '');

    const handleCopyClick = () => {
        setIsCopied(true);
@@ -88,10 +88,9 @@ const CodeTag = styled.code`
    border: none;
    font-family: 'Roboto Mono', sans-serif;

-    span {
-        font-size: 14px;
-        line-height: 20px;
-        display: flex;
+    /* Targeting newline created by markdown at the end of each code block */
+    & > span:last-of-type {
+        display: none;
    }
 `;

@@ -114,7 +113,8 @@ const style = {
        display: 'block',
        overflowX: 'hidden',
        background: colors.backgroundLight,
-        fontSize: '12px',
+        fontSize: '14px',
+        lineHeight: '1.5',
        padding: '20px',
    },
    'hljs-comment': {
@@ -176,7 +176,6 @@ const style = {
    },
    'hljs-function': {
        color: '#781818',
-        paddingRight: '2px',
    },
    'hljs-symbol': {
        color: '#2a9292',
--- a/packages/website/ts/components/docs/sidebar/filter.tsx
+++ b/packages/website/ts/components/docs/sidebar/filter.tsx
@@ -6,7 +6,6 @@ import { colors } from 'ts/style/colors';
 export interface IFilterProps extends IFilterCheckboxProps {
    label: string;
    currentRefinement: string[];
-    customLabels?: ICustomLabels;
    isDisabled?: boolean;
    value: string;
    refine: (value: string | string[]) => void;
@@ -16,20 +15,7 @@ interface IFilterCheckboxProps {
    isRefined: boolean;
 }

-interface ICustomLabels {
-    [key: string]: string;
-}
-
-export const Filter: React.FC<IFilterProps> = ({
-    currentRefinement,
-    customLabels,
-    isDisabled,
-    isRefined,
-    label,
-    refine,
-}) => {
-    const filterLabel = customLabels ? customLabels[label] : label;
-
+export const Filter: React.FC<IFilterProps> = ({ currentRefinement, isDisabled, isRefined, label, refine }) => {
    const handleClick = () => {
        if (isRefined) {
            const refinement = [...currentRefinement].filter((item: string) => item !== label); // Remove from current refinement
@@ -42,7 +28,7 @@ export const Filter: React.FC<IFilterProps> = ({
    return (
        <FilterWrapper isDisabled={isDisabled} onClick={handleClick}>
            <FilterCheckbox isRefined={isRefined} />
-            <FilterLabel>{filterLabel}</FilterLabel>
+            <FilterLabel>{label}</FilterLabel>
        </FilterWrapper>
    );
 };
--- a/packages/website/ts/components/docs/sidebar/filters.tsx
+++ b/packages/website/ts/components/docs/sidebar/filters.tsx
@@ -10,12 +10,6 @@ interface IFiltersProps {
 interface IFiltersGroupProps {
    attribute: string;
    heading: string;
-    hiddenLabels?: string[];
-    customLabels?: ICustomLabels;
-}
-
-interface ICustomLabels {
-    [key: string]: string;
 }

 export const Filters: React.FC<IFiltersProps> = ({ filters }) => {
--- a/packages/website/ts/components/docs/sidebar/filters_group.tsx
+++ b/packages/website/ts/components/docs/sidebar/filters_group.tsx
@@ -11,9 +11,7 @@ import { difficultyOrder } from 'ts/utils/algolia_constants';
 interface IFilterListProps {
    attribute: string;
    currentRefinement: string[];
-    customLabels?: ICustomLabels;
    heading: string;
-    hiddenLabels?: string[];
    isDisabled?: boolean;
    items: IFilterProps[];
    operator: string;
@@ -21,19 +19,7 @@ interface IFilterListProps {
    transformItems: (items: IFilterProps[]) => void;
 }

-interface ICustomLabels {
-    [key: string]: string;
-}
-
-const FiltersList: React.FC<IFilterListProps> = ({
-    attribute,
-    items,
-    currentRefinement,
-    customLabels,
-    heading,
-    hiddenLabels,
-    refine,
-}) => {
+const FiltersList: React.FC<IFilterListProps> = ({ attribute, items, currentRefinement, heading, refine }) => {
    const [filters, setFilters] = React.useState<IFilterProps[]>([]);
    //    Note (Piotr): Whenever you choose a filter (refinement), algolia removes all filters that could not match the query.
    //    What we are doing instead is first grabbing the list of all possible filters on mount (or clearing all filters) and
@@ -85,20 +71,9 @@ const FiltersList: React.FC<IFilterListProps> = ({
            <Heading asElement="h3" size={18} fontWeight="400" marginBottom="1rem">
                {heading}
            </Heading>
-            {sortedFilters.map((filter: IFilterProps, index: number) => {
-                if (hiddenLabels && hiddenLabels.includes(filter.label)) {
-                    return null;
-                }
-                return (
-                    <Filter
-                        key={`filter-${index}`}
-                        currentRefinement={currentRefinement}
-                        customLabels={customLabels}
-                        refine={refine}
-                        {...filter}
-                    />
-                );
-            })}
+            {sortedFilters.map((filter: IFilterProps, index: number) => (
+                <Filter key={`filter-${index}`} currentRefinement={currentRefinement} refine={refine} {...filter} />
+            ))}
        </FiltersGroupWrapper>
    );
 };
--- a/packages/website/ts/components/dropdowns/dropdown_products.tsx
+++ b/packages/website/ts/components/dropdowns/dropdown_products.tsx
@@ -6,24 +6,24 @@ import { Heading, Paragraph } from 'ts/components/text';
 import { WebsitePaths } from 'ts/types';

 const navData = [
+  {
+      title: 'Asset Swapper',
+      description: 'Funnel 0x liquidity into your DeFi smart contracts',
+      url: WebsitePaths.AssetSwapperPage,
+  },
    {
        title: '0x Instant',
-        description: 'Simple crypto purchasing',
+        description: 'Embed simple token purchasing in any app or website',
        url: WebsitePaths.Instant,
    },
    {
        title: '0x Launch Kit',
-        description: 'Build on the 0x protocol',
+        description: 'Launch an exchange or NFT marketplace in minutes',
        url: WebsitePaths.LaunchKit,
    },
-    {
-        title: 'Asset Swapper',
-        description: 'Swap tokens via smart contracts',
-        url: WebsitePaths.AssetSwapperPage,
-    },
    {
        title: 'Governance',
-        description: 'Vote on changes to the 0x protocol',
+        description: 'Vote on ZEIPs to upgrade the 0x protocol',
        url: WebsitePaths.Vote,
    },
 ];
--- a/packages/website/ts/components/dropdowns/dropdown_resources.tsx
+++ b/packages/website/ts/components/dropdowns/dropdown_resources.tsx
@@ -26,9 +26,8 @@ const introData: LinkConfig[] = [
        shouldOpenInNewTab: true,
    },
    {
-        label: 'Legal Wiki',
+        label: 'Legal Guide',
        url: `${WebsitePaths.DocsGuides}/legal-guide`,
-        shouldOpenInNewTab: true,
    },
 ];

--- a/packages/website/ts/components/header.tsx
+++ b/packages/website/ts/components/header.tsx
@@ -46,7 +46,7 @@ const navItems: NavItemProps[] = [
        id: 'products',
        text: 'Products',
        dropdownComponent: DropdownProducts,
-        dropdownWidth: 280,
+        dropdownWidth: 300,
    },
    {
        id: 'docs',
--- a/packages/website/ts/pages/docs/home.tsx
+++ b/packages/website/ts/pages/docs/home.tsx
@@ -46,8 +46,8 @@ const shortcutLinks = [
        url: WebsitePaths.DocsGuides,
    },
    {
-        heading: 'Tools',
-        description: 'Browse and filter through all the open-source 0x developer tools',
+        heading: 'Tools & Libraries',
+        description: 'Browse and filter through all the open-source 0x developer tools and libraries',
        icon: 'tools',
        url: WebsitePaths.DocsTools,
    },
--- a/packages/website/ts/pages/docs/tools.tsx
+++ b/packages/website/ts/pages/docs/tools.tsx
@@ -26,7 +26,7 @@ interface IHitsProps {
 export const DocsTools: React.FC = () => {
    const nameToSearchIndex = getNameToSearchIndex(environments.getEnvironment());
    return (
-        <DocsPageLayout title="Tools">
+        <DocsPageLayout title="Tools & Libraries">
            <InstantSearch searchClient={searchClient} indexName={nameToSearchIndex.tools}>
                <Configure hitsPerPage={hitsPerPage.pages} />
                <Columns>
@@ -124,10 +124,4 @@ const filters = [
    { attribute: 'type', heading: 'Type' },
    { attribute: 'tags', heading: 'Developer Persona' },
    { attribute: 'difficulty', heading: 'Level' },
-    {
-        attribute: 'isCommunity',
-        heading: 'Community maintained',
-        hiddenLabels: ['false'],
-        customLabels: { true: 'Only community maintained' },
-    },
 ];
--- a/packages/website/ts/utils/algolia_meta.json
+++ b/packages/website/ts/utils/algolia_meta.json
@@ -526,4 +526,4 @@
            "externalUrl": "https://github.com/0xProject/0x-coordinator-server"
        }
    }
-}
+}