LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

moved title, metaTag, and link utils into SEO component

Browse source
This commit is contained in:
bill bittner 2018-02-23 17:57:23 -08:00
parent a96f79a068
commit 89fcfd84ea
11 changed files with 53 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -4,3 +4,4 @@ config/sequelizeCliConfig.js
config/speechConfig.js
public/bundle
server.js
webpack.config.js

1
package.json
View file

@ -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 .",

8
react/components/AboutPage/index.js
View file

@ -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 (
<div>
<SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
<SEO pageTitle={'About'} pageUri={'about'} />
<NavBar />
<div className='row row--padded'>
<div className='column column--5 column--med-10 align-content-top'>

8
react/components/HomePage/index.js
View file

@ -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 (
<div className={'row row--tall flex-container--column'}>
<SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
<SEO />
<NavBar />
<div className={'row row--tall row--padded flex-container--column'}>
<PublishTool />

18
react/components/SEO/index.jsx
View file

@ -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 (
<Helmet
title={pageTitle}
link={[{rel: 'canonical', href: canonicalLink}]}
meta={metaTags}
link={[{rel: 'canonical', href: canonicalLink}]}
/>
);
}
};
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;

8
react/components/ShowAssetDetails/view.jsx
View file

@ -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 (
<div>
<SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
<SEO pageTitle={`${name} - details`} asset={asset} />
<NavBar />
<div className='row row--tall row--padded'>
<div className='column column--10'>

8
react/components/ShowAssetLite/view.jsx
View file

@ -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 (
<div className='row row--tall flex-container--column flex-container--center-center'>
<SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
<SEO pageTitle={name} asset={asset} />
<div>
<AssetDisplay />
<Link id='asset-boilerpate' className='link--primary fine-print' to={`/${claimId}/${name}`}>hosted

14
react/components/ShowChannel/view.jsx
View file

@ -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 (
<div>
<SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
<SEO pageTitle={name} channel={channel} />
<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>
<h2>channel name: {name}</h2>
<p className={'fine-print'}>full channel id: {longId}</p>
<p className={'fine-print'}>short channel id: {shortId}</p>
</div>
<div className='column column--10'>
<ChannelClaimsDisplay />

8
react/containers/LoginPage/view.jsx
View file

@ -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 (
<div>
<SEO pageTitle={pageTitle} canonicalLink={canonicalLink} metaTags={metaTags} />
<SEO pageTitle={'Login'} pageUri={'login'} />
<NavBar />
<div className='row row--padded'>
<div className='column column--5 column--med-10 align-content-top'>

19
react/utils/canonicalLink.js
View file

@ -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();
};

16
react/utils/metaTags.js
View file

@ -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();
};