Merge pull request #931 from 0xProject/feature/website/meta-tags

Add MetaTags component for easily adding customizable meta tags for a new page

7 files changed, 122 insertions, 72 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' }}>