aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-07-27 17:59:35 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-07-30 15:48:39 +0800
commit5283dcce2ea5878ac45b9b297c0882f926feb344 (patch)
tree719cfb9417d2508822d346c288ef69567d6178f1
parent48e538f5c7dc208775ec71635e4d4866b5907228 (diff)
downloaddexon-0x-contracts-5283dcce2ea5878ac45b9b297c0882f926feb344.tar.gz
dexon-0x-contracts-5283dcce2ea5878ac45b9b297c0882f926feb344.tar.zst
dexon-0x-contracts-5283dcce2ea5878ac45b9b297c0882f926feb344.zip
Create MetaTags component
Diffstat
-rw-r--r--packages/website/package.json2
-rw-r--r--packages/website/public/index.html8
-rw-r--r--packages/website/ts/components/meta_tags.tsx25
-rw-r--r--packages/website/ts/components/portal/portal.tsx6
-rw-r--r--packages/website/ts/index.tsx145
-rw-r--r--packages/website/ts/pages/jobs/jobs.tsx6
-rw-r--r--yarn.lock17
7 files changed, 133 insertions, 76 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/public/index.html b/packages/website/public/index.html
index a8a61f8ad..14b2c9d44 100644
--- a/packages/website/public/index.html
+++ b/packages/website/public/index.html
@@ -3,13 +3,7 @@
<head>
<meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="description" content="An Open Protocol For Decentralized Exchange On The Ethereum Blockchain" />
- <meta property="og:type" content="website" />
- <meta property="og:title" content="0x" />
- <meta property="og:description" content="An Open Protocol For Decentralized Exchange On The Ethereum Blockchain" />
- <meta property="og:image" content="/images/og_image.png" />
- <title>0x: The Protocol for Trading Tokens</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
<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/github-gist.css">
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/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..b1a9874d2 100644
--- a/packages/website/ts/pages/jobs/jobs.tsx
+++ b/packages/website/ts/pages/jobs/jobs.tsx
@@ -4,6 +4,7 @@ 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 { Benefits } from 'ts/pages/jobs/benefits';
import { Join0x } from 'ts/pages/jobs/join_0x';
@@ -16,6 +17,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;
@@ -40,7 +43,8 @@ export class Jobs extends React.Component<JobsProps, JobsState> {
public render(): React.ReactNode {
return (
<div>
- <DocumentTitle title="Careers at 0x" />
+ <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} />
+ <DocumentTitle title={DOCUMENT_TITLE} />
<TopBar
blockchainIsLoaded={false}
location={this.props.location}
diff --git a/yarn.lock b/yarn.lock
index 506cb2144..10db1da42 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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:
generated by cgit (git 2.34.1) at 2024-11-20 00:07:53 +0800