Merge pull request #124 from morganstanley/page-head-component

Page head component

readme.md

@@ -1,4 +1,5 @@
 # MessageBroker
+
 ![Lifecycle Active](https://badgen.net/badge/Lifecycle/Active/green)
 ![NPM](https://img.shields.io/npm/l/@morgan-stanley/message-broker)
 ![npm](https://img.shields.io/npm/v/@morgan-stanley/message-broker)
@@ -8,7 +9,7 @@
 
 MessageBroker provides framework agnostic, decoupled communication between publishers and subscribers. This library is fully type safe and works in both browsers and Node.js. MessageBroker is built ontop of [RxJS](https://rxjs.dev/guide/overview) providing access to observables and a comprehensive list of operators.
 
-Full documentation can be found at http://opensource.morganstanley.com/message-broker/
+Full documentation can be found at https://morganstanley.github.io/message-broker/
 
 ## Basic Usage
 

site/gatsby-config.js

@@ -2,12 +2,12 @@ const { plugins } = require('./src/config/base-gatsby-plugins');
 
 module.exports = {
   siteMetadata: {
-    title: `Project GitHub Pages Template`,
-    description: `Morgan Stanley Open Source Software`,
-    siteUrl: 'http://opensource.morganstanley.com',
+    title: `Message Broker`,
+    description: `a Typescript library which aims to provide asynchronous communication between typescript components`,
+    siteUrl: 'https://morganstanley.github.io',
     documentationUrl: false,
     //  documentationUrl: url-of.documentation.site,
   },
-  pathPrefix: `/`, // put GitHub project url slug here e.g. github.com/morganstanley/<project url slug>
+  pathPrefix: `/message-broker`, // put GitHub project url slug here e.g. github.com/morganstanley/<project url slug>
   plugins,
 };

site/src/components/header.js

@@ -19,7 +19,7 @@ const Header = ({ location, links }) => {
   return (
     <div className="content">
       <h1 className="logo">
-        <Link className="logo-link" to={`//opensource.morganstanley.com`}>
+        <Link className="logo-link" to={`//morganstanley.github.io`}>
           <StaticImage
             width={267}
             src="../images/logo-black.png"

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!) {