diff options
Diffstat (limited to 'packages/website')
34 files changed, 210 insertions, 104 deletions
diff --git a/packages/website/md/docs/0xjs/installation.md b/packages/website/md/docs/0xjs/installation.md index 5f5c9137e..ac0a47699 100644 --- a/packages/website/md/docs/0xjs/installation.md +++ b/packages/website/md/docs/0xjs/installation.md @@ -18,7 +18,7 @@ import { ZeroEx } from '0x.js'; **Install** -Download the UMD module from our [releases page](https://github.com/0xProject/0x.js/releases) and add it to your project. +Download the UMD module from our [releases page](https://github.com/0xProject/0x-monorepo/releases) and add it to your project. **Import** diff --git a/packages/website/md/docs/0xjs/introduction.md b/packages/website/md/docs/0xjs/introduction.md index 7bad3eaa9..008376d33 100644 --- a/packages/website/md/docs/0xjs/introduction.md +++ b/packages/website/md/docs/0xjs/introduction.md @@ -1 +1 @@ -Welcome to the [0x.js](https://github.com/0xProject/0x.js) documentation! 0x.js is a Javascript library for interacting with the 0x protocol. With it, you can easily make calls to the 0x smart contracts as well as any ERC20 token. Functionality includes generating, signing, filling and cancelling orders, verifying an orders signature, setting or checking a users ERC20 token balance/allowance and much more. +Welcome to the [0x.js](https://github.com/0xProject/0x-monorepo) documentation! 0x.js is a Javascript library for interacting with the 0x protocol. With it, you can easily make calls to the 0x smart contracts as well as any ERC20 token. Functionality includes generating, signing, filling and cancelling orders, verifying an orders signature, setting or checking a users ERC20 token balance/allowance and much more. diff --git a/packages/website/md/docs/connect/installation.md b/packages/website/md/docs/connect/installation.md index 184fa6e0d..950bf92ca 100644 --- a/packages/website/md/docs/connect/installation.md +++ b/packages/website/md/docs/connect/installation.md @@ -12,4 +12,4 @@ import { HttpClient } from '@0xproject/connect'; ### Wiki -Check out our [0x Connect introduction tutorial](https://0xproject.com/wiki#Intro-Tutorial:-Connect) for information on how to integrate relayers into your application. +Check out our [0x Connect introduction tutorial](https://0xproject.com/wiki#Intro-Tutorial) for information on how to integrate relayers into your application. diff --git a/packages/website/md/docs/connect/introduction.md b/packages/website/md/docs/connect/introduction.md index 533e1481a..4e3039442 100644 --- a/packages/website/md/docs/connect/introduction.md +++ b/packages/website/md/docs/connect/introduction.md @@ -1 +1 @@ -Welcome to the [0x Connect](https://github.com/0xProject/0x.js/tree/development/packages/connect) documentation! 0x Connect is a Javascript library that makes it easy to interact with relayers that conform to the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api). Functionality includes getting supported token pairs from a relayer, getting orders filtered by different attributes, getting individual orders specified by order hash, getting orderbooks for specific token pairs, getting fee information, and submitting orders. +Welcome to the [0x Connect](https://github.com/0xProject/0x-monorepo/tree/development/packages/connect) documentation! 0x Connect is a Javascript library that makes it easy to interact with relayers that conform to the [Standard Relayer API](https://github.com/0xProject/standard-relayer-api). Functionality includes getting supported token pairs from a relayer, getting orders filtered by different attributes, getting individual orders specified by order hash, getting orderbooks for specific token pairs, getting fee information, and submitting orders. diff --git a/packages/website/package.json b/packages/website/package.json index ceb3853f9..ca1b596f3 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -1,6 +1,6 @@ { "name": "@0xproject/website", - "version": "0.0.16", + "version": "0.0.17", "private": true, "description": "Website and 0x portal dapp", "scripts": { @@ -18,9 +18,9 @@ "author": "Fabio Berger", "license": "Apache-2.0", "dependencies": { - "0x.js": "^0.32.4", - "@0xproject/subproviders": "^0.5.0", - "@0xproject/utils": "^0.3.4", + "0x.js": "^0.33.0", + "@0xproject/subproviders": "^0.6.0", + "@0xproject/utils": "^0.4.0", "accounting": "^0.4.1", "basscss": "^8.0.3", "blockies": "^0.0.2", @@ -43,10 +43,10 @@ "react-document-title": "^2.0.3", "react-dom": "15.6.1", "react-ga": "^2.4.1", - "react-highlight": "^0.10.0", + "react-highlight": "0xproject/react-highlight", "react-html5video": "^2.1.0", "react-inlinesvg": "^0.5.5", - "react-markdown": "^2.5.0", + "react-markdown": "^3.2.2", "react-recaptcha": "^2.3.2", "react-redux": "^5.0.3", "react-router-dom": "^4.1.1", @@ -87,7 +87,7 @@ "copy-webpack-plugin": "^4.0.1", "copyfiles": "^1.2.0", "css-loader": "0.23.x", - "ethers-typescript-typings": "^0.0.1", + "ethers-typescript-typings": "^0.0.2", "exports-loader": "0.6.x", "imports-loader": "0.6.x", "json-loader": "^0.5.4", @@ -99,7 +99,7 @@ "tslint": "5.8.0", "tslint-config-0xproject": "^0.0.2", "typescript": "2.7.1", - "web3-typescript-typings": "^0.9.11", + "web3-typescript-typings": "^0.10.0", "webpack": "^3.1.0", "webpack-dev-middleware": "^1.10.0", "webpack-dev-server": "^2.5.0" diff --git a/packages/website/public/images/doc_icons/connect.png b/packages/website/public/images/doc_icons/connect.png Binary files differindex ba9bb8a3a..244f504b3 100644 --- a/packages/website/public/images/doc_icons/connect.png +++ b/packages/website/public/images/doc_icons/connect.png diff --git a/packages/website/public/images/doc_icons/contracts.png b/packages/website/public/images/doc_icons/contracts.png Binary files differindex f5c6545ca..03956f162 100644 --- a/packages/website/public/images/doc_icons/contracts.png +++ b/packages/website/public/images/doc_icons/contracts.png diff --git a/packages/website/public/images/doc_icons/zeroExJs.png b/packages/website/public/images/doc_icons/zeroExJs.png Binary files differindex 029777ffe..fe0c49a0f 100644 --- a/packages/website/public/images/doc_icons/zeroExJs.png +++ b/packages/website/public/images/doc_icons/zeroExJs.png diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts index 85b4e892f..156dc44e8 100644 --- a/packages/website/ts/blockchain.ts +++ b/packages/website/ts/blockchain.ts @@ -69,14 +69,6 @@ export class Blockchain { private _cachedProviderNetworkId: number; private _ledgerSubprovider: LedgerWalletSubprovider; private _defaultGasPrice: BigNumber; - private static async _onPageLoadAsync(): Promise<void> { - if (document.readyState === 'complete') { - return; // Already loaded - } - return new Promise<void>((resolve, reject) => { - window.onload = () => resolve(); - }); - } private static _getNameGivenProvider(provider: Web3.Provider): string { if (!_.isUndefined((provider as any).isMetaMask)) { return constants.PROVIDER_NAME_METAMASK; @@ -710,7 +702,7 @@ export class Blockchain { return tokenByAddress; } private async _onPageLoadInitFireAndForgetAsync() { - await Blockchain._onPageLoadAsync(); // wait for page to load + await utils.onPageLoadAsync(); // wait for page to load // Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in // order to properly instantiate the web3Wrapper. Since we must use the async call, we cannot diff --git a/packages/website/ts/containers/about.tsx b/packages/website/ts/containers/about.ts index ce8fd3afb..ce8fd3afb 100644 --- a/packages/website/ts/containers/about.tsx +++ b/packages/website/ts/containers/about.ts diff --git a/packages/website/ts/containers/connect_documentation.tsx b/packages/website/ts/containers/connect_documentation.ts index 464bdcd74..6a5ba1f99 100644 --- a/packages/website/ts/containers/connect_documentation.tsx +++ b/packages/website/ts/containers/connect_documentation.ts @@ -28,7 +28,7 @@ const docsInfoConfig: DocsInfoConfig = { id: DocPackages.Connect, type: SupportedDocJson.TypeDoc, displayName: '0x Connect', - packageUrl: 'https://github.com/0xProject/0x.js', + packageUrl: 'https://github.com/0xProject/0x-monorepo', menu: { introduction: [connectDocSections.introduction], install: [connectDocSections.installation], diff --git a/packages/website/ts/containers/faq.tsx b/packages/website/ts/containers/faq.ts index b539e33c9..b539e33c9 100644 --- a/packages/website/ts/containers/faq.tsx +++ b/packages/website/ts/containers/faq.ts diff --git a/packages/website/ts/containers/generate_order_form.tsx b/packages/website/ts/containers/generate_order_form.ts index 8c5deb690..8c5deb690 100644 --- a/packages/website/ts/containers/generate_order_form.tsx +++ b/packages/website/ts/containers/generate_order_form.ts diff --git a/packages/website/ts/containers/landing.tsx b/packages/website/ts/containers/landing.ts index a620bb12e..a620bb12e 100644 --- a/packages/website/ts/containers/landing.tsx +++ b/packages/website/ts/containers/landing.ts diff --git a/packages/website/ts/containers/not_found.tsx b/packages/website/ts/containers/not_found.ts index dd151e2c8..dd151e2c8 100644 --- a/packages/website/ts/containers/not_found.tsx +++ b/packages/website/ts/containers/not_found.ts diff --git a/packages/website/ts/containers/portal.tsx b/packages/website/ts/containers/portal.ts index befa16bdb..befa16bdb 100644 --- a/packages/website/ts/containers/portal.tsx +++ b/packages/website/ts/containers/portal.ts diff --git a/packages/website/ts/containers/smart_contracts_documentation.tsx b/packages/website/ts/containers/smart_contracts_documentation.ts index a839529aa..a839529aa 100644 --- a/packages/website/ts/containers/smart_contracts_documentation.tsx +++ b/packages/website/ts/containers/smart_contracts_documentation.ts diff --git a/packages/website/ts/containers/wiki.tsx b/packages/website/ts/containers/wiki.ts index 2cb87d0a1..2cb87d0a1 100644 --- a/packages/website/ts/containers/wiki.tsx +++ b/packages/website/ts/containers/wiki.ts diff --git a/packages/website/ts/containers/zero_ex_js_documentation.tsx b/packages/website/ts/containers/zero_ex_js_documentation.ts index 500bf8d96..d0d697e70 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.tsx +++ b/packages/website/ts/containers/zero_ex_js_documentation.ts @@ -40,7 +40,7 @@ const docsInfoConfig: DocsInfoConfig = { id: DocPackages.ZeroExJs, type: SupportedDocJson.TypeDoc, displayName: '0x.js', - packageUrl: 'https://github.com/0xProject/0x.js', + packageUrl: 'https://github.com/0xProject/0x-monorepo', menu: { introduction: [zeroExJsDocSections.introduction], install: [zeroExJsDocSections.installation], @@ -102,6 +102,7 @@ const docsInfoConfig: DocsInfoConfig = { 'ApprovalContractEventArgs', 'TokenContractEventArgs', 'ZeroExConfig', + 'TransactionReceipt', 'TransactionReceiptWithDecodedLogs', 'LogWithDecodedArgs', 'EtherTokenEvents', @@ -124,17 +125,33 @@ const docsInfoConfig: DocsInfoConfig = { 'FilterObject', ], sectionNameToModulePath: { - [zeroExJsDocSections.zeroEx]: ['"src/0x"'], - [zeroExJsDocSections.exchange]: ['"src/contract_wrappers/exchange_wrapper"'], - [zeroExJsDocSections.tokenRegistry]: ['"src/contract_wrappers/token_registry_wrapper"'], - [zeroExJsDocSections.token]: ['"src/contract_wrappers/token_wrapper"'], - [zeroExJsDocSections.etherToken]: ['"src/contract_wrappers/ether_token_wrapper"'], + [zeroExJsDocSections.zeroEx]: ['"0x.js/src/0x"', '"src/0x"'], + [zeroExJsDocSections.exchange]: [ + '"0x.js/src/contract_wrappers/exchange_wrapper"', + '"src/contract_wrappers/exchange_wrapper"', + ], + [zeroExJsDocSections.tokenRegistry]: [ + '"0x.js/src/contract_wrappers/token_registry_wrapper"', + '"src/contract_wrappers/token_registry_wrapper"', + ], + [zeroExJsDocSections.token]: [ + '"0x.js/src/contract_wrappers/token_wrapper"', + '"src/contract_wrappers/token_wrapper"', + ], + [zeroExJsDocSections.etherToken]: [ + '"0x.js/src/contract_wrappers/ether_token_wrapper"', + '"src/contract_wrappers/ether_token_wrapper"', + ], [zeroExJsDocSections.proxy]: [ - '"src/contract_wrappers/proxy_wrapper"', + '"0x.js/src/contract_wrappers/proxy_wrapper"', + '"0x.js/src/contract_wrappers/token_transfer_proxy_wrapper"', '"src/contract_wrappers/token_transfer_proxy_wrapper"', ], - [zeroExJsDocSections.orderWatcher]: ['"src/order_watcher/order_state_watcher"'], - [zeroExJsDocSections.types]: ['"src/types"'], + [zeroExJsDocSections.orderWatcher]: [ + '"0x.js/src/order_watcher/order_state_watcher"', + '"src/order_watcher/order_state_watcher"', + ], + [zeroExJsDocSections.types]: ['"0x.js/src/types"', '"src/types"', '"types/src/index"'], }, menuSubsectionToVersionWhenIntroduced: { [zeroExJsDocSections.etherToken]: '0.7.1', diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx index 23cfd96bd..5f177e97e 100644 --- a/packages/website/ts/pages/documentation/comment.tsx +++ b/packages/website/ts/pages/documentation/comment.tsx @@ -15,7 +15,7 @@ const defaultProps = { export const Comment: React.SFC<CommentProps> = (props: CommentProps) => { return ( <div className={`${props.className} comment`}> - <ReactMarkdown source={props.comment} renderers={{ CodeBlock: MarkdownCodeBlock }} /> + <ReactMarkdown source={props.comment} renderers={{ code: MarkdownCodeBlock }} /> </div> ); }; diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 7eed78fc3..699bef7a8 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -29,11 +29,11 @@ import { TypescriptMethod, } from 'ts/types'; import { colors } from 'ts/utils/colors'; +import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; const TOP_BAR_HEIGHT = 60; -const SCROLL_TOP_ID = 'docsScrollTop'; const networkNameToColor: { [network: string]: string } = { [Networks.Kovan]: colors.purple, @@ -76,7 +76,8 @@ const styles: Styles = { export class Documentation extends React.Component<DocumentationProps, DocumentationState> { public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) { if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) { - this._scrollToHash(); + const hash = this.props.location.hash.slice(1); + utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID); } } public render() { @@ -115,8 +116,12 @@ export class Documentation extends React.Component<DocumentationProps, Documenta className="relative col lg-col-9 md-col-9 sm-col-12 col-12" style={{ backgroundColor: colors.white }} > - <div id="documentation" style={styles.mainContainers} className="absolute px1"> - <div id={SCROLL_TOP_ID} /> + <div + id={configs.SCROLL_CONTAINER_ID} + style={styles.mainContainers} + className="absolute px1" + > + <div id={configs.SCROLL_TOP_ID} /> {this._renderDocumentation()} </div> </div> @@ -325,17 +330,4 @@ export class Documentation extends React.Component<DocumentationProps, Documenta /> ); } - private _scrollToHash(): void { - const hashWithPrefix = this.props.location.hash; - let hash = hashWithPrefix.slice(1); - if (_.isEmpty(hash)) { - hash = SCROLL_TOP_ID; // scroll to the top - } - - scroller.scrollTo(hash, { - duration: 0, - offset: 0, - containerId: 'documentation', - }); - } } diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx index 0e53e38e7..e62c9ecbd 100644 --- a/packages/website/ts/pages/documentation/event_definition.tsx +++ b/packages/website/ts/pages/documentation/event_definition.tsx @@ -25,9 +25,10 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event } public render() { const event = this.props.event; + const id = `${this.props.sectionName}-${event.name}`; return ( <div - id={`${this.props.sectionName}-${event.name}`} + id={id} className="pb2" style={{ overflow: 'hidden', width: '100%' }} onMouseOver={this._setAnchorVisibility.bind(this, true)} @@ -36,7 +37,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event <AnchorTitle headerSize={HeaderSizes.H3} title={`Event ${event.name}`} - id={event.name} + id={id} shouldShowAnchor={this.state.shouldShowAnchor} /> <div style={{ fontSize: 16 }}> diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx index d46eec76c..02bf63258 100644 --- a/packages/website/ts/pages/documentation/type_definition.tsx +++ b/packages/website/ts/pages/documentation/type_definition.tsx @@ -113,7 +113,9 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef <code className="hljs">{codeSnippet}</code> </pre> </div> - {customType.comment && <Comment comment={customType.comment} className="py2" />} + <div style={{ maxWidth: 620 }}> + {customType.comment && <Comment comment={customType.comment} className="py2" />} + </div> </div> ); } diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx index 98ca3aee6..6dfb74554 100644 --- a/packages/website/ts/pages/shared/markdown_code_block.tsx +++ b/packages/website/ts/pages/shared/markdown_code_block.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import * as HighLight from 'react-highlight'; interface MarkdownCodeBlockProps { - literal: string; + value: string; language: string; } @@ -13,12 +13,12 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed. public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) { - return nextProps.literal !== this.props.literal || nextProps.language !== this.props.language; + return nextProps.value !== this.props.value || nextProps.language !== this.props.language; } public render() { return ( <span style={{ fontSize: 14 }}> - <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight> + <HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight> </span> ); } diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx new file mode 100644 index 000000000..e4553c87f --- /dev/null +++ b/packages/website/ts/pages/shared/markdown_link_block.tsx @@ -0,0 +1,46 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import { configs } from 'ts/utils/configs'; +import { utils } from 'ts/utils/utils'; + +interface MarkdownLinkBlockProps { + href: string; +} + +interface MarkdownLinkBlockState {} + +export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, MarkdownLinkBlockState> { + // Re-rendering a linkBlock causes it to remain unclickable. + // We therefore noop re-renders on this component if it's props haven't changed. + public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) { + return nextProps.href !== this.props.href; + } + public render() { + const href = this.props.href; + const isLinkToSection = _.startsWith(href, '#'); + // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons + if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) { + return ( + <a href={href} target="_blank" rel="nofollow noreferrer noopener"> + {this.props.children} + </a> + ); + } else if (isLinkToSection) { + return ( + <a + style={{ cursor: 'pointer', textDecoration: 'underline' }} + onClick={this._onHashUrlClick.bind(this, href)} + > + {this.props.children} + </a> + ); + } else { + return <a href={href}>{this.props.children}</a>; + } + } + private _onHashUrlClick(href: string) { + const hash = href.split('#')[1]; + utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID); + utils.setUrlHash(hash); + } +} diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx index 4d7d8b4ca..7253072d9 100644 --- a/packages/website/ts/pages/shared/markdown_section.tsx +++ b/packages/website/ts/pages/shared/markdown_section.tsx @@ -5,6 +5,7 @@ import * as ReactMarkdown from 'react-markdown'; import { Element as ScrollElement } from 'react-scroll'; import { AnchorTitle } from 'ts/pages/shared/anchor_title'; import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block'; +import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block'; import { HeaderSizes } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; @@ -64,7 +65,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd </div> </div> <hr style={{ border: `1px solid ${colors.lightestGrey}` }} /> - <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} /> + <ReactMarkdown + source={this.props.markdownContent} + escapeHtml={false} + renderers={{ + code: MarkdownCodeBlock, + link: MarkdownLinkBlock, + }} + /> </ScrollElement> </div> ); diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx index 1a08ca9f9..82a40eb7e 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -86,14 +86,14 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N docs </div> </div> - <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 14, height: 17 }}> + <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}> | </div> <div className="flex"> <div> - <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="24" /> + <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" /> </div> - <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}> + <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}> {this.props.title} </div> </div> diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx index a5f5f52cf..52a1f30d9 100644 --- a/packages/website/ts/pages/shared/section_header.tsx +++ b/packages/website/ts/pages/shared/section_header.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Element as ScrollElement } from 'react-scroll'; import { AnchorTitle } from 'ts/pages/shared/anchor_title'; import { HeaderSizes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; interface SectionHeaderProps { @@ -34,7 +35,19 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe <ScrollElement name={id}> <AnchorTitle headerSize={this.props.headerSize} - title={<span style={{ textTransform: 'capitalize' }}>{sectionName}</span>} + title={ + <span + style={{ + textTransform: 'uppercase', + color: colors.grey, + fontFamily: 'Roboto Mono', + fontWeight: 300, + fontSize: 27, + }} + > + {sectionName} + </span> + } id={id} shouldShowAnchor={this.state.shouldShowAnchor} /> diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx index 3b331af9b..1b4dbb375 100644 --- a/packages/website/ts/pages/shared/version_drop_down.tsx +++ b/packages/website/ts/pages/shared/version_drop_down.tsx @@ -2,6 +2,7 @@ import * as _ from 'lodash'; import DropDownMenu from 'material-ui/DropDownMenu'; import MenuItem from 'material-ui/MenuItem'; import * as React from 'react'; +import { utils } from 'ts/utils/utils'; interface VersionDropDownProps { selectedVersion: string; @@ -31,8 +32,6 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi return items; } private _updateSelectedVersion(e: any, index: number, semver: string) { - const port = window.location.port; - const hasPort = !_.isUndefined(port); let path = window.location.pathname; const lastChar = path[path.length - 1]; if (_.isFinite(_.parseInt(lastChar))) { @@ -40,7 +39,7 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi pathSections.pop(); path = pathSections.join('/'); } - const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}${path}`; - window.location.href = `${baseUrl}/${semver}${window.location.hash}`; + const baseUrl = utils.getCurrentBaseUrl(); + window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`; } } diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index 56c3be0fe..4bb6052a2 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -135,11 +135,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> { }} > <div - id="documentation" + id={configs.SCROLL_CONTAINER_ID} style={{ ...mainContainersStyle, overflow: 'auto' }} className="absolute" > - <div id="0xProtocolWiki" /> + <div id={configs.SCROLL_TOP_ID} /> <div id="wiki" style={{ paddingRight: 2 }}> {this._renderWikiArticles()} </div> @@ -188,19 +188,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> { </div> ); } - private _scrollToHash(): void { - const hashWithPrefix = this.props.location.hash; - let hash = hashWithPrefix.slice(1); - if (_.isEmpty(hash)) { - hash = '0xProtocolWiki'; // scroll to the top - } - - scroller.scrollTo(hash, { - duration: 0, - offset: 0, - containerId: 'documentation', - }); - } private async _fetchArticlesBySectionAsync(): Promise<void> { const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`; const response = await fetch(endpoint); @@ -224,8 +211,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> { { articlesBySection, }, - () => { - this._scrollToHash(); + async () => { + await utils.onPageLoadAsync(); + const hash = this.props.location.hash.slice(1); + utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID); }, ); } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index f0db537e6..28663270e 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -308,7 +308,7 @@ export interface TypeDocNode { returns?: string; declaration: TypeDocNode; flags?: TypeDocFlags; - indexSignature?: TypeDocNode[]; + indexSignature?: TypeDocNode | TypeDocNode[]; // TypeDocNode in TypeDoc <V0.9.0, TypeDocNode[] in >V0.9.0 signatures?: TypeDocNode[]; parameters?: TypeDocNode[]; typeParameter?: TypeDocNode[]; diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 7e9ba69de..388fc8530 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -94,6 +94,8 @@ export const configs = { [3]: [`https://ropsten.infura.io/${INFURA_API_KEY}`], [4]: [`https://rinkeby.infura.io/${INFURA_API_KEY}`], } as PublicNodeUrlsByNetworkId, + SCROLL_CONTAINER_ID: 'documentation', + SCROLL_TOP_ID: 'pageScrollTop', SHOULD_DEPRECATE_OLD_WETH_TOKEN: true, SYMBOLS_OF_MINTABLE_KOVAN_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'], SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS: [ diff --git a/packages/website/ts/utils/typedoc_utils.ts b/packages/website/ts/utils/typedoc_utils.ts index 992475911..ce7df4dbb 100644 --- a/packages/website/ts/utils/typedoc_utils.ts +++ b/packages/website/ts/utils/typedoc_utils.ts @@ -41,18 +41,17 @@ export const typeDocUtils = { isPrivateOrProtectedProperty(propertyName: string): boolean { return _.startsWith(propertyName, '_'); }, - getModuleDefinitionBySectionNameIfExists( - versionDocObj: TypeDocNode, - modulePaths: string[], - ): TypeDocNode | undefined { - const modules = versionDocObj.children; - for (const mod of modules) { - if (_.includes(modulePaths, mod.name)) { - const moduleWithName = mod; - return moduleWithName; - } - } - return undefined; + getModuleDefinitionsBySectionName(versionDocObj: TypeDocNode, configModulePaths: string[]): TypeDocNode[] { + const moduleDefinitions: TypeDocNode[] = []; + const jsonModules = versionDocObj.children; + _.each(jsonModules, jsonMod => { + _.each(configModulePaths, configModulePath => { + if (_.includes(configModulePath, jsonMod.name)) { + moduleDefinitions.push(jsonMod); + } + }); + }); + return moduleDefinitions; }, convertToDocAgnosticFormat(typeDocJson: TypeDocNode, docsInfo: DocsInfo): DocAgnosticFormat { const subMenus = _.values(docsInfo.getMenu()); @@ -63,12 +62,23 @@ export const typeDocUtils = { if (_.isUndefined(modulePathsIfExists)) { return; // no-op } - const packageDefinitionIfExists = typeDocUtils.getModuleDefinitionBySectionNameIfExists( - typeDocJson, - modulePathsIfExists, - ); - if (_.isUndefined(packageDefinitionIfExists)) { + const packageDefinitions = typeDocUtils.getModuleDefinitionsBySectionName(typeDocJson, modulePathsIfExists); + let packageDefinitionWithMergedChildren; + if (_.isEmpty(packageDefinitions)) { return; // no-op + } else if (packageDefinitions.length === 1) { + packageDefinitionWithMergedChildren = packageDefinitions[0]; + } else { + // HACK: For now, if there are two modules to display in a single section, + // we simply concat the children. This works for our limited use-case where + // we want to display types stored in two files under a single section + packageDefinitionWithMergedChildren = packageDefinitions[0]; + for (let i = 1; i < packageDefinitions.length; i++) { + packageDefinitionWithMergedChildren.children = [ + ...packageDefinitionWithMergedChildren.children, + ...packageDefinitions[i].children, + ]; + } } // Since the `types.ts` file is the only file that does not export a module/class but @@ -77,10 +87,10 @@ export const typeDocUtils = { let entities; let packageComment = ''; if (sectionName === docsInfo.sections.types) { - entities = packageDefinitionIfExists.children; + entities = packageDefinitionWithMergedChildren.children; } else { - entities = packageDefinitionIfExists.children[0].children; - const commentObj = packageDefinitionIfExists.children[0].comment; + entities = packageDefinitionWithMergedChildren.children[0].children; + const commentObj = packageDefinitionWithMergedChildren.children[0].comment; packageComment = !_.isUndefined(commentObj) ? commentObj.shortText : packageComment; } @@ -170,8 +180,16 @@ export const typeDocUtils = { const methodIfExists = !_.isUndefined(entity.declaration) ? typeDocUtils._convertMethod(entity.declaration, isConstructor, sections, sectionName, docId) : undefined; - const indexSignatureIfExists = !_.isUndefined(entity.indexSignature) - ? typeDocUtils._convertIndexSignature(entity.indexSignature[0], sections, sectionName, docId) + const doesIndexSignatureExist = !_.isUndefined(entity.indexSignature); + const isIndexSignatureArray = _.isArray(entity.indexSignature); + // HACK: TypeDoc Versions <0.9.0 indexSignature is of type TypeDocNode[] + // Versions >0.9.0 have it as type TypeDocNode + const indexSignature = + doesIndexSignatureExist && isIndexSignatureArray + ? (entity.indexSignature as TypeDocNode[])[0] + : (entity.indexSignature as TypeDocNode); + const indexSignatureIfExists = doesIndexSignatureExist + ? typeDocUtils._convertIndexSignature(indexSignature, sections, sectionName, docId) : undefined; const commentIfExists = !_.isUndefined(entity.comment) && !_.isUndefined(entity.comment.shortText) diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index c38f84c92..a1e045af7 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -4,6 +4,7 @@ import deepEqual = require('deep-equal'); import isMobile = require('is-mobile'); import * as _ from 'lodash'; import * as moment from 'moment'; +import { scroller } from 'react-scroll'; import { EtherscanLinkSuffixes, Networks, @@ -290,4 +291,30 @@ export const utils = { ); return isTestNetwork; }, + getCurrentBaseUrl() { + const port = window.location.port; + const hasPort = !_.isUndefined(port); + const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`; + return baseUrl; + }, + scrollToHash(hash: string, containerId: string): void { + let finalHash = hash; + if (_.isEmpty(hash)) { + finalHash = configs.SCROLL_TOP_ID; // scroll to the top + } + + scroller.scrollTo(finalHash, { + duration: 0, + offset: 0, + containerId, + }); + }, + async onPageLoadAsync(): Promise<void> { + if (document.readyState === 'complete') { + return; // Already loaded + } + return new Promise<void>((resolve, reject) => { + window.onload = () => resolve(); + }); + }, }; |
