diff options
Diffstat (limited to 'packages/website')
25 files changed, 491 insertions, 208 deletions
diff --git a/packages/website/CHANGELOG.md b/packages/website/CHANGELOG.md index 6cb8cd0b0..642b972a2 100644 --- a/packages/website/CHANGELOG.md +++ b/packages/website/CHANGELOG.md @@ -1,5 +1,5 @@ # CHANGELOG -## v0.x.x - _TBD_ +## v0.0.1 - _February 16, 2018_ - * Added new team members to the about page (#317) + * Re-designed wiki + doc page template (#405) diff --git a/packages/website/less/all.less b/packages/website/less/all.less index 7f2a8fc67..113dff0be 100644 --- a/packages/website/less/all.less +++ b/packages/website/less/all.less @@ -61,7 +61,8 @@ a { */ ::-webkit-scrollbar { -webkit-appearance: none; - width: 7px; + width: 4px; + height: 2px; } ::-webkit-scrollbar-thumb { border-radius: 4px; @@ -85,19 +86,28 @@ a { } code { - font-family: 'Roboto'; - background-color: #f3f4f4; - color: rgb(36, 41, 46); - padding: 3px; - - &.hljs { - background-color: #dde4e9 !important; // blue gray - border-left: 5px solid #0091ea !important; // colors.lightBlueA700 - padding: 30px; - } + border: 1px solid #e3eefe; + font-family: 'Roboto Mono'; + background-color: #f2f6ff !important; // lightBlue } #wiki { + p { + color: #515151; // grey750 + fontsize: 15; + } + + a { + color: #1d5cde; // linkBlue + } + + h1, + h2, + h3, + h4 { + padding-top: 15px; + } + p, blockquote, ol, diff --git a/packages/website/package.json b/packages/website/package.json index a89bc0de3..1643cf0bd 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -1,6 +1,6 @@ { "name": "@0xproject/website", - "version": "0.0.15", + "version": "0.0.16", "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.3", - "@0xproject/subproviders": "^0.4.2", - "@0xproject/utils": "^0.3.3", + "0x.js": "^0.32.4", + "@0xproject/subproviders": "^0.5.0", + "@0xproject/utils": "^0.3.4", "accounting": "^0.4.1", "basscss": "^8.0.3", "blockies": "^0.0.2", @@ -98,7 +98,7 @@ "style-loader": "0.13.x", "tslint": "5.8.0", "typescript": "2.7.1", - "web3-typescript-typings": "^0.9.10", + "web3-typescript-typings": "^0.9.11", "webpack": "^3.1.0", "webpack-dev-middleware": "^1.10.0", "webpack-dev-server": "^2.5.0" diff --git a/packages/website/public/css/github-gist.css b/packages/website/public/css/github-gist.css new file mode 100644 index 000000000..d5c8751c5 --- /dev/null +++ b/packages/website/public/css/github-gist.css @@ -0,0 +1,71 @@ +/** + * GitHub Gist Theme + * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro + */ + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} diff --git a/packages/website/public/images/doc_icons/connect.png b/packages/website/public/images/doc_icons/connect.png Binary files differnew file mode 100644 index 000000000..ba9bb8a3a --- /dev/null +++ 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 differnew file mode 100644 index 000000000..f5c6545ca --- /dev/null +++ b/packages/website/public/images/doc_icons/contracts.png diff --git a/packages/website/public/images/doc_icons/wiki.png b/packages/website/public/images/doc_icons/wiki.png Binary files differnew file mode 100644 index 000000000..d7854d54b --- /dev/null +++ b/packages/website/public/images/doc_icons/wiki.png diff --git a/packages/website/public/images/doc_icons/zeroExJs.png b/packages/website/public/images/doc_icons/zeroExJs.png Binary files differnew file mode 100644 index 000000000..029777ffe --- /dev/null +++ b/packages/website/public/images/doc_icons/zeroExJs.png diff --git a/packages/website/public/index.html b/packages/website/public/index.html index b40ee62fa..3072ff03d 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -12,7 +12,7 @@ <title>0x: The Protocol for Trading Tokens</title> <link rel="icon" type="image/png" href="/images/favicon/favicon-2-32x32.png" sizes="32x32" /> <link rel="icon" type="image/png" href="/images/favicon/favicon-2-16x16.png" sizes="16x16" /> - <link rel="stylesheet" href="/css/atom-one-light.css"> + <link rel="stylesheet" href="/css/github-gist.css"> <link rel="stylesheet" href="/css/material-design-iconic-font.min.css"> <link rel="stylesheet" href="/css/roboto.css"> <link rel="stylesheet" href="/css/roboto_mono.css"> @@ -26,48 +26,98 @@ <!-- Facebook SDK --> <div id="fb-root"></div> <script> - (function (d, s, id) { - var js, fjs = d.getElementsByTagName(s)[0]; - if (d.getElementById(id)) return; - js = d.createElement(s); js.id = id; - js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1687545238205192"; - fjs.parentNode.insertBefore(js, fjs); - }(document, 'script', 'facebook-jssdk')); - </script> + (function(d, s, id) { + var js, + fjs = d.getElementsByTagName(s)[0]; + if (d.getElementById(id)) return; + js = d.createElement(s); + js.id = id; + js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1687545238205192'; + fjs.parentNode.insertBefore(js, fjs); +})(document, 'script', 'facebook-jssdk'); +</script> <div id="app"></div> <!-- End Facebook SDK --> <!-- Twitter SDK --> <script> - window.twttr = (function (d, s, id) { - var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; - if (d.getElementById(id)) return t; - js = d.createElement(s); - js.id = id; - js.src = "https://platform.twitter.com/widgets.js"; - fjs.parentNode.insertBefore(js, fjs); + window.twttr = (function(d, s, id) { + var js, + fjs = d.getElementsByTagName(s)[0], + t = window.twttr || {}; + if (d.getElementById(id)) return t; + js = d.createElement(s); + js.id = id; + js.src = 'https://platform.twitter.com/widgets.js'; + fjs.parentNode.insertBefore(js, fjs); - t._e = []; - t.ready = function (f) { - t._e.push(f); - }; - return t; - }(document, "script", "twitter-wjs")); - </script> + t._e = []; + t.ready = function(f) { + t._e.push(f); + }; + return t; +})(document, 'script', 'twitter-wjs'); +</script> <!-- End Twitter SDK --> <!-- Segment.io --> <script> - !function () { - var analytics = window.analytics = window.analytics || []; if (!analytics.initialize) if (analytics.invoked) window.console && console.error && console.error("Segment snippet included twice."); else { - analytics.invoked = !0; analytics.methods = ["trackSubmit", "trackClick", "trackLink", "trackForm", "pageview", "identify", "reset", "group", "track", "ready", "alias", "debug", "page", "once", "off", "on"]; analytics.factory = function (t) { return function () { var e = Array.prototype.slice.call(arguments); e.unshift(t); analytics.push(e); return analytics } }; for (var t = 0; t < analytics.methods.length; t++) { var e = analytics.methods[t]; analytics[e] = analytics.factory(e) } analytics.load = function (t) { var e = document.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = ("https:" === document.location.protocol ? "https://" : "http://") + "cdn.segment.com/analytics.js/v1/" + t + "/analytics.min.js"; var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(e, n) }; analytics.SNIPPET_VERSION = "4.0.0"; - analytics.load("T6jtT2F2iMrw9FDJ8exE9Uu1mLN5qd8n"); - analytics.page(); + !(function() { + var analytics = (window.analytics = window.analytics || []); + if (!analytics.initialize) + if (analytics.invoked) window.console && console.error && console.error('Segment snippet included twice.'); + else { + analytics.invoked = !0; + analytics.methods = [ + 'trackSubmit', + 'trackClick', + 'trackLink', + 'trackForm', + 'pageview', + 'identify', + 'reset', + 'group', + 'track', + 'ready', + 'alias', + 'debug', + 'page', + 'once', + 'off', + 'on', + ]; + analytics.factory = function(t) { + return function() { + var e = Array.prototype.slice.call(arguments); + e.unshift(t); + analytics.push(e); + return analytics; + }; + }; + for (var t = 0; t < analytics.methods.length; t++) { + var e = analytics.methods[t]; + analytics[e] = analytics.factory(e); } - }(); - </script> + analytics.load = function(t) { + var e = document.createElement('script'); + e.type = 'text/javascript'; + e.async = !0; + e.src = + ('https:' === document.location.protocol ? 'https://' : 'http://') + + 'cdn.segment.com/analytics.js/v1/' + + t + + '/analytics.min.js'; + var n = document.getElementsByTagName('script')[0]; + n.parentNode.insertBefore(e, n); + }; + analytics.SNIPPET_VERSION = '4.0.0'; + analytics.load('T6jtT2F2iMrw9FDJ8exE9Uu1mLN5qd8n'); + analytics.page(); + } +})(); +</script> <!-- End Segment.io --> <!-- Main --> <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script> </body> -</html>
\ No newline at end of file +</html> diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index b1367be4f..a412007f2 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -228,52 +228,54 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { openSecondary={true} onRequestChange={this._onMenuButtonClick.bind(this)} > - {this._renderPortalMenu()} - {this._renderDocsMenu()} - {this._renderWiki()} - <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}> - Website - </div> - <Link to={WebsitePaths.Home} className="text-decoration-none"> - <MenuItem className="py2">Home</MenuItem> - </Link> - <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none"> - <MenuItem className="py2">Wiki</MenuItem> - </Link> - {!this._isViewing0xjsDocs() && ( - <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <MenuItem className="py2">0x.js Docs</MenuItem> + <div className="clearfix"> + {this._renderPortalMenu()} + {this._renderDocsMenu()} + {this._renderWiki()} + <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}> + Website + </div> + <Link to={WebsitePaths.Home} className="text-decoration-none"> + <MenuItem className="py2">Home</MenuItem> </Link> - )} - {!this._isViewingConnectDocs() && ( - <Link to={WebsitePaths.Connect} className="text-decoration-none"> - <MenuItem className="py2">0x Connect Docs</MenuItem> + <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none"> + <MenuItem className="py2">Wiki</MenuItem> </Link> - )} - {!this._isViewingSmartContractsDocs() && ( - <Link to={WebsitePaths.SmartContracts} className="text-decoration-none"> - <MenuItem className="py2">Smart Contract Docs</MenuItem> + {!this._isViewing0xjsDocs() && ( + <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> + <MenuItem className="py2">0x.js Docs</MenuItem> + </Link> + )} + {!this._isViewingConnectDocs() && ( + <Link to={WebsitePaths.Connect} className="text-decoration-none"> + <MenuItem className="py2">0x Connect Docs</MenuItem> + </Link> + )} + {!this._isViewingSmartContractsDocs() && ( + <Link to={WebsitePaths.SmartContracts} className="text-decoration-none"> + <MenuItem className="py2">Smart Contract Docs</MenuItem> + </Link> + )} + {!this._isViewingPortal() && ( + <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none"> + <MenuItem className="py2">Portal DApp</MenuItem> + </Link> + )} + <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}> + <MenuItem className="py2">Whitepaper</MenuItem> + </a> + <Link to={`${WebsitePaths.About}`} className="text-decoration-none"> + <MenuItem className="py2">About</MenuItem> </Link> - )} - {!this._isViewingPortal() && ( - <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none"> - <MenuItem className="py2">Portal DApp</MenuItem> + <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}> + <MenuItem className="py2">Blog</MenuItem> + </a> + <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none"> + <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}> + FAQ + </MenuItem> </Link> - )} - <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}> - <MenuItem className="py2">Whitepaper</MenuItem> - </a> - <Link to={`${WebsitePaths.About}`} className="text-decoration-none"> - <MenuItem className="py2">About</MenuItem> - </Link> - <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}> - <MenuItem className="py2">Blog</MenuItem> - </a> - <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none"> - <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}> - FAQ - </MenuItem> - </Link> + </div> </Drawer> ); } @@ -288,12 +290,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { const sectionTitle = `${this.props.docsInfo.displayName} Docs`; return ( <div className="lg-hide md-hide"> - <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}> - {sectionTitle} - </div> <NestedSidebarMenu topLevelMenu={this.props.menu} menuSubsectionsBySection={this.props.menuSubsectionsBySection} + title={this.props.docsInfo.displayName} shouldDisplaySectionHeaders={false} onMenuItemClick={this._onMenuButtonClick.bind(this)} selectedVersion={this.props.docsVersion} @@ -310,12 +310,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { return ( <div className="lg-hide md-hide"> - <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}> - 0x Protocol Wiki - </div> <NestedSidebarMenu topLevelMenu={this.props.menuSubsectionsBySection} menuSubsectionsBySection={this.props.menuSubsectionsBySection} + title="Wiki" shouldDisplaySectionHeaders={false} onMenuItemClick={this._onMenuButtonClick.bind(this)} /> diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx index 7f7ea006e..056d741e0 100644 --- a/packages/website/ts/components/ui/badge.tsx +++ b/packages/website/ts/components/ui/badge.tsx @@ -8,7 +8,6 @@ const styles: Styles = { fontSize: 11, height: 10, borderRadius: 5, - marginTop: 25, lineHeight: 0.9, fontFamily: 'Roboto Mono', marginLeft: 3, diff --git a/packages/website/ts/containers/connect_documentation.tsx b/packages/website/ts/containers/connect_documentation.tsx index 22ba4a7a1..79eafa431 100644 --- a/packages/website/ts/containers/connect_documentation.tsx +++ b/packages/website/ts/containers/connect_documentation.tsx @@ -6,7 +6,8 @@ import { DocsInfo } from 'ts/pages/documentation/docs_info'; import { Documentation as DocumentationComponent, DocumentationAllProps } from 'ts/pages/documentation/documentation'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocsInfoConfig, WebsitePaths } from 'ts/types'; +import { DocsInfoConfig, Environments, WebsitePaths } from 'ts/types'; +import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { typeDocUtils } from 'ts/utils/typedoc_utils'; @@ -23,12 +24,16 @@ const connectDocSections = { types: constants.TYPES_SECTION_NAME, }; +const s3BucketName = + configs.ENVIRONMENT === Environments.DEVELOPMENT ? 'staging-connect-docs-jsons' : 'connect-docs-jsons'; +const docsJsonRoot = `https://s3.amazonaws.com/${s3BucketName}`; + const docsInfoConfig: DocsInfoConfig = { displayName: '0x Connect', subPackageName: 'connect', packageUrl: 'https://github.com/0xProject/0x.js', websitePath: WebsitePaths.Connect, - docsJsonRoot: 'https://s3.amazonaws.com/connect-docs-jsons', + docsJsonRoot, menu: { introduction: [connectDocSections.introduction], install: [connectDocSections.installation], @@ -51,11 +56,14 @@ const docsInfoConfig: DocsInfoConfig = { 'OrderbookChannelSubscriptionOpts', 'OrderbookRequest', 'OrderbookResponse', + 'OrdersRequest', 'OrdersRequestOpts', 'PagedRequestOpts', 'TokenPairsItem', + 'TokenPairsRequest', 'TokenPairsRequestOpts', 'TokenTradeInfo', + 'WebSocketOrderbookChannelConfig', 'Order', 'SignedOrder', 'ECSignature', diff --git a/packages/website/ts/containers/zero_ex_js_documentation.tsx b/packages/website/ts/containers/zero_ex_js_documentation.tsx index 96c8c257d..eee2c7cc8 100644 --- a/packages/website/ts/containers/zero_ex_js_documentation.tsx +++ b/packages/website/ts/containers/zero_ex_js_documentation.tsx @@ -6,7 +6,8 @@ import { DocsInfo } from 'ts/pages/documentation/docs_info'; import { Documentation as DocumentationComponent, DocumentationAllProps } from 'ts/pages/documentation/documentation'; import { Dispatcher } from 'ts/redux/dispatcher'; import { State } from 'ts/redux/reducer'; -import { DocsInfoConfig, WebsitePaths } from 'ts/types'; +import { DocsInfoConfig, Environments, WebsitePaths } from 'ts/types'; +import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { typeDocUtils } from 'ts/utils/typedoc_utils'; @@ -35,12 +36,15 @@ const zeroExJsDocSections = { types: constants.TYPES_SECTION_NAME, }; +const s3BucketName = configs.ENVIRONMENT === Environments.DEVELOPMENT ? 'staging-0xjs-docs-jsons' : '0xjs-docs-jsons'; +const docsJsonRoot = `https://s3.amazonaws.com/${s3BucketName}`; + const docsInfoConfig: DocsInfoConfig = { displayName: '0x.js', packageUrl: 'https://github.com/0xProject/0x.js', subPackageName: '0x.js', websitePath: WebsitePaths.ZeroExJs, - docsJsonRoot: 'https://s3.amazonaws.com/0xjs-docs-jsons', + docsJsonRoot, menu: { introduction: [zeroExJsDocSections.introduction], install: [zeroExJsDocSections.installation], diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx index 7ad1d3b9c..da3728a60 100644 --- a/packages/website/ts/pages/documentation/documentation.tsx +++ b/packages/website/ts/pages/documentation/documentation.tsx @@ -37,12 +37,14 @@ import { constants } from 'ts/utils/constants'; import { docUtils } from 'ts/utils/doc_utils'; 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, [Networks.Ropsten]: colors.red, [Networks.Mainnet]: colors.turquois, + [Networks.Rinkeby]: colors.darkYellow, }; export interface DocumentationAllProps { @@ -67,7 +69,7 @@ const styles: Styles = { right: 0, overflowZ: 'hidden', overflowY: 'scroll', - minHeight: 'calc(100vh - 1px)', + minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, WebkitOverflowScrolling: 'touch', }, menuContainer: { @@ -111,7 +113,6 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume availableDocVersions={this.props.availableDocVersions} menu={this.props.docsInfo.getMenu(this.props.docsVersion)} menuSubsectionsBySection={menuSubsectionsBySection} - shouldFullWidth={true} docsInfo={this.props.docsInfo} /> {_.isUndefined(this.state.docAgnosticFormat) ? ( @@ -129,30 +130,41 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume </div> </div> ) : ( - <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}> - <div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide"> + <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}> + <div + className="mx-auto max-width-4 flex" + style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }} + > <div - className="border-right absolute" - style={{ ...styles.menuContainer, ...styles.mainContainers }} + className="relative sm-hide xs-hide" + style={{ width: '36%', height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }} > - <NestedSidebarMenu - selectedVersion={this.props.docsVersion} - versions={this.props.availableDocVersions} - topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)} - menuSubsectionsBySection={menuSubsectionsBySection} - docPath={this.props.docsInfo.websitePath} - /> + <div + className="border-right absolute" + style={{ + ...styles.menuContainer, + ...styles.mainContainers, + height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, + }} + > + <NestedSidebarMenu + selectedVersion={this.props.docsVersion} + versions={this.props.availableDocVersions} + title={this.props.docsInfo.displayName} + topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)} + menuSubsectionsBySection={menuSubsectionsBySection} + docPath={this.props.docsInfo.websitePath} + /> + </div> </div> - </div> - <div className="relative col lg-col-9 md-col-9 sm-col-12 col-12"> - <div id="documentation" style={styles.mainContainers} className="absolute"> - <div id={SCROLL_TOP_ID} /> - <h1 className="md-pl2 sm-pl3"> - <a href={this.props.docsInfo.packageUrl} target="_blank"> - {this.props.docsInfo.displayName} - </a> - </h1> - {this._renderDocumentation()} + <div + 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} /> + {this._renderDocumentation()} + </div> </div> </div> </div> @@ -220,7 +232,7 @@ export class Documentation extends React.Component<DocumentationAllProps, Docume }); return ( <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3"> - <div className="flex"> + <div className="flex pb2"> <div style={{ marginRight: 7 }}> <SectionHeader sectionName={sectionName} /> </div> diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx index dfde5931b..1bc6aa4f4 100644 --- a/packages/website/ts/pages/documentation/method_block.tsx +++ b/packages/website/ts/pages/documentation/method_block.tsx @@ -28,8 +28,7 @@ const styles: Styles = { color: colors.white, height: 11, borderRadius: 14, - marginTop: 19, - lineHeight: 0.8, + lineHeight: 0.9, }, }; @@ -55,16 +54,18 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt onMouseOut={this._setAnchorVisibility.bind(this, false)} > {!method.isConstructor && ( - <div className="flex"> + <div className="flex pb2 pt2"> {(method as TypescriptMethod).isStatic && this._renderChip('Static')} {(method as SolidityMethod).isConstant && this._renderChip('Constant')} {(method as SolidityMethod).isPayable && this._renderChip('Payable')} - <AnchorTitle - headerSize={HeaderSizes.H3} - title={method.name} - id={`${this.props.sectionName}-${method.name}`} - shouldShowAnchor={this.state.shouldShowAnchor} - /> + <div style={{ lineHeight: 1.3 }}> + <AnchorTitle + headerSize={HeaderSizes.H3} + title={method.name} + id={`${this.props.sectionName}-${method.name}`} + shouldShowAnchor={this.state.shouldShowAnchor} + /> + </div> </div> )} <code className="hljs"> @@ -121,12 +122,17 @@ export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockSt style={{ borderBottom: '1px solid #f0f4f7' }} > <div className="pl2 col lg-col-4 md-col-4 sm-col-12 col-12"> - <div className="bold">{parameter.name}</div> + <div + className="bold" + style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }} + > + {parameter.name} + </div> <div className="pt1" style={{ color: colors.grey, fontSize: 14 }}> {isOptional && 'optional'} </div> </div> - <div className="col lg-col-8 md-col-8 sm-col-12 col-12"> + <div className="col lg-col-8 md-col-8 sm-col-12 col-12" style={{ paddingLeft: 5 }}> {parameter.comment && <Comment comment={parameter.comment} />} </div> </div> diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx index 041dcd093..22294e428 100644 --- a/packages/website/ts/pages/documentation/method_signature.tsx +++ b/packages/website/ts/pages/documentation/method_signature.tsx @@ -1,5 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; +import * as ReactDOM from 'react-dom'; import { DocsInfo } from 'ts/pages/documentation/docs_info'; import { Type } from 'ts/pages/documentation/type'; import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types'; @@ -22,26 +23,52 @@ const defaultProps = { export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSignatureProps) => { const sectionName = constants.TYPES_SECTION_NAME; const parameters = renderParameters(props.method, props.docsInfo, sectionName, props.typeDefinitionByName); - const paramString = _.reduce(parameters, (prev: React.ReactNode, curr: React.ReactNode) => { - return [prev, ', ', curr]; + const paramStringArray: any[] = []; + // HACK: For now we don't put params on newlines if there are less then 2 of them. + // Ideally we would check the character length of the resulting method signature and + // if it exceeds the available space, put params on their own lines. + const hasMoreThenTwoParams = parameters.length > 2; + _.each(parameters, (param: React.ReactNode, i: number) => { + const finalParam = hasMoreThenTwoParams ? ( + <span className="pl2" key={`param-${i}`}> + {param} + </span> + ) : ( + param + ); + paramStringArray.push(finalParam); + const comma = hasMoreThenTwoParams ? ( + <span key={`param-comma-${i}`}> + , <br /> + </span> + ) : ( + ', ' + ); + paramStringArray.push(comma); }); + if (!hasMoreThenTwoParams) { + paramStringArray.pop(); + } const methodName = props.shouldHideMethodName ? '' : props.method.name; const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter) ? undefined : renderTypeParameter(props.method, props.docsInfo, sectionName, props.typeDefinitionByName); return ( - <span> + <span style={{ fontSize: 15 }}> {props.method.callPath} {methodName} - {typeParameterIfExists}({paramString}) - {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '} + {typeParameterIfExists}({hasMoreThenTwoParams && <br />} + {paramStringArray}) {props.method.returnType && ( - <Type - type={props.method.returnType} - sectionName={sectionName} - typeDefinitionByName={props.typeDefinitionByName} - docsInfo={props.docsInfo} - /> + <span> + {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '} + <Type + type={props.method.returnType} + sectionName={sectionName} + typeDefinitionByName={props.typeDefinitionByName} + docsInfo={props.docsInfo} + /> + </span> )} </span> ); diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx index e989e7129..b306fa053 100644 --- a/packages/website/ts/pages/documentation/type.tsx +++ b/packages/website/ts/pages/documentation/type.tsx @@ -118,6 +118,23 @@ export function Type(props: TypeProps): any { typeName = type.name; break; + case TypeDocTypes.Intersection: + const intersectionsTypes = _.map(type.types, t => { + return ( + <Type + key={`type-${t.name}-${t.value}-${t.typeDocType}`} + type={t} + sectionName={props.sectionName} + typeDefinitionByName={props.typeDefinitionByName} + docsInfo={props.docsInfo} + /> + ); + }); + typeName = _.reduce(intersectionsTypes, (prev: React.ReactNode, curr: React.ReactNode) => { + return [prev, '&', curr]; + }); + break; + default: throw utils.spawnSwitchErr('type.typeDocType', type.typeDocType); } diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx index db5be1f59..0270618a0 100644 --- a/packages/website/ts/pages/shared/anchor_title.tsx +++ b/packages/website/ts/pages/shared/anchor_title.tsx @@ -34,18 +34,13 @@ const styles: Styles = { }, h1: { fontSize: '1.8em', - WebkitMarginBefore: '0.83em', - WebkitMarginAfter: '0.83em', }, h2: { fontSize: '1.5em', - WebkitMarginBefore: '0.83em', - WebkitMarginAfter: '0.83em', + fontWeight: 400, }, h3: { fontSize: '1.17em', - WebkitMarginBefore: '1em', - WebkitMarginAfter: '1em', }, }; diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx index be96fda16..98ca3aee6 100644 --- a/packages/website/ts/pages/shared/markdown_code_block.tsx +++ b/packages/website/ts/pages/shared/markdown_code_block.tsx @@ -17,7 +17,7 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M } public render() { return ( - <span style={{ fontSize: 16 }}> + <span style={{ fontSize: 14 }}> <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight> </span> ); diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx index 5487dc8cc..4d7d8b4ca 100644 --- a/packages/website/ts/pages/shared/markdown_section.tsx +++ b/packages/website/ts/pages/shared/markdown_section.tsx @@ -6,6 +6,7 @@ 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 { HeaderSizes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; import { utils } from 'ts/utils/utils'; interface MarkdownSectionProps { @@ -34,14 +35,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd const id = utils.getIdFromName(sectionName); return ( <div - className="pt2 pr3 md-pl2 sm-pl3 overflow-hidden" + className="md-px1 sm-px2 overflow-hidden" onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > <ScrollElement name={id}> - <div className="clearfix"> + <div className="clearfix pt3"> <div className="col lg-col-8 md-col-8 sm-col-12"> - <span style={{ textTransform: 'capitalize' }}> + <span style={{ textTransform: 'capitalize', color: colors.grey700 }}> <AnchorTitle headerSize={this.props.headerSize} title={sectionName} @@ -50,17 +51,19 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd /> </span> </div> - <div className="col col-4 sm-hide xs-hide py2 right-align"> + <div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}> {!_.isUndefined(this.props.githubLink) && ( - <RaisedButton + <a href={this.props.githubLink} target="_blank" - label="Edit on Github" - icon={<i className="zmdi zmdi-github" style={{ fontSize: 23 }} />} - /> + style={{ color: colors.linkBlue, textDecoration: 'none', lineHeight: 2.1 }} + > + Edit on Github + </a> )} </div> </div> + <hr style={{ border: `1px solid ${colors.lightestGrey}` }} /> <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} /> </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 849c33504..ba794ee9f 100644 --- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx +++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx @@ -11,12 +11,12 @@ import { utils } from 'ts/utils/utils'; interface NestedSidebarMenuProps { topLevelMenu: { [topLevel: string]: string[] }; menuSubsectionsBySection: MenuSubsectionsBySection; + title: string; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; selectedVersion?: string; versions?: string[]; docPath?: string; - isSectionHeaderClickable?: boolean; } interface NestedSidebarMenuState {} @@ -29,10 +29,20 @@ const styles: Styles = { minHeight: 48, }, menuItemInnerDivWithHeaders: { + color: colors.grey800, + fontSize: 14, lineHeight: 2, + padding: 0, }, }; +const titleToIcon: { [title: string]: string } = { + '0x.js': 'zeroExJs.png', + '0x Connect': 'connect.png', + '0x Smart Contracts': 'contracts.png', + Wiki: 'wiki.png', +}; + export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> { public static defaultProps: Partial<NestedSidebarMenuProps> = { shouldDisplaySectionHeaders: true, @@ -44,17 +54,10 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N if (this.props.shouldDisplaySectionHeaders) { const id = utils.getIdFromName(sectionName); return ( - <div key={`section-${sectionName}`} className="py1"> - <ScrollLink - to={id} - offset={-20} - duration={constants.DOCS_SCROLL_DURATION_MS} - containerId={constants.DOCS_CONTAINER_ID} - > - <div style={{ color: colors.grey, cursor: 'pointer' }} className="pb1"> - {finalSectionName.toUpperCase()} - </div> - </ScrollLink> + <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}> + <div style={{ fontWeight: 'bold', fontSize: 15 }} className="py1"> + {finalSectionName.toUpperCase()} + </div> {this._renderMenuItems(menuItems)} </div> ); @@ -64,6 +67,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N }); return ( <div> + {this._renderEmblem()} {!_.isUndefined(this.props.versions) && !_.isUndefined(this.props.selectedVersion) && !_.isUndefined(this.props.docPath) && ( @@ -73,7 +77,32 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N docPath={this.props.docPath} /> )} - {navigation} + <div className="pl1">{navigation}</div> + </div> + ); + } + private _renderEmblem() { + return ( + <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}> + <div className="flex" style={{ fontSize: 25 }}> + <div className="robotoMono" style={{ fontWeight: 'bold' }}> + 0x + </div> + <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}> + docs + </div> + </div> + <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 14, height: 17 }}> + | + </div> + <div className="flex"> + <div> + <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="24" /> + </div> + <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}> + {this.props.title} + </div> + </div> </div> ); } @@ -132,7 +161,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N onTouchTap={this._onMenuItemClick.bind(this, name)} style={{ minHeight: 35 }} innerDivStyle={{ - paddingLeft: 36, + paddingLeft: 16, fontSize: 14, lineHeight: '35px', }} diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx index daf5c27a7..bbbda6eee 100644 --- a/packages/website/ts/pages/wiki/wiki.tsx +++ b/packages/website/ts/pages/wiki/wiki.tsx @@ -1,5 +1,6 @@ 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 { scroller } from 'react-scroll'; @@ -13,6 +14,7 @@ import { configs } from 'ts/utils/configs'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; +const TOP_BAR_HEIGHT = 60; const WIKI_NOT_READY_BACKOUT_TIMEOUT_MS = 5000; export interface WikiProps { @@ -22,6 +24,7 @@ export interface WikiProps { interface WikiState { articlesBySection: ArticlesBySection; + isHoveringSidebar: boolean; } const styles: Styles = { @@ -32,14 +35,13 @@ const styles: Styles = { bottom: 0, right: 0, overflowZ: 'hidden', - overflowY: 'scroll', - minHeight: 'calc(100vh - 1px)', + height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, WebkitOverflowScrolling: 'touch', }, menuContainer: { borderColor: colors.grey300, maxWidth: 330, - marginLeft: 20, + backgroundColor: colors.gray40, }, }; @@ -51,6 +53,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> { this._isUnmounted = false; this.state = { articlesBySection: undefined, + isHoveringSidebar: false, }; } public componentWillMount() { @@ -65,6 +68,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> { const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection) ? {} : this._getMenuSubsectionsBySection(this.state.articlesBySection); + const mainContainersStyle: React.CSSProperties = { + ...styles.mainContainers, + overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', + }; return ( <div> <DocumentTitle title="0x Protocol Wiki" /> @@ -72,10 +79,9 @@ export class Wiki extends React.Component<WikiProps, WikiState> { blockchainIsLoaded={false} location={this.props.location} menuSubsectionsBySection={menuSubsectionsBySection} - shouldFullWidth={true} /> {_.isUndefined(this.state.articlesBySection) ? ( - <div className="col col-12" style={styles.mainContainers}> + <div className="col col-12" style={mainContainersStyle}> <div className="relative sm-px2 sm-pt2 sm-m1" style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }} @@ -89,28 +95,50 @@ export class Wiki extends React.Component<WikiProps, WikiState> { </div> </div> ) : ( - <div className="mx-auto flex" style={{ color: colors.grey800, height: 43 }}> - <div className="relative col md-col-3 lg-col-3 lg-pl0 md-pl1 sm-hide xs-hide"> + <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}> + <div + className="mx-auto max-width-4 flex" + style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }} + > <div - className="border-right absolute pt2" - style={{ ...styles.menuContainer, ...styles.mainContainers }} + className="relative lg-pl0 md-pl1 sm-hide xs-hide" + style={{ height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, width: '36%' }} > - <NestedSidebarMenu - topLevelMenu={menuSubsectionsBySection} - menuSubsectionsBySection={menuSubsectionsBySection} - isSectionHeaderClickable={true} - /> + <div + className="absolute" + style={{ + ...styles.menuContainer, + ...mainContainersStyle, + height: 'calc(100vh - 76px)', + }} + onMouseEnter={this._onSidebarHover.bind(this)} + onMouseLeave={this._onSidebarHoverOff.bind(this)} + > + <NestedSidebarMenu + topLevelMenu={menuSubsectionsBySection} + menuSubsectionsBySection={menuSubsectionsBySection} + title="Wiki" + /> + </div> </div> - </div> - <div className="relative col lg-col-9 md-col-9 sm-col-12 col-12"> - <div id="documentation" style={styles.mainContainers} className="absolute"> - <div id="0xProtocolWiki" /> - <h1 className="md-pl2 sm-pl3"> - <a href={constants.URL_GITHUB_WIKI} target="_blank"> - 0x Protocol Wiki - </a> - </h1> - <div id="wiki">{this._renderWikiArticles()}</div> + <div + className="relative" + style={{ + width: '100%', + height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, + backgroundColor: 'white', + }} + > + <div + id="documentation" + style={{ ...mainContainersStyle, overflow: 'auto' }} + className="absolute" + > + <div id="0xProtocolWiki" /> + <div id="wiki" style={{ paddingRight: 2 }}> + {this._renderWikiArticles()} + </div> + </div> </div> </div> </div> @@ -135,18 +163,22 @@ export class Wiki extends React.Component<WikiProps, WikiState> { headerSize={HeaderSizes.H2} githubLink={githubLink} /> - <div className="mb4 mt3 p3 center" style={{ backgroundColor: colors.lightestGrey }}> - See a way to make this article better?{' '} - <a href={githubLink} target="_blank"> - Edit here → - </a> + <div className="clearfix mb3 mt2 p3 mx-auto lg-flex md-flex sm-pb4" style={{ maxWidth: 390 }}> + <div className="sm-col sm-col-12 sm-center" style={{ opacity: 0.4, lineHeight: 2.5 }}> + See a way to improve this article? + </div> + <div className="sm-col sm-col-12 lg-col-7 md-col-7 sm-center sm-pt2"> + <RaisedButton href={githubLink} target="_blank" label="Edit on Github" /> + </div> </div> </div> ); }); return ( - <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3"> - <SectionHeader sectionName={sectionName} headerSize={HeaderSizes.H1} /> + <div key={`section-${sectionName}`} className="py2 md-px1 sm-px2"> + {/* <div className="pl2"> + <SectionHeader sectionName={sectionName} headerSize={HeaderSizes.H1} /> + </div> */} {renderedArticles} </div> ); @@ -203,4 +235,14 @@ export class Wiki extends React.Component<WikiProps, WikiState> { } return menuSubsectionsBySection; } + private _onSidebarHover(event: React.FormEvent<HTMLInputElement>) { + this.setState({ + isHoveringSidebar: true, + }); + } + private _onSidebarHoverOff() { + this.setState({ + isHoveringSidebar: false, + }); + } } diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index 19fc24852..645c9cc11 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -324,6 +324,7 @@ export enum TypeDocTypes { Reflection = 'reflection', Union = 'union', TypeParameter = 'typeParameter', + Intersection = 'intersection', Unknown = 'unknown', } diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts index 58ce667e3..2eead95c7 100644 --- a/packages/website/ts/utils/colors.ts +++ b/packages/website/ts/utils/colors.ts @@ -2,12 +2,14 @@ import { colors as materialUiColors } from 'material-ui/styles'; export const colors = { ...materialUiColors, + gray40: '#F8F8F8', grey50: '#FAFAFA', grey100: '#F5F5F5', lightestGrey: '#F0F0F0', greyishPink: '#E6E5E5', grey300: '#E0E0E0', beigeWhite: '#E4E4E4', + grey350: '#cacaca', grey400: '#BDBDBD', lightGrey: '#BBBBBB', grey500: '#9E9E9E', @@ -15,6 +17,7 @@ export const colors = { darkGrey: '#818181', landingLinkGrey: '#919191', grey700: '#616161', + grey750: '#515151', grey800: '#424242', darkerGrey: '#393939', heroGrey: '#404040', @@ -23,6 +26,7 @@ export const colors = { dharmaDarkGrey: '#252525', lightBlue: '#60A4F4', lightBlueA700: '#0091EA', + linkBlue: '#1D5CDE', darkBlue: '#4D5481', turquois: '#058789', lightPurple: '#A81CA6', @@ -40,4 +44,5 @@ export const colors = { amber600: '#FFB300', orange: '#E69D00', amber800: '#FF8F00', + darkYellow: '#caca03', }; diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts index 69773eae7..8e359f8bd 100644 --- a/packages/website/ts/utils/configs.ts +++ b/packages/website/ts/utils/configs.ts @@ -39,6 +39,12 @@ export const configs = { [SmartContractDocSections.ZRXToken]: '0x6ff6c0ff1d68b964901f986d4c9fa3ac68346570', [SmartContractDocSections.TokenRegistry]: '0xf18e504561f4347bea557f3d4558f559dddbae7f', }, + [Networks.Rinkeby]: { + [SmartContractDocSections.Exchange]: '0x1d16ef40fac01cec8adac2ac49427b9384192c05', + [SmartContractDocSections.TokenTransferProxy]: '0xa8e9fa8f91e5ae138c74648c9c304f1c75003a8d', + [SmartContractDocSections.ZRXToken]: '0x00f58d6d585f84b2d7267940cede30ce2fe6eae8', + [SmartContractDocSections.TokenRegistry]: '0x4e9aad8184de8833365fea970cd9149372fdf1e6', + }, }, } as ContractAddresses, DEFAULT_DERIVATION_PATH: `44'/60'/0'`, |
