From ca0567ad0911657b0241844cd2f34d78b697de8c Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Aug 2018 16:03:18 +0100 Subject: Begin implementing doc home page --- packages/website/ts/pages/documentation/home.tsx | 55 ++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 packages/website/ts/pages/documentation/home.tsx (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx new file mode 100644 index 000000000..eabad4def --- /dev/null +++ b/packages/website/ts/pages/documentation/home.tsx @@ -0,0 +1,55 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle = require('react-document-title'); +import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; +import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { Translate } from 'ts/utils/translate'; + +export interface HomeProps { + location: Location; + translate: Translate; +} + +export interface HomeState {} + +export class Home extends React.Component { + public render(): React.ReactNode { + return ( +
+ +
+
+ +
+
+ +
+
+
+ ); + } +} -- cgit From 60ef45722cd20fe243f58f5eaf8717081cbc39f1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 28 Aug 2018 17:18:48 +0100 Subject: Remove temporary borders --- packages/website/ts/pages/documentation/home.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index eabad4def..003212279 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -31,7 +31,6 @@ export class Home extends React.Component { paddingRight: 22, backgroundColor: '#f5f5f5', height: '100vh', - border: '1px black dotted', }} > @@ -43,7 +42,6 @@ export class Home extends React.Component { paddingRight: 50, backgroundColor: '#ffffff', height: '100vh', - border: '1px black dotted', }} > -- cgit From ce51edcf80cbecab6f04db4704ddcf21c804f3b0 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 17 Sep 2018 16:55:22 +0100 Subject: Implement new responsive, dev section header and home scaffolding --- packages/website/ts/pages/documentation/home.tsx | 78 ++++++++++++++++-------- 1 file changed, 53 insertions(+), 25 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 003212279..a065efc80 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,53 +1,81 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { Container } from 'ts/components/ui/container'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; + +const THROTTLE_TIMEOUT = 100; export interface HomeProps { location: Location; translate: Translate; + screenWidth: ScreenWidths; + dispatcher: Dispatcher; } export interface HomeState {} export class Home extends React.Component { + private readonly _throttledScreenWidthUpdate: () => void; + constructor(props: HomeProps) { + super(props); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + } + public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); + window.scrollTo(0, 0); + } + public componentWillUnmount(): void { + window.removeEventListener('resize', this._throttledScreenWidthUpdate); + } public render(): React.ReactNode { + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const mainContentPadding = isSmallScreen ? 0 : 50; return ( -
-
- -
-
+ + -
+
+

Start building on 0x

+
+
-
+ ); } + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); + } } -- cgit From d8c68b000b977ce940eb95c234f0ecb435c697d6 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 13:38:22 +0100 Subject: Implement dev home --- packages/website/ts/pages/documentation/home.tsx | 356 ++++++++++++++++++++++- 1 file changed, 352 insertions(+), 4 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index a065efc80..ab29b7f07 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -4,13 +4,261 @@ import * as React from 'react'; import DocumentTitle = require('react-document-title'); import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { TutorialButton } from 'ts/components/documentation/tutorial_button'; import { Container } from 'ts/components/ui/container'; +import { Link } from 'ts/components/ui/link'; +import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { ScreenWidths } from 'ts/types'; +import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; +interface Package { + name: string; + description: string; + to: string; + isExternal?: boolean; + shouldOpenInNewTab?: boolean; +} + const THROTTLE_TIMEOUT = 100; +const TUTORIALS: TutorialInfo[] = [ + { + title: 'Develop on Ethereum', + iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', + description: 'Learn more about building applications ontop of the Ethereum blockchain', + location: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, + { + title: 'Build a relayer', + iconUrl: '/images/developers/tutorials/build_a_relayer.svg', + description: 'Learn how to build your own 0x relayer from scratch', + location: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, + { + title: 'Learn the 0x order basics', + iconUrl: '/images/developers/tutorials/0x_order_basics.svg', + description: 'Tutorial on how to create, validate and fill an order over 0x protocol', + location: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, + { + title: 'Tap into shared liquidity', + iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', + description: 'Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API', + location: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, +]; +const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { + '0x Protocol': [ + { + name: '0x.js', + description: + 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as `order-utils` and `contract-wrappers`.', + to: WebsitePaths.ZeroExJs, + }, + { + name: '0x starter project', + description: + 'A Typescript starter project that will walk you through the basics of how to interact with 0x Protocol and trade of an SRA relayer', + to: 'https://github.com/0xProject/0x-starter-project', + isExternal: true, + shouldOpenInNewTab: true, + }, + { + name: '@0xproject/connect', + description: + 'An http & websocket client for interacting with relayers that have implemented the Standard Relayer API', + to: WebsitePaths.Connect, + }, + { + name: '@0xproject/contract-wrappers', + description: + 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in the contracts.', + to: WebsitePaths.ContractWrappers, + }, + { + name: '@0xproject/json-schemas', + description: + 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', + to: WebsitePaths.JSONSchemas, + }, + { + name: '@0xproject/order-utils', + description: + 'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.', + to: WebsitePaths.OrderUtils, + }, + { + name: '@0xproject/order-watcher', + description: + "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.", + to: WebsitePaths.OrderWatcher, + }, + { + name: '@0xproject/sra-spec', + description: + 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', + isExternal: true, + shouldOpenInNewTab: true, + }, + ], + Ethereum: [ + { + name: 'abi-gen', + description: + "This package allows you to generate TypeScript contract wrappers from ABI files. It's heavily inspired by Geth abigen but takes a different approach. You can write your custom handlebars templates which will allow you to seamlessly integrate the generated code into your existing codebase with existing conventions.", + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', + isExternal: true, + shouldOpenInNewTab: true, + }, + { + name: 'ethereum-types', + description: + 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', + to: WebsitePaths.EthereumTypes, + }, + { + name: '@0xproject/sol-compiler', + description: + 'A wrapper around `solc-js` that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', + to: WebsitePaths.SolCompiler, + }, + { + name: '@0xproject/sol-cov', + description: + 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', + to: WebsitePaths.SolCov, + }, + { + name: '@0xproject/subproviders', + description: + 'A collection of subproviders to use with `web3-provider-engine` (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', + to: WebsitePaths.Subproviders, + }, + { + name: '@0xproject/web3-wrapper', + description: + 'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...', + to: WebsitePaths.Web3Wrapper, + }, + ], + 'Community Maintained': [ + { + name: '0x Event Extractor', + description: + 'NodeJS worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', + to: 'https://github.com/0xTracker/0x-event-extractor', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: '0x Tracker Worker', + description: + 'NodeJS worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', + to: 'https://github.com/0xTracker/0x-tracker-worker', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Aquaduct', + description: + "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", + to: 'https://www.npmjs.com/package/aqueduct', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Aquaduct Server SDK', + description: + 'SDKs for automation using Aqueduct & ERC dEX. Aqueduct Server is a lightweight, portable and secure server that runs locally on any workstation. The server exposes a small number of foundational endpoints that enable working with the decentralized Aqueduct liquidity pool from any context or programming language.', + to: 'https://github.com/ERCdEX/aqueduct-server-sdk', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'DDEX Node.js SDK', + description: 'A node.js SDK for trading on the DDEX relayer', + to: 'https://www.npmjs.com/package/ddex-api', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'ERCdex Widget', + description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", + to: 'https://github.com/ERCdEX/widget', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'ERCdex Java SDK', + description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", + to: 'https://github.com/ERCdEX/java', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'ERCdex Python SDK', + description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", + to: 'https://github.com/ERCdEX/python', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Massive', + description: + 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', + to: 'https://github.com/NoteGio/massive', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'OpenRelay', + description: 'An open-source API-only Relayer written in Go', + to: 'https://github.com/NoteGio/openrelay', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'OpenRelay.js', + description: + 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', + to: 'https://github.com/NoteGio/openrelay.js', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Radar SDK', + description: + 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', + to: 'https://github.com/RadarRelay/sdk', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'The Ocean Javascript SDK', + description: + 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', + to: 'https://github.com/TheOceanTrade/theoceanx-javascript', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'Tokenlon Javascript SDK', + description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", + to: 'https://www.npmjs.com/package/tokenlon-sdk', + shouldOpenInNewTab: true, + isExternal: true, + }, + { + name: 'AssetData decoder library in Java', + description: 'A small library that implements the 0x order assetData encoding/decoding in Java', + to: 'https://github.com/wildnothing/asset-data-decoder', + shouldOpenInNewTab: true, + isExternal: true, + }, + ], +}; export interface HomeProps { location: Location; @@ -54,26 +302,126 @@ export class Home extends React.Component { paddingRight={22} paddingTop={2} backgroundColor={colors.grey100} - height="100vh" >
-

Start building on 0x

+ {this._renderSectionTitle('Start building on 0x')} + + {this._renderSectionDescription( + 'Follow one of our "Getting started" guides to learn more about building ontop of 0x.', + )} + + {_.map(TUTORIALS, tutorialInfo => ( + + ))} + + +
+
+ {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} + + {this._renderSectionDescription( + 'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum', + )} + + {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + +
); } + private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { + return ( +
+ {category} +
{_.map(pkgs, pkg => this._renderPackage(pkg))}
+
+ ); + } + private _renderPackage(pkg: Package): React.ReactNode { + return ( +
+
+
+
+ + + {pkg.name} + + +
+
+ + {pkg.description} + +
+
+ +
+
{this.props.translate.get(Key.More, Deco.Cap)}
+ + + +
+ +
+
+
+ ); + } + private _renderSectionTitle(text: string): React.ReactNode { + return ( + + {text} + + ); + } + private _renderSectionDescription(text: string): React.ReactNode { + return ( + + {text} + + ); + } private _updateScreenWidth(): void { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); -- cgit From f3ad64aa1c2930affbfd074316b5f407580b7523 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 26 Sep 2018 14:52:58 +0100 Subject: Move more text over to translation files --- packages/website/ts/pages/documentation/home.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index ab29b7f07..cf2ba0eec 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); @@ -24,27 +24,27 @@ interface Package { const THROTTLE_TIMEOUT = 100; const TUTORIALS: TutorialInfo[] = [ { - title: 'Develop on Ethereum', + title: Key.DevelopOnEthereum, iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', - description: 'Learn more about building applications ontop of the Ethereum blockchain', + description: Key.DevelopOnEthereumDescription, location: `${WebsitePaths.Wiki}#Ethereum-Development`, }, { - title: 'Build a relayer', + title: Key.BuildARelayer, iconUrl: '/images/developers/tutorials/build_a_relayer.svg', - description: 'Learn how to build your own 0x relayer from scratch', + description: Key.BuildARelayerDescription, location: `${WebsitePaths.Wiki}#Build-A-Relayer`, }, { - title: 'Learn the 0x order basics', + title: Key.OrderBasics, iconUrl: '/images/developers/tutorials/0x_order_basics.svg', - description: 'Tutorial on how to create, validate and fill an order over 0x protocol', + description: Key.OrderBasicsDescription, location: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, }, { - title: 'Tap into shared liquidity', + title: Key.UseSharedLiquidity, iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', - description: 'Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API', + description: Key.UseSharedLiquidityDescription, location: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, ]; @@ -322,6 +322,7 @@ export class Home extends React.Component { {_.map(TUTORIALS, tutorialInfo => ( -- cgit From 155a4a8f067e36912c3eb6bc279ca58ce90a53c0 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 14:28:39 +0100 Subject: Add sidebar menu, proper scrolling and mobile-optimize --- packages/website/ts/pages/documentation/home.tsx | 276 ++++++++++++++++------- 1 file changed, 193 insertions(+), 83 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index cf2ba0eec..338230358 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,7 +1,14 @@ -import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; +import { + colors, + constants, + constants as sharedConstants, + NestedSidebarMenu, + utils as sharedUtils, +} from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); +import { Element as ScrollElement } from 'react-scroll'; import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { TutorialButton } from 'ts/components/documentation/tutorial_button'; @@ -22,6 +29,8 @@ interface Package { } const THROTTLE_TIMEOUT = 100; +const TOP_BAR_HEIGHT = 80; +const SCROLLER_WIDTH = 4; const TUTORIALS: TutorialInfo[] = [ { title: Key.DevelopOnEthereum, @@ -48,8 +57,13 @@ const TUTORIALS: TutorialInfo[] = [ location: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, ]; +enum Categories { + ZeroExProtocol = '0x Protocol', + Ethereum = 'Ethereum', + CommunityMaintained = 'Community Maintained', +} const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { - '0x Protocol': [ + [Categories.ZeroExProtocol]: [ { name: '0x.js', description: @@ -103,7 +117,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { shouldOpenInNewTab: true, }, ], - Ethereum: [ + [Categories.Ethereum]: [ { name: 'abi-gen', description: @@ -143,7 +157,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: WebsitePaths.Web3Wrapper, }, ], - 'Community Maintained': [ + [Categories.CommunityMaintained]: [ { name: '0x Event Extractor', description: @@ -267,13 +281,20 @@ export interface HomeProps { dispatcher: Dispatcher; } -export interface HomeState {} +export interface HomeState { + isHoveringSidebar: boolean; + isHoveringMainContent: boolean; +} export class Home extends React.Component { private readonly _throttledScreenWidthUpdate: () => void; constructor(props: HomeProps) { super(props); this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + this.state = { + isHoveringSidebar: false, + isHoveringMainContent: false, + }; } public componentDidMount(): void { window.addEventListener('resize', this._throttledScreenWidthUpdate); @@ -283,8 +304,33 @@ export class Home extends React.Component { window.removeEventListener('resize', this._throttledScreenWidthUpdate); } public render(): React.ReactNode { + const mainContainerStyle: React.CSSProperties = { + position: 'absolute', + top: 80, + left: 0, + bottom: 0, + right: 0, + overflowX: 'hidden', + overflowY: 'scroll', + minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, + WebkitOverflowScrolling: 'touch', + }; const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; - const mainContentPadding = isSmallScreen ? 0 : 50; + const mainContentPadding = isSmallScreen ? 20 : 50; + const topLevelMenu = { + 'Starter guides': _.map(TUTORIALS, tutorialInfo => + this.props.translate.get(tutorialInfo.title as Key, Deco.Cap), + ), + [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.name), + [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.name), + [Categories.CommunityMaintained]: _.map( + CATEGORY_TO_PACKAGES[Categories.CommunityMaintained], + pkg => pkg.name, + ), + }; + _.each(TUTORIALS, tutorialInfo => { + const id = sharedUtils.getIdFromName(this.props.translate.get(tutorialInfo.title as Key, Deco.Cap)); + }); return ( { } 50%, ${colors.white} 100%)`} > -
+
- + +
+ +
- -
- {this._renderSectionTitle('Start building on 0x')} - - {this._renderSectionDescription( - 'Follow one of our "Getting started" guides to learn more about building ontop of 0x.', - )} - - {_.map(TUTORIALS, tutorialInfo => ( - - ))} + + + +
+
+ {this._renderSectionTitle('Start building on 0x')} + + {this._renderSectionDescription( + 'Follow one of our "Getting started" guides to learn more about building ontop of 0x.', + )} + + {_.map(TUTORIALS, tutorialInfo => ( + + + + ))} + - -
-
- {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))} - - {this._renderSectionDescription( - 'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum', +
+
+ {this._renderSectionTitle( + this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), )} - - {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => - this._renderPackageCategory(category, pkgs), + + {this._renderSectionDescription( + 'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum', )} + + {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + - +
@@ -357,56 +444,59 @@ export class Home extends React.Component { ); } private _renderPackage(pkg: Package): React.ReactNode { + const id = sharedUtils.getIdFromName(pkg.name); return ( -
-
-
-
- - - {pkg.name} + +
+
+
+
+ + + {pkg.name} + + +
+
+ + {pkg.description} - -
-
- - {pkg.description} - -
-
- -
-
{this.props.translate.get(Key.More, Deco.Cap)}
- - - -
- +
+
+ +
+
{this.props.translate.get(Key.More, Deco.Cap)}
+ + + +
+ +
-
+ ); } private _renderSectionTitle(text: string): React.ReactNode { @@ -427,4 +517,24 @@ export class Home extends React.Component { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); } + private _onSidebarHover(_event: React.FormEvent): void { + this.setState({ + isHoveringSidebar: true, + }); + } + private _onSidebarHoverOff(): void { + this.setState({ + isHoveringSidebar: false, + }); + } + private _onMainContentHover(_event: React.FormEvent): void { + this.setState({ + isHoveringMainContent: true, + }); + } + private _onMainContentHoverOff(): void { + this.setState({ + isHoveringMainContent: false, + }); + } } -- cgit From 4d23cf85b9834422c1c59d8952cd95fdda888a9f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 28 Sep 2018 15:17:28 +0100 Subject: Add mobile menu to overview page --- packages/website/ts/pages/documentation/home.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 338230358..009048838 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -374,7 +374,11 @@ export class Home extends React.Component { backgroundColor={colors.white} > - +
Date: Fri, 28 Sep 2018 15:28:29 +0100 Subject: Fix minor scrolling issue --- packages/website/ts/pages/documentation/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 009048838..5c537aaa7 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -333,7 +333,7 @@ export class Home extends React.Component { }); return ( Date: Fri, 28 Sep 2018 15:48:16 +0100 Subject: Convert package descriptions to markdown and linkify them --- packages/website/ts/pages/documentation/home.tsx | 27 ++++++++++++++---------- 1 file changed, 16 insertions(+), 11 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 5c537aaa7..d257534f9 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -2,12 +2,14 @@ import { colors, constants, constants as sharedConstants, + MarkdownLinkBlock, NestedSidebarMenu, utils as sharedUtils, } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); +import * as ReactMarkdown from 'react-markdown'; import { Element as ScrollElement } from 'react-scroll'; import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; @@ -67,7 +69,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '0x.js', description: - 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as `order-utils` and `contract-wrappers`.', + 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as [order-utils](https://0xproject.com/docs/order-utils) and [contract-wrappers](https://0xproject.com/docs/contract-wrappers).', to: WebsitePaths.ZeroExJs, }, { @@ -81,13 +83,13 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '@0xproject/connect', description: - 'An http & websocket client for interacting with relayers that have implemented the Standard Relayer API', + 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', to: WebsitePaths.Connect, }, { name: '@0xproject/contract-wrappers', description: - 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in the contracts.', + 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in contracts.', to: WebsitePaths.ContractWrappers, }, { @@ -135,7 +137,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '@0xproject/sol-compiler', description: - 'A wrapper around `solc-js` that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', + 'A wrapper around [solc-js](https://github.com/ethereum/solc-js) that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', to: WebsitePaths.SolCompiler, }, { @@ -147,7 +149,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '@0xproject/subproviders', description: - 'A collection of subproviders to use with `web3-provider-engine` (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', + 'A collection of subproviders to use with [web3-provider-engine](https://www.npmjs.com/package/web3-provider-engine) (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', to: WebsitePaths.Subproviders, }, { @@ -161,7 +163,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '0x Event Extractor', description: - 'NodeJS worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', + 'Node.js worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', to: 'https://github.com/0xTracker/0x-event-extractor', shouldOpenInNewTab: true, isExternal: true, @@ -169,7 +171,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { { name: '0x Tracker Worker', description: - 'NodeJS worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', + 'Node.js worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', to: 'https://github.com/0xTracker/0x-tracker-worker', shouldOpenInNewTab: true, isExternal: true, @@ -474,10 +476,13 @@ export class Home extends React.Component {
-
- - {pkg.description} - +
+
Date: Mon, 1 Oct 2018 14:45:28 +0100 Subject: Fix bug where main content scrollbar wasn't showing up after navigating back in browser history via keyboard shortcut --- packages/website/ts/pages/documentation/home.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index d257534f9..568564873 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -395,6 +395,7 @@ export class Home extends React.Component { overflow: this.state.isHoveringMainContent ? 'auto' : 'hidden', }} onMouseEnter={this._onMainContentHover.bind(this)} + onMouseOver={this._onMainContentHover.bind(this)} onMouseLeave={this._onMainContentHoverOff.bind(this)} >
@@ -537,9 +538,11 @@ export class Home extends React.Component { }); } private _onMainContentHover(_event: React.FormEvent): void { - this.setState({ - isHoveringMainContent: true, - }); + if (!this.state.isHoveringMainContent) { + this.setState({ + isHoveringMainContent: true, + }); + } } private _onMainContentHoverOff(): void { this.setState({ -- cgit From 0febb085c5dbac3d125aab917ee2ba454869ff58 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 16:29:29 +0100 Subject: Fix linter --- packages/website/ts/pages/documentation/home.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 568564873..b7fa8462b 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,6 +1,5 @@ import { colors, - constants, constants as sharedConstants, MarkdownLinkBlock, NestedSidebarMenu, @@ -330,9 +329,6 @@ export class Home extends React.Component { pkg => pkg.name, ), }; - _.each(TUTORIALS, tutorialInfo => { - const id = sharedUtils.getIdFromName(this.props.translate.get(tutorialInfo.title as Key, Deco.Cap)); - }); return ( { isHoveringMainContent: false, }); } -} +} // tslint:disable:max-file-line-count -- cgit From 457ed57d70c1b34b243a151f16fd3d41bfa12bb3 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:08:59 +0100 Subject: Move constants before configs and add TODO comment --- packages/website/ts/pages/documentation/home.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index b7fa8462b..e202ff1bc 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -21,14 +21,6 @@ import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; -interface Package { - name: string; - description: string; - to: string; - isExternal?: boolean; - shouldOpenInNewTab?: boolean; -} - const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = 80; const SCROLLER_WIDTH = 4; @@ -63,6 +55,7 @@ enum Categories { Ethereum = 'Ethereum', CommunityMaintained = 'Community Maintained', } +// TODO(fabio): Move this to it's own file const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { [Categories.ZeroExProtocol]: [ { @@ -275,6 +268,14 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { ], }; +interface Package { + name: string; + description: string; + to: string; + isExternal?: boolean; + shouldOpenInNewTab?: boolean; +} + export interface HomeProps { location: Location; translate: Translate; -- cgit From 0d57ed6c933a8332253cf673a521dddcae601872 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:25:45 +0100 Subject: Rename for clarity --- packages/website/ts/pages/documentation/home.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index e202ff1bc..ee118ab1e 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -306,7 +306,7 @@ export class Home extends React.Component { window.removeEventListener('resize', this._throttledScreenWidthUpdate); } public render(): React.ReactNode { - const mainContainerStyle: React.CSSProperties = { + const scrollableContainerStyles: React.CSSProperties = { position: 'absolute', top: 80, left: 0, @@ -351,7 +351,7 @@ export class Home extends React.Component {
{ id={sharedConstants.SCROLL_CONTAINER_ID} className="absolute" style={{ - ...mainContainerStyle, + ...scrollableContainerStyles, paddingTop: 30, paddingLeft: mainContentPadding, paddingRight: this.state.isHoveringMainContent -- cgit From 3a9791e7943c5572d24b257217bfe1558beff5fc Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 1 Oct 2018 22:26:06 +0100 Subject: Make menuSubsectionsBySection optional --- packages/website/ts/pages/documentation/home.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index ee118ab1e..9356c504b 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -360,7 +360,6 @@ export class Home extends React.Component { > -- cgit From c42b340042b8ff5ca9537e5e162776e513e63f2a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 09:07:53 +0100 Subject: Move more copy to translation files --- packages/website/ts/pages/documentation/home.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 9356c504b..7f833cc1f 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -395,10 +395,10 @@ export class Home extends React.Component { onMouseLeave={this._onMainContentHoverOff.bind(this)} >
- {this._renderSectionTitle('Start building on 0x')} + {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} {this._renderSectionDescription( - 'Follow one of our "Getting started" guides to learn more about building ontop of 0x.', + this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap), )} {_.map(TUTORIALS, tutorialInfo => ( @@ -423,7 +423,7 @@ export class Home extends React.Component { )} {this._renderSectionDescription( - 'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum', + this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), )} {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => -- cgit From d435341f9b2577008fd6746c198305374a1b7994 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 09:11:50 +0100 Subject: Use container instead of div --- packages/website/ts/pages/documentation/home.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 7f833cc1f..a2405a9d2 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -451,14 +451,7 @@ export class Home extends React.Component { return (
-
+
Date: Tue, 2 Oct 2018 09:15:33 +0100 Subject: Use colors module --- packages/website/ts/pages/documentation/home.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index a2405a9d2..311470d2c 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -500,14 +500,14 @@ export class Home extends React.Component { } private _renderSectionTitle(text: string): React.ReactNode { return ( - + {text} ); } private _renderSectionDescription(text: string): React.ReactNode { return ( - + {text} ); -- cgit From b79e3eaec62e073d86fdd5b83e7516da81046951 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 09:15:41 +0100 Subject: Simplify helper methods --- packages/website/ts/pages/documentation/home.tsx | 36 +++++++++--------------- 1 file changed, 13 insertions(+), 23 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 311470d2c..57de52de2 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -355,8 +355,8 @@ export class Home extends React.Component { paddingTop: 35, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', }} - onMouseEnter={this._onSidebarHover.bind(this)} - onMouseLeave={this._onSidebarHoverOff.bind(this)} + onMouseEnter={this._onSidebarHover.bind(this, true)} + onMouseLeave={this._onSidebarHover.bind(this, false)} > { : mainContentPadding, overflow: this.state.isHoveringMainContent ? 'auto' : 'hidden', }} - onMouseEnter={this._onMainContentHover.bind(this)} - onMouseOver={this._onMainContentHover.bind(this)} - onMouseLeave={this._onMainContentHoverOff.bind(this)} + onMouseEnter={this._onMainContentHover.bind(this, true)} + onMouseOver={this._onMainContentHover.bind(this, true)} + onMouseLeave={this._onMainContentHover.bind(this, false)} >
{this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} @@ -512,30 +512,20 @@ export class Home extends React.Component { ); } - private _updateScreenWidth(): void { - const newScreenWidth = utils.getScreenWidth(); - this.props.dispatcher.updateScreenWidth(newScreenWidth); - } - private _onSidebarHover(_event: React.FormEvent): void { - this.setState({ - isHoveringSidebar: true, - }); - } - private _onSidebarHoverOff(): void { + private _onSidebarHover(_event: React.FormEvent, isHovering: boolean): void { this.setState({ - isHoveringSidebar: false, + isHoveringSidebar: isHovering, }); } - private _onMainContentHover(_event: React.FormEvent): void { - if (!this.state.isHoveringMainContent) { + private _onMainContentHover(_event: React.FormEvent, isHovering: boolean): void { + if (isHovering !== this.state.isHoveringMainContent) { this.setState({ - isHoveringMainContent: true, + isHoveringMainContent: isHovering, }); } } - private _onMainContentHoverOff(): void { - this.setState({ - isHoveringMainContent: false, - }); + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); } } // tslint:disable:max-file-line-count -- cgit From 91afc37d2a9fd15dc34d3c0911fb19ec7dd3493b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 10:30:44 +0100 Subject: Fix hovering --- packages/website/ts/pages/documentation/home.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 57de52de2..6bb30b368 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -512,12 +512,12 @@ export class Home extends React.Component { ); } - private _onSidebarHover(_event: React.FormEvent, isHovering: boolean): void { + private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { this.setState({ isHoveringSidebar: isHovering, }); } - private _onMainContentHover(_event: React.FormEvent, isHovering: boolean): void { + private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { if (isHovering !== this.state.isHoveringMainContent) { this.setState({ isHoveringMainContent: isHovering, -- cgit From c07412a992284b2f3045be1c620ea2e0a351139a Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 2 Oct 2018 20:10:59 +0100 Subject: Use new Link UI component everywhere, and add complementary ALink type --- packages/website/ts/pages/about/about.tsx | 4 +- packages/website/ts/pages/documentation/home.tsx | 373 ++++++++++++++--------- packages/website/ts/pages/landing/landing.tsx | 11 +- 3 files changed, 240 insertions(+), 148 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index e097578bc..ba1b423b9 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -2,9 +2,9 @@ import { colors, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; +import { Link } from 'ts/components/ui/link'; import { Profile } from 'ts/pages/about/profile'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProfileInfo, WebsitePaths } from 'ts/types'; @@ -370,7 +370,7 @@ export class About extends React.Component { }} > We are seeking outstanding candidates to{' '} - + join our team . We value passion, diversity and unique perspectives. diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 6bb30b368..42ed1db8c 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,11 +1,7 @@ -import { - colors, - constants as sharedConstants, - MarkdownLinkBlock, - NestedSidebarMenu, - utils as sharedUtils, -} from '@0xproject/react-shared'; +import { colors, constants as sharedConstants, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; +import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); import * as ReactMarkdown from 'react-markdown'; @@ -17,7 +13,7 @@ import { Container } from 'ts/components/ui/container'; import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { ALink, Deco, Key, LinkType, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -26,28 +22,36 @@ const TOP_BAR_HEIGHT = 80; const SCROLLER_WIDTH = 4; const TUTORIALS: TutorialInfo[] = [ { - title: Key.DevelopOnEthereum, iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', description: Key.DevelopOnEthereumDescription, - location: `${WebsitePaths.Wiki}#Ethereum-Development`, + link: { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, + }, }, { - title: Key.BuildARelayer, iconUrl: '/images/developers/tutorials/build_a_relayer.svg', description: Key.BuildARelayerDescription, - location: `${WebsitePaths.Wiki}#Build-A-Relayer`, + link: { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + }, }, { - title: Key.OrderBasics, iconUrl: '/images/developers/tutorials/0x_order_basics.svg', description: Key.OrderBasicsDescription, - location: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + link: { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + }, }, { - title: Key.UseSharedLiquidity, iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', description: Key.UseSharedLiquidityDescription, - location: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + link: { + title: Key.UseSharedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + }, }, ]; enum Categories { @@ -59,221 +63,276 @@ enum Categories { const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { [Categories.ZeroExProtocol]: [ { - name: '0x.js', description: 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as [order-utils](https://0xproject.com/docs/order-utils) and [contract-wrappers](https://0xproject.com/docs/contract-wrappers).', - to: WebsitePaths.ZeroExJs, + link: { + title: '0x.js', + to: WebsitePaths.ZeroExJs, + }, }, { - name: '0x starter project', description: 'A Typescript starter project that will walk you through the basics of how to interact with 0x Protocol and trade of an SRA relayer', - to: 'https://github.com/0xProject/0x-starter-project', - isExternal: true, - shouldOpenInNewTab: true, + link: { + title: '0x starter project', + to: 'https://github.com/0xProject/0x-starter-project', + type: LinkType.External, + shouldOpenInNewTab: true, + }, }, { - name: '@0xproject/connect', description: 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', - to: WebsitePaths.Connect, + link: { + title: '@0xproject/connect', + to: WebsitePaths.Connect, + }, }, { - name: '@0xproject/contract-wrappers', description: 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in contracts.', - to: WebsitePaths.ContractWrappers, + link: { + title: '@0xproject/contract-wrappers', + to: WebsitePaths.ContractWrappers, + }, }, { - name: '@0xproject/json-schemas', description: 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', - to: WebsitePaths.JSONSchemas, + link: { + title: '@0xproject/json-schemas', + to: WebsitePaths.JSONSchemas, + }, }, { - name: '@0xproject/order-utils', description: 'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.', - to: WebsitePaths.OrderUtils, + link: { + title: '@0xproject/order-utils', + to: WebsitePaths.OrderUtils, + }, }, { - name: '@0xproject/order-watcher', description: "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.", - to: WebsitePaths.OrderWatcher, + link: { + title: '@0xproject/order-watcher', + to: WebsitePaths.OrderWatcher, + }, }, { - name: '@0xproject/sra-spec', description: 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', - to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', - isExternal: true, - shouldOpenInNewTab: true, + link: { + title: '@0xproject/sra-spec', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', + type: LinkType.External, + shouldOpenInNewTab: true, + }, }, ], [Categories.Ethereum]: [ { - name: 'abi-gen', description: "This package allows you to generate TypeScript contract wrappers from ABI files. It's heavily inspired by Geth abigen but takes a different approach. You can write your custom handlebars templates which will allow you to seamlessly integrate the generated code into your existing codebase with existing conventions.", - to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', - isExternal: true, - shouldOpenInNewTab: true, + link: { + title: 'abi-gen', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', + type: LinkType.External, + shouldOpenInNewTab: true, + }, }, { - name: 'ethereum-types', description: 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', - to: WebsitePaths.EthereumTypes, + link: { + title: 'ethereum-types', + to: WebsitePaths.EthereumTypes, + }, }, { - name: '@0xproject/sol-compiler', description: 'A wrapper around [solc-js](https://github.com/ethereum/solc-js) that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', - to: WebsitePaths.SolCompiler, + link: { + title: '@0xproject/sol-compiler', + to: WebsitePaths.SolCompiler, + }, }, { - name: '@0xproject/sol-cov', description: 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', - to: WebsitePaths.SolCov, + link: { + title: '@0xproject/sol-cov', + to: WebsitePaths.SolCov, + }, }, { - name: '@0xproject/subproviders', description: 'A collection of subproviders to use with [web3-provider-engine](https://www.npmjs.com/package/web3-provider-engine) (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', - to: WebsitePaths.Subproviders, + link: { + title: '@0xproject/subproviders', + to: WebsitePaths.Subproviders, + }, }, { - name: '@0xproject/web3-wrapper', description: 'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...', - to: WebsitePaths.Web3Wrapper, + link: { + title: '@0xproject/web3-wrapper', + to: WebsitePaths.Web3Wrapper, + }, }, ], [Categories.CommunityMaintained]: [ { - name: '0x Event Extractor', description: 'Node.js worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', - to: 'https://github.com/0xTracker/0x-event-extractor', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: '0x Event Extractor', + to: 'https://github.com/0xTracker/0x-event-extractor', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: '0x Tracker Worker', description: 'Node.js worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', - to: 'https://github.com/0xTracker/0x-tracker-worker', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: '0x Tracker Worker', + to: 'https://github.com/0xTracker/0x-tracker-worker', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Aquaduct', description: "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", - to: 'https://www.npmjs.com/package/aqueduct', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'Aquaduct', + to: 'https://www.npmjs.com/package/aqueduct', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Aquaduct Server SDK', description: 'SDKs for automation using Aqueduct & ERC dEX. Aqueduct Server is a lightweight, portable and secure server that runs locally on any workstation. The server exposes a small number of foundational endpoints that enable working with the decentralized Aqueduct liquidity pool from any context or programming language.', - to: 'https://github.com/ERCdEX/aqueduct-server-sdk', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'Aquaduct Server SDK', + to: 'https://github.com/ERCdEX/aqueduct-server-sdk', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'DDEX Node.js SDK', description: 'A node.js SDK for trading on the DDEX relayer', - to: 'https://www.npmjs.com/package/ddex-api', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://www.npmjs.com/package/ddex-api', + title: 'DDEX Node.js SDK', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'ERCdex Widget', description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", - to: 'https://github.com/ERCdEX/widget', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/ERCdEX/widget', + title: 'ERCdex Widget', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'ERCdex Java SDK', description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", - to: 'https://github.com/ERCdEX/java', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/ERCdEX/java', + title: 'ERCdex Java SDK', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'ERCdex Python SDK', description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", - to: 'https://github.com/ERCdEX/python', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/ERCdEX/python', + title: 'ERCdex Python SDK', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Massive', description: 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', - to: 'https://github.com/NoteGio/massive', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'Massive', + to: 'https://github.com/NoteGio/massive', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'OpenRelay', description: 'An open-source API-only Relayer written in Go', - to: 'https://github.com/NoteGio/openrelay', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/NoteGio/openrelay', + title: 'OpenRelay', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'OpenRelay.js', description: 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', - to: 'https://github.com/NoteGio/openrelay.js', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'OpenRelay.js', + to: 'https://github.com/NoteGio/openrelay.js', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Radar SDK', description: 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', - to: 'https://github.com/RadarRelay/sdk', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'Radar SDK', + to: 'https://github.com/RadarRelay/sdk', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'The Ocean Javascript SDK', description: 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', - to: 'https://github.com/TheOceanTrade/theoceanx-javascript', - shouldOpenInNewTab: true, - isExternal: true, + link: { + title: 'The Ocean Javascript SDK', + to: 'https://github.com/TheOceanTrade/theoceanx-javascript', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'Tokenlon Javascript SDK', description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", - to: 'https://www.npmjs.com/package/tokenlon-sdk', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://www.npmjs.com/package/tokenlon-sdk', + title: 'Tokenlon Javascript SDK', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, { - name: 'AssetData decoder library in Java', description: 'A small library that implements the 0x order assetData encoding/decoding in Java', - to: 'https://github.com/wildnothing/asset-data-decoder', - shouldOpenInNewTab: true, - isExternal: true, + link: { + to: 'https://github.com/wildnothing/asset-data-decoder', + title: 'AssetData decoder library in Java', + shouldOpenInNewTab: true, + type: LinkType.External, + }, }, ], }; interface Package { - name: string; description: string; - to: string; - isExternal?: boolean; - shouldOpenInNewTab?: boolean; + link: ALink; } export interface HomeProps { @@ -319,15 +378,18 @@ export class Home extends React.Component { }; const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const mainContentPadding = isSmallScreen ? 20 : 50; - const topLevelMenu = { - 'Starter guides': _.map(TUTORIALS, tutorialInfo => - this.props.translate.get(tutorialInfo.title as Key, Deco.Cap), - ), - [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.name), - [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.name), + const sectionNameToLinks: ObjectMap = { + 'Starter guides': _.map(TUTORIALS, tutorialInfo => { + return { + ...tutorialInfo.link, + title: this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), + }; + }), + [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.link), + [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.link), [Categories.CommunityMaintained]: _.map( CATEGORY_TO_PACKAGES[Categories.CommunityMaintained], - pkg => pkg.name, + pkg => pkg.link, ), }; return ( @@ -358,11 +420,7 @@ export class Home extends React.Component { onMouseEnter={this._onSidebarHover.bind(this, true)} onMouseLeave={this._onSidebarHover.bind(this, false)} > - + {this._renderMenu(sectionNameToLinks)}
{
{ {_.map(TUTORIALS, tutorialInfo => ( { ); } + private _renderMenu(sectionNameToLinks: ObjectMap): React.ReactNode { + const navigation = _.map(sectionNameToLinks, (links: ALink[], sectionName: string) => { + // tslint:disable-next-line:no-unused-variable + return ( +
+
+ {sectionName.toUpperCase()} +
+ {this._renderMenuItems(links)} +
+ ); + }); + return
{navigation}
; + } + private _renderMenuItems(links: ALink[]): React.ReactNode { + const menuItems = _.map(links, link => { + return ( +
+ + + {link.title} + + +
+ ); + }); + return menuItems; + } private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { return (
@@ -447,22 +541,21 @@ export class Home extends React.Component { ); } private _renderPackage(pkg: Package): React.ReactNode { - const id = sharedUtils.getIdFromName(pkg.name); + const id = sharedUtils.getIdFromName(pkg.link.title); return ( - +
- {pkg.name} + {pkg.link.title}
@@ -476,11 +569,11 @@ export class Home extends React.Component {
{this.props.translate.get(Key.More, Deco.Cap)}
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 388e83d51..b4462407f 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -2,13 +2,13 @@ import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import { Link } from 'react-router-dom'; import { Footer } from 'ts/components/footer'; import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; +import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -213,14 +213,14 @@ export class Landing extends React.Component { className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} > - + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
- + {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} @@ -320,8 +320,7 @@ export class Landing extends React.Component { {this.props.translate.get(Key.FullListPrompt)}{' '} {this.props.translate.get(Key.FullListLink)} @@ -603,7 +602,7 @@ export class Landing extends React.Component { {this.props.translate.get(Key.FinalCallToAction, Deco.Cap)}
- + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} -- cgit From 0c80fea8216ede2b77c448e3e1b4d013c1c76669 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 10:52:48 +0100 Subject: Make tutorial buttons also open in a new tab --- packages/website/ts/pages/documentation/home.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 42ed1db8c..86999b8fe 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -27,6 +27,7 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.DevelopOnEthereum, to: `${WebsitePaths.Wiki}#Ethereum-Development`, + shouldOpenInNewTab: true, }, }, { @@ -35,6 +36,7 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.BuildARelayer, to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + shouldOpenInNewTab: true, }, }, { @@ -43,6 +45,7 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.OrderBasics, to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + shouldOpenInNewTab: true, }, }, { @@ -51,6 +54,7 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.UseSharedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + shouldOpenInNewTab: true, }, }, ]; @@ -68,6 +72,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '0x.js', to: WebsitePaths.ZeroExJs, + shouldOpenInNewTab: true, }, }, { @@ -76,8 +81,8 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '0x starter project', to: 'https://github.com/0xProject/0x-starter-project', - type: LinkType.External, shouldOpenInNewTab: true, + type: LinkType.External, }, }, { @@ -86,6 +91,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/connect', to: WebsitePaths.Connect, + shouldOpenInNewTab: true, }, }, { @@ -94,6 +100,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/contract-wrappers', to: WebsitePaths.ContractWrappers, + shouldOpenInNewTab: true, }, }, { @@ -102,6 +109,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/json-schemas', to: WebsitePaths.JSONSchemas, + shouldOpenInNewTab: true, }, }, { @@ -110,6 +118,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/order-utils', to: WebsitePaths.OrderUtils, + shouldOpenInNewTab: true, }, }, { @@ -118,6 +127,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/order-watcher', to: WebsitePaths.OrderWatcher, + shouldOpenInNewTab: true, }, }, { @@ -126,8 +136,8 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/sra-spec', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', - type: LinkType.External, shouldOpenInNewTab: true, + type: LinkType.External, }, }, ], @@ -138,8 +148,8 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: 'abi-gen', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', - type: LinkType.External, shouldOpenInNewTab: true, + type: LinkType.External, }, }, { @@ -148,6 +158,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: 'ethereum-types', to: WebsitePaths.EthereumTypes, + shouldOpenInNewTab: true, }, }, { @@ -156,6 +167,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/sol-compiler', to: WebsitePaths.SolCompiler, + shouldOpenInNewTab: true, }, }, { @@ -164,6 +176,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/sol-cov', to: WebsitePaths.SolCov, + shouldOpenInNewTab: true, }, }, { @@ -172,6 +185,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/subproviders', to: WebsitePaths.Subproviders, + shouldOpenInNewTab: true, }, }, { @@ -180,6 +194,7 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { link: { title: '@0xproject/web3-wrapper', to: WebsitePaths.Web3Wrapper, + shouldOpenInNewTab: true, }, }, ], -- cgit From 188564a343e2d0842bf4ac435c438df81c29ca2d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 11:28:56 +0100 Subject: Add padding to bottom of scroll area --- packages/website/ts/pages/documentation/home.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 86999b8fe..320fc6af2 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -489,8 +489,7 @@ export class Home extends React.Component { ))} -
-
+ {this._renderSectionTitle( this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), )} @@ -504,6 +503,7 @@ export class Home extends React.Component { )} +
@@ -523,7 +523,11 @@ export class Home extends React.Component {
); }); - return
{navigation}
; + return ( + + {navigation} + + ); } private _renderMenuItems(links: ALink[]): React.ReactNode { const menuItems = _.map(links, link => { -- cgit From f13c48216160e0e1e58354ff09d0c583dfe30d10 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 11:43:17 +0100 Subject: Align logo and menu --- packages/website/ts/pages/documentation/home.tsx | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 320fc6af2..0aefc4662 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -490,20 +490,20 @@ export class Home extends React.Component { - {this._renderSectionTitle( - this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), - )} - - {this._renderSectionDescription( - this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), + {this._renderSectionTitle( + this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), )} - - {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => - this._renderPackageCategory(category, pkgs), + + {this._renderSectionDescription( + this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), )} + + {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => + this._renderPackageCategory(category, pkgs), + )} + -
@@ -524,7 +524,7 @@ export class Home extends React.Component { ); }); return ( - + {navigation} ); -- cgit From 55d61b0dc759255ce15b7c6be1a4dab2d9df792d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 12:14:22 +0100 Subject: Add border underneath logo while user is scrolling --- packages/website/ts/pages/documentation/home.tsx | 35 ++++++++++++++++++++---- 1 file changed, 29 insertions(+), 6 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 0aefc4662..19a3f9eaf 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -360,24 +360,35 @@ export interface HomeProps { export interface HomeState { isHoveringSidebar: boolean; isHoveringMainContent: boolean; + isSidebarScrolling: boolean; } export class Home extends React.Component { private readonly _throttledScreenWidthUpdate: () => void; + private readonly _throttledSidebarScrolling: () => void; + private _sidebarScrollClearingInterval: number; constructor(props: HomeProps) { super(props); this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT); this.state = { isHoveringSidebar: false, isHoveringMainContent: false, + isSidebarScrolling: false, }; } public componentDidMount(): void { window.addEventListener('resize', this._throttledScreenWidthUpdate); window.scrollTo(0, 0); + this._sidebarScrollClearingInterval = window.setInterval(() => { + this.setState({ + isSidebarScrolling: false, + }); + }, 1000); } public componentWillUnmount(): void { window.removeEventListener('resize', this._throttledScreenWidthUpdate); + window.clearInterval(this._sidebarScrollClearingInterval); } public render(): React.ReactNode { const scrollableContainerStyles: React.CSSProperties = { @@ -422,10 +433,14 @@ export class Home extends React.Component { width={234} paddingLeft={22} paddingRight={22} - paddingTop={2} + paddingTop={0} backgroundColor={colors.grey100} > - + + +
{ }} onMouseEnter={this._onSidebarHover.bind(this, true)} onMouseLeave={this._onSidebarHover.bind(this, false)} + onWheel={this._throttledSidebarScrolling} > {this._renderMenu(sectionNameToLinks)}
@@ -524,7 +540,7 @@ export class Home extends React.Component { ); }); return ( - + {navigation} ); @@ -625,9 +641,11 @@ export class Home extends React.Component { ); } private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { - this.setState({ - isHoveringSidebar: isHovering, - }); + if (isHovering !== this.state.isHoveringSidebar) { + this.setState({ + isHoveringSidebar: isHovering, + }); + } } private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { if (isHovering !== this.state.isHoveringMainContent) { @@ -636,6 +654,11 @@ export class Home extends React.Component { }); } } + private _onSidebarScroll(_event: React.FormEvent): void { + this.setState({ + isSidebarScrolling: true, + }); + } private _updateScreenWidth(): void { const newScreenWidth = utils.getScreenWidth(); this.props.dispatcher.updateScreenWidth(newScreenWidth); -- cgit From 80a6e6fe8dce9daeb69f0fd7529062780a58d5be Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 14:26:16 +0100 Subject: Decrease size of section descriptions --- packages/website/ts/pages/documentation/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 19a3f9eaf..52a486c2d 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -635,7 +635,7 @@ export class Home extends React.Component { } private _renderSectionDescription(text: string): React.ReactNode { return ( - + {text} ); -- cgit From 437612f8b8c28fb384698c5c2b331e173cee8767 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 16:37:59 +0100 Subject: Use same Link UI component for react-scroll links --- packages/website/ts/pages/about/about.tsx | 3 +-- .../website/ts/pages/documentation/doc_page.tsx | 8 +++--- packages/website/ts/pages/documentation/home.tsx | 13 +++++++--- packages/website/ts/pages/landing/landing.tsx | 3 +-- packages/website/ts/pages/wiki/wiki.tsx | 29 ++++++++++++++-------- 5 files changed, 35 insertions(+), 21 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index ba1b423b9..efdf631b2 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,10 +1,9 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Link, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Footer } from 'ts/components/footer'; import { TopBar } from 'ts/components/top_bar/top_bar'; -import { Link } from 'ts/components/ui/link'; import { Profile } from 'ts/pages/about/profile'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProfileInfo, WebsitePaths } from 'ts/types'; diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 6f029b6a2..9092a5cde 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -79,9 +79,9 @@ export class DocPage extends React.Component { this._isUnmounted = true; } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat) + const subsectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) ? {} - : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat); + : this.props.docsInfo.getSubsectionNameToLinks(this.state.docAgnosticFormat); const sourceUrl = this._getSourceUrl(); const iconFileName = idToIcon[this.props.docsInfo.id] || DEFAULT_ICON; const iconUrl = `/images/doc_icons/${iconFileName}`; @@ -93,8 +93,8 @@ export class DocPage extends React.Component { location={this.props.location} docsVersion={this.props.docsVersion} availableDocVersions={this.props.availableDocVersions} - menu={this.props.docsInfo.menu} - menuSubsectionsBySection={menuSubsectionsBySection} + sectionNameToLinks={this.props.docsInfo.getSectionNameToLinks()} + subsectionNameToLinks={subsectionNameToLinks} docsInfo={this.props.docsInfo} translate={this.props.translate} onVersionSelected={this._onVersionSelected.bind(this)} diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 52a486c2d..72e507a7b 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -1,4 +1,12 @@ -import { colors, constants as sharedConstants, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared'; +import { + ALink, + colors, + constants as sharedConstants, + Link, + LinkType, + MarkdownLinkBlock, + utils as sharedUtils, +} from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import MenuItem from 'material-ui/MenuItem'; @@ -10,10 +18,9 @@ import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_ import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { TutorialButton } from 'ts/components/documentation/tutorial_button'; import { Container } from 'ts/components/ui/container'; -import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { ALink, Deco, Key, LinkType, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index b4462407f..c819cd8a1 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Link } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); @@ -8,7 +8,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; -import { Link } from 'ts/components/ui/link'; import { Text } from 'ts/components/ui/text'; import { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 55f532b11..3d8b8ef52 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,12 +1,15 @@ import { + ALink, colors, constants as sharedConstants, HeaderSizes, + LinkType, MarkdownSection, NestedSidebarMenu, Styles, utils as sharedUtils, } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; @@ -78,9 +81,10 @@ export class Wiki extends React.Component { window.removeEventListener('hashchange', this._onHashChanged.bind(this), false); } public render(): React.ReactNode { - const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) + const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) ? {} - : this._getMenuSubsectionsBySection(this.state.articlesBySection); + : this._getSectionNameToLinks(this.state.articlesBySection); + console.log('sectionNameToLinks', sectionNameToLinks); const mainContainersStyle: React.CSSProperties = { ...styles.mainContainers, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', @@ -92,7 +96,7 @@ export class Wiki extends React.Component { @@ -131,8 +135,7 @@ export class Wiki extends React.Component { onMouseLeave={this._onSidebarHoverOff.bind(this)} >
@@ -223,15 +226,21 @@ export class Wiki extends React.Component { } } } - private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection): { [section: string]: string[] } { + private _getSectionNameToLinks(articlesBySection: ArticlesBySection): ObjectMap { const sectionNames = _.keys(articlesBySection); - const menuSubsectionsBySection: { [section: string]: string[] } = {}; + const sectionNameToLinks: ObjectMap = {}; for (const sectionName of sectionNames) { const articles = articlesBySection[sectionName]; - const articleNames = _.map(articles, article => article.title); - menuSubsectionsBySection[sectionName] = articleNames; + const articleLinks = _.map(articles, article => { + return { + to: sharedUtils.getIdFromName(article.title), + title: article.title, + type: LinkType.ReactScroll, + }; + }); + sectionNameToLinks[sectionName] = articleLinks; } - return menuSubsectionsBySection; + return sectionNameToLinks; } private _onSidebarHover(_event: React.FormEvent): void { this.setState({ -- cgit From 8d6bffa96ca26e59b0c10f9f46f6f1e03e3518e9 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 17:03:05 +0100 Subject: Use nestedSidebarMenu component for Dev home --- packages/website/ts/pages/documentation/home.tsx | 49 ++++-------------------- 1 file changed, 8 insertions(+), 41 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 72e507a7b..7c0bf433e 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -5,6 +5,7 @@ import { Link, LinkType, MarkdownLinkBlock, + NestedSidebarMenu, utils as sharedUtils, } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; @@ -425,6 +426,7 @@ export class Home extends React.Component { pkg => pkg.link, ), }; + console.log('sectionNameToLinks', sectionNameToLinks); return ( { onMouseLeave={this._onSidebarHover.bind(this, false)} onWheel={this._throttledSidebarScrolling} > - {this._renderMenu(sectionNameToLinks)} + + +
{ ); } - private _renderMenu(sectionNameToLinks: ObjectMap): React.ReactNode { - const navigation = _.map(sectionNameToLinks, (links: ALink[], sectionName: string) => { - // tslint:disable-next-line:no-unused-variable - return ( -
-
- {sectionName.toUpperCase()} -
- {this._renderMenuItems(links)} -
- ); - }); - return ( - - {navigation} - - ); - } - private _renderMenuItems(links: ALink[]): React.ReactNode { - const menuItems = _.map(links, link => { - return ( -
- - - {link.title} - - -
- ); - }); - return menuItems; - } private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { return (
-- cgit From 46764c2d3f491e7558eede0f501c767c6e57f568 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 3 Oct 2018 17:23:43 +0100 Subject: Fix linter --- packages/website/ts/pages/documentation/home.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 7c0bf433e..c0b50fab7 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -10,13 +10,12 @@ import { } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; -import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); import * as ReactMarkdown from 'react-markdown'; import { Element as ScrollElement } from 'react-scroll'; -import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar'; import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { TutorialButton } from 'ts/components/documentation/tutorial_button'; import { Container } from 'ts/components/ui/container'; import { Text } from 'ts/components/ui/text'; @@ -475,7 +474,7 @@ export class Home extends React.Component { backgroundColor={colors.white} > - Date: Wed, 3 Oct 2018 19:00:59 +0100 Subject: Convert more divs to Containers --- packages/website/ts/pages/documentation/home.tsx | 54 ++++++++++++------------ 1 file changed, 28 insertions(+), 26 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index c0b50fab7..b95aa17f8 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -435,7 +435,7 @@ export class Home extends React.Component { } 50%, ${colors.white} 100%)`} > -
+ { onMouseOver={this._onMainContentHover.bind(this, true)} onMouseLeave={this._onMainContentHover.bind(this, false)} > -
+ {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} {this._renderSectionDescription( @@ -533,29 +533,29 @@ export class Home extends React.Component { -
+
-
+ ); } private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { return ( -
+ {category} -
{_.map(pkgs, pkg => this._renderPackage(pkg))}
-
+ {_.map(pkgs, pkg => this._renderPackage(pkg))} + ); } private _renderPackage(pkg: Package): React.ReactNode { const id = sharedUtils.getIdFromName(pkg.link.title); return ( -
+ -
-
+ + { {pkg.link.title} -
-
- -
-
+ + + + + + + { type={pkg.link.type} shouldOpenInNewTab={!!pkg.link.shouldOpenInNewTab} > -
-
{this.props.translate.get(Key.More, Deco.Cap)}
+ + {this.props.translate.get(Key.More, Deco.Cap)} -
+ -
-
-
+ + + ); } -- cgit From 85045267fe0643ab7f2af324df6135141aa8edb1 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 4 Oct 2018 19:26:50 +0100 Subject: remove stray logs --- packages/website/ts/pages/documentation/home.tsx | 1 - packages/website/ts/pages/wiki/wiki.tsx | 1 - 2 files changed, 2 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index b95aa17f8..a8788aea7 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -425,7 +425,6 @@ export class Home extends React.Component { pkg => pkg.link, ), }; - console.log('sectionNameToLinks', sectionNameToLinks); return ( { const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) ? {} : this._getSectionNameToLinks(this.state.articlesBySection); - console.log('sectionNameToLinks', sectionNameToLinks); const mainContainersStyle: React.CSSProperties = { ...styles.mainContainers, overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', -- cgit From d98de363ebe565a59dc0fc7700179b3a5259f987 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 11:46:35 +0100 Subject: Render paragraphs with spans so we don't get margin added --- packages/website/ts/pages/documentation/home.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index a8788aea7..7e34136a8 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -572,6 +572,7 @@ export class Home extends React.Component { source={pkg.description} renderers={{ link: MarkdownLinkBlock, + paragraph: 'span', }} /> -- cgit From 5f2cd33da07a7acc65f2e05acb35755f74af75a4 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 13:54:37 +0100 Subject: Remove style prop from Link --- packages/website/ts/pages/about/about.tsx | 2 +- packages/website/ts/pages/documentation/home.tsx | 41 +++++++++++++----------- packages/website/ts/pages/landing/landing.tsx | 5 +-- 3 files changed, 24 insertions(+), 24 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index f9d7456c1..2fbd946ae 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -376,7 +376,7 @@ export class About extends React.Component { }} > We are seeking outstanding candidates to{' '} - + join our team . We value passion, diversity and unique perspectives. diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index 7e34136a8..abe0ae6af 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -446,12 +446,14 @@ export class Home extends React.Component { - + + +
{ @@ -578,23 +580,24 @@ export class Home extends React.Component { - - - {this.props.translate.get(Key.More, Deco.Cap)} - - + + + + {this.props.translate.get(Key.More, Deco.Cap)} + + + - - + + diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index c819cd8a1..395cdabf8 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -317,10 +317,7 @@ export class Landing extends React.Component { }} > {this.props.translate.get(Key.FullListPrompt)}{' '} - + {this.props.translate.get(Key.FullListLink)}
-- cgit From fa6bd348992674192d07fef3d60950980212ecbb Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 5 Oct 2018 14:55:28 +0100 Subject: Remove type prop and instead infer it from the value of to --- packages/website/ts/pages/documentation/home.tsx | 21 --------------------- packages/website/ts/pages/wiki/wiki.tsx | 2 -- 2 files changed, 23 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index abe0ae6af..f7c4839b4 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -3,7 +3,6 @@ import { colors, constants as sharedConstants, Link, - LinkType, MarkdownLinkBlock, NestedSidebarMenu, utils as sharedUtils, @@ -89,7 +88,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: '0x starter project', to: 'https://github.com/0xProject/0x-starter-project', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -144,7 +142,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: '@0xproject/sra-spec', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', shouldOpenInNewTab: true, - type: LinkType.External, }, }, ], @@ -156,7 +153,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'abi-gen', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -213,7 +209,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: '0x Event Extractor', to: 'https://github.com/0xTracker/0x-event-extractor', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -223,7 +218,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: '0x Tracker Worker', to: 'https://github.com/0xTracker/0x-tracker-worker', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -233,7 +227,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'Aquaduct', to: 'https://www.npmjs.com/package/aqueduct', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -243,7 +236,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'Aquaduct Server SDK', to: 'https://github.com/ERCdEX/aqueduct-server-sdk', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -252,7 +244,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://www.npmjs.com/package/ddex-api', title: 'DDEX Node.js SDK', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -261,7 +252,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/ERCdEX/widget', title: 'ERCdex Widget', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -270,7 +260,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/ERCdEX/java', title: 'ERCdex Java SDK', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -279,7 +268,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/ERCdEX/python', title: 'ERCdex Python SDK', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -289,7 +277,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'Massive', to: 'https://github.com/NoteGio/massive', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -298,7 +285,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/NoteGio/openrelay', title: 'OpenRelay', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -308,7 +294,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'OpenRelay.js', to: 'https://github.com/NoteGio/openrelay.js', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -318,7 +303,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'Radar SDK', to: 'https://github.com/RadarRelay/sdk', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -328,7 +312,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { title: 'The Ocean Javascript SDK', to: 'https://github.com/TheOceanTrade/theoceanx-javascript', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -337,7 +320,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://www.npmjs.com/package/tokenlon-sdk', title: 'Tokenlon Javascript SDK', shouldOpenInNewTab: true, - type: LinkType.External, }, }, { @@ -346,7 +328,6 @@ const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { to: 'https://github.com/wildnothing/asset-data-decoder', title: 'AssetData decoder library in Java', shouldOpenInNewTab: true, - type: LinkType.External, }, }, ], @@ -560,7 +541,6 @@ export class Home extends React.Component { @@ -584,7 +564,6 @@ export class Home extends React.Component { diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 230fff410..70f54aceb 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -3,7 +3,6 @@ import { colors, constants as sharedConstants, HeaderSizes, - LinkType, MarkdownSection, NestedSidebarMenu, Styles, @@ -234,7 +233,6 @@ export class Wiki extends React.Component { return { to: sharedUtils.getIdFromName(article.title), title: article.title, - type: LinkType.ReactScroll, }; }); sectionNameToLinks[sectionName] = articleLinks; -- cgit From 7f217dcb3ced2cb5488badda690b51fc3be67618 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 11 Oct 2018 14:58:29 +0200 Subject: style: Make width of developer section same as rest of website (1064px) --- packages/website/ts/pages/documentation/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx index f7c4839b4..f8ac6a9f4 100644 --- a/packages/website/ts/pages/documentation/home.tsx +++ b/packages/website/ts/pages/documentation/home.tsx @@ -451,7 +451,7 @@ export class Home extends React.Component { -- cgit From de20ef1a49966153f25236ee68b186cd49f8dc20 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 15:54:44 +0200 Subject: Refactor Home so that Dev section chrome is reusable across pages --- .../ts/pages/documentation/developers_page.tsx | 176 ++++++ .../website/ts/pages/documentation/doc_page.tsx | 90 +-- .../website/ts/pages/documentation/docs_home.tsx | 359 ++++++++++++ packages/website/ts/pages/documentation/home.tsx | 623 --------------------- 4 files changed, 583 insertions(+), 665 deletions(-) create mode 100644 packages/website/ts/pages/documentation/developers_page.tsx create mode 100644 packages/website/ts/pages/documentation/docs_home.tsx delete mode 100644 packages/website/ts/pages/documentation/home.tsx (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx new file mode 100644 index 000000000..7172a7c66 --- /dev/null +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -0,0 +1,176 @@ +import { ALink, colors, constants as sharedConstants, NestedSidebarMenu } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle = require('react-document-title'); +import { DocsLogo } from 'ts/components/documentation/docs_logo'; +import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; +import { Container } from 'ts/components/ui/container'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { ScreenWidths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; + +const THROTTLE_TIMEOUT = 100; +const TOP_BAR_HEIGHT = 80; +const SCROLLER_WIDTH = 4; + +export interface DevelopersPageProps { + location: Location; + translate: Translate; + screenWidth: ScreenWidths; + dispatcher: Dispatcher; + mainContent: React.ReactNode; + sectionNameToLinks: ObjectMap; +} + +export interface DevelopersPageState { + isHoveringSidebar: boolean; + isHoveringMainContent: boolean; + isSidebarScrolling: boolean; +} + +export class DevelopersPage extends React.Component { + private readonly _throttledScreenWidthUpdate: () => void; + private readonly _throttledSidebarScrolling: () => void; + private _sidebarScrollClearingInterval: number; + constructor(props: DevelopersPageProps) { + super(props); + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT); + this.state = { + isHoveringSidebar: false, + isHoveringMainContent: false, + isSidebarScrolling: false, + }; + } + public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); + window.scrollTo(0, 0); + this._sidebarScrollClearingInterval = window.setInterval(() => { + this.setState({ + isSidebarScrolling: false, + }); + }, 1000); + } + public componentWillUnmount(): void { + window.removeEventListener('resize', this._throttledScreenWidthUpdate); + window.clearInterval(this._sidebarScrollClearingInterval); + } + public render(): React.ReactNode { + const scrollableContainerStyles: React.CSSProperties = { + position: 'absolute', + top: 80, + left: 0, + bottom: 0, + right: 0, + overflowX: 'hidden', + overflowY: 'scroll', + minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, + WebkitOverflowScrolling: 'touch', + }; + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; + const mainContentPadding = isSmallScreen ? 20 : 50; + return ( + + + + + + + + + +
+ + + +
+ + + + + +
+ {this.props.mainContent} +
+ + + + ); + } + private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { + if (isHovering !== this.state.isHoveringSidebar) { + this.setState({ + isHoveringSidebar: isHovering, + }); + } + } + private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { + if (isHovering !== this.state.isHoveringMainContent) { + this.setState({ + isHoveringMainContent: isHovering, + }); + } + } + private _onSidebarScroll(_event: React.FormEvent): void { + this.setState({ + isSidebarScrolling: true, + }); + } + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + this.props.dispatcher.updateScreenWidth(newScreenWidth); + } +} // tslint:disable:max-file-line-count diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index c64751f65..f13866ee8 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -1,35 +1,27 @@ import { DocAgnosticFormat, + DocReference, DocsInfo, - Documentation, GeneratedDocJson, SupportedDocJson, TypeDocUtils, } from '@0xproject/react-docs'; import findVersions = require('find-versions'); import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; -import DocumentTitle = require('react-document-title'); import semverSort = require('semver-sort'); -import { SidebarHeader } from 'ts/components/sidebar_header'; -import { TopBar } from 'ts/components/top_bar/top_bar'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { DocPackages } from 'ts/types'; +import { DocPackages, ScreenWidths } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { docUtils } from 'ts/utils/doc_utils'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; const isDevelopmentOrStaging = utils.isDevelopment() || utils.isStaging(); -const DEFAULT_ICON = 'docs.png'; const ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH = '0.32.4'; -const idToIcon: { [id: string]: string } = { - [DocPackages.ZeroExJs]: 'zeroExJs.png', - [DocPackages.Connect]: 'connect.png', - [DocPackages.SmartContracts]: 'contracts.png', -}; - const docIdToSubpackageName: { [id: string]: string } = { [DocPackages.ZeroExJs]: '0x.js', [DocPackages.Connect]: 'connect', @@ -52,6 +44,7 @@ export interface DocPageProps { availableDocVersions: string[]; docsInfo: DocsInfo; translate: Translate; + screenWidth: ScreenWidths; } interface DocPageState { @@ -79,37 +72,50 @@ export class DocPage extends React.Component { this._isUnmounted = true; } public render(): React.ReactNode { - const subsectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) - ? {} - : this.props.docsInfo.getSubsectionNameToLinks(this.state.docAgnosticFormat); const sourceUrl = this._getSourceUrl(); - const iconFileName = idToIcon[this.props.docsInfo.id] || DEFAULT_ICON; - const iconUrl = `/images/doc_icons/${iconFileName}`; + const sectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) + ? {} + : this.props.docsInfo.getSectionNameToLinks(this.state.docAgnosticFormat); + const mainContent = ( + + ); return (
- - } - /> - } - sourceUrl={sourceUrl} - topBarHeight={60} - onVersionSelected={this._onVersionSelected.bind(this)} - /> + {_.isUndefined(this.state.docAgnosticFormat) ? ( + this._renderLoading() + ) : ( + + )} +
+ ); + } + private _renderLoading(): React.ReactNode { + return ( +
+
+
+ +
+
+ Loading documentation... +
+
); } @@ -145,10 +151,10 @@ export class DocPage extends React.Component { // documenting solidity. docAgnosticFormat = versionDocObj as DocAgnosticFormat; // HACK: need to modify docsInfo like convertToDocAgnosticFormat() would do - this.props.docsInfo.menu.Contracts = []; + this.props.docsInfo.markdownMenu.Contracts = []; _.each(docAgnosticFormat, (_docObj, sectionName) => { this.props.docsInfo.sections[sectionName] = sectionName; - this.props.docsInfo.menu.Contracts.push(sectionName); + this.props.docsInfo.markdownMenu.Contracts.push(sectionName); }); } diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx new file mode 100644 index 000000000..81cddf852 --- /dev/null +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -0,0 +1,359 @@ +import { ALink } from '@0xproject/react-shared'; +import { ObjectMap } from '@0xproject/types'; +import * as _ from 'lodash'; +import * as React from 'react'; +import { OverviewContent } from 'ts/components/documentation/overview_content'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { Categories, Deco, Key, Package, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { Translate } from 'ts/utils/translate'; + +const TUTORIALS: TutorialInfo[] = [ + { + iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', + description: Key.DevelopOnEthereumDescription, + link: { + title: Key.DevelopOnEthereum, + to: `${WebsitePaths.Wiki}#Ethereum-Development`, + shouldOpenInNewTab: true, + }, + }, + { + iconUrl: '/images/developers/tutorials/build_a_relayer.svg', + description: Key.BuildARelayerDescription, + link: { + title: Key.BuildARelayer, + to: `${WebsitePaths.Wiki}#Build-A-Relayer`, + shouldOpenInNewTab: true, + }, + }, + { + iconUrl: '/images/developers/tutorials/0x_order_basics.svg', + description: Key.OrderBasicsDescription, + link: { + title: Key.OrderBasics, + to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, + shouldOpenInNewTab: true, + }, + }, + { + iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', + description: Key.UseSharedLiquidityDescription, + link: { + title: Key.UseSharedLiquidity, + to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, + shouldOpenInNewTab: true, + }, + }, +]; + +// TODO(fabio): Move this to it's own file +const CATEGORY_TO_PACKAGES: ObjectMap = { + [Categories.ZeroExProtocol]: [ + { + description: + 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as [order-utils](https://0xproject.com/docs/order-utils) and [contract-wrappers](https://0xproject.com/docs/contract-wrappers).', + link: { + title: '0x.js', + to: WebsitePaths.ZeroExJs, + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A Typescript starter project that will walk you through the basics of how to interact with 0x Protocol and trade of an SRA relayer', + link: { + title: '0x starter project', + to: 'https://github.com/0xProject/0x-starter-project', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', + link: { + title: '@0xproject/connect', + to: WebsitePaths.Connect, + shouldOpenInNewTab: true, + }, + }, + { + description: + 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in contracts.', + link: { + title: '@0xproject/contract-wrappers', + to: WebsitePaths.ContractWrappers, + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', + link: { + title: '@0xproject/json-schemas', + to: WebsitePaths.JSONSchemas, + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.', + link: { + title: '@0xproject/order-utils', + to: WebsitePaths.OrderUtils, + shouldOpenInNewTab: true, + }, + }, + { + description: + "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.", + link: { + title: '@0xproject/order-watcher', + to: WebsitePaths.OrderWatcher, + shouldOpenInNewTab: true, + }, + }, + { + description: + 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', + link: { + title: '@0xproject/sra-spec', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', + shouldOpenInNewTab: true, + }, + }, + ], + [Categories.Ethereum]: [ + { + description: + "This package allows you to generate TypeScript contract wrappers from ABI files. It's heavily inspired by Geth abigen but takes a different approach. You can write your custom handlebars templates which will allow you to seamlessly integrate the generated code into your existing codebase with existing conventions.", + link: { + title: 'abi-gen', + to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', + link: { + title: 'ethereum-types', + to: WebsitePaths.EthereumTypes, + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A wrapper around [solc-js](https://github.com/ethereum/solc-js) that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', + link: { + title: '@0xproject/sol-compiler', + to: WebsitePaths.SolCompiler, + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', + link: { + title: '@0xproject/sol-cov', + to: WebsitePaths.SolCov, + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A collection of subproviders to use with [web3-provider-engine](https://www.npmjs.com/package/web3-provider-engine) (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', + link: { + title: '@0xproject/subproviders', + to: WebsitePaths.Subproviders, + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...', + link: { + title: '@0xproject/web3-wrapper', + to: WebsitePaths.Web3Wrapper, + shouldOpenInNewTab: true, + }, + }, + ], + [Categories.CommunityMaintained]: [ + { + description: + 'Node.js worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', + link: { + title: '0x Event Extractor', + to: 'https://github.com/0xTracker/0x-event-extractor', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'Node.js worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', + link: { + title: '0x Tracker Worker', + to: 'https://github.com/0xTracker/0x-tracker-worker', + shouldOpenInNewTab: true, + }, + }, + { + description: + "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + title: 'Aquaduct', + to: 'https://www.npmjs.com/package/aqueduct', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'SDKs for automation using Aqueduct & ERC dEX. Aqueduct Server is a lightweight, portable and secure server that runs locally on any workstation. The server exposes a small number of foundational endpoints that enable working with the decentralized Aqueduct liquidity pool from any context or programming language.', + link: { + title: 'Aquaduct Server SDK', + to: 'https://github.com/ERCdEX/aqueduct-server-sdk', + shouldOpenInNewTab: true, + }, + }, + { + description: 'A node.js SDK for trading on the DDEX relayer', + link: { + to: 'https://www.npmjs.com/package/ddex-api', + title: 'DDEX Node.js SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", + link: { + to: 'https://github.com/ERCdEX/widget', + title: 'ERCdex Widget', + shouldOpenInNewTab: true, + }, + }, + { + description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + to: 'https://github.com/ERCdEX/java', + title: 'ERCdex Java SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", + link: { + to: 'https://github.com/ERCdEX/python', + title: 'ERCdex Python SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', + link: { + title: 'Massive', + to: 'https://github.com/NoteGio/massive', + shouldOpenInNewTab: true, + }, + }, + { + description: 'An open-source API-only Relayer written in Go', + link: { + to: 'https://github.com/NoteGio/openrelay', + title: 'OpenRelay', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', + link: { + title: 'OpenRelay.js', + to: 'https://github.com/NoteGio/openrelay.js', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', + link: { + title: 'Radar SDK', + to: 'https://github.com/RadarRelay/sdk', + shouldOpenInNewTab: true, + }, + }, + { + description: + 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', + link: { + title: 'The Ocean Javascript SDK', + to: 'https://github.com/TheOceanTrade/theoceanx-javascript', + shouldOpenInNewTab: true, + }, + }, + { + description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", + link: { + to: 'https://www.npmjs.com/package/tokenlon-sdk', + title: 'Tokenlon Javascript SDK', + shouldOpenInNewTab: true, + }, + }, + { + description: 'A small library that implements the 0x order assetData encoding/decoding in Java', + link: { + to: 'https://github.com/wildnothing/asset-data-decoder', + title: 'AssetData decoder library in Java', + shouldOpenInNewTab: true, + }, + }, + ], +}; + +export interface DocsHomeProps { + location: Location; + translate: Translate; + screenWidth: ScreenWidths; + tutorials: TutorialInfo[]; + categoryToPackages: ObjectMap; + dispatcher: Dispatcher; +} + +export interface DocsHomeState {} + +export class DocsHome extends React.Component { + public render(): React.ReactNode { + const sectionNameToLinks: ObjectMap = { + 'Starter guides': _.map(TUTORIALS, tutorialInfo => { + return { + ...tutorialInfo.link, + title: this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), + }; + }), + [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.link), + [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.link), + [Categories.CommunityMaintained]: _.map( + CATEGORY_TO_PACKAGES[Categories.CommunityMaintained], + pkg => pkg.link, + ), + }; + const mainContent = ( + + ); + return ( + + ); + } +} diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx deleted file mode 100644 index f8ac6a9f4..000000000 --- a/packages/website/ts/pages/documentation/home.tsx +++ /dev/null @@ -1,623 +0,0 @@ -import { - ALink, - colors, - constants as sharedConstants, - Link, - MarkdownLinkBlock, - NestedSidebarMenu, - utils as sharedUtils, -} from '@0xproject/react-shared'; -import { ObjectMap } from '@0xproject/types'; -import * as _ from 'lodash'; -import * as React from 'react'; -import DocumentTitle = require('react-document-title'); -import * as ReactMarkdown from 'react-markdown'; -import { Element as ScrollElement } from 'react-scroll'; -import { DocsLogo } from 'ts/components/documentation/docs_logo'; -import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; -import { TutorialButton } from 'ts/components/documentation/tutorial_button'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; -import { Dispatcher } from 'ts/redux/dispatcher'; -import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; -import { Translate } from 'ts/utils/translate'; -import { utils } from 'ts/utils/utils'; - -const THROTTLE_TIMEOUT = 100; -const TOP_BAR_HEIGHT = 80; -const SCROLLER_WIDTH = 4; -const TUTORIALS: TutorialInfo[] = [ - { - iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg', - description: Key.DevelopOnEthereumDescription, - link: { - title: Key.DevelopOnEthereum, - to: `${WebsitePaths.Wiki}#Ethereum-Development`, - shouldOpenInNewTab: true, - }, - }, - { - iconUrl: '/images/developers/tutorials/build_a_relayer.svg', - description: Key.BuildARelayerDescription, - link: { - title: Key.BuildARelayer, - to: `${WebsitePaths.Wiki}#Build-A-Relayer`, - shouldOpenInNewTab: true, - }, - }, - { - iconUrl: '/images/developers/tutorials/0x_order_basics.svg', - description: Key.OrderBasicsDescription, - link: { - title: Key.OrderBasics, - to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, - shouldOpenInNewTab: true, - }, - }, - { - iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', - description: Key.UseSharedLiquidityDescription, - link: { - title: Key.UseSharedLiquidity, - to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, - shouldOpenInNewTab: true, - }, - }, -]; -enum Categories { - ZeroExProtocol = '0x Protocol', - Ethereum = 'Ethereum', - CommunityMaintained = 'Community Maintained', -} -// TODO(fabio): Move this to it's own file -const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = { - [Categories.ZeroExProtocol]: [ - { - description: - 'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as [order-utils](https://0xproject.com/docs/order-utils) and [contract-wrappers](https://0xproject.com/docs/contract-wrappers).', - link: { - title: '0x.js', - to: WebsitePaths.ZeroExJs, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A Typescript starter project that will walk you through the basics of how to interact with 0x Protocol and trade of an SRA relayer', - link: { - title: '0x starter project', - to: 'https://github.com/0xProject/0x-starter-project', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', - link: { - title: '@0xproject/connect', - to: WebsitePaths.Connect, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in contracts.', - link: { - title: '@0xproject/contract-wrappers', - to: WebsitePaths.ContractWrappers, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', - link: { - title: '@0xproject/json-schemas', - to: WebsitePaths.JSONSchemas, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.', - link: { - title: '@0xproject/order-utils', - to: WebsitePaths.OrderUtils, - shouldOpenInNewTab: true, - }, - }, - { - description: - "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.", - link: { - title: '@0xproject/order-watcher', - to: WebsitePaths.OrderWatcher, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', - link: { - title: '@0xproject/sra-spec', - to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', - shouldOpenInNewTab: true, - }, - }, - ], - [Categories.Ethereum]: [ - { - description: - "This package allows you to generate TypeScript contract wrappers from ABI files. It's heavily inspired by Geth abigen but takes a different approach. You can write your custom handlebars templates which will allow you to seamlessly integrate the generated code into your existing codebase with existing conventions.", - link: { - title: 'abi-gen', - to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).', - link: { - title: 'ethereum-types', - to: WebsitePaths.EthereumTypes, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A wrapper around [solc-js](https://github.com/ethereum/solc-js) that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', - link: { - title: '@0xproject/sol-compiler', - to: WebsitePaths.SolCompiler, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', - link: { - title: '@0xproject/sol-cov', - to: WebsitePaths.SolCov, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A collection of subproviders to use with [web3-provider-engine](https://www.npmjs.com/package/web3-provider-engine) (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', - link: { - title: '@0xproject/subproviders', - to: WebsitePaths.Subproviders, - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...', - link: { - title: '@0xproject/web3-wrapper', - to: WebsitePaths.Web3Wrapper, - shouldOpenInNewTab: true, - }, - }, - ], - [Categories.CommunityMaintained]: [ - { - description: - 'Node.js worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.', - link: { - title: '0x Event Extractor', - to: 'https://github.com/0xTracker/0x-event-extractor', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'Node.js worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.', - link: { - title: '0x Tracker Worker', - to: 'https://github.com/0xTracker/0x-tracker-worker', - shouldOpenInNewTab: true, - }, - }, - { - description: - "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", - link: { - title: 'Aquaduct', - to: 'https://www.npmjs.com/package/aqueduct', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'SDKs for automation using Aqueduct & ERC dEX. Aqueduct Server is a lightweight, portable and secure server that runs locally on any workstation. The server exposes a small number of foundational endpoints that enable working with the decentralized Aqueduct liquidity pool from any context or programming language.', - link: { - title: 'Aquaduct Server SDK', - to: 'https://github.com/ERCdEX/aqueduct-server-sdk', - shouldOpenInNewTab: true, - }, - }, - { - description: 'A node.js SDK for trading on the DDEX relayer', - link: { - to: 'https://www.npmjs.com/package/ddex-api', - title: 'DDEX Node.js SDK', - shouldOpenInNewTab: true, - }, - }, - { - description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", - link: { - to: 'https://github.com/ERCdEX/widget', - title: 'ERCdex Widget', - shouldOpenInNewTab: true, - }, - }, - { - description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", - link: { - to: 'https://github.com/ERCdEX/java', - title: 'ERCdex Java SDK', - shouldOpenInNewTab: true, - }, - }, - { - description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", - link: { - to: 'https://github.com/ERCdEX/python', - title: 'ERCdex Python SDK', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular', - link: { - title: 'Massive', - to: 'https://github.com/NoteGio/massive', - shouldOpenInNewTab: true, - }, - }, - { - description: 'An open-source API-only Relayer written in Go', - link: { - to: 'https://github.com/NoteGio/openrelay', - title: 'OpenRelay', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations', - link: { - title: 'OpenRelay.js', - to: 'https://github.com/NoteGio/openrelay.js', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs', - link: { - title: 'Radar SDK', - to: 'https://github.com/RadarRelay/sdk', - shouldOpenInNewTab: true, - }, - }, - { - description: - 'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.', - link: { - title: 'The Ocean Javascript SDK', - to: 'https://github.com/TheOceanTrade/theoceanx-javascript', - shouldOpenInNewTab: true, - }, - }, - { - description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer", - link: { - to: 'https://www.npmjs.com/package/tokenlon-sdk', - title: 'Tokenlon Javascript SDK', - shouldOpenInNewTab: true, - }, - }, - { - description: 'A small library that implements the 0x order assetData encoding/decoding in Java', - link: { - to: 'https://github.com/wildnothing/asset-data-decoder', - title: 'AssetData decoder library in Java', - shouldOpenInNewTab: true, - }, - }, - ], -}; - -interface Package { - description: string; - link: ALink; -} - -export interface HomeProps { - location: Location; - translate: Translate; - screenWidth: ScreenWidths; - dispatcher: Dispatcher; -} - -export interface HomeState { - isHoveringSidebar: boolean; - isHoveringMainContent: boolean; - isSidebarScrolling: boolean; -} - -export class Home extends React.Component { - private readonly _throttledScreenWidthUpdate: () => void; - private readonly _throttledSidebarScrolling: () => void; - private _sidebarScrollClearingInterval: number; - constructor(props: HomeProps) { - super(props); - this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); - this._throttledSidebarScrolling = _.throttle(this._onSidebarScroll.bind(this), THROTTLE_TIMEOUT); - this.state = { - isHoveringSidebar: false, - isHoveringMainContent: false, - isSidebarScrolling: false, - }; - } - public componentDidMount(): void { - window.addEventListener('resize', this._throttledScreenWidthUpdate); - window.scrollTo(0, 0); - this._sidebarScrollClearingInterval = window.setInterval(() => { - this.setState({ - isSidebarScrolling: false, - }); - }, 1000); - } - public componentWillUnmount(): void { - window.removeEventListener('resize', this._throttledScreenWidthUpdate); - window.clearInterval(this._sidebarScrollClearingInterval); - } - public render(): React.ReactNode { - const scrollableContainerStyles: React.CSSProperties = { - position: 'absolute', - top: 80, - left: 0, - bottom: 0, - right: 0, - overflowX: 'hidden', - overflowY: 'scroll', - minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - WebkitOverflowScrolling: 'touch', - }; - const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; - const mainContentPadding = isSmallScreen ? 20 : 50; - const sectionNameToLinks: ObjectMap = { - 'Starter guides': _.map(TUTORIALS, tutorialInfo => { - return { - ...tutorialInfo.link, - title: this.props.translate.get(tutorialInfo.link.title as Key, Deco.Cap), - }; - }), - [Categories.ZeroExProtocol]: _.map(CATEGORY_TO_PACKAGES[Categories.ZeroExProtocol], pkg => pkg.link), - [Categories.Ethereum]: _.map(CATEGORY_TO_PACKAGES[Categories.Ethereum], pkg => pkg.link), - [Categories.CommunityMaintained]: _.map( - CATEGORY_TO_PACKAGES[Categories.CommunityMaintained], - pkg => pkg.link, - ), - }; - return ( - - - - - - - - - -
- - - -
- - - - - -
- - {this._renderSectionTitle(this.props.translate.get(Key.StartBuildOn0x, Deco.Cap))} - - {this._renderSectionDescription( - this.props.translate.get(Key.StartBuildOn0xDescription, Deco.Cap), - )} - - {_.map(TUTORIALS, tutorialInfo => ( - - - - ))} - - - - {this._renderSectionTitle( - this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords), - )} - - {this._renderSectionDescription( - this.props.translate.get(Key.LibrariesAndToolsDescription, Deco.Cap), - )} - - {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) => - this._renderPackageCategory(category, pkgs), - )} - - - - -
- - - - ); - } - private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode { - return ( - - {category} - {_.map(pkgs, pkg => this._renderPackage(pkg))} - - ); - } - private _renderPackage(pkg: Package): React.ReactNode { - const id = sharedUtils.getIdFromName(pkg.link.title); - return ( - - - - - - - - {pkg.link.title} - - - - - - - - - - - - - {this.props.translate.get(Key.More, Deco.Cap)} - - - - - - - - - - - ); - } - private _renderSectionTitle(text: string): React.ReactNode { - return ( - - {text} - - ); - } - private _renderSectionDescription(text: string): React.ReactNode { - return ( - - {text} - - ); - } - private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { - if (isHovering !== this.state.isHoveringSidebar) { - this.setState({ - isHoveringSidebar: isHovering, - }); - } - } - private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { - if (isHovering !== this.state.isHoveringMainContent) { - this.setState({ - isHoveringMainContent: isHovering, - }); - } - } - private _onSidebarScroll(_event: React.FormEvent): void { - this.setState({ - isSidebarScrolling: true, - }); - } - private _updateScreenWidth(): void { - const newScreenWidth = utils.getScreenWidth(); - this.props.dispatcher.updateScreenWidth(newScreenWidth); - } -} // tslint:disable:max-file-line-count -- cgit From a86ca6257f71e0318741fbf7595363d50e74464c Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 15:59:23 +0200 Subject: If sidebar menu item links to internal page, no longer open in new tab --- packages/website/ts/pages/documentation/docs_home.tsx | 15 --------------- 1 file changed, 15 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index 81cddf852..c5b4ed318 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -15,7 +15,6 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.DevelopOnEthereum, to: `${WebsitePaths.Wiki}#Ethereum-Development`, - shouldOpenInNewTab: true, }, }, { @@ -24,7 +23,6 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.BuildARelayer, to: `${WebsitePaths.Wiki}#Build-A-Relayer`, - shouldOpenInNewTab: true, }, }, { @@ -33,7 +31,6 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.OrderBasics, to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`, - shouldOpenInNewTab: true, }, }, { @@ -42,7 +39,6 @@ const TUTORIALS: TutorialInfo[] = [ link: { title: Key.UseSharedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, - shouldOpenInNewTab: true, }, }, ]; @@ -56,7 +52,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '0x.js', to: WebsitePaths.ZeroExJs, - shouldOpenInNewTab: true, }, }, { @@ -74,7 +69,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/connect', to: WebsitePaths.Connect, - shouldOpenInNewTab: true, }, }, { @@ -83,7 +77,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/contract-wrappers', to: WebsitePaths.ContractWrappers, - shouldOpenInNewTab: true, }, }, { @@ -92,7 +85,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/json-schemas', to: WebsitePaths.JSONSchemas, - shouldOpenInNewTab: true, }, }, { @@ -101,7 +93,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/order-utils', to: WebsitePaths.OrderUtils, - shouldOpenInNewTab: true, }, }, { @@ -110,7 +101,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/order-watcher', to: WebsitePaths.OrderWatcher, - shouldOpenInNewTab: true, }, }, { @@ -139,7 +129,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: 'ethereum-types', to: WebsitePaths.EthereumTypes, - shouldOpenInNewTab: true, }, }, { @@ -148,7 +137,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/sol-compiler', to: WebsitePaths.SolCompiler, - shouldOpenInNewTab: true, }, }, { @@ -157,7 +145,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/sol-cov', to: WebsitePaths.SolCov, - shouldOpenInNewTab: true, }, }, { @@ -166,7 +153,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/subproviders', to: WebsitePaths.Subproviders, - shouldOpenInNewTab: true, }, }, { @@ -175,7 +161,6 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { link: { title: '@0xproject/web3-wrapper', to: WebsitePaths.Web3Wrapper, - shouldOpenInNewTab: true, }, }, ], -- cgit From 36f202f7b439630e95fc28c6b928d605311676d2 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 16:38:25 +0200 Subject: Improve loading --- .../website/ts/pages/documentation/doc_page.tsx | 43 +++++++++------------- 1 file changed, 17 insertions(+), 26 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index f13866ee8..58b6f076d 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -76,7 +76,9 @@ export class DocPage extends React.Component { const sectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat) ? {} : this.props.docsInfo.getSectionNameToLinks(this.state.docAgnosticFormat); - const mainContent = ( + const mainContent = _.isUndefined(this.state.docAgnosticFormat) ? ( +
{this._renderLoading()}
+ ) : ( { /> ); return ( -
- {_.isUndefined(this.state.docAgnosticFormat) ? ( - this._renderLoading() - ) : ( - - )} -
+ ); } private _renderLoading(): React.ReactNode { return ( -
-
-
- -
-
- Loading documentation... -
+
+
+ +
+
+ Loading documentation...
); -- cgit From a4604cb2f294f08318aa432b233571ae4e205fd5 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 19:44:18 +0100 Subject: Pass down sidebar instead of sectionNameToLinks --- packages/website/ts/pages/documentation/developers_page.tsx | 12 ++++-------- packages/website/ts/pages/documentation/doc_page.tsx | 6 +++++- packages/website/ts/pages/documentation/docs_home.tsx | 7 +++++-- 3 files changed, 14 insertions(+), 11 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 7172a7c66..c924fb460 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -1,5 +1,4 @@ -import { ALink, colors, constants as sharedConstants, NestedSidebarMenu } from '@0xproject/react-shared'; -import { ObjectMap } from '@0xproject/types'; +import { colors, constants as sharedConstants } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); @@ -21,7 +20,7 @@ export interface DevelopersPageProps { screenWidth: ScreenWidths; dispatcher: Dispatcher; mainContent: React.ReactNode; - sectionNameToLinks: ObjectMap; + sidebar: React.ReactNode; } export interface DevelopersPageState { @@ -107,10 +106,7 @@ export class DevelopersPage extends React.Component - + {this.props.sidebar}
@@ -124,7 +120,7 @@ export class DevelopersPage extends React.Component
{ sourceUrl={sourceUrl} /> ); + const sidebar = ( + + ); return ( { categoryToPackages={CATEGORY_TO_PACKAGES} /> ); + const sidebar = ( + + ); return ( Date: Sat, 13 Oct 2018 15:10:25 +0100 Subject: Fix sidebar shifting onHover due to scrollbar width --- packages/website/ts/pages/documentation/developers_page.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index c924fb460..12c00b440 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -70,6 +70,7 @@ export class DevelopersPage extends React.Component - +
{this.props.sidebar} - +
Date: Sat, 13 Oct 2018 16:29:14 +0100 Subject: Implement new version dropdown and remove it from nestedTopBar --- .../website/ts/pages/documentation/doc_page.tsx | 46 ++++++++++++++++++---- 1 file changed, 38 insertions(+), 8 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index bc0dc7b6a..ca2652c76 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -6,12 +6,15 @@ import { SupportedDocJson, TypeDocUtils, } from '@0xproject/react-docs'; -import { NestedSidebarMenu } from '@0xproject/react-shared'; +import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; import findVersions = require('find-versions'); import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import semverSort = require('semver-sort'); +import { VersionDropDown } from 'ts/components/documentation/version_drop_down'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { DocPackages, ScreenWidths } from 'ts/types'; @@ -89,7 +92,7 @@ export class DocPage extends React.Component { /> ); const sidebar = ( - + ); return ( { /> ); } + private _renderSidebarHeader(): React.ReactNode { + return ( + + + + + 0x.js + + + + + + + + + ); + } private _renderLoading(): React.ReactNode { return ( -
-
+ + -
-
+ + Loading documentation... -
-
+ + ); } private async _fetchJSONDocsFireAndForgetAsync(preferredVersionIfExists?: string): Promise { -- cgit From 11941b08b686d13f02c0d2c1bf6d58692dd701db Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Sat, 13 Oct 2018 17:09:04 +0100 Subject: Fix sidebar top so long titles display correctly --- packages/website/ts/pages/documentation/doc_page.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index ca2652c76..101040c2c 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -108,19 +108,19 @@ export class DocPage extends React.Component { private _renderSidebarHeader(): React.ReactNode { return ( - - + + - 0x.js + {this.props.docsInfo.displayName} - +
- +
Date: Sat, 13 Oct 2018 17:11:47 +0100 Subject: chore: only show sidebar once docs have loaded --- packages/website/ts/pages/documentation/doc_page.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 101040c2c..19e76a51b 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -91,7 +91,9 @@ export class DocPage extends React.Component { sourceUrl={sourceUrl} /> ); - const sidebar = ( + const sidebar = _.isUndefined(this.state.docAgnosticFormat) ? ( +
+ ) : ( ); return ( -- cgit From 6ada38248ec4d44605465f41cfe5e0801d26aa32 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 12:49:47 +0100 Subject: chore: improve rendering of sidebar top section on mobile --- packages/website/ts/pages/documentation/doc_page.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 19e76a51b..65d9b68a9 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -112,7 +112,11 @@ export class DocPage extends React.Component { - + {this.props.docsInfo.displayName} -- cgit From c9a0c7872de22cf33f1cb82cf504d0df6923d0e8 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 16:48:39 +0100 Subject: Chore: Only render one sidebar at a time --- packages/website/ts/pages/documentation/developers_page.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 12c00b440..042d80c61 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -115,7 +115,7 @@ export class DevelopersPage extends React.Component - {this.props.sidebar} + {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar}
@@ -128,6 +128,7 @@ export class DevelopersPage extends React.Component -- cgit From ce151f630d10664353ff1c9172a7495557792abe Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 17:35:40 +0100 Subject: feat: highlighted sidebar as you scroll on doc reference pages --- packages/website/ts/pages/documentation/developers_page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 042d80c61..e35218a70 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -138,7 +138,7 @@ export class DevelopersPage extends React.Component Date: Mon, 15 Oct 2018 22:18:44 +0100 Subject: chore: move wiki to Developers section --- packages/website/ts/pages/wiki/wiki.tsx | 176 +++++++++++--------------------- 1 file changed, 62 insertions(+), 114 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 70f54aceb..01cbc4e4d 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -5,25 +5,22 @@ import { HeaderSizes, MarkdownSection, NestedSidebarMenu, - Styles, utils as sharedUtils, } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; -import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; -import DocumentTitle = require('react-document-title'); -import { SidebarHeader } from 'ts/components/sidebar_header'; -import { TopBar } from 'ts/components/top_bar/top_bar'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Article, ArticlesBySection } from 'ts/types'; +import { Article, ArticlesBySection, ScreenWidths } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; -const TOP_BAR_HEIGHT = 60; const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000; export interface WikiProps { @@ -31,6 +28,7 @@ export interface WikiProps { location: Location; dispatcher: Dispatcher; translate: Translate; + screenWidth: ScreenWidths; } interface WikiState { @@ -38,24 +36,6 @@ interface WikiState { isHoveringSidebar: boolean; } -const styles: Styles = { - mainContainers: { - position: 'absolute', - top: 1, - left: 0, - bottom: 0, - right: 0, - overflow: 'hidden', - height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - WebkitOverflowScrolling: 'touch', - }, - menuContainer: { - borderColor: colors.grey300, - maxWidth: 330, - backgroundColor: colors.gray40, - }, -}; - export class Wiki extends React.Component { private _wikiBackoffTimeoutId: number; private _isUnmounted: boolean; @@ -83,84 +63,64 @@ export class Wiki extends React.Component { const sectionNameToLinks = _.isUndefined(this.state.articlesBySection) ? {} : this._getSectionNameToLinks(this.state.articlesBySection); - const mainContainersStyle: React.CSSProperties = { - ...styles.mainContainers, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', - }; - const sidebarHeader = ; + + const mainContent = _.isUndefined(this.state.articlesBySection) ? ( +
{this._renderLoading()}
+ ) : ( +
+ {this._renderWikiArticles()} +
+ ); + const sidebar = _.isUndefined(this.state.articlesBySection) ? ( +
+ ) : ( + + ); return ( -
- - - {_.isUndefined(this.state.articlesBySection) ? ( -
-
-
- -
-
- Loading wiki... -
-
-
- ) : ( -
-
+ ); + } + private _renderSidebarHeader(): React.ReactNode { + return ( + + + + -
-
- -
-
-
-
-
-
- {this._renderWikiArticles()} -
-
-
-
-
- )} -
+ Wiki + + + + + + ); + } + private _renderLoading(): React.ReactNode { + return ( + + + + + + Loading wiki... + + ); } private _renderWikiArticles(): React.ReactNode { @@ -180,22 +140,10 @@ export class Wiki extends React.Component { headerSize={HeaderSizes.H2} githubLink={githubLink} /> -
-
- See a way to improve this article? -
-
- -
-
); }); - return ( -
- {renderedArticles} -
- ); + return
{renderedArticles}
; } private async _fetchArticlesBySectionAsync(): Promise { try { -- cgit From be45a3085196a652fc21856b43014bec9ba07f05 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 14:36:26 +0100 Subject: chore: change landing "build on 0x" to link to developer home, not 0x.js docs --- packages/website/ts/pages/landing/landing.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 395cdabf8..f7a6fe0ce 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -212,7 +212,7 @@ export class Landing extends React.Component { className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} > - + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} @@ -598,7 +598,7 @@ export class Landing extends React.Component { {this.props.translate.get(Key.FinalCallToAction, Deco.Cap)}
- + {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} -- cgit From 2305109170671b06c6d60ac04a16a9d57a8a9c11 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 17:42:58 +0100 Subject: chore: fix linter --- packages/website/ts/pages/wiki/wiki.tsx | 10 ---------- 1 file changed, 10 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 01cbc4e4d..4b101e45d 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -187,16 +187,6 @@ export class Wiki extends React.Component { } return sectionNameToLinks; } - private _onSidebarHover(_event: React.FormEvent): void { - this.setState({ - isHoveringSidebar: true, - }); - } - private _onSidebarHoverOff(): void { - this.setState({ - isHoveringSidebar: false, - }); - } private _onHashChanged(_event: any): void { const hash = window.location.hash.slice(1); sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID); -- cgit From fdefa5952cb6cb6e1dce42e862dbc676690cdcbb Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 23:25:51 +0100 Subject: chore: componentize the sidebar header --- .../website/ts/pages/documentation/doc_page.tsx | 39 +++++----------------- packages/website/ts/pages/wiki/wiki.tsx | 29 +++------------- 2 files changed, 13 insertions(+), 55 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 65d9b68a9..a2babeda2 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -6,15 +6,14 @@ import { SupportedDocJson, TypeDocUtils, } from '@0xproject/react-docs'; -import { colors, NestedSidebarMenu } from '@0xproject/react-shared'; +import { NestedSidebarMenu } from '@0xproject/react-shared'; import findVersions = require('find-versions'); import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import semverSort = require('semver-sort'); -import { VersionDropDown } from 'ts/components/documentation/version_drop_down'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { DocPackages, ScreenWidths } from 'ts/types'; @@ -109,33 +108,13 @@ export class DocPage extends React.Component { } private _renderSidebarHeader(): React.ReactNode { return ( - - - - - {this.props.docsInfo.displayName} - - -
- -
- - - + ); } private _renderLoading(): React.ReactNode { diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 4b101e45d..e7754fd9d 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,6 +1,5 @@ import { ALink, - colors, constants as sharedConstants, HeaderSizes, MarkdownSection, @@ -11,11 +10,11 @@ import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; +import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { Article, ArticlesBySection, ScreenWidths } from 'ts/types'; +import { Article, ArticlesBySection, Deco, Key, ScreenWidths } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; @@ -88,28 +87,8 @@ export class Wiki extends React.Component { ); } private _renderSidebarHeader(): React.ReactNode { - return ( - - - - - Wiki - - - - - - ); + const wikiTitle = this.props.translate.get(Key.Wiki, Deco.Cap); + return ; } private _renderLoading(): React.ReactNode { return ( -- cgit From 18c31a3bc045d9e3ccc1e17573f879c2d49cecfe Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 00:37:56 +0100 Subject: chore: Add topBar menu items to mobile drawer --- .../website/ts/pages/documentation/docs_home.tsx | 34 ++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index 1059bb844..359f6b7e9 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -1,11 +1,13 @@ -import { ALink, NestedSidebarMenu } from '@0xproject/react-shared'; +import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; import { ObjectMap } from '@0xproject/types'; import * as _ from 'lodash'; import * as React from 'react'; import { OverviewContent } from 'ts/components/documentation/overview_content'; +import { Button } from 'ts/components/ui/button'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Categories, Deco, Key, Package, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; import { Translate } from 'ts/utils/translate'; const TUTORIALS: TutorialInfo[] = [ @@ -330,8 +332,13 @@ export class DocsHome extends React.Component { categoryToPackages={CATEGORY_TO_PACKAGES} /> ); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const sidebar = ( - + ); return ( { /> ); } + private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + + + + ); + }); + return menuItems; + } } -- cgit From 62f4bb21178415a1f5c8f55066a768671e852317 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 00:55:47 +0100 Subject: chore: Add topBar menu in wiki mobile sidebar menu --- packages/website/ts/pages/wiki/wiki.tsx | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index e7754fd9d..76d52c9bd 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,7 +1,9 @@ import { ALink, + colors, constants as sharedConstants, HeaderSizes, + Link, MarkdownSection, NestedSidebarMenu, utils as sharedUtils, @@ -11,6 +13,7 @@ import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; import { SidebarHeader } from 'ts/components/documentation/sidebar_header'; +import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { DevelopersPage } from 'ts/pages/documentation/developers_page'; import { Dispatcher } from 'ts/redux/dispatcher'; @@ -87,8 +90,33 @@ export class Wiki extends React.Component { ); } private _renderSidebarHeader(): React.ReactNode { + const menuItems = _.map(constants.DEVELOPER_TOPBAR_LINKS, menuItemInfo => { + return ( + + + + ); + }); const wikiTitle = this.props.translate.get(Key.Wiki, Deco.Cap); - return ; + return ( + + + {menuItems} + + ); } private _renderLoading(): React.ReactNode { return ( -- cgit From 03b20eed29f18b39ee832ea7414e6234a88a0815 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 15:58:10 +0100 Subject: nit: remove todo --- packages/website/ts/pages/documentation/docs_home.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index 359f6b7e9..b02959610 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -45,7 +45,6 @@ const TUTORIALS: TutorialInfo[] = [ }, ]; -// TODO(fabio): Move this to it's own file const CATEGORY_TO_PACKAGES: ObjectMap = { [Categories.ZeroExProtocol]: [ { -- cgit From 56cb2470cce2fed776f3cabacd6d31fa0ccdbbd7 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 18 Oct 2018 12:01:01 +0100 Subject: chore: fix up asset-buyer doc and add to Dev Home --- packages/website/ts/pages/documentation/docs_home.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index b02959610..f0af78fc1 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -113,6 +113,14 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { shouldOpenInNewTab: true, }, }, + { + description: + 'Convenience package for buying assets represented on the Ethereum blockchain using 0x. In its simplest form, the package helps in the usage of the [0x forwarder contract](https://github.com/0xProject/0x-protocol-specification/blob/master/v2/forwarder-specification.md), which allows users to execute [Wrapped Ether](https://weth.io/) based 0x orders without having to set allowances, wrap Ether or own ZRX, meaning they can buy tokens with Ether alone. Given some liquidity (0x signed orders), it helps estimate the Ether cost of buying a certain asset (giving a range) and then buying that asset.', + link: { + title: '@0xproject/asset-buyer', + to: WebsitePaths.AssetBuyer, + }, + }, ], [Categories.Ethereum]: [ { -- cgit From 8c6de7f69dc1d2bc543456782c5e70e105026301 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 18 Oct 2018 13:59:40 +0100 Subject: chore: replace @0xproject with @0x in .tsx files --- packages/website/ts/pages/about/profile.tsx | 2 +- .../ts/pages/documentation/developers_page.tsx | 2 +- .../website/ts/pages/documentation/docs_home.tsx | 26 +++++++++++----------- packages/website/ts/pages/faq/faq.tsx | 2 +- packages/website/ts/pages/faq/question.tsx | 2 +- packages/website/ts/pages/fullscreen_message.tsx | 2 +- packages/website/ts/pages/jobs/jobs.tsx | 2 +- packages/website/ts/pages/jobs/join_0x.tsx | 2 +- 8 files changed, 20 insertions(+), 20 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx index bcbeb0272..2361c6418 100644 --- a/packages/website/ts/pages/about/profile.tsx +++ b/packages/website/ts/pages/about/profile.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { ProfileInfo } from 'ts/types'; diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index e35218a70..934a4cc36 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -1,4 +1,4 @@ -import { colors, constants as sharedConstants } from '@0xproject/react-shared'; +import { colors, constants as sharedConstants } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index f0af78fc1..74fd0135c 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -1,5 +1,5 @@ -import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared'; -import { ObjectMap } from '@0xproject/types'; +import { ALink, colors, Link, NestedSidebarMenu } from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import * as React from 'react'; import { OverviewContent } from 'ts/components/documentation/overview_content'; @@ -68,7 +68,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { description: 'An http & websocket client for interacting with relayers that have implemented the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api)', link: { - title: '@0xproject/connect', + title: '@0x/connect', to: WebsitePaths.Connect, }, }, @@ -76,7 +76,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { description: 'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in contracts.', link: { - title: '@0xproject/contract-wrappers', + title: '@0x/contract-wrappers', to: WebsitePaths.ContractWrappers, }, }, @@ -84,7 +84,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { description: 'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)', link: { - title: '@0xproject/json-schemas', + title: '@0x/json-schemas', to: WebsitePaths.JSONSchemas, }, }, @@ -92,7 +92,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { description: 'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.', link: { - title: '@0xproject/order-utils', + title: '@0x/order-utils', to: WebsitePaths.OrderUtils, }, }, @@ -100,7 +100,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { description: "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.", link: { - title: '@0xproject/order-watcher', + title: '@0x/order-watcher', to: WebsitePaths.OrderWatcher, }, }, @@ -108,7 +108,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { description: 'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.', link: { - title: '@0xproject/sra-spec', + title: '@0x/sra-spec', to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec', shouldOpenInNewTab: true, }, @@ -117,7 +117,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { description: 'Convenience package for buying assets represented on the Ethereum blockchain using 0x. In its simplest form, the package helps in the usage of the [0x forwarder contract](https://github.com/0xProject/0x-protocol-specification/blob/master/v2/forwarder-specification.md), which allows users to execute [Wrapped Ether](https://weth.io/) based 0x orders without having to set allowances, wrap Ether or own ZRX, meaning they can buy tokens with Ether alone. Given some liquidity (0x signed orders), it helps estimate the Ether cost of buying a certain asset (giving a range) and then buying that asset.', link: { - title: '@0xproject/asset-buyer', + title: '@0x/asset-buyer', to: WebsitePaths.AssetBuyer, }, }, @@ -144,7 +144,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { description: 'A wrapper around [solc-js](https://github.com/ethereum/solc-js) that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.', link: { - title: '@0xproject/sol-compiler', + title: '@0x/sol-compiler', to: WebsitePaths.SolCompiler, }, }, @@ -152,7 +152,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { description: 'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.', link: { - title: '@0xproject/sol-cov', + title: '@0x/sol-cov', to: WebsitePaths.SolCov, }, }, @@ -160,7 +160,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { description: 'A collection of subproviders to use with [web3-provider-engine](https://www.npmjs.com/package/web3-provider-engine) (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)', link: { - title: '@0xproject/subproviders', + title: '@0x/subproviders', to: WebsitePaths.Subproviders, }, }, @@ -168,7 +168,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { description: 'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...', link: { - title: '@0xproject/web3-wrapper', + title: '@0x/web3-wrapper', to: WebsitePaths.Web3Wrapper, }, }, diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx index c9295d806..10d91bae8 100644 --- a/packages/website/ts/pages/faq/faq.tsx +++ b/packages/website/ts/pages/faq/faq.tsx @@ -1,4 +1,4 @@ -import { colors, Styles } from '@0xproject/react-shared'; +import { colors, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx index f80985257..413ffb6ce 100644 --- a/packages/website/ts/pages/faq/question.tsx +++ b/packages/website/ts/pages/faq/question.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import { Card, CardHeader, CardText } from 'material-ui/Card'; import * as React from 'react'; diff --git a/packages/website/ts/pages/fullscreen_message.tsx b/packages/website/ts/pages/fullscreen_message.tsx index 6fcf7b32c..675f27a01 100644 --- a/packages/website/ts/pages/fullscreen_message.tsx +++ b/packages/website/ts/pages/fullscreen_message.tsx @@ -1,4 +1,4 @@ -import { Styles } from '@0xproject/react-shared'; +import { Styles } from '@0x/react-shared'; import * as React from 'react'; export interface FullscreenMessageProps { diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index cc4b1f04b..728e17f9e 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -1,4 +1,4 @@ -import { colors, utils as sharedUtils } from '@0xproject/react-shared'; +import { colors, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx index ec8afbd93..e869cd455 100644 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors } from '@0x/react-shared'; import * as React from 'react'; -- cgit From 0affc7682fa1a7484bb77cc460e9b9d10553980f Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Thu, 18 Oct 2018 14:06:12 +0100 Subject: chore: fix imports --- packages/website/ts/pages/about/about.tsx | 2 +- packages/website/ts/pages/documentation/doc_page.tsx | 6 +++--- packages/website/ts/pages/landing/landing.tsx | 2 +- packages/website/ts/pages/wiki/wiki.tsx | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 4d346327b..dfe8926b0 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -1,4 +1,4 @@ -import { colors, Link, Styles } from '@0xproject/react-shared'; +import { colors, Link, Styles } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx index 40c728c24..7157abfc9 100644 --- a/packages/website/ts/pages/documentation/doc_page.tsx +++ b/packages/website/ts/pages/documentation/doc_page.tsx @@ -5,8 +5,8 @@ import { GeneratedDocJson, SupportedDocJson, TypeDocUtils, -} from '@0xproject/react-docs'; -import { NestedSidebarMenu } from '@0xproject/react-shared'; +} from '@0x/react-docs'; +import { NestedSidebarMenu } from '@0x/react-shared'; import findVersions = require('find-versions'); import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; @@ -181,7 +181,7 @@ export class DocPage extends React.Component { let tagPrefix = pkg; const packagesWithNamespace = ['connect']; if (_.includes(packagesWithNamespace, pkg)) { - tagPrefix = `@0xproject/${pkg}`; + tagPrefix = `@0x/${pkg}`; } // HACK: The following three lines exist for backward compatibility reasons // Before exporting types from other packages as part of the 0x.js interface, diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index f7a6fe0ce..c56ed4ebe 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -1,4 +1,4 @@ -import { colors, Link } from '@0xproject/react-shared'; +import { colors, Link } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 76d52c9bd..fdca61e39 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -7,8 +7,8 @@ import { MarkdownSection, NestedSidebarMenu, utils as sharedUtils, -} from '@0xproject/react-shared'; -import { ObjectMap } from '@0xproject/types'; +} from '@0x/react-shared'; +import { ObjectMap } from '@0x/types'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import * as React from 'react'; -- cgit From ee6bb229e0f912e2ccd9aff70ebf82d98b312251 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 09:44:27 +0100 Subject: Don't show topBar menu items in sidebar on wiki --- packages/website/ts/pages/wiki/wiki.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index fdca61e39..e62300ddf 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -73,10 +73,14 @@ export class Wiki extends React.Component { {this._renderWikiArticles()}
); + const isSmallScreen = this.props.screenWidth === ScreenWidths.Sm; const sidebar = _.isUndefined(this.state.articlesBySection) ? (
) : ( - + ); return ( Date: Fri, 19 Oct 2018 09:44:52 +0100 Subject: fix: Make sure page scrollable on mobile --- packages/website/ts/pages/documentation/developers_page.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 934a4cc36..918a3a635 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -1,4 +1,4 @@ -import { colors, constants as sharedConstants } from '@0x/react-shared'; +import { colors, constants as sharedConstants, utils as sharedUtils } from '@0x/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); @@ -71,6 +71,7 @@ export class DevelopersPage extends React.Component Date: Fri, 19 Oct 2018 09:56:34 +0100 Subject: copy: Networked liquidity -> shared liquidity --- packages/website/ts/pages/documentation/docs_home.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index 74fd0135c..a8dcff43b 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -37,9 +37,9 @@ const TUTORIALS: TutorialInfo[] = [ }, { iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg', - description: Key.UseSharedLiquidityDescription, + description: Key.UseNetworkedLiquidityDescription, link: { - title: Key.UseSharedLiquidity, + title: Key.UseNetworkedLiquidity, to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`, }, }, -- cgit From c26b3f5dfcea86b1885dcf2070580baec82430ea Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 10:05:19 +0100 Subject: copy: consistently name ERCdEX with correct capitalization --- packages/website/ts/pages/documentation/docs_home.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/docs_home.tsx b/packages/website/ts/pages/documentation/docs_home.tsx index a8dcff43b..cf229cb3b 100644 --- a/packages/website/ts/pages/documentation/docs_home.tsx +++ b/packages/website/ts/pages/documentation/docs_home.tsx @@ -194,7 +194,7 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { }, { description: - "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", + "ERCdEX's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers", link: { title: 'Aquaduct', to: 'https://www.npmjs.com/package/aqueduct', @@ -219,26 +219,26 @@ const CATEGORY_TO_PACKAGES: ObjectMap = { }, }, { - description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users", + description: "The ERCdEX Trade Widget let's any website provide token liquidity to it's users", link: { to: 'https://github.com/ERCdEX/widget', - title: 'ERCdex Widget', + title: 'ERCdEX Widget', shouldOpenInNewTab: true, }, }, { - description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", + description: "ERCdEX's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers", link: { to: 'https://github.com/ERCdEX/java', - title: 'ERCdex Java SDK', + title: 'ERCdEX Java SDK', shouldOpenInNewTab: true, }, }, { - description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", + description: "ERCdEX's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers", link: { to: 'https://github.com/ERCdEX/python', - title: 'ERCdex Python SDK', + title: 'ERCdEX Python SDK', shouldOpenInNewTab: true, }, }, -- cgit From 26cd5ec1493adab55cbaf0801b0725ca99b8fc8e Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 10:46:55 +0100 Subject: style: accomodate different scrollbar widths on Firefox vs. Chrome/Safari --- packages/website/ts/pages/documentation/developers_page.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 918a3a635..9e4f6d413 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -6,13 +6,14 @@ import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; -import { ScreenWidths } from 'ts/types'; +import { BrowserType, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = 80; -const SCROLLER_WIDTH = 4; +const browserType = utils.getBrowserType(); +const SCROLLER_WIDTH = browserType === BrowserType.Firefox ? 15 : 4; export interface DevelopersPageProps { location: Location; -- cgit From 7742df8614e6fd8c0508e29aec47bc86f9359a8b Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 11:27:42 +0100 Subject: chore: Replace state with styled-components for hover detection --- .../ts/pages/documentation/developers_page.tsx | 140 ++++++++++----------- 1 file changed, 69 insertions(+), 71 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 9e4f6d413..4ea688529 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -6,6 +6,7 @@ import { DocsLogo } from 'ts/components/documentation/docs_logo'; import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; +import { styled } from 'ts/style/theme'; import { BrowserType, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; @@ -14,6 +15,7 @@ const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = 80; const browserType = utils.getBrowserType(); const SCROLLER_WIDTH = browserType === BrowserType.Firefox ? 15 : 4; +const SIDEBAR_PADDING = 22; export interface DevelopersPageProps { location: Location; @@ -25,11 +27,70 @@ export interface DevelopersPageProps { } export interface DevelopersPageState { - isHoveringSidebar: boolean; - isHoveringMainContent: boolean; isSidebarScrolling: boolean; } +const isUserOnMobile = sharedUtils.isUserOnMobile(); + +const scrollableContainerStyles = ` + position: absolute; + top: 80px; + left: 0px; + bottom: 0px; + right: 0px; + overflow-x: hidden; + overflow-y: scroll; + min-height: calc(100vh - ${TOP_BAR_HEIGHT}px); + -webkit-overflow-scrolling: touch; +`; + +interface SidebarContainerProps { + className?: string; +} + +const SidebarContainer = + styled.div < + SidebarContainerProps > + ` + ${scrollableContainerStyles} + padding-top: 27px; + padding-bottom: 100px; + padding-left: ${SIDEBAR_PADDING}px; + padding-right: ${SIDEBAR_PADDING}px; + overflow: hidden; + &:hover { + overflow: auto; + padding-right: ${SIDEBAR_PADDING - SCROLLER_WIDTH}px; + } +`; + +interface MainContentContainerProps { + className?: string; +} + +const MainContentContainer = + styled.div < + MainContentContainerProps > + ` + ${scrollableContainerStyles} + padding-top: 0px; + padding-left: 50px; + padding-right: 50px; + overflow: ${isUserOnMobile ? 'auto' : 'hidden'}; + &:hover { + padding-right: ${50 - SCROLLER_WIDTH}px; + overflow: auto; + } + @media (max-width: 40em) { + padding-left: 20px; + padding-right: 20px; + &:hover { + padding-right: ${20 - SCROLLER_WIDTH}px; + overflow: auto; + } + } +`; + export class DevelopersPage extends React.Component { private readonly _throttledScreenWidthUpdate: () => void; private readonly _throttledSidebarScrolling: () => void; @@ -39,8 +100,6 @@ export class DevelopersPage extends React.Component - + -
-
- {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} -
-
+ + {this.props.screenWidth !== ScreenWidths.Sm && this.props.sidebar} + -
+ {this.props.mainContent} -
+ ); } - private _onSidebarHover(isHovering: boolean, _event: React.FormEvent): void { - if (isHovering !== this.state.isHoveringSidebar) { - this.setState({ - isHoveringSidebar: isHovering, - }); - } - } - private _onMainContentHover(isHovering: boolean, _event: React.FormEvent): void { - if (isHovering !== this.state.isHoveringMainContent) { - this.setState({ - isHoveringMainContent: isHovering, - }); - } - } private _onSidebarScroll(_event: React.FormEvent): void { this.setState({ isSidebarScrolling: true, -- cgit From a7a17c85dce26c8384165b821f0bf60ce531b987 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 11:48:15 +0100 Subject: chore: improve sidebar scroll --- packages/website/ts/pages/documentation/developers_page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 4ea688529..0bbc6252d 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -40,8 +40,8 @@ const scrollableContainerStyles = ` right: 0px; overflow-x: hidden; overflow-y: scroll; - min-height: calc(100vh - ${TOP_BAR_HEIGHT}px); -webkit-overflow-scrolling: touch; + -ms-overflow-style: -ms-autohiding-scrollbar; `; interface SidebarContainerProps { -- cgit From 724f3b9cf7fb3a740d56e28c5375665b944919f3 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 19 Oct 2018 12:25:31 +0100 Subject: Improve sidebar logic to handle MS Edge, Firefox differences between Windows & Mac --- .../ts/pages/documentation/developers_page.tsx | 30 +++++++++++++++++----- 1 file changed, 24 insertions(+), 6 deletions(-) (limited to 'packages/website/ts/pages') diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 0bbc6252d..30b79552f 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -7,14 +7,31 @@ import { DocsTopBar } from 'ts/components/documentation/docs_top_bar'; import { Container } from 'ts/components/ui/container'; import { Dispatcher } from 'ts/redux/dispatcher'; import { styled } from 'ts/style/theme'; -import { BrowserType, ScreenWidths } from 'ts/types'; +import { BrowserType, OperatingSystemType, ScreenWidths } from 'ts/types'; import { Translate } from 'ts/utils/translate'; import { utils } from 'ts/utils/utils'; const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = 80; const browserType = utils.getBrowserType(); -const SCROLLER_WIDTH = browserType === BrowserType.Firefox ? 15 : 4; +let SCROLLBAR_WIDTH; +switch (browserType) { + case BrowserType.Firefox: + // HACK: Firefox doesn't allow styling of their scrollbar's. + // Source: https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox + const os = utils.getOperatingSystem(); + SCROLLBAR_WIDTH = os === OperatingSystemType.Windows ? 17 : 15; + break; + + case BrowserType.Edge: + // Edge's scrollbar is placed outside of the div content and doesn't + // need to be accounted for + SCROLLBAR_WIDTH = 0; + break; + + default: + SCROLLBAR_WIDTH = 4; +} const SIDEBAR_PADDING = 22; export interface DevelopersPageProps { @@ -34,13 +51,14 @@ const isUserOnMobile = sharedUtils.isUserOnMobile(); const scrollableContainerStyles = ` position: absolute; - top: 80px; + top: ${TOP_BAR_HEIGHT}px; left: 0px; bottom: 0px; right: 0px; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; + /* Required for hide/show onHover of scrollbar on Microsoft Edge */ -ms-overflow-style: -ms-autohiding-scrollbar; `; @@ -60,7 +78,7 @@ const SidebarContainer = overflow: hidden; &:hover { overflow: auto; - padding-right: ${SIDEBAR_PADDING - SCROLLER_WIDTH}px; + padding-right: ${SIDEBAR_PADDING - SCROLLBAR_WIDTH}px; } `; @@ -78,14 +96,14 @@ const MainContentContainer = padding-right: 50px; overflow: ${isUserOnMobile ? 'auto' : 'hidden'}; &:hover { - padding-right: ${50 - SCROLLER_WIDTH}px; + padding-right: ${50 - SCROLLBAR_WIDTH}px; overflow: auto; } @media (max-width: 40em) { padding-left: 20px; padding-right: 20px; &:hover { - padding-right: ${20 - SCROLLER_WIDTH}px; + padding-right: ${20 - SCROLLBAR_WIDTH}px; overflow: auto; } } -- cgit