diff options
Diffstat (limited to 'packages/website/ts')
| -rw-r--r-- | packages/website/ts/pages/documentation/comment.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/documentation.tsx | 25 | ||||
| -rw-r--r-- | packages/website/ts/pages/documentation/event_definition.tsx | 5 | ||||
| -rw-r--r-- | packages/website/ts/pages/shared/markdown_code_block.tsx | 6 | ||||
| -rw-r--r-- | packages/website/ts/pages/shared/markdown_link_block.tsx | 41 | ||||
| -rw-r--r-- | packages/website/ts/pages/shared/markdown_section.tsx | 10 | ||||
| -rw-r--r-- | packages/website/ts/pages/shared/version_drop_down.tsx | 7 | ||||
| -rw-r--r-- | packages/website/ts/pages/wiki/wiki.tsx | 19 | ||||
| -rw-r--r-- | packages/website/ts/utils/configs.ts | 9 | ||||
| -rw-r--r-- | packages/website/ts/utils/utils.ts | 19 |
10 files changed, 95 insertions, 48 deletions
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..5963fe851 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,7 @@ 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(); + utils.scrollToHash(this.props.location.hash, configs.SCROLL_CONTAINER_ID); } } public render() { @@ -115,8 +115,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 +329,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/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..73c447636 --- /dev/null +++ b/packages/website/ts/pages/shared/markdown_link_block.tsx @@ -0,0 +1,41 @@ +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 any use selection to become de-selected making the link 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; + // 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 (_.startsWith(href, '#')) { + return ( + <a style={{ cursor: 'pointer' }} onClick={this._onHashUrlClick.bind(this, href)}> + {this.props.children} + </a> + ); + } else { + return <a href={href}>{this.props.children}</a>; + } + } + private _onHashUrlClick(href: string) { + const hashWithPrefix = `#${href.split('#')[1]}`; + utils.scrollToHash(hashWithPrefix, configs.SCROLL_CONTAINER_ID); + } +} 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/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..d0cbf0d3e 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); @@ -225,7 +212,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> { articlesBySection, }, () => { - this._scrollToHash(); + utils.scrollToHash(this.props.location.hash, configs.SCROLL_CONTAINER_ID); }, ); } diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 7e9ba69de..44d64e875 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -2,10 +2,8 @@ import * as _ from 'lodash'; import { ContractAddresses, Environments, OutdatedWrappedEtherByNetworkId, PublicNodeUrlsByNetworkId } from 'ts/types'; const BASE_URL = window.location.origin; -const isDevelopment = _.includes( - ['https://0xproject.localhost:3572', 'https://localhost:3572', 'https://127.0.0.1'], - BASE_URL, -); +const developmentUrls = ['https://0xproject.localhost:3572', 'https://localhost:3572', 'https://127.0.0.1']; +const isDevelopment = _.includes(developmentUrls, BASE_URL); const INFURA_API_KEY = 'T5WSC8cautR4KXyYgsRs'; export const configs = { @@ -15,6 +13,7 @@ export const configs = { DEFAULT_DERIVATION_PATH: `44'/60'/0'`, // WARNING: ZRX & WETH MUST always be default trackedTokens DEFAULT_TRACKED_TOKEN_SYMBOLS: ['WETH', 'ZRX'], + DEVELOPMENT_URLS: developmentUrls, DOMAIN_STAGING: 'staging-0xproject.s3-website-us-east-1.amazonaws.com', DOMAIN_DEVELOPMENT: '0xproject.localhost:3572', DOMAIN_PRODUCTION: '0xproject.com', @@ -94,6 +93,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/utils.ts b/packages/website/ts/utils/utils.ts index c38f84c92..4d04d915d 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,22 @@ 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(hashWithPrefix: string, containerId: string): void { + let hash = hashWithPrefix.slice(1); + if (_.isEmpty(hash)) { + hash = configs.SCROLL_TOP_ID; // scroll to the top + } + + scroller.scrollTo(hash, { + duration: 0, + offset: 0, + containerId, + }); + }, }; |