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

updated SEO component to show og image on homepage

Browse source
This commit is contained in:
bill bittner 2018-06-10 18:08:35 -07:00
parent bfc498402c
commit dd6b1d0203
8 changed files with 170 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/build/components/PageLayout/index.js
View file

@ -47,7 +47,9 @@ function (_React$Component) {
className: 'page-layout' className: 'page-layout'
}, _react.default.createElement(_SEO.default, { }, _react.default.createElement(_SEO.default, {
pageTitle: this.props.pageTitle, pageTitle: this.props.pageTitle,
pageUri: this.props.pageUri pageUri: this.props.pageUri,
asset: this.props.asset,
channel: this.props.channel
}), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", { }), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
className: 'content' className: 'content'
}, this.props.children)); }, this.props.children));

11
client/build/containers/SEO/view.js
View file

@ -65,7 +65,16 @@ function (_React$Component) {
var pageTitle = this.props.pageTitle; // create page title, tags, and canonical link var pageTitle = this.props.pageTitle; // create page title, tags, and canonical link
pageTitle = (0, _pageTitle.createPageTitle)(siteTitle, pageTitle); pageTitle = (0, _pageTitle.createPageTitle)(siteTitle, pageTitle);
var metaTags = (0, _metaTags.createMetaTags)(siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail); var metaTags = (0, _metaTags.createMetaTags)({
siteDescription: siteDescription,
siteHost: siteHost,
siteTitle: siteTitle,
siteTwitter: siteTwitter,
asset: asset,
channel: channel,
defaultDescription: defaultDescription,
defaultThumbnail: defaultThumbnail
});
var canonicalLink = (0, _canonicalLink.createCanonicalLink)(asset, channel, pageUri, siteHost); // render results var canonicalLink = (0, _canonicalLink.createCanonicalLink)(asset, channel, pageUri, siteHost); // render results
return _react.default.createElement(_reactHelmet.default, { return _react.default.createElement(_reactHelmet.default, {

69
client/build/utils/metaTags.js
View file

@ -31,7 +31,12 @@ var determineOgThumbnailContentType = function determineOgThumbnailContentType(t
return ''; return '';
}; };
var createBasicMetaTags = function createBasicMetaTags(siteHost, siteDescription, siteTitle, siteTwitter) { var createBasicMetaTags = function createBasicMetaTags(_ref) {
var siteHost = _ref.siteHost,
siteDescription = _ref.siteDescription,
siteTitle = _ref.siteTitle,
siteTwitter = _ref.siteTwitter,
defaultThumbnail = _ref.defaultThumbnail;
return [{ return [{
property: 'og:title', property: 'og:title',
content: siteTitle content: siteTitle
@ -49,11 +54,21 @@ var createBasicMetaTags = function createBasicMetaTags(siteHost, siteDescription
content: siteTwitter content: siteTwitter
}, { }, {
property: 'twitter:card', property: 'twitter:card',
content: 'summary' content: 'summary_large_image'
}, {
property: 'og:image',
content: defaultThumbnail
}, {
property: 'og:image:type',
content: 'image/jpeg'
}]; }];
}; };
var createChannelMetaTags = function createChannelMetaTags(siteTitle, siteHost, siteTwitter, channel) { var createChannelMetaTags = function createChannelMetaTags(_ref2) {
var siteHost = _ref2.siteHost,
siteTitle = _ref2.siteTitle,
siteTwitter = _ref2.siteTwitter,
channel = _ref2.channel;
var name = channel.name, var name = channel.name,
longId = channel.longId; longId = channel.longId;
return [{ return [{
@ -77,7 +92,13 @@ var createChannelMetaTags = function createChannelMetaTags(siteTitle, siteHost,
}]; }];
}; };
var createAssetMetaTags = function createAssetMetaTags(siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail) { var createAssetMetaTags = function createAssetMetaTags(_ref3) {
var siteHost = _ref3.siteHost,
siteTitle = _ref3.siteTitle,
siteTwitter = _ref3.siteTwitter,
asset = _ref3.asset,
defaultDescription = _ref3.defaultDescription,
defaultThumbnail = _ref3.defaultThumbnail;
var claimData = asset.claimData; var claimData = asset.claimData;
var contentType = claimData.contentType; var contentType = claimData.contentType;
var embedUrl = "".concat(siteHost, "/").concat(claimData.claimId, "/").concat(claimData.name); var embedUrl = "".concat(siteHost, "/").concat(claimData.claimId, "/").concat(claimData.name);
@ -185,19 +206,43 @@ var createAssetMetaTags = function createAssetMetaTags(siteHost, siteTitle, site
return metaTags; return metaTags;
}; };
var createMetaTags = function createMetaTags(siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail) { var createMetaTags = function createMetaTags(_ref4) {
if (asset) { var siteDescription = _ref4.siteDescription,
return createAssetMetaTags(siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail); siteHost = _ref4.siteHost,
} siteTitle = _ref4.siteTitle,
siteTwitter = _ref4.siteTwitter,
asset = _ref4.asset,
channel = _ref4.channel,
defaultDescription = _ref4.defaultDescription,
defaultThumbnail = _ref4.defaultThumbnail;
; if (asset) {
return createAssetMetaTags({
siteHost: siteHost,
siteTitle: siteTitle,
siteTwitter: siteTwitter,
asset: asset,
defaultDescription: defaultDescription,
defaultThumbnail: defaultThumbnail
});
}
if (channel) { if (channel) {
return createChannelMetaTags(siteHost, siteTitle, siteTwitter, channel); return createChannelMetaTags({
siteHost: siteHost,
siteTitle: siteTitle,
siteTwitter: siteTwitter,
channel: channel
});
} }
; return createBasicMetaTags({
return createBasicMetaTags(siteDescription, siteHost, siteTitle, siteTwitter); siteDescription: siteDescription,
siteHost: siteHost,
siteTitle: siteTitle,
siteTwitter: siteTwitter,
defaultThumbnail: defaultThumbnail
});
}; };
exports.createMetaTags = createMetaTags; exports.createMetaTags = createMetaTags;

7
client/src/components/PageLayout/index.jsx
View file

@ -7,7 +7,12 @@ class PageLayout extends React.Component {
render () { render () {
return ( return (
<div className={'page-layout'}> <div className={'page-layout'}>
<SEO pageTitle={this.props.pageTitle} pageUri={this.props.pageUri} /> <SEO
pageTitle={this.props.pageTitle}
pageUri={this.props.pageUri}
asset={this.props.asset}
channel={this.props.channel}
/>
<NavBar /> <NavBar />
<div className={'content'}> <div className={'content'}>
{this.props.children} {this.props.children}

104
client/src/containers/PublishStatus/view.jsx
View file

@ -10,66 +10,66 @@ class PublishStatus extends React.Component {
return ( return (
<div className={'publish-status'}> <div className={'publish-status'}>
{status === publishStates.LOAD_START && {status === publishStates.LOAD_START &&
<div className={'status'}> <div className={'status'}>
<Row> <Row>
<p>le is loading to server</p> <p>le is loading to server</p>
</Row> </Row>
<Row> <Row>
<p className={'text--secondary'}>0%</p> <p className={'text--secondary'}>0%</p>
</Row> </Row>
</div> </div>
} }
{status === publishStates.LOADING && {status === publishStates.LOADING &&
<div className={'status'}> <div className={'status'}>
<Row> <Row>
<p>File is loading to server</p> <p>File is loading to server</p>
</Row> </Row>
<Row> <Row>
<p className={'text--secondary'}>{message}</p> <p className={'text--secondary'}>{message}</p>
</Row> </Row>
</div> </div>
} }
{status === publishStates.PUBLISHING && {status === publishStates.PUBLISHING &&
<div className={'status'}> <div className={'status'}>
<Row> <Row>
<p>Upload complete. Your file is now being published on the blockchain...</p> <p>Upload complete. Your file is now being published on the blockchain...</p>
</Row> </Row>
<Row> <Row>
<ProgressBar size={12} /> <ProgressBar size={12} />
</Row> </Row>
<Row> <Row>
<p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p> <p>Curious what magic is happening here? <a className='link--primary' target='blank' href='https://lbry.io/faq/what-is-lbry'>Learn more.</a></p>
</Row> </Row>
</div> </div>
} }
{status === publishStates.SUCCESS && {status === publishStates.SUCCESS &&
<div className={'status'}> <div className={'status'}>
<Row> <Row>
<p>Your publish is complete! You are being redirected to it now.</p> <p>Your publish is complete! You are being redirected to it now.</p>
</Row> </Row>
<Row> <Row>
<p>If you are not automatically redirected, <a className='link--primary' target='_blank' href={message}>click here.</a></p> <p>If you are not automatically redirected, <a className='link--primary' target='_blank' href={message}>click here.</a></p>
</Row> </Row>
</div> </div>
} }
{status === publishStates.FAILED && {status === publishStates.FAILED &&
<div className={'status'}> <div className={'status'}>
<Row> <Row>
<p>Something went wrong...</p> <p>Something went wrong...</p>
</Row> </Row>
<Row> <Row>
<p className={'text--strong'}>{message}</p> <p className={'text--strong'}>{message}</p>
</Row> </Row>
<Row> <Row>
<p>For help, post the above error text in the #speech channel on the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>lbry discord</a></p> <p>For help, post the above error text in the #speech channel on the <a className='link--primary' href='https://chat.lbry.io' target='_blank'>lbry discord</a></p>
</Row> </Row>
<Row> <Row>
<ButtonSecondary <ButtonSecondary
value={'Reset'} value={'Reset'}
onClickHandler={clearFile} onClickHandler={clearFile}
/> />
</Row> </Row>
</div> </div>
} }
</div> </div>
); );

11
client/src/containers/SEO/view.jsx
View file

@ -15,7 +15,16 @@ class SEO extends React.Component {
let { pageTitle } = this.props; let { pageTitle } = this.props;
// create page title, tags, and canonical link // create page title, tags, and canonical link
pageTitle = createPageTitle(siteTitle, pageTitle); pageTitle = createPageTitle(siteTitle, pageTitle);
const metaTags = createMetaTags(siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail); const metaTags = createMetaTags({
siteDescription,
siteHost,
siteTitle,
siteTwitter,
asset,
channel,
defaultDescription,
defaultThumbnail,
});
const canonicalLink = createCanonicalLink(asset, channel, pageUri, siteHost); const canonicalLink = createCanonicalLink(asset, channel, pageUri, siteHost);
// render results // render results
return ( return (

4
client/src/pages/ShowAssetLite/view.jsx
View file

@ -12,8 +12,8 @@ const AssetLiteFooter = ({ name, claimId }) => {
<Link className='link--primary' to={`/${claimId}/${name}`}> hosted on spee.ch</Link> via the <a className='link--primary' href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain <Link className='link--primary' to={`/${claimId}/${name}`}> hosted on spee.ch</Link> via the <a className='link--primary' href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain
</p> </p>
</SpaceAround> </SpaceAround>
) );
} };
class ShowLite extends React.Component { class ShowLite extends React.Component {
render () { render () {

40
client/src/utils/metaTags.js
View file

@ -18,18 +18,20 @@ const determineOgThumbnailContentType = (thumbnail) => {
return ''; return '';
}; };
const createBasicMetaTags = (siteHost, siteDescription, siteTitle, siteTwitter) => { const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter, defaultThumbnail}) => {
return [ return [
{property: 'og:title', content: siteTitle}, {property: 'og:title', content: siteTitle},
{property: 'og:url', content: siteHost}, {property: 'og:url', content: siteHost},
{property: 'og:site_name', content: siteTitle}, {property: 'og:site_name', content: siteTitle},
{property: 'og:description', content: siteDescription}, {property: 'og:description', content: siteDescription},
{property: 'twitter:site', content: siteTwitter}, {property: 'twitter:site', content: siteTwitter},
{property: 'twitter:card', content: 'summary'}, {property: 'twitter:card', content: 'summary_large_image'},
{property: 'og:image', content: defaultThumbnail},
{property: 'og:image:type', content: 'image/jpeg'},
]; ];
}; };
const createChannelMetaTags = (siteTitle, siteHost, siteTwitter, channel) => { const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel}) => {
const { name, longId } = channel; const { name, longId } = channel;
return [ return [
{property: 'og:title', content: `${name} on ${siteTitle}`}, {property: 'og:title', content: `${name} on ${siteTitle}`},
@ -41,7 +43,7 @@ const createChannelMetaTags = (siteTitle, siteHost, siteTwitter, channel) => {
]; ];
}; };
const createAssetMetaTags = (siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail) => { const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail}) => {
const { claimData } = asset; const { claimData } = asset;
const { contentType } = claimData; const { contentType } = claimData;
const embedUrl = `${siteHost}/${claimData.claimId}/${claimData.name}`; const embedUrl = `${siteHost}/${claimData.claimId}/${claimData.name}`;
@ -83,12 +85,30 @@ const createAssetMetaTags = (siteHost, siteTitle, siteTwitter, asset, defaultDes
return metaTags; return metaTags;
}; };
export const createMetaTags = (siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail) => { export const createMetaTags = ({ siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail }) => {
if (asset) { if (asset) {
return createAssetMetaTags(siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail); return createAssetMetaTags({
}; siteHost,
siteTitle,
siteTwitter,
asset,
defaultDescription,
defaultThumbnail,
});
}
if (channel) { if (channel) {
return createChannelMetaTags(siteHost, siteTitle, siteTwitter, channel); return createChannelMetaTags({
}; siteHost,
return createBasicMetaTags(siteDescription, siteHost, siteTitle, siteTwitter); siteTitle,
siteTwitter,
channel,
});
}
return createBasicMetaTags({
siteDescription,
siteHost,
siteTitle,
siteTwitter,
defaultThumbnail,
});
}; };