From 89fcfd84ead2c267a91d866aea64fd0fda7e9c82 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Fri, 23 Feb 2018 17:57:23 -0800 Subject: [PATCH] moved title, metaTag, and link utils into SEO component --- .gitignore | 1 + package.json | 1 + react/components/AboutPage/index.js | 8 +------- react/components/HomePage/index.js | 8 +------- react/components/SEO/index.jsx | 18 +++++++++++++----- react/components/ShowAssetDetails/view.jsx | 8 +------- react/components/ShowAssetLite/view.jsx | 8 +------- react/components/ShowChannel/view.jsx | 14 ++++---------- react/containers/LoginPage/view.jsx | 8 +------- react/utils/canonicalLink.js | 19 ++++++++++++++++--- react/utils/metaTags.js | 16 +++++++++++++--- 11 files changed, 53 insertions(+), 56 deletions(-) diff --git a/.gitignore b/.gitignore index 4b510fa3..2d5233ca 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ config/sequelizeCliConfig.js config/speechConfig.js public/bundle server.js +webpack.config.js diff --git a/package.json b/package.json index cfe668e9..c6d0dbce 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "test": "mocha --recursive", "test-all": "mocha --recursive", "start": "node server.js", + "start-dev": "nodemon server.js", "lint": "eslint .", "fix": "eslint . --fix", "precommit": "eslint .", diff --git a/react/components/AboutPage/index.js b/react/components/AboutPage/index.js index 9b589617..f14bd581 100644 --- a/react/components/AboutPage/index.js +++ b/react/components/AboutPage/index.js @@ -1,18 +1,12 @@ import React from 'react'; import NavBar from 'containers/NavBar'; import SEO from 'components/SEO'; -import { createPageTitle } from 'utils/pageTitle'; -import { createBasicCanonicalLink } from 'utils/canonicalLink'; -import { createBasicMetaTags } from 'utils/metaTags'; class AboutPage extends React.Component { render () { - const pageTitle = createPageTitle('About'); - const canonicalLink = createBasicCanonicalLink('about'); - const metaTags = createBasicMetaTags(); return (
- +
diff --git a/react/components/HomePage/index.js b/react/components/HomePage/index.js index bd156842..09d4c03e 100644 --- a/react/components/HomePage/index.js +++ b/react/components/HomePage/index.js @@ -2,18 +2,12 @@ import React from 'react'; import SEO from 'components/SEO'; import NavBar from 'containers/NavBar'; import PublishTool from 'containers/PublishTool'; -import { createPageTitle } from 'utils/pageTitle'; -import { createBasicCanonicalLink } from 'utils/canonicalLink'; -import { createBasicMetaTags } from 'utils/metaTags'; class HomePage extends React.Component { render () { - const pageTitle = createPageTitle(); - const canonicalLink = createBasicCanonicalLink(); - const metaTags = createBasicMetaTags(); return (
- +
diff --git a/react/components/SEO/index.jsx b/react/components/SEO/index.jsx index 064528bc..555777d6 100644 --- a/react/components/SEO/index.jsx +++ b/react/components/SEO/index.jsx @@ -2,23 +2,31 @@ import React from 'react'; import Helmet from 'react-helmet'; import PropTypes from 'prop-types'; +import { createPageTitle } from 'utils/pageTitle'; +import { createMetaTags } from 'utils/metaTags'; +import { createCanonicalLink } from 'utils/canonicalLink'; + class SEO extends React.Component { render () { - const { pageTitle, metaTags, canonicalLink } = this.props; + let { pageTitle, asset, channel, pageUri } = this.props; + pageTitle = createPageTitle(pageTitle); + const metaTags = createMetaTags(asset, channel); + const canonicalLink = createCanonicalLink(asset, channel, pageUri); return ( ); } }; SEO.propTypes = { - pageTitle : PropTypes.string.isRequired, - metaTags : PropTypes.array.isRequired, - canonicalLink: PropTypes.string.isRequired, + pageTitle: PropTypes.string, + pageUri : PropTypes.string, + channel : PropTypes.object, + asset : PropTypes.object, }; export default SEO; diff --git a/react/components/ShowAssetDetails/view.jsx b/react/components/ShowAssetDetails/view.jsx index 8d74d500..25f8a4e2 100644 --- a/react/components/ShowAssetDetails/view.jsx +++ b/react/components/ShowAssetDetails/view.jsx @@ -5,21 +5,15 @@ import ErrorPage from 'components/ErrorPage'; import AssetTitle from 'components/AssetTitle'; import AssetDisplay from 'components/AssetDisplay'; import AssetInfo from 'components/AssetInfo'; -import { createPageTitle } from 'utils/pageTitle'; -import { createAssetCanonicalLink } from 'utils/canonicalLink'; -import { createAssetMetaTags } from 'utils/metaTags'; class ShowAssetDetails extends React.Component { render () { const { asset } = this.props; if (asset) { const { name } = asset.claimData; - const pageTitle = createPageTitle(`${name} - details`); - const canonicalLink = createAssetCanonicalLink(asset); - const metaTags = createAssetMetaTags(asset); return (
- +
diff --git a/react/components/ShowAssetLite/view.jsx b/react/components/ShowAssetLite/view.jsx index 847cab59..9b483249 100644 --- a/react/components/ShowAssetLite/view.jsx +++ b/react/components/ShowAssetLite/view.jsx @@ -2,21 +2,15 @@ import React from 'react'; import SEO from 'components/SEO'; import { Link } from 'react-router-dom'; import AssetDisplay from 'components/AssetDisplay'; -import { createPageTitle } from 'utils/pageTitle'; -import { createAssetCanonicalLink } from 'utils/canonicalLink'; -import { createAssetMetaTags } from 'utils/metaTags'; class ShowLite extends React.Component { render () { const { asset } = this.props; if (asset) { const { name, claimId } = asset.claimData; - const pageTitle = createPageTitle(name); - const canonicalLink = createAssetCanonicalLink(asset); - const metaTags = createAssetMetaTags(asset); return (
- +
hosted diff --git a/react/components/ShowChannel/view.jsx b/react/components/ShowChannel/view.jsx index 4735aa8d..842a6953 100644 --- a/react/components/ShowChannel/view.jsx +++ b/react/components/ShowChannel/view.jsx @@ -3,27 +3,21 @@ import SEO from 'components/SEO'; import ErrorPage from 'components/ErrorPage'; import NavBar from 'containers/NavBar'; import ChannelClaimsDisplay from 'containers/ChannelClaimsDisplay'; -import { createPageTitle } from 'utils/pageTitle'; -import { createChannelCanonicalLink } from 'utils/canonicalLink'; -import { createChannelMetaTags } from 'utils/metaTags'; class ShowChannel extends React.Component { render () { const { channel } = this.props; if (channel) { const { name, longId, shortId } = channel; - const pageTitle = createPageTitle(`${name}`); - const canonicalLink = createChannelCanonicalLink(channel); - const metaTags = createChannelMetaTags(channel); return (
- +
-

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

-

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

-

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

+

channel name: {name}

+

full channel id: {longId}

+

short channel id: {shortId}

diff --git a/react/containers/LoginPage/view.jsx b/react/containers/LoginPage/view.jsx index bf25662b..87d1549d 100644 --- a/react/containers/LoginPage/view.jsx +++ b/react/containers/LoginPage/view.jsx @@ -4,9 +4,6 @@ import SEO from 'components/SEO'; import NavBar from 'containers/NavBar'; import ChannelLoginForm from 'containers/ChannelLoginForm'; import ChannelCreateForm from 'containers/ChannelCreateForm'; -import { createPageTitle } from 'utils/pageTitle'; -import { createBasicCanonicalLink } from 'utils/canonicalLink'; -import { createBasicMetaTags } from 'utils/metaTags'; class LoginPage extends React.Component { componentWillReceiveProps (newProps) { @@ -17,12 +14,9 @@ class LoginPage extends React.Component { } } render () { - const pageTitle = createPageTitle('Login'); - const canonicalLink = createBasicCanonicalLink('login'); - const metaTags = createBasicMetaTags(); return (
- +
diff --git a/react/utils/canonicalLink.js b/react/utils/canonicalLink.js index 53507180..a76f3c73 100644 --- a/react/utils/canonicalLink.js +++ b/react/utils/canonicalLink.js @@ -1,13 +1,13 @@ const { site: { host } } = require('../../config/speechConfig.js'); -export const createBasicCanonicalLink = (page) => { +const createBasicCanonicalLink = (page) => { if (!page) { return `${host}`; }; return `${host}/${page}`; }; -export const createAssetCanonicalLink = (asset) => { +const createAssetCanonicalLink = (asset) => { let channelName, certificateId, name, claimId; if (asset.claimData) { ({ channelName, certificateId, name, claimId } = asset.claimData); @@ -18,7 +18,20 @@ export const createAssetCanonicalLink = (asset) => { return `${host}/${claimId}/${name}`; }; -export const createChannelCanonicalLink = (channel) => { +const createChannelCanonicalLink = (channel) => { const { name, longId } = channel; return `${host}/${name}:${longId}`; }; + +export const createCanonicalLink = (asset, channel, page) => { + if (asset) { + return createAssetCanonicalLink(asset); + } + if (channel) { + return createChannelCanonicalLink(channel); + } + if (page) { + return createBasicCanonicalLink(page); + } + return createBasicCanonicalLink(); +}; diff --git a/react/utils/metaTags.js b/react/utils/metaTags.js index 5bcf67ad..ec9237d1 100644 --- a/react/utils/metaTags.js +++ b/react/utils/metaTags.js @@ -20,7 +20,7 @@ const determineOgThumbnailContentType = (thumbnail) => { return ''; }; -export const createBasicMetaTags = () => { +const createBasicMetaTags = () => { return [ {property: 'og:title', content: title}, {property: 'og:url', content: host}, @@ -31,7 +31,7 @@ export const createBasicMetaTags = () => { ]; }; -export const createChannelMetaTags = (channel) => { +const createChannelMetaTags = (channel) => { const { name, longId } = channel; return [ {property: 'og:title', content: `${name} on ${title}`}, @@ -43,7 +43,7 @@ export const createChannelMetaTags = (channel) => { ]; }; -export const createAssetMetaTags = (asset) => { +const createAssetMetaTags = (asset) => { const { claimData } = asset; const { contentType } = claimData; const embedUrl = `${host}/${claimData.claimId}/${claimData.name}`; @@ -84,3 +84,13 @@ export const createAssetMetaTags = (asset) => { } return metaTags; }; + +export const createMetaTags = (asset, channel) => { + if (asset) { + return createAssetMetaTags(asset); + }; + if (channel) { + return createChannelMetaTags(channel); + }; + return createBasicMetaTags(); +};