docs: update title and meta information on page change (#474)

Author: jbadan

package-lock.json

@@ -120,6 +120,7 @@
     "react-dev-utils": "^6.1.1",
     "react-dom": "^16.6.3",
     "react-element-to-jsx-string": "^14.0.2",
+    "react-helmet-async": "^0.2.0",
     "react-markdown": "^4.0.6",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",

package.json

@@ -1,14 +1,17 @@
 import './App.scss';
 import '@babel/polyfill';
+import { HelmetProvider } from 'react-helmet-async';
 import { Routes } from './Routes';
 import React, { Component } from 'react';
 
 class App extends Component {
     render() {
         return (
-            <div className='frDocs-App'>
-                <Routes />
-            </div>
+            <HelmetProvider>
+                <div className='frDocs-App'>
+                    <Routes />
+                </div>
+            </HelmetProvider>
         );
     }
 }

src/_playground/App.js

@@ -364,7 +364,7 @@ export class Routes extends Component {
                             <a
                                 aria-label='Home'
                                 className='frDocs-Menu__logo'
-                                href='/'>
+                                href='/home'>
                                 Fundamental <span className='frDocs-Menu__logo--library'>React</span>
                             </a>
                             <span className='frDocs-Menu__spacer' />

src/_playground/Routes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import tocbot from 'tocbot';
-import { Contents, Description, Header, Heading, Import, Properties, Separator } from '..';
+import { Contents, Description, Header, Heading, Import, Properties, Separator, SetMeta } from '..';
 
 class ComponentPage extends React.Component {
     componentDidMount() {
@@ -26,6 +26,7 @@ class ComponentPage extends React.Component {
 
         return (
             <React.Fragment>
+                <SetMeta title={title} />
                 <Header>{title}</Header>
                 <Description>{description}</Description>
                 <Import sourceModulePath={sourceModulePath} />

src/_playground/documentation/Template/ComponentPage.js

@@ -2,7 +2,7 @@ import MarkdownImporter from '../Markdown/MarkdownImporter';
 import PropTypes from 'prop-types';
 import React from 'react';
 import tocbot from 'tocbot';
-import { Contents, Description, Header, Heading, Separator } from '../';
+import { Contents, Description, Header, Heading, Separator, SetMeta } from '../';
 
 class MarkdownPage extends React.Component {
     componentDidMount() {
@@ -31,6 +31,7 @@ class MarkdownPage extends React.Component {
         // we will pass our own heading renderer so we can inject id values for the TOC
         return (
             <React.Fragment>
+                <SetMeta title={title} />
                 {title && <Header>{title}</Header>}
                 {description && <Description>{description}</Description>}
                 <Contents />

src/_playground/documentation/Template/MarkdownPage.js

@@ -11,3 +11,4 @@ export { default as Properties } from './Properties/Properties';
 export { default as Separator } from './Separator/Separator';
 export { default as DocsText } from './DocsText/DocsText';
 export { default as DocsTile } from './DocsTile/DocsTile';
+export { default as SetMeta } from './utils/SetMeta';

src/_playground/documentation/index.js

@@ -0,0 +1,19 @@
+import Helmet from 'react-helmet-async';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const SetMeta = ({ title }) => {
+    return (
+        <Helmet
+            defaultTitle='Fundamental React'
+            titleTemplate='Fundamental React - %s'>
+            <title>{title}</title> />
+        </Helmet>
+    );
+};
+
+SetMeta.propTypes = {
+    title: PropTypes.string.isRequired
+};
+
+export default SetMeta;