From fabbad2b2c3631028bb89d39c7060885f67d96db Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Tue, 2 Jul 2019 19:56:22 +0200
Subject: [PATCH] Tweak view to export metadata as object from mdx

---
 packages/website/md/new-docs/usage.mdx  |  6 ++---
 packages/website/ts/pages/docs/view.tsx | 34 +++++++++++++++----------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/packages/website/md/new-docs/usage.mdx b/packages/website/md/new-docs/usage.mdx
index b2f21b0d11..78dd1437b3 100644
--- a/packages/website/md/new-docs/usage.mdx
+++ b/packages/website/md/new-docs/usage.mdx
@@ -1,6 +1,6 @@
----
-title: 'Sol-coverage Usage'
----
+export const meta = {
+    title: 'Sol-coverage Usage',
+};
 
 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/pages/docs/view.tsx b/packages/website/ts/pages/docs/view.tsx
index 9f823519cc..0ee4507f40 100644
--- a/packages/website/ts/pages/docs/view.tsx
+++ b/packages/website/ts/pages/docs/view.tsx
@@ -44,11 +44,13 @@ interface Props {
 }
 
 interface State {
+    title: string;
     Component: JSX.Element | string;
 }
 
 export class DocsView extends React.Component<Props, State> {
     public state = {
+        title: '',
         Component: '',
         mdxComponents: {
             p: Paragraph,
@@ -63,18 +65,20 @@ export class DocsView extends React.Component<Props, State> {
         this._addComponentAsync(this.props.match.params.page);
     }
     public componentDidUpdate(prevProps: Props, prevState: State): void {
-        console.log(this.props);
+        if (prevProps.match.params.page !== this.props.match.params.page) {
+            this._addComponentAsync(this.props.match.params.page);
+        }
     }
     public render(): React.ReactNode {
-        const { Component, mdxComponents } = this.state;
+        const { title, Component, mdxComponents } = this.state;
         return (
             <SiteWrap theme="light">
                 <DocumentTitle {...documentConstants.DOCS} />
-                <Hero isHome={false} title={`Page Template`} description="This a subheader for the page" />
+                <Hero isHome={false} title={title} />
                 <Section maxWidth={'1030px'} isPadded={false} padding="0 0">
                     <Columns>
                         <aside>
-                            <ChapterLinks />
+                            <h3>Sidebar</h3>
                         </aside>
                         <article>
                             <MDXProvider components={mdxComponents}>{Component ? <Component /> : null}</MDXProvider>
@@ -85,17 +89,19 @@ export class DocsView extends React.Component<Props, State> {
         );
     }
     private async _addComponentAsync(name: string): Promise<void> {
-        return import(`../../../md/new-docs/${name}.mdx`)
-            .then(component => {
-                this.setState({
-                    Component: component.default,
-                });
-            })
-            .catch(() => {
-                this.setState({
-                    Component: '',
-                });
+        const component = await import(`../../../md/new-docs/${name}.mdx`).catch(e => {
+            return null;
+        });
+        if (!component) {
+            this.setState({
+                Component: '',
             });
+        }
+
+        this.setState({
+            title: component.meta.title,
+            Component: component.default,
+        });
     }
 }