diff options
| -rw-r--r-- | packages/website/package.json | 2 | ||||
| -rw-r--r-- | packages/website/ts/components/meta_tags.tsx | 25 | ||||
| -rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 6 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/container.tsx | 1 | ||||
| -rw-r--r-- | packages/website/ts/index.tsx | 145 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/jobs.tsx | 11 | ||||
| -rw-r--r-- | packages/website/ts/pages/jobs/join_0x.tsx | 4 | ||||
| -rw-r--r-- | yarn.lock | 17 |
8 files changed, 138 insertions, 73 deletions
diff --git a/packages/website/package.json b/packages/website/package.json index 12c729308..13f1f5372 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -46,6 +46,7 @@ "react-copy-to-clipboard": "^4.2.3", "react-document-title": "^2.0.3", "react-dom": "15.6.1", + "react-helmet": "^5.2.0", "react-popper": "^1.0.0-beta.6", "react-redux": "^5.0.3", "react-router-dom": "^4.1.1", @@ -75,6 +76,7 @@ "@types/react": "16.3.13", "@types/react-copy-to-clipboard": "^4.2.0", "@types/react-dom": "^16.0.3", + "@types/react-helmet": "^5.0.6", "@types/react-redux": "^4.4.37", "@types/react-router-dom": "^4.0.4", "@types/react-scroll": "0.0.31", diff --git a/packages/website/ts/components/meta_tags.tsx b/packages/website/ts/components/meta_tags.tsx new file mode 100644 index 000000000..f6c43d23f --- /dev/null +++ b/packages/website/ts/components/meta_tags.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import { Helmet } from 'react-helmet'; + +export interface MetaTagsProps { + title: string; + description: string; + imgSrc?: string; +} + +export const MetaTags: React.StatelessComponent<MetaTagsProps> = ({ title, description, imgSrc }) => ( + <Helmet> + <title>{title}</title> + <meta name="description" content={description} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="og:type" content="website" /> + <meta property="og:image" content={imgSrc} /> + <meta name="twitter:site" content="@0xproject" /> + <meta name="twitter:image" content={imgSrc} /> + </Helmet> +); + +MetaTags.defaultProps = { + imgSrc: '/images/og_image.png', +}; diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index c61d04906..ff11880e3 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -12,6 +12,7 @@ import { PortalDisclaimerDialog } from 'ts/components/dialogs/portal_disclaimer_ import { EthWrappers } from 'ts/components/eth_wrappers'; import { FillOrder } from 'ts/components/fill_order'; import { AssetPicker } from 'ts/components/generate_order/asset_picker'; +import { MetaTags } from 'ts/components/meta_tags'; import { BackButton } from 'ts/components/portal/back_button'; import { Loading } from 'ts/components/portal/loading'; import { Menu, MenuTheme } from 'ts/components/portal/menu'; @@ -108,6 +109,8 @@ const LEFT_COLUMN_WIDTH = 346; const MENU_PADDING_LEFT = 185; const LARGE_LAYOUT_MAX_WIDTH = 1200; const SIDE_PADDING = 20; +const DOCUMENT_TITLE = '0x Portal'; +const DOCUMENT_DESCRIPTION = 'Learn about and trade on 0x Relayers'; export class Portal extends React.Component<PortalProps, PortalState> { private _blockchain: Blockchain; @@ -226,7 +229,8 @@ export class Portal extends React.Component<PortalProps, PortalState> { : TokenVisibility.TRACKED; return ( <Container> - <DocumentTitle title="0x Portal" /> + <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} /> + <DocumentTitle title={DOCUMENT_TITLE} /> <TopBar userAddress={this.props.userAddress} networkId={this.props.networkId} diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 540661ea5..f2ae68b70 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -35,6 +35,7 @@ export interface ContainerProps { cursor?: string; id?: string; onClick?: (event: React.MouseEvent<HTMLElement>) => void; + overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; } export const Container: React.StatelessComponent<ContainerProps> = props => { diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index ed52e28d2..c6d10452f 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -4,6 +4,7 @@ import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; import * as injectTapEventPlugin from 'react-tap-event-plugin'; +import { MetaTags } from 'ts/components/meta_tags'; import { About } from 'ts/containers/about'; import { FAQ } from 'ts/containers/faq'; import { Jobs } from 'ts/containers/jobs'; @@ -65,73 +66,85 @@ const LazyEthereumTypesDocumentation = createLazyComponent('Documentation', asyn System.import<any>(/* webpackChunkName: "ethereumTypesDocs" */ 'ts/containers/ethereum_types_documentation'), ); +const DOCUMENT_TITLE = '0x: The Protocol for Trading Tokens'; +const DOCUMENT_DESCRIPTION = 'An Open Protocol For Decentralized Exchange On The Ethereum Blockchain'; + render( - <Router> - <div> - <MuiThemeProvider muiTheme={muiTheme}> - <Provider store={store}> - <div> - <Switch> - <Route exact={true} path="/" component={Landing as any} /> - <Redirect from="/otc" to={`${WebsitePaths.Portal}`} /> - <Route path={WebsitePaths.Careers} component={Jobs as any} /> - <Route path={WebsitePaths.Portal} component={LazyPortal} /> - <Route path={WebsitePaths.FAQ} component={FAQ as any} /> - <Route path={WebsitePaths.About} component={About as any} /> - <Route path={WebsitePaths.Wiki} component={Wiki as any} /> - <Route path={`${WebsitePaths.ZeroExJs}/:version?`} component={LazyZeroExJSDocumentation} /> - <Route path={`${WebsitePaths.Connect}/:version?`} component={LazyConnectDocumentation} /> - <Route - path={`${WebsitePaths.SolCompiler}/:version?`} - component={LazySolCompilerDocumentation} - /> - <Route path={`${WebsitePaths.SolCov}/:version?`} component={LazySolCovDocumentation} /> - <Route - path={`${WebsitePaths.JSONSchemas}/:version?`} - component={LazyJSONSchemasDocumentation} - /> - <Route - path={`${WebsitePaths.Subproviders}/:version?`} - component={LazySubprovidersDocumentation} - /> - <Route - path={`${WebsitePaths.OrderUtils}/:version?`} - component={LazyOrderUtilsDocumentation} - /> - <Route - path={`${WebsitePaths.Web3Wrapper}/:version?`} - component={LazyWeb3WrapperDocumentation} - /> - <Route - path={`${WebsitePaths.SmartContracts}/:version?`} - component={LazySmartContractsDocumentation} - /> - <Route - path={`${WebsitePaths.EthereumTypes}/:version?`} - component={LazyEthereumTypesDocumentation} - /> + <div> + <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} /> + <Router> + <div> + <MuiThemeProvider muiTheme={muiTheme}> + <Provider store={store}> + <div> + <Switch> + <Route exact={true} path="/" component={Landing as any} /> + <Redirect from="/otc" to={`${WebsitePaths.Portal}`} /> + <Route path={WebsitePaths.Careers} component={Jobs as any} /> + <Route path={WebsitePaths.Portal} component={LazyPortal} /> + <Route path={WebsitePaths.FAQ} component={FAQ as any} /> + <Route path={WebsitePaths.About} component={About as any} /> + <Route path={WebsitePaths.Wiki} component={Wiki as any} /> + <Route + path={`${WebsitePaths.ZeroExJs}/:version?`} + component={LazyZeroExJSDocumentation} + /> + <Route + path={`${WebsitePaths.Connect}/:version?`} + component={LazyConnectDocumentation} + /> + <Route + path={`${WebsitePaths.SolCompiler}/:version?`} + component={LazySolCompilerDocumentation} + /> + <Route path={`${WebsitePaths.SolCov}/:version?`} component={LazySolCovDocumentation} /> + <Route + path={`${WebsitePaths.JSONSchemas}/:version?`} + component={LazyJSONSchemasDocumentation} + /> + <Route + path={`${WebsitePaths.Subproviders}/:version?`} + component={LazySubprovidersDocumentation} + /> + <Route + path={`${WebsitePaths.OrderUtils}/:version?`} + component={LazyOrderUtilsDocumentation} + /> + <Route + path={`${WebsitePaths.Web3Wrapper}/:version?`} + component={LazyWeb3WrapperDocumentation} + /> + <Route + path={`${WebsitePaths.SmartContracts}/:version?`} + component={LazySmartContractsDocumentation} + /> + <Route + path={`${WebsitePaths.EthereumTypes}/:version?`} + component={LazyEthereumTypesDocumentation} + /> - {/* Legacy endpoints */} - <Route - path={`${WebsiteLegacyPaths.ZeroExJs}/:version?`} - component={LazyZeroExJSDocumentation} - /> - <Route - path={`${WebsiteLegacyPaths.Web3Wrapper}/:version?`} - component={LazyWeb3WrapperDocumentation} - /> - <Route - path={`${WebsiteLegacyPaths.Deployer}/:version?`} - component={LazySolCompilerDocumentation} - /> - <Route path={WebsiteLegacyPaths.Jobs} component={Jobs as any} /> - <Route path={`${WebsitePaths.Docs}`} component={LazyZeroExJSDocumentation} /> - <Route component={NotFound as any} /> - </Switch> - </div> - </Provider> - </MuiThemeProvider> - </div> - </Router>, + {/* Legacy endpoints */} + <Route + path={`${WebsiteLegacyPaths.ZeroExJs}/:version?`} + component={LazyZeroExJSDocumentation} + /> + <Route + path={`${WebsiteLegacyPaths.Web3Wrapper}/:version?`} + component={LazyWeb3WrapperDocumentation} + /> + <Route + path={`${WebsiteLegacyPaths.Deployer}/:version?`} + component={LazySolCompilerDocumentation} + /> + <Route path={WebsiteLegacyPaths.Jobs} component={Jobs as any} /> + <Route path={`${WebsitePaths.Docs}`} component={LazyZeroExJSDocumentation} /> + <Route component={NotFound as any} /> + </Switch> + </div> + </Provider> + </MuiThemeProvider> + </div> + </Router> + </div>, document.getElementById('app'), ); diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index 5c45d79fa..cc4b1f04b 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -4,7 +4,9 @@ import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; import { Footer } from 'ts/components/footer'; +import { MetaTags } from 'ts/components/meta_tags'; import { TopBar } from 'ts/components/top_bar/top_bar'; +import { Container } from 'ts/components/ui/container'; import { Benefits } from 'ts/pages/jobs/benefits'; import { Join0x } from 'ts/pages/jobs/join_0x'; import { Mission } from 'ts/pages/jobs/mission'; @@ -16,6 +18,8 @@ import { utils } from 'ts/utils/utils'; const OPEN_POSITIONS_HASH = 'positions'; const THROTTLE_TIMEOUT = 100; +const DOCUMENT_TITLE = 'Careers at 0x'; +const DOCUMENT_DESCRIPTION = 'Join 0x in creating a tokenized world where all value can flow freely'; export interface JobsProps { location: Location; @@ -39,8 +43,9 @@ export class Jobs extends React.Component<JobsProps, JobsState> { } public render(): React.ReactNode { return ( - <div> - <DocumentTitle title="Careers at 0x" /> + <Container overflowX="hidden"> + <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} /> + <DocumentTitle title={DOCUMENT_TITLE} /> <TopBar blockchainIsLoaded={false} location={this.props.location} @@ -52,7 +57,7 @@ export class Jobs extends React.Component<JobsProps, JobsState> { <Benefits screenWidth={this.props.screenWidth} /> <OpenPositions hash={OPEN_POSITIONS_HASH} screenWidth={this.props.screenWidth} /> <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> - </div> + </Container> ); } private _onJoin0xCallToActionClick(): void { diff --git a/packages/website/ts/pages/jobs/join_0x.tsx b/packages/website/ts/pages/jobs/join_0x.tsx index daddb0dcf..ec8afbd93 100644 --- a/packages/website/ts/pages/jobs/join_0x.tsx +++ b/packages/website/ts/pages/jobs/join_0x.tsx @@ -20,10 +20,10 @@ export const Join0x = (props: Join0xProps) => ( className="mx-auto inline-block align-middle py4" style={{ lineHeight: '44px', textAlign: 'center', position: 'relative' }} > - <Container className="sm-hide xs-hide md-hide" position="absolute" left="100%" marginLeft="80px"> + <Container className="sm-hide xs-hide" position="absolute" left="100%" marginLeft="80px"> <Image src="images/jobs/hero-dots-right.svg" width="400px" /> </Container> - <Container className="sm-hide xs-hide md-hide" position="absolute" right="100%" marginRight="80px"> + <Container className="sm-hide xs-hide" position="absolute" right="100%" marginRight="80px"> <Image src="images/jobs/hero-dots-left.svg" width="400px" /> </Container> <div className="h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}> @@ -1202,6 +1202,12 @@ "@types/node" "*" "@types/react" "*" +"@types/react-helmet@^5.0.6": + version "5.0.6" + resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-5.0.6.tgz#49607cbb72e1bb7dcefa9174cb591434d3b6f0af" + dependencies: + "@types/react" "*" + "@types/react-redux@^4.4.37": version "4.4.47" resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-4.4.47.tgz#12af1677116e08d413fe2620d0a85560c8a0536e" @@ -10666,6 +10672,15 @@ react-event-listener@^0.4.5: prop-types "^15.5.4" warning "^3.0.0" +react-helmet@^5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.0.tgz#a81811df21313a6d55c5f058c4aeba5d6f3d97a7" + dependencies: + deep-equal "^1.0.1" + object-assign "^4.1.1" + prop-types "^15.5.4" + react-side-effect "^1.1.0" + react-highlight@0xproject/react-highlight: version "0.10.0" resolved "https://codeload.github.com/0xproject/react-highlight/tar.gz/83bbb4a09801abd341e2b9041cd884885a4a2098" @@ -10758,7 +10773,7 @@ react-scroll@^1.5.2: lodash.throttle "^4.1.1" prop-types "^15.5.8" -react-side-effect@^1.0.2: +react-side-effect@^1.0.2, react-side-effect@^1.1.0: version "1.1.5" resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d" dependencies: |