Extracted content wrapper

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.

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;
+`;

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;
 `;

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,