From d24331d00142c10543af569b9fb34ce0f01b72e6 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 22 Feb 2018 18:05:00 -0800 Subject: [PATCH] added react-helmet and dynamic title and canonical url tags --- helpers/handleShowRender.jsx | 7 +++- helpers/renderFullPage.js | 9 ++--- package.json | 1 + react/api/channelApi.js | 5 ++- react/app.js | 4 +-- react/components/AboutPage/index.js | 7 ++++ react/components/FourOhFourPage/index.js | 6 ++++ .../{PublishPage => HomePage}/index.js | 11 ++++-- react/components/ShowAssetDetails/view.jsx | 35 +++++++++++++------ react/components/ShowAssetLite/view.jsx | 35 ++++++++++++++----- react/components/ShowChannel/view.jsx | 17 ++++++--- react/containers/LoginPage/view.jsx | 35 +++++++++++-------- 12 files changed, 123 insertions(+), 49 deletions(-) rename react/components/{PublishPage => HomePage}/index.js (55%) diff --git a/helpers/handleShowRender.jsx b/helpers/handleShowRender.jsx index 4b7b7c44..7e53bd54 100644 --- a/helpers/handleShowRender.jsx +++ b/helpers/handleShowRender.jsx @@ -12,6 +12,8 @@ import { call } from 'redux-saga/effects'; import { handleShowPageUri } from '../react/sagas/show_uri'; import { onHandleShowPageUri } from '../react/actions/show'; +import Helmet from 'react-helmet'; + const returnSagaWithParams = (saga, params) => { return function * () { yield call(saga, params); @@ -49,6 +51,9 @@ module.exports = (req, res) => { ); + // get head tags from helmet + const helmet = Helmet.renderStatic(); + // check for a redirect if (context.url) { console.log('REDIRECTING:', context.url); @@ -61,6 +66,6 @@ module.exports = (req, res) => { const preloadedState = store.getState(); // send the rendered page back to the client - res.send(renderFullPage(html, preloadedState)); + res.send(renderFullPage(helmet, html, preloadedState)); }); }; diff --git a/helpers/renderFullPage.js b/helpers/renderFullPage.js index ee5fb732..4c5089ad 100644 --- a/helpers/renderFullPage.js +++ b/helpers/renderFullPage.js @@ -1,6 +1,4 @@ -const { site } = require('../config/speechConfig.js'); - -module.exports = (html, preloadedState) => { +module.exports = (helmet, html, preloadedState) => { // take the html and preloadedState and return the full page return ` @@ -9,7 +7,10 @@ module.exports = (html, preloadedState) => { - ${site.title} + + ${helmet.title.toString()} + ${helmet.link.toString()} + diff --git a/package.json b/package.json index 9f504d0f..77bc1322 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "react": "^16.2.0", "react-dom": "^16.2.0", "react-ga": "^2.4.1", + "react-helmet": "^5.2.0", "react-redux": "^5.0.6", "react-router-dom": "^4.2.2", "redux": "^3.7.2", diff --git a/react/api/channelApi.js b/react/api/channelApi.js index ddc25c05..859af0c7 100644 --- a/react/api/channelApi.js +++ b/react/api/channelApi.js @@ -1,5 +1,4 @@ -import Request from 'utils/request'; -import request from '../utils/request'; +import request from 'utils/request'; const { site: { host } } = require('../../config/speechConfig.js'); export function getChannelData (name, id) { @@ -12,6 +11,6 @@ export function getChannelData (name, id) { export function getChannelClaims (name, longId, page) { console.log('getting channel claims for channel:', name, longId); if (!page) page = 1; - const url = `${host}/api/channel/claims/${name}/${longId}/${page}`; + const url = `/api/channel/claims/${name}/${longId}/${page}`; return Request(url); }; diff --git a/react/app.js b/react/app.js index 212713c0..8c8e00ff 100644 --- a/react/app.js +++ b/react/app.js @@ -1,6 +1,6 @@ import React from 'react'; import { Route, Switch } from 'react-router-dom'; -import PublishPage from 'components/PublishPage'; +import HomePage from 'components/HomePage'; import AboutPage from 'components/AboutPage'; import LoginPage from 'containers/LoginPage'; import ShowPage from 'containers/ShowPage'; @@ -9,7 +9,7 @@ import FourOhFourPage from 'components/FourOhFourPage'; const App = () => { return ( - + diff --git a/react/components/AboutPage/index.js b/react/components/AboutPage/index.js index ee425186..566dd94c 100644 --- a/react/components/AboutPage/index.js +++ b/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 (
+ + {title} - About + +
diff --git a/react/components/FourOhFourPage/index.js b/react/components/FourOhFourPage/index.js index 20e9c9ca..0c2a3c12 100644 --- a/react/components/FourOhFourPage/index.js +++ b/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 (
+ + {title} - 404 + +

404

diff --git a/react/components/PublishPage/index.js b/react/components/HomePage/index.js similarity index 55% rename from react/components/PublishPage/index.js rename to react/components/HomePage/index.js index d803eb06..57331257 100644 --- a/react/components/PublishPage/index.js +++ b/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 (
+ + {title} + +
@@ -15,4 +22,4 @@ class PublishPage extends React.Component { } }; -export default PublishPage; +export default HomePage; diff --git a/react/components/ShowAssetDetails/view.jsx b/react/components/ShowAssetDetails/view.jsx index 42047032..3ee78911 100644 --- a/react/components/ShowAssetDetails/view.jsx +++ b/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 (
- -
-
+ + {title} - {name} - details + {channelName ? ( + + ) : ( + + )} + + +
+
-
-
+
+
-
-
- +
+
+ +
-
}
); }; return ( - + ); } }; diff --git a/react/components/ShowAssetLite/view.jsx b/react/components/ShowAssetLite/view.jsx index e8567fbc..e919b35d 100644 --- a/react/components/ShowAssetLite/view.jsx +++ b/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 ( -
- { (asset) && -
- - hosted via Spee.ch + if (asset) { + let channelName, certificateId, name, claimId, fileExt; + if (asset.claimData) { + ({ channelName, certificateId, name, claimId, fileExt } = asset.claimData); + }; + return ( +
+ + {title} - {name} + {channelName ? ( + + ) : ( + + )} + +
+ + hosted + via Spee.ch +
- } -
+ ); + } + return ( +

loading asset data...

); } }; diff --git a/react/components/ShowChannel/view.jsx b/react/components/ShowChannel/view.jsx index 3867cde2..a328cc13 100644 --- a/react/components/ShowChannel/view.jsx +++ b/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 (
- -
-
+ + {title} - {name} + + + +
+

channel name: {name || 'loading...'}

full channel id: {longId || 'loading...'}

short channel id: {shortId || 'loading...'}

-
+
@@ -25,7 +32,7 @@ class ShowChannel extends React.Component { ); }; return ( - + ); } }; diff --git a/react/containers/LoginPage/view.jsx b/react/containers/LoginPage/view.jsx index dea4f950..b984265f 100644 --- a/react/containers/LoginPage/view.jsx +++ b/react/containers/LoginPage/view.jsx @@ -1,10 +1,13 @@ import React from 'react'; import { withRouter } from 'react-router-dom'; +import Helmet from 'react-helmet'; import NavBar from 'containers/NavBar'; import ChannelLoginForm from 'containers/ChannelLoginForm'; import ChannelCreateForm from 'containers/ChannelCreateForm'; -class PublishPage extends React.Component { +const { site: { title, host } } = require('../../../config/speechConfig.js'); + +class LoginPage extends React.Component { componentWillReceiveProps (newProps) { // re-route the user to the homepage if the user is logged in if (newProps.loggedInChannelName !== this.props.loggedInChannelName) { @@ -15,24 +18,28 @@ class PublishPage extends React.Component { render () { return (
- -
-
-
-

Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting important events, or making a public repository for cat gifs (password: '1234'), try creating a channel for it!

+ + {title} - Login + + + +
+
+
+

Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting important events, or making a public repository for cat gifs (password: '1234'), try creating a channel for it!

+
+
+
+

Log in to an existing channel:

+ +

Create a brand new channel:

+
-
-
-

Log in to an existing channel:

- -

Create a brand new channel:

-
-
); } }; -export default withRouter(PublishPage); +export default withRouter(LoginPage);