From 11d156e950e42763b896e5ba22d05ef0b27183d0 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Wed, 29 Jul 2020 19:03:45 -0700
Subject: [PATCH] feat: use PageLayout for ApiReferenceTemplate

---
 src/templates/ApiReferenceTemplate.js | 93 ++++++++++++++-------------
 1 file changed, 48 insertions(+), 45 deletions(-)

diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js
index 136d5eb40..857dbd8d5 100644
--- a/src/templates/ApiReferenceTemplate.js
+++ b/src/templates/ApiReferenceTemplate.js
@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import { CodeBlock } from '@newrelic/gatsby-theme-newrelic';
-import PageTitle from '../components/PageTitle';
+import PageLayout from '../components/PageLayout';
 import Markdown from '../components/Markdown';
 import MethodReference from '../components/MethodReference';
 import TypeDefReference from '../components/TypeDefReference';
@@ -28,55 +28,58 @@ const ApiReferenceTemplate = ({ data }) => {
   return (
     <>
       <SEO title={title} description={description} />
-      <PageTitle>{api}</PageTitle>
-
-      {apiDescription && (
-        <section
-          className={cx(
-            templateStyles.section,
-            templateStyles.description,
-            'intro-text'
+      <PageLayout type={PageLayout.TYPE.SINGLE_COLUMN}>
+        <PageLayout.Header title={api} />
+        <PageLayout.Content>
+          {apiDescription && (
+            <section
+              className={cx(
+                templateStyles.section,
+                templateStyles.description,
+                'intro-text'
+              )}
+            >
+              <Markdown source={apiDescription} />
+            </section>
           )}
-        >
-          <Markdown source={apiDescription} />
-        </section>
-      )}
 
-      <section className={templateStyles.section}>
-        <h2 className={templateStyles.sectionTitle}>Usage</h2>
-        <CodeBlock language="js">{usage}</CodeBlock>
-      </section>
+          <section className={templateStyles.section}>
+            <h2 className={templateStyles.sectionTitle}>Usage</h2>
+            <CodeBlock language="js">{usage}</CodeBlock>
+          </section>
 
-      {methods.length > 0 && (
-        <section className={templateStyles.section}>
-          <h2 className={templateStyles.sectionTitle}>API methods</h2>
-          {methods.map((method, i) => (
-            <MethodReference
-              key={i}
-              method={method}
-              className={templateStyles.section}
-            />
-          ))}
-        </section>
-      )}
+          {methods.length > 0 && (
+            <section className={templateStyles.section}>
+              <h2 className={templateStyles.sectionTitle}>API methods</h2>
+              {methods.map((method, i) => (
+                <MethodReference
+                  key={i}
+                  method={method}
+                  className={templateStyles.section}
+                />
+              ))}
+            </section>
+          )}
 
-      {typeDefs.length > 0 && (
-        <section className={templateStyles.section}>
-          <h2 className={templateStyles.sectionTitle}>Type definitions</h2>
-          {typeDefs.map((typeDef, i) => (
-            <TypeDefReference key={i} typeDef={typeDef} />
-          ))}
-        </section>
-      )}
+          {typeDefs.length > 0 && (
+            <section className={templateStyles.section}>
+              <h2 className={templateStyles.sectionTitle}>Type definitions</h2>
+              {typeDefs.map((typeDef, i) => (
+                <TypeDefReference key={i} typeDef={typeDef} />
+              ))}
+            </section>
+          )}
 
-      {constants.length > 0 && (
-        <section className={templateStyles.section}>
-          <h2 className={templateStyles.sectionTitle}>Constants</h2>
-          {constants.map((constant, i) => (
-            <ConstantReference key={i} constant={constant} />
-          ))}
-        </section>
-      )}
+          {constants.length > 0 && (
+            <section className={templateStyles.section}>
+              <h2 className={templateStyles.sectionTitle}>Constants</h2>
+              {constants.map((constant, i) => (
+                <ConstantReference key={i} constant={constant} />
+              ))}
+            </section>
+          )}
+        </PageLayout.Content>
+      </PageLayout>
     </>
   );
 };