page head component (#810)

site/src/components/page-head.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function PageHead({ title, children }) {
+  return (
+    <>
+      <title>{title} | Morgan Stanley</title>
+      {children}
+    </>
+  );
+}
+
+export default PageHead;

site/src/pages/404.js

@@ -3,6 +3,7 @@ import { graphql } from 'gatsby';
 
 import Hero from '../components/hero';
 import Layout from '../components/layout';
+import PageHead from '../components/page-head';
 
 const NotFoundPage = ({ data, location }) => {
   return (
@@ -18,7 +19,10 @@ const NotFoundPage = ({ data, location }) => {
 
 export default NotFoundPage;
 
-export const Head = () => <title>404: Not Found</title>;
+export const Head = ({ data }) => {
+  const title = `404: Not Found | ${data.site.siteMetadata.title}`;
+  return <PageHead title={title} />;
+};
 
 export const pageQuery = graphql`
   query {

site/src/pages/documentation/index.js

@@ -1,13 +1,14 @@
 import React, { useCallback, useState } from 'react';
 import { Link, graphql } from 'gatsby';
 import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
 
+import PageHead from '../../components/page-head';
 import Layout from '../../components/layout';
 import VersionSelect from '../../components/version-select';
 import { getDocsVersion } from '../../utils/version-docs';
 
 import HeroContent from '../../../content/hero.mdx';
-import { Toolbar } from '@mui/material';
 
 const DocumentationIndex = ({ data, location }) => {
   const allDocs = data.allMdx.nodes;
@@ -66,7 +67,10 @@ const DocumentationIndex = ({ data, location }) => {
 
 export default DocumentationIndex;
 
-export const Head = () => <title>Documentation</title>;
+export const Head = ({ data }) => {
+  const title = `Documentation | ${data.site.siteMetadata.title}`;
+  return <PageHead title={title} />;
+};
 
 export const pageQuery = graphql`
   query {

site/src/pages/index.js

@@ -8,6 +8,7 @@ import HeroContent from '../../content/hero.mdx';
 import UseCases from '../../content/use-cases.mdx';
 
 import Article from '../components/article';
+import PageHead from '../components/page-head';
 import Layout from '../components/layout';
 
 const SiteIndex = ({ data, location }) => {
@@ -34,6 +35,10 @@ const SiteIndex = ({ data, location }) => {
   );
 };
 
+export const Head = ({ data }) => (
+  <PageHead title={data.site.siteMetadata.title} />
+);
+
 export default SiteIndex;
 
 export const pageQuery = graphql`

site/src/pages/news/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link, graphql } from 'gatsby';
 
 import Layout from '../../components/layout';
+import PageHead from '../../components/page-head';
 
 import HeroContent from '../../../content/hero.mdx';
 
@@ -32,7 +33,9 @@ const NewsIndex = ({ data, location }) => {
 
 export default NewsIndex;
 
-export const Head = () => <title>News</title>;
+export const Head = ({ data }) => (
+  <PageHead title={data.site.siteMetadata.title} />
+);
 
 export const pageQuery = graphql`
   query {

site/src/templates/documentation.js

@@ -3,6 +3,7 @@ import { Link, navigate, graphql } from 'gatsby';
 import { Box } from '@mui/material';
 
 import Layout from '../components/layout';
+import PageHead from '../components/page-head';
 import VersionSelect from '../components/version-select';
 import { getCurrentVersion, getDocsVersion } from '../utils/version-docs';
 
@@ -83,12 +84,14 @@ const DocumentationTemplate = ({ children, data, pageContext, location }) => {
 
 export default DocumentationTemplate;
 
-export const Head = ({ pageContext }) => (
-  <>
-    <title>{pageContext.frontmatter.title}</title>
-    <meta name="description" content={pageContext.description} />
-  </>
-);
+export const Head = ({ data, pageContext }) => {
+  const title = `${pageContext.frontmatter.title} | ${data.site.siteMetadata.title}`;
+  return (
+    <PageHead title={title}>
+      <meta name="description" content={pageContext.description} />
+    </PageHead>
+  );
+};
 
 export const pageQuery = graphql`
   query ($id: String!) {

site/src/templates/news.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { graphql } from 'gatsby';
 
 import Layout from '../components/layout';
+import PageHead from '../components/page-head';
 import Section from '../components/section';
 
 const NewsPostTemplate = ({ children, data, pageContext, location }) => {
@@ -24,12 +25,14 @@ const NewsPostTemplate = ({ children, data, pageContext, location }) => {
 
 export default NewsPostTemplate;
 
-export const Head = ({ pageContext }) => (
-  <>
-    <title>{pageContext.title}</title>
-    <meta name="description" content={pageContext.description} />
-  </>
-);
+export const Head = ({ data, pageContext }) => {
+  const title = `${pageContext.frontmatter.title} | ${data.site.siteMetadata.title}`;
+  return (
+    <PageHead title={title}>
+      <meta name="description" content={pageContext.description} />
+    </PageHead>
+  );
+};
 
 export const pageQuery = graphql`
   query ($id: String!) {

site/src/templates/page.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { graphql } from 'gatsby';
 
 import Layout from '../components/layout';
+import PageHead from '../components/page-head';
 
 const PageTemplate = ({ title, data, location, children }) => {
   return (
@@ -18,12 +19,14 @@ const PageTemplate = ({ title, data, location, children }) => {
 
 export default PageTemplate;
 
-export const Head = ({ pageContext }) => (
-  <>
-    <title>{pageContext.title}</title>
-    <meta name="description" content={pageContext.description} />
-  </>
-);
+export const Head = ({ data, pageContext }) => {
+  const title = `${pageContext.frontmatter.title} | ${data.site.siteMetadata.title}`;
+  return (
+    <PageHead title={title}>
+      <meta name="description" content={pageContext.description} />
+    </PageHead>
+  );
+};
 
 export const pageQuery = graphql`
   query ($id: String!) {