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') 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 (
- + + Date: Mon, 30 Jul 2018 00:58:30 -0700 Subject: Fix jobs page overflow issue --- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/pages/jobs/jobs.tsx | 5 +++-- packages/website/ts/pages/jobs/join_0x.tsx | 4 ++-- 3 files changed, 6 insertions(+), 4 deletions(-) (limited to 'packages') 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) => void; + overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; } export const Container: React.StatelessComponent = props => { diff --git a/packages/website/ts/pages/jobs/jobs.tsx b/packages/website/ts/pages/jobs/jobs.tsx index b1a9874d2..cc4b1f04b 100644 --- a/packages/website/ts/pages/jobs/jobs.tsx +++ b/packages/website/ts/pages/jobs/jobs.tsx @@ -6,6 +6,7 @@ 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'; @@ -42,7 +43,7 @@ export class Jobs extends React.Component { } public render(): React.ReactNode { return ( -
+ {
-
+ ); } 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' }} > - + - +
-- cgit v1.2.3 From ca8a6665bad72fdb02c38f3c644cc18cc857cbaa Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Mon, 30 Jul 2018 13:26:35 -0700 Subject: Add back tags in html --- packages/website/public/index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'packages') diff --git a/packages/website/public/index.html b/packages/website/public/index.html index 14b2c9d44..a8a61f8ad 100644 --- a/packages/website/public/index.html +++ b/packages/website/public/index.html @@ -3,7 +3,13 @@ - + + + + + + + 0x: The Protocol for Trading Tokens -- cgit v1.2.3