From 5283dcce2ea5878ac45b9b297c0882f926feb344 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 27 Jul 2018 17:59:35 +0800 Subject: Create MetaTags component --- packages/website/package.json | 2 + packages/website/public/index.html | 8 +- packages/website/ts/components/meta_tags.tsx | 25 ++++ packages/website/ts/components/portal/portal.tsx | 6 +- packages/website/ts/index.tsx | 145 ++++++++++++----------- packages/website/ts/pages/jobs/jobs.tsx | 6 +- 6 files changed, 117 insertions(+), 75 deletions(-) create mode 100644 packages/website/ts/components/meta_tags.tsx (limited to 'packages/website') 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 @@ - - - - - - - 0x: The Protocol for Trading Tokens + 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 = ({ title, description, imgSrc }) => ( + + {title} + + + + + + + + +); + +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 { private _blockchain: Blockchain; @@ -226,7 +229,8 @@ export class Portal extends React.Component { : TokenVisibility.TRACKED; return ( - + + (/* 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( - -
- - -
- - - - - - - - - - - - - - - - - - +
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + - {/* Legacy endpoints */} - - - - - - - -
- - -
- , + {/* Legacy endpoints */} + + + + + + + +
+ + +
+ +
, 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 { public render(): React.ReactNode { return (
- + +