Port page layout to the new system

Author: bebraw

components/page/page.jsx

@@ -11,62 +11,71 @@ import '../sidebar/sidebar-style';
 import '../sponsors/sponsors-style';
 import '../gitter/gitter-style';
 
-export default ({ section, page }) => (
-  <Container className="page">
+const Page = ({ page, section }) => {
+  const {
+    file: {
+      attributes: {
+        anchors,
+        contributors,
+        title,
+        related,
+      },
+      body
+    },
+    url,
+  } = page;
 
-    <Sponsors />
+  return (
+    <Container className="page">
+      <Sponsors />
+      <Interactive
+        id="components/sidebar/sidebar.jsx"
+        component={ Sidebar }
+        sectionName={ section.name }
+        pages={ section.pages().map(page => ({ url, title, anchors })) }
+        currentPage={ url } />
 
-    <Interactive
-      id="components/sidebar/sidebar.jsx"
-      component={ Sidebar }
-      sectionName={ section.name }
-      pages={ section.pages().map(page => ({
-        url: page.url,
-        title: page.title,
-        anchors: page.anchors
-      })) }
-      currentPage={ page.url.replace('/index', '') } />
+      <section className="page__content">
+        <h1>{ title }</h1>
 
-    <section className="page__content">
-      <h1>{ page.title }</h1>
+        <PageLinks
+          page={ page }
+          section={ section.name } />
 
-      <PageLinks
-        page={ page }
-        section={ section.name } />
+        <div dangerouslySetInnerHTML={{ __html: body }} />
 
-      <div dangerouslySetInnerHTML={{
-        __html: page.content
-      }} />
+        { related.length > 0 && (
+          <div>
+            <hr />
+            <h3>Further Reading</h3>
+            <ul>
+              {
+                related.map((link, index) => (
+                  <li key={ index }>
+                    <a href={ link.url }>
+                      { link.title }
+                    </a>
+                  </li>
+                ))
+              }
+            </ul>
+          </div>
+        )}
 
-      { page.related.length > 0 ? (
-        <div>
-          <hr />
-          <h3>Further Reading</h3>
-          <ul>
-            {
-              page.related.map((link, index) => (
-                <li key={ index }>
-                  <a href={ link.url }>
-                    { link.title }
-                  </a>
-                </li>
-              ))
-            }
-          </ul>
-        </div>
-      ) : null }
+        { contributors.length > 0 && (
+          <div>
+            <hr />
+            <h3>Contributors</h3>
+            <Contributors contributors={ contributors } />
+          </div>
+        )}
 
-      { page.contributors.length > 0 ? (
-        <div>
-          <hr />
-          <h3>Contributors</h3>
-          <Contributors contributors={ page.contributors } />
-        </div>
-      ) : null }
+        <Interactive
+          id="components/gitter/gitter.jsx"
+          component={ Gitter } />
+      </section>
+    </Container>
+  );
+};
 
-      <Interactive
-        id="components/gitter/gitter.jsx"
-        component={ Gitter } />
-    </section>
-  </Container>
-);
+export default Page;