From 67c834841ea0f8fb4d8d194c0f68802f48e764ee Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 2 Mar 2018 14:40:26 +0100 Subject: Update react-markdown, properly scroll to section for wiki internal links, consolidate scrollTo logic and make external links open in new tabs --- .../website/ts/pages/documentation/comment.tsx | 2 +- .../ts/pages/documentation/documentation.tsx | 25 +++++-------- .../ts/pages/shared/markdown_code_block.tsx | 6 ++-- .../ts/pages/shared/markdown_link_block.tsx | 41 ++++++++++++++++++++++ .../website/ts/pages/shared/markdown_section.tsx | 10 +++++- .../website/ts/pages/shared/version_drop_down.tsx | 7 ++-- packages/website/ts/pages/wiki/wiki.tsx | 19 ++-------- packages/website/ts/utils/configs.ts | 9 ++--- packages/website/ts/utils/utils.ts | 19 ++++++++++ 9 files changed, 92 insertions(+), 46 deletions(-) create mode 100644 packages/website/ts/pages/shared/markdown_link_block.tsx (limited to 'packages/website/ts') 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 = (props: CommentProps) => { return (
- +
); }; 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 { 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 -
-
+
+
{this._renderDocumentation()}
@@ -325,17 +329,4 @@ export class Documentation extends React.Component ); } - 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/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 - {this.props.literal} + {this.props.value} ); } 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 { + // 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 ( + + {this.props.children} + + ); + } else if (_.startsWith(href, '#')) { + return ( + + {this.props.children} + + ); + } else { + return {this.props.children}; + } + } + 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
- +
); 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 { }} >
-
+
{this._renderWikiArticles()}
@@ -188,19 +188,6 @@ export class Wiki extends React.Component {
); } - 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 { const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`; const response = await fetch(endpoint); @@ -225,7 +212,7 @@ export class Wiki extends React.Component { 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, + }); + }, }; -- cgit v1.2.3