feat: Add a PageTitle component and update the reference templates to…

… use them
newrelic · Jun 15, 2020 · 42fb2a1 · 42fb2a1
1 parent 1ecfb6e
commit 42fb2a1
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/src/components/PageTitle.js b/src/components/PageTitle.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './PageTitle.module.scss';
+
+const PageTitle = ({ children }) => (
+  <h1 className={styles.pageTitle}>{children}</h1>
+);
+
+PageTitle.propTypes = {
+  children: PropTypes.node,
+};
+
+export default PageTitle;
diff --git a/src/components/PageTitle.module.scss b/src/components/PageTitle.module.scss
@@ -0,0 +1,4 @@
+.pageTitle {
+  font-size: 2.5rem;
+  margin-top: 0;
+}
diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import InlineCodeSnippet from '../components/InlineCodeSnippet';
 import ReactMarkdown from 'react-markdown';
 import Layout from '../components/Layout';
+import PageTitle from '../components/PageTitle';
 import MethodReference from '../components/MethodReference';
 import TypeDefReference from '../components/TypeDefReference';
 import ConstantReference from '../components/ConstantReference';
@@ -28,7 +29,7 @@ const ApiReferenceTemplate = ({ data }) => {
   return (
     <Layout>
       <SEO title={title} description={description} />
-      <h1>{api}</h1>
+      <PageTitle>{api}</PageTitle>
 
       <section
         className={cx(templateStyles.section, templateStyles.description)}

diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
@@ -6,6 +6,7 @@ import InlineCodeSnippet from '../components/InlineCodeSnippet';
 import ReactMarkdown from 'react-markdown';
 import ReferenceExample from '../components/ReferenceExample';
 import Layout from '../components/Layout';
+import PageTitle from '../components/PageTitle';
 import MethodReference from '../components/MethodReference';
 import SEO from '../components/Seo';
 import PropList from '../components/PropList';
@@ -38,7 +39,7 @@ const ComponentReferenceTemplate = ({ data }) => {
   return (
     <Layout>
       <SEO title={title} description={description} />
-      <h1>{component}</h1>
+      <PageTitle>{component}</PageTitle>
       <section
         className={cx(
           templateStyles.section,