From 6a38f231b10dc971b6addc8f4a989f72976ce3f8 Mon Sep 17 00:00:00 2001
From: Piotr Janosz <janosz128@gmail.com>
Date: Wed, 24 Jul 2019 15:17:50 +0200
Subject: [PATCH] Extracted content wrapper

---
 packages/website/md/new-docs/usage.mdx          |  9 +++++++++
 .../components/docs/layout/content_wrapper.tsx  |  5 +++++
 packages/website/ts/pages/docs/tools.tsx        |  5 +----
 packages/website/ts/pages/docs/view.tsx         | 17 +++++------------
 4 files changed, 20 insertions(+), 16 deletions(-)
 create mode 100644 packages/website/ts/components/docs/layout/content_wrapper.tsx

diff --git a/packages/website/md/new-docs/usage.mdx b/packages/website/md/new-docs/usage.mdx
index bab412560f..25e8103a3a 100644
--- a/packages/website/md/new-docs/usage.mdx
+++ b/packages/website/md/new-docs/usage.mdx
@@ -1,3 +1,12 @@
+export const meta = {
+    id: 3523532,
+    title: 'Usage',
+    description: 'A relayer is any party or entity which hosts an off-chain orderbook.',
+    tags: ['Relayer', 'Trader', 'Protocol Developer'],
+    topics: ['Coordinator Model', 'Mesh'],
+    difficulty: 'Advanced',
+};
+
 ## Sol-coverage
 
 Sol-coverage uses transaction traces in order to figure out which lines of Solidity source code have been covered by your tests. In order for it to gather these traces, you must add the `CoverageSubprovider` to the [ProviderEngine](https://github.com/MetaMask/provider-engine) instance you use when running your Solidity tests. If you're unfamiliar with `ProviderEngine`, please read the [Web3 Provider explained](https://0x.org/wiki#Web3-Provider-Explained) wiki article.
diff --git a/packages/website/ts/components/docs/layout/content_wrapper.tsx b/packages/website/ts/components/docs/layout/content_wrapper.tsx
new file mode 100644
index 0000000000..3ff473d89c
--- /dev/null
+++ b/packages/website/ts/components/docs/layout/content_wrapper.tsx
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const ContentWrapper = styled.article`
+    min-width: 0;
+`;
diff --git a/packages/website/ts/pages/docs/tools.tsx b/packages/website/ts/pages/docs/tools.tsx
index b894c0fa0e..65c59f3808 100644
--- a/packages/website/ts/pages/docs/tools.tsx
+++ b/packages/website/ts/pages/docs/tools.tsx
@@ -8,6 +8,7 @@ import { Filters } from 'ts/components/docs/sidebar/filters';
 import { Heading } from 'ts/components/text';
 
 import { Columns } from 'ts/components/docs/layout/columns';
+import { ContentWrapper } from 'ts/components/docs/layout/content_wrapper';
 import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 import { Separator } from 'ts/components/docs/separator';
 
@@ -68,10 +69,6 @@ export const DocsTools: React.FC = () => {
     );
 };
 
-const ContentWrapper = styled.article`
-    min-width: 0;
-`;
-
 const FeaturedToolsWrapper = styled.div`
     margin-bottom: 50px;
 `;
diff --git a/packages/website/ts/pages/docs/view.tsx b/packages/website/ts/pages/docs/view.tsx
index 3112afbfa3..427f32c7f4 100644
--- a/packages/website/ts/pages/docs/view.tsx
+++ b/packages/website/ts/pages/docs/view.tsx
@@ -1,9 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { match } from 'react-router-dom';
-import styled from 'styled-components';
-
-import { utils } from '@0x/react-shared';
-import capitalize from 'lodash/capitalize';
 
 import { MDXProvider } from '@mdx-js/react';
 
@@ -20,6 +16,7 @@ import { Table } from 'ts/components/docs/mdx/table';
 import { UnorderedList } from 'ts/components/docs/mdx/unordered_list';
 
 import { Columns } from 'ts/components/docs/layout/columns';
+import { ContentWrapper } from 'ts/components/docs/layout/content_wrapper';
 import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
 
 import { Separator } from 'ts/components/docs/separator';
@@ -34,18 +31,18 @@ interface IDocsViewProps {
 interface IDocsViewState {
     Component: React.ReactNode;
     contents: IContents[];
+    title: string;
 }
 
 export const DocsView: React.FC<IDocsViewProps> = props => {
     const [state, setState] = useState<IDocsViewState>({
         Component: null,
         contents: [],
+        title: '',
     });
 
-    const { Component, contents } = state;
-
+    const { Component, contents, title } = state;
     const { page } = props.match.params;
-    const title = capitalize(utils.convertDashesToSpaces(page));
 
     useEffect(
         () => {
@@ -61,9 +58,9 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
             setState({
                 Component: component.default,
                 contents: component.tableOfContents(),
+                title: component.meta.title,
             });
         }
-        // @INFO: add error handling if needed
     };
 
     return (
@@ -85,10 +82,6 @@ export const DocsView: React.FC<IDocsViewProps> = props => {
     );
 };
 
-const ContentWrapper = styled.article`
-    min-width: 0;
-`;
-
 const mdxComponents = {
     code: Code,
     h1: H1,