350 open graph react #360
|
|
@ -9,6 +9,7 @@ module.exports = (helmet, html, preloadedState) => {
|
|||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<!--helmet-->
|
||||
${helmet.title.toString()}
|
||||
${helmet.meta.toString()}
|
||||
${helmet.link.toString()}
|
||||
<!--style sheets-->
|
||||
<link rel="stylesheet" href="/assets/css/reset.css" type="text/css">
|
||||
|
|
|
|||
21
react/components/OpenGraphTags/index.jsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
import { connect } from 'react-redux';
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
import View from './view';
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
const mapStateToProps = ({ show }) => {
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
// select request info
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
const requestId = show.request.id;
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
// select asset info
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
let asset;
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
const request = show.requestList[requestId] || null;
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
const assetList = show.assetList;
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
if (request && assetList) {
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
const assetKey = request.key; // note: just store this in the request
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
asset = assetList[assetKey] || null;
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
};
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
// return props
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
return {
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
asset,
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
};
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
};
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
export default connect(mapStateToProps, null)(View);
|
||||
|
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the Then you wouldn't have to worry about the I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the `show` reducer here, which I don't really think needs to exist (in the future).
Then you wouldn't have to worry about the `show` reducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)
ah, yes. This component should actually be deleted. I made it before moving everything into the ah, yes. This component should actually be deleted. I made it before moving everything into the `<SEO />` component.
|
||||
83
react/components/OpenGraphTags/view.jsx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import React from 'react';
|
||||
import Helmet from 'react-helmet';
|
||||
|
||||
const { site: { title, host }, claim: { defaultThumbnail, defaultDescription } } = require('../../../config/speechConfig.js');
|
||||
|
||||
const determineOgThumbnailContentType = (thumbnail) => {
|
||||
if (thumbnail) {
|
||||
const fileExt = thumbnail.substring(thumbnail.lastIndexOf('.'));
|
||||
switch (fileExt) {
|
||||
case 'jpeg':
|
||||
case 'jpg':
|
||||
return 'image/jpeg';
|
||||
case 'png':
|
||||
return 'image/png';
|
||||
case 'gif':
|
||||
return 'image/gif';
|
||||
case 'mp4':
|
||||
return 'video/mp4';
|
||||
default:
|
||||
return 'image/jpeg';
|
||||
}
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
class OpenGraphTags extends React.Component {
|
||||
render () {
|
||||
const { claimData } = this.props.asset;
|
||||
const { contentType } = claimData;
|
||||
const embedUrl = `${host}/${claimData.claimId}/${claimData.name}`;
|
||||
const showUrl = `${host}/${claimData.claimId}/${claimData.name}`;
|
||||
const source = `${host}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
|
||||
const ogTitle = claimData.title || claimData.name;
|
||||
const ogDescription = claimData.description || defaultDescription;
|
||||
const ogThumbnailContentType = determineOgThumbnailContentType(claimData.thumbnail);
|
||||
const ogThumbnail = claimData.thumbnail || defaultThumbnail;
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
{/* basic open graph tags */}
|
||||
<meta property='og:title' content={ogTitle} />
|
||||
<meta property='og:url' content={showUrl} />
|
||||
<meta property='og:site_name' content={title} />
|
||||
<meta property='og:description' content={ogDescription} />
|
||||
<meta property='og:image:width' content='600' />
|
||||
<meta property='og:image:height' content='315' />
|
||||
{/* basic twitter tags */}
|
||||
<meta name='twitter:site' content='@spee_ch' />
|
||||
</Helmet>
|
||||
{ contentType === 'video/mp4' || contentType === 'video/webm' ? (
|
||||
<Helmet>
|
||||
{/* video open graph tags */}
|
||||
<meta property='og:video' content={source} />
|
||||
<meta property='og:video:secure_url' content={source} />
|
||||
<meta property='og:video:type' content={contentType} />
|
||||
<meta property='og:image' content={ogThumbnail} />
|
||||
<meta property='og:image:type' content={ogThumbnailContentType} />
|
||||
<meta property='og:type' content='video' />
|
||||
{/* video twitter tags */}
|
||||
<meta name='twitter:card' content='player' />
|
||||
<meta name='twitter:player' content={embedUrl} />
|
||||
<meta name='twitter:player:width' content='600' />
|
||||
<meta name='twitter:text:player_width' content='600' />
|
||||
<meta name='twitter:player:height' content='337' />
|
||||
<meta name='twitter:player:stream' content={source} />
|
||||
<meta name='twitter:player:stream:content_type' content={contentType} />
|
||||
</Helmet>
|
||||
) : (
|
||||
<Helmet>
|
||||
{/* image open graph tags */}
|
||||
<meta property='og:image' content={source} />
|
||||
<meta property='og:image:type' content={contentType} />
|
||||
<meta property='og:type' content='article' />
|
||||
{/* image twitter tags */}
|
||||
<meta name='twitter:card' content='summary_large_image' />
|
||||
</Helmet>
|
||||
)};
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default OpenGraphTags;
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import Helmet from 'react-helmet';
|
||||
import OpenGraphTags from 'components/OpenGraphTags';
|
||||
import NavBar from 'containers/NavBar';
|
||||
import ErrorPage from 'components/ErrorPage';
|
||||
import AssetTitle from 'components/AssetTitle';
|
||||
|
|
@ -26,6 +27,7 @@ class ShowAssetDetails extends React.Component {
|
|||
<link rel='canonical' href={`${host}/${claimId}/${name}`} />
|
||||
)}
|
||||
</Helmet>
|
||||
<OpenGraphTags />
|
||||
<NavBar />
|
||||
<div className='row row--tall row--padded'>
|
||||
<div className='column column--10'>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import Helmet from 'react-helmet';
|
||||
import OpenGraphTags from 'components/OpenGraphTags';
|
||||
import { Link } from 'react-router-dom';
|
||||
import AssetDisplay from 'components/AssetDisplay';
|
||||
|
||||
|
|
@ -22,6 +23,7 @@ class ShowLite extends React.Component {
|
|||
) : (
|
||||
<link rel='canonical' href={`${host}/${claimId}/${name}.${fileExt}`} />
|
||||
)}
|
||||
<OpenGraphTags />
|
||||
</Helmet>
|
||||
<div>
|
||||
<AssetDisplay />
|
||||
|
|
|
|||
I'm probably missing something here, but wherever this is rendered, don't you already have the asset? You could just directly pass it in (or just pass some identifier to easily find it in state). Then you wouldn't need the
showreducer here, which I don't really think needs to exist (in the future).Then you wouldn't have to worry about the
showreducer being populated and could use these tags for other pages (not sure if you would ever need to do that though)