aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/package.json4
-rw-r--r--packages/website/ts/pages/documentation/comment.tsx2
-rw-r--r--packages/website/ts/pages/documentation/documentation.tsx25
-rw-r--r--packages/website/ts/pages/documentation/event_definition.tsx5
-rw-r--r--packages/website/ts/pages/shared/markdown_code_block.tsx6
-rw-r--r--packages/website/ts/pages/shared/markdown_link_block.tsx41
-rw-r--r--packages/website/ts/pages/shared/markdown_section.tsx10
-rw-r--r--packages/website/ts/pages/shared/version_drop_down.tsx7
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx19
-rw-r--r--packages/website/ts/utils/configs.ts9
-rw-r--r--packages/website/ts/utils/utils.ts19
11 files changed, 97 insertions, 50 deletions
diff --git a/packages/website/package.json b/packages/website/package.json
index ceb3853f9..07122cc7c 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -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",
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,
+ });
+ },
};
generated by cgit (git 2.34.1) at 2024-11-20 05:27:09 +0800