added react-helmet and dynamic title and canonical url tags

react/components/AboutPage/index.js

@@ -1,10 +1,17 @@
 import React from 'react';
 import NavBar from 'containers/NavBar';
+import Helmet from 'react-helmet';
+
+const { site: { title, host } } = require('../../../config/speechConfig.js');
 
 class AboutPage extends React.Component {
   render () {
     return (
       <div>
+        <Helmet>
+          <title>{title} - About</title>
+          <link rel='canonical' href={`${host}/about`} />
+        </Helmet>
         <NavBar />
         <div className='row row--padded'>
           <div className='column column--5 column--med-10 align-content-top'>

react/components/FourOhFourPage/index.js

@@ -1,10 +1,16 @@
 import React from 'react';
 import NavBar from 'containers/NavBar';
+import Helmet from 'react-helmet';
+const { site: { title, host } } = require('../../../config/speechConfig.js');
 
 class FourOhForPage extends React.Component {
   render () {
     return (
       <div>
+        <Helmet>
+          <title>{title} - 404</title>
+          <link rel='canonical' href={`${host}/404`} />
+        </Helmet>
         <NavBar />
         <div className='row row--padded'>
           <h2>404</h2>

react/components/HomePage/index.js

@@ -1,11 +1,18 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import NavBar from 'containers/NavBar';
 import PublishTool from 'containers/PublishTool';
 
-class PublishPage extends React.Component {
+const { site: { title, host } } = require('../../../config/speechConfig.js');
+
+class HomePage extends React.Component {
   render () {
     return (
       <div className={'row row--tall flex-container--column'}>
+        <Helmet>
+          <title>{title}</title>
+          <link rel='canonical' href={`${host}/`} />
+        </Helmet>
         <NavBar />
         <div className={'row row--tall row--padded flex-container--column'}>
           <PublishTool />
@@ -15,4 +22,4 @@ class PublishPage extends React.Component {
   }
 };
 
-export default PublishPage;
+export default HomePage;

react/components/ShowAssetDetails/view.jsx

@@ -1,37 +1,52 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import NavBar from 'containers/NavBar';
 import ErrorPage from 'components/ErrorPage';
 import AssetTitle from 'components/AssetTitle';
 import AssetDisplay from 'components/AssetDisplay';
 import AssetInfo from 'components/AssetInfo';
 
+const { site: { title, host } } = require('../../../config/speechConfig.js');
+
 class ShowAssetDetails extends React.Component {
   render () {
     const { asset } = this.props;
+    let channelName, certificateId, name, claimId;
+    if (asset.claimData) {
+      ({ channelName, certificateId, name, claimId } = asset.claimData);
+    };
     if (asset) {
       return (
         <div>
-          <NavBar/>
-          <div className="row row--tall row--padded">
-            <div className="column column--10">
+          <Helmet>
+            <title>{title} - {name} - details</title>
+            {channelName ? (
+              <link rel='canonical' href={`${host}/${channelName}:${certificateId}/${name}`} />
+            ) : (
+              <link rel='canonical' href={`${host}/${claimId}/${name}`} />
+            )}
+          </Helmet>
+          <NavBar />
+          <div className='row row--tall row--padded'>
+            <div className='column column--10'>
               <AssetTitle />
             </div>
-            <div className="column column--5 column--sml-10 align-content-top">
-              <div className="row row--padded">
+            <div className='column column--5 column--sml-10 align-content-top'>
+              <div className='row row--padded'>
                 <AssetDisplay />
               </div>
-            </div><div className="column column--5 column--sml-10 align-content-top">
-            <div className="row row--padded">
-              <AssetInfo />
+            </div><div className='column column--5 column--sml-10 align-content-top'>
+              <div className='row row--padded'>
+                <AssetInfo />
+              </div>
             </div>
           </div>
-          </div>
           }
         </div>
       );
     };
     return (
-      <ErrorPage error={'loading asset data...'}/>
+      <ErrorPage error={'loading asset data...'} />
     );
   }
 };

react/components/ShowAssetLite/view.jsx

@@ -1,19 +1,38 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import { Link } from 'react-router-dom';
 import AssetDisplay from 'components/AssetDisplay';
 
+const { site: { title, host } } = require('../../../config/speechConfig.js');
+
 class ShowLite extends React.Component {
   render () {
     const { asset } = this.props;
-    return (
-      <div className="row row--tall flex-container--column flex-container--center-center">
-        { (asset) &&
-        <div>
-          <AssetDisplay />
-          <Link id="asset-boilerpate" className="link--primary fine-print" to={`/${asset.claimId}/${asset.name}`}>hosted via Spee.ch</Link>
+    if (asset) {
+      let channelName, certificateId, name, claimId, fileExt;
+      if (asset.claimData) {
+        ({ channelName, certificateId, name, claimId, fileExt } = asset.claimData);
+      };
+      return (
+        <div className='row row--tall flex-container--column flex-container--center-center'>
+          <Helmet>
+            <title>{title} - {name}</title>
+            {channelName ? (
+              <link rel='canonical' href={`${host}/${channelName}:${certificateId}/${name}.${fileExt}`} />
+            ) : (
+              <link rel='canonical' href={`${host}/${claimId}/${name}.${fileExt}`} />
+            )}
+          </Helmet>
+          <div>
+            <AssetDisplay />
+            <Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted
+              via Spee.ch</Link>
+          </div>
         </div>
-        }
-      </div>
+      );
+    }
+    return (
+      <p>loading asset data...</p>
     );
   }
 };

react/components/ShowChannel/view.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
+import Helmet from 'react-helmet';
 import ErrorPage from 'components/ErrorPage';
 import NavBar from 'containers/NavBar';
 import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay';
 
+const { site: { title, host } } = require('../../../config/speechConfig.js');
+
 class ShowChannel extends React.Component {
   render () {
     const { channel } = this.props;
@@ -10,14 +13,18 @@ class ShowChannel extends React.Component {
       const { name, longId, shortId } = channel;
       return (
         <div>
-          <NavBar/>
-          <div className="row row--tall row--padded">
-            <div className="column column--10">
+          <Helmet>
+            <title>{title} - {name}</title>
+            <link rel='canonical' href={`${host}/${name}:${longId}`} />
+          </Helmet>
+          <NavBar />
+          <div className='row row--tall row--padded'>
+            <div className='column column--10'>
               <h2>channel name: {name || 'loading...'}</h2>
               <p className={'fine-print'}>full channel id: {longId || 'loading...'}</p>
               <p className={'fine-print'}>short channel id: {shortId || 'loading...'}</p>
             </div>
-            <div className="column column--10">
+            <div className='column column--10'>
               <ChannelClaimsDisplay />
             </div>
           </div>
@@ -25,7 +32,7 @@ class ShowChannel extends React.Component {
       );
     };
     return (
-      <ErrorPage error={'loading channel data...'}/>
+      <ErrorPage error={'loading channel data...'} />
     );
   }
 };