changed SEO utils to pull info directly from config
This commit is contained in:
parent
62fb0477ac
commit
e447e16544
22 changed files with 658 additions and 425 deletions
|
@ -11,24 +11,6 @@ var _view = _interopRequireDefault(require("./view"));
|
|||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var mapStateToProps = function mapStateToProps(_ref) {
|
||||
var site = _ref.site;
|
||||
var defaultDescription = site.defaultDescription,
|
||||
defaultThumbnail = site.defaultThumbnail,
|
||||
siteDescription = site.description,
|
||||
siteHost = site.host,
|
||||
siteTitle = site.title,
|
||||
siteTwitter = site.twitter;
|
||||
return {
|
||||
defaultDescription: defaultDescription,
|
||||
defaultThumbnail: defaultThumbnail,
|
||||
siteDescription: siteDescription,
|
||||
siteHost: siteHost,
|
||||
siteTitle: siteTitle,
|
||||
siteTwitter: siteTwitter
|
||||
};
|
||||
};
|
||||
|
||||
var _default = (0, _reactRedux.connect)(mapStateToProps, null)(_view.default);
|
||||
var _default = (0, _reactRedux.connect)(null, null)(_view.default);
|
||||
|
||||
exports.default = _default;
|
|
@ -11,11 +11,11 @@ var _reactHelmet = _interopRequireDefault(require("react-helmet"));
|
|||
|
||||
var _propTypes = _interopRequireDefault(require("prop-types"));
|
||||
|
||||
var _pageTitle = require("../../utils/pageTitle");
|
||||
var _createPageTitle = _interopRequireDefault(require("../../utils/createPageTitle"));
|
||||
|
||||
var _metaTags = require("../../utils/metaTags");
|
||||
var _createMetaTags = _interopRequireDefault(require("../../utils/createMetaTags"));
|
||||
|
||||
var _canonicalLink = require("../../utils/canonicalLink");
|
||||
var _createCanonicalLink = _interopRequireDefault(require("../../utils/createCanonicalLink"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
|
@ -49,33 +49,19 @@ function (_React$Component) {
|
|||
_createClass(SEO, [{
|
||||
key: "render",
|
||||
value: function render() {
|
||||
// props from state
|
||||
// props from parent
|
||||
var _this$props = this.props,
|
||||
defaultDescription = _this$props.defaultDescription,
|
||||
defaultThumbnail = _this$props.defaultThumbnail,
|
||||
siteDescription = _this$props.siteDescription,
|
||||
siteHost = _this$props.siteHost,
|
||||
siteTitle = _this$props.siteTitle,
|
||||
siteTwitter = _this$props.siteTwitter; // props from parent
|
||||
|
||||
var _this$props2 = this.props,
|
||||
asset = _this$props2.asset,
|
||||
channel = _this$props2.channel,
|
||||
pageUri = _this$props2.pageUri;
|
||||
asset = _this$props.asset,
|
||||
channel = _this$props.channel,
|
||||
pageUri = _this$props.pageUri;
|
||||
var pageTitle = this.props.pageTitle; // create page title, tags, and canonical link
|
||||
|
||||
pageTitle = (0, _pageTitle.createPageTitle)(siteTitle, pageTitle);
|
||||
var metaTags = (0, _metaTags.createMetaTags)({
|
||||
siteDescription: siteDescription,
|
||||
siteHost: siteHost,
|
||||
siteTitle: siteTitle,
|
||||
siteTwitter: siteTwitter,
|
||||
pageTitle = (0, _createPageTitle.default)(pageTitle);
|
||||
var metaTags = (0, _createMetaTags.default)({
|
||||
asset: asset,
|
||||
channel: channel,
|
||||
defaultDescription: defaultDescription,
|
||||
defaultThumbnail: defaultThumbnail
|
||||
channel: channel
|
||||
});
|
||||
var canonicalLink = (0, _canonicalLink.createCanonicalLink)(asset, channel, pageUri, siteHost); // render results
|
||||
var canonicalLink = (0, _createCanonicalLink.default)(asset, channel, pageUri); // render results
|
||||
|
||||
return _react.default.createElement(_reactHelmet.default, {
|
||||
title: pageTitle,
|
||||
|
|
192
client/build/utils/createAssetMetaTags.js
Normal file
192
client/build/utils/createAssetMetaTags.js
Normal file
|
@ -0,0 +1,192 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
|
||||
|
||||
var _determineContentTypeFromExtension = _interopRequireDefault(require("./determineContentTypeFromExtension"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var _siteConfig$details = _siteConfig.default.details,
|
||||
host = _siteConfig$details.host,
|
||||
siteTitle = _siteConfig$details.title,
|
||||
twitter = _siteConfig$details.twitter,
|
||||
_siteConfig$assetDefa = _siteConfig.default.assetDefaults,
|
||||
defaultDescription = _siteConfig$assetDefa.description,
|
||||
defaultThumbnail = _siteConfig$assetDefa.thumbnail;
|
||||
var VIDEO = 'VIDEO';
|
||||
var IMAGE = 'IMAGE';
|
||||
var GIF = 'GIF';
|
||||
|
||||
var determineMediaType = function determineMediaType(contentType) {
|
||||
switch (contentType) {
|
||||
case 'image/jpg':
|
||||
case 'image/jpeg':
|
||||
case 'image/png':
|
||||
return IMAGE;
|
||||
|
||||
case 'image/gif':
|
||||
return GIF;
|
||||
|
||||
case 'video/mp4':
|
||||
case 'video/webm':
|
||||
return VIDEO;
|
||||
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
var createAssetMetaTags = function createAssetMetaTags(asset) {
|
||||
var claimData = asset.claimData;
|
||||
var contentType = claimData.contentType;
|
||||
var videoEmbedUrl = "".concat(host, "/video-embed/").concat(claimData.name, "/").concat(claimData.claimId);
|
||||
var showUrl = "".concat(host, "/").concat(claimData.claimId, "/").concat(claimData.name);
|
||||
var source = "".concat(host, "/").concat(claimData.claimId, "/").concat(claimData.name, ".").concat(claimData.fileExt);
|
||||
var ogTitle = claimData.title || claimData.name;
|
||||
var ogDescription = claimData.description || defaultDescription;
|
||||
var ogThumbnailContentType = (0, _determineContentTypeFromExtension.default)(claimData.thumbnail);
|
||||
var ogThumbnail = claimData.thumbnail || defaultThumbnail;
|
||||
var metaTags = [// page details
|
||||
{
|
||||
property: 'og:title',
|
||||
content: ogTitle
|
||||
}, {
|
||||
property: 'twitter:title',
|
||||
content: ogTitle
|
||||
}, {
|
||||
property: 'og:description',
|
||||
content: ogDescription
|
||||
}, {
|
||||
property: 'twitter:description',
|
||||
content: ogDescription
|
||||
}, // url
|
||||
{
|
||||
property: 'og:url',
|
||||
content: showUrl
|
||||
}, // site info
|
||||
{
|
||||
property: 'og:site_name',
|
||||
content: siteTitle
|
||||
}, {
|
||||
property: 'twitter:site',
|
||||
content: twitter
|
||||
}, {
|
||||
property: 'fb:app_id',
|
||||
content: '1371961932852223'
|
||||
}];
|
||||
|
||||
if (determineMediaType(contentType) === VIDEO) {
|
||||
// card type tags
|
||||
metaTags.push({
|
||||
property: 'og:type',
|
||||
content: 'video.other'
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:card',
|
||||
content: 'player'
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:player',
|
||||
content: videoEmbedUrl
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:player:width',
|
||||
content: 600
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:text:player_width',
|
||||
content: 600
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:player:height',
|
||||
content: 350
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:player:stream',
|
||||
content: source
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:player:stream:content_type',
|
||||
content: contentType
|
||||
}); // video tags
|
||||
|
||||
metaTags.push({
|
||||
property: 'og:video',
|
||||
content: source
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:video:secure_url',
|
||||
content: source
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:video:type',
|
||||
content: contentType
|
||||
}); // image tags
|
||||
|
||||
metaTags.push({
|
||||
property: 'og:image',
|
||||
content: ogThumbnail
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:image:width',
|
||||
content: 600
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:image:height',
|
||||
content: 315
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:image:type',
|
||||
content: ogThumbnailContentType
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:image',
|
||||
content: ogThumbnail
|
||||
});
|
||||
} else {
|
||||
// card type tags
|
||||
metaTags.push({
|
||||
property: 'og:type',
|
||||
content: 'article'
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:card',
|
||||
content: 'summary_large_image'
|
||||
}); // image tags
|
||||
|
||||
metaTags.push({
|
||||
property: 'og:image',
|
||||
content: source
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:image',
|
||||
content: source
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:image:width',
|
||||
content: 600
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:image:height',
|
||||
content: 315
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:image:type',
|
||||
content: contentType
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:image',
|
||||
content: source
|
||||
});
|
||||
}
|
||||
|
||||
return metaTags;
|
||||
};
|
||||
|
||||
var _default = createAssetMetaTags;
|
||||
exports.default = _default;
|
79
client/build/utils/createBasicMetaTags.js
Normal file
79
client/build/utils/createBasicMetaTags.js
Normal file
|
@ -0,0 +1,79 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
|
||||
|
||||
var _determineContentTypeFromExtension = _interopRequireDefault(require("./determineContentTypeFromExtension.js"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var _siteConfig$details = _siteConfig.default.details,
|
||||
description = _siteConfig$details.description,
|
||||
host = _siteConfig$details.host,
|
||||
title = _siteConfig$details.title,
|
||||
twitter = _siteConfig$details.twitter,
|
||||
thumbnail = _siteConfig.default.assetDefaults.thumbnail;
|
||||
|
||||
var createBasicMetaTags = function createBasicMetaTags() {
|
||||
return [// page details
|
||||
{
|
||||
property: 'og:title',
|
||||
content: title
|
||||
}, {
|
||||
property: 'twitter:title',
|
||||
content: title
|
||||
}, {
|
||||
property: 'og:description',
|
||||
content: description
|
||||
}, {
|
||||
property: 'twitter:description',
|
||||
content: description
|
||||
}, // url
|
||||
{
|
||||
property: 'og:url',
|
||||
content: host
|
||||
}, // site id
|
||||
{
|
||||
property: 'og:site_name',
|
||||
content: title
|
||||
}, {
|
||||
property: 'twitter:site',
|
||||
content: twitter
|
||||
}, {
|
||||
property: 'fb:app_id',
|
||||
content: '1371961932852223'
|
||||
}, // card type
|
||||
{
|
||||
property: 'og:type',
|
||||
content: 'article'
|
||||
}, {
|
||||
property: 'twitter:card',
|
||||
content: 'summary_large_image'
|
||||
}, // image
|
||||
{
|
||||
property: 'og:image',
|
||||
content: thumbnail
|
||||
}, {
|
||||
property: 'og:image:width',
|
||||
content: 600
|
||||
}, {
|
||||
property: 'og:image:height',
|
||||
content: 315
|
||||
}, {
|
||||
property: 'og:image:type',
|
||||
content: (0, _determineContentTypeFromExtension.default)(thumbnail)
|
||||
}, {
|
||||
property: 'twitter:image',
|
||||
content: thumbnail
|
||||
}, {
|
||||
property: 'twitter:image:alt',
|
||||
content: 'Spee.ch Logo'
|
||||
}];
|
||||
};
|
||||
|
||||
var _default = createBasicMetaTags;
|
||||
exports.default = _default;
|
55
client/build/utils/createCanonicalLink.js
Normal file
55
client/build/utils/createCanonicalLink.js
Normal file
|
@ -0,0 +1,55 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var host = _siteConfig.default.details.host;
|
||||
|
||||
var createBasicCanonicalLink = function createBasicCanonicalLink(page) {
|
||||
return "".concat(host, "/").concat(page);
|
||||
};
|
||||
|
||||
var createAssetCanonicalLink = function createAssetCanonicalLink(asset) {
|
||||
var channelName, certificateId, name, claimId;
|
||||
|
||||
if (asset.claimData) {
|
||||
var _asset$claimData = asset.claimData;
|
||||
channelName = _asset$claimData.channelName;
|
||||
certificateId = _asset$claimData.certificateId;
|
||||
name = _asset$claimData.name;
|
||||
claimId = _asset$claimData.claimId;
|
||||
}
|
||||
|
||||
if (channelName) {
|
||||
return "".concat(host, "/").concat(channelName, ":").concat(certificateId, "/").concat(name);
|
||||
}
|
||||
|
||||
return "".concat(host, "/").concat(claimId, "/").concat(name);
|
||||
};
|
||||
|
||||
var createChannelCanonicalLink = function createChannelCanonicalLink(channel) {
|
||||
var name = channel.name,
|
||||
longId = channel.longId;
|
||||
return "".concat(host, "/").concat(name, ":").concat(longId);
|
||||
};
|
||||
|
||||
var createCanonicalLink = function createCanonicalLink(asset, channel, page) {
|
||||
if (asset) {
|
||||
return createAssetCanonicalLink(asset);
|
||||
}
|
||||
|
||||
if (channel) {
|
||||
return createChannelCanonicalLink(channel);
|
||||
}
|
||||
|
||||
return createBasicCanonicalLink(page);
|
||||
};
|
||||
|
||||
var _default = createCanonicalLink;
|
||||
exports.default = _default;
|
81
client/build/utils/createChannelMetaTags.js
Normal file
81
client/build/utils/createChannelMetaTags.js
Normal file
|
@ -0,0 +1,81 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = exports.createChannelMetaTags = void 0;
|
||||
|
||||
var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
|
||||
|
||||
var _determineContentTypeFromExtension = _interopRequireDefault(require("./determineContentTypeFromExtension"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var _siteConfig$details = _siteConfig.default.details,
|
||||
host = _siteConfig$details.host,
|
||||
siteTitle = _siteConfig$details.title,
|
||||
twitter = _siteConfig$details.twitter,
|
||||
defaultThumbnail = _siteConfig.default.assetDefaults.thumbnail;
|
||||
|
||||
var createChannelMetaTags = function createChannelMetaTags(channel) {
|
||||
var name = channel.name,
|
||||
longId = channel.longId;
|
||||
return [// page detail tags
|
||||
{
|
||||
property: 'og:title',
|
||||
content: "".concat(name, " on ").concat(siteTitle)
|
||||
}, {
|
||||
property: 'twitter:title',
|
||||
content: "".concat(name, " on ").concat(siteTitle)
|
||||
}, {
|
||||
property: 'og:description',
|
||||
content: "".concat(name, ", a channel on ").concat(siteTitle)
|
||||
}, {
|
||||
property: 'twitter:description',
|
||||
content: "".concat(name, ", a channel on ").concat(siteTitle)
|
||||
}, // url
|
||||
{
|
||||
property: 'og:url',
|
||||
content: "".concat(host, "/").concat(name, ":").concat(longId)
|
||||
}, // site info
|
||||
{
|
||||
property: 'og:site_name',
|
||||
content: siteTitle
|
||||
}, {
|
||||
property: 'twitter:site',
|
||||
content: twitter
|
||||
}, {
|
||||
property: 'fb:app_id',
|
||||
content: '1371961932852223'
|
||||
}, // card type tags
|
||||
{
|
||||
property: 'og:type',
|
||||
content: 'article'
|
||||
}, {
|
||||
property: 'twitter:card',
|
||||
content: 'summary_large_image'
|
||||
}, // image tags
|
||||
{
|
||||
property: 'og:image',
|
||||
content: defaultThumbnail
|
||||
}, {
|
||||
property: 'og:image:width',
|
||||
content: 600
|
||||
}, {
|
||||
property: 'og:image:height',
|
||||
content: 315
|
||||
}, {
|
||||
property: 'og:image:type',
|
||||
content: (0, _determineContentTypeFromExtension.default)(defaultThumbnail)
|
||||
}, {
|
||||
property: 'twitter:image',
|
||||
content: defaultThumbnail
|
||||
}, {
|
||||
property: 'twitter:image:alt',
|
||||
content: 'Spee.ch Logo'
|
||||
}];
|
||||
};
|
||||
|
||||
exports.createChannelMetaTags = createChannelMetaTags;
|
||||
var _default = createChannelMetaTags;
|
||||
exports.default = _default;
|
32
client/build/utils/createMetaTags.js
Normal file
32
client/build/utils/createMetaTags.js
Normal file
|
@ -0,0 +1,32 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _createAssetMetaTags = _interopRequireDefault(require("./createAssetMetaTags"));
|
||||
|
||||
var _createChannelMetaTags = _interopRequireDefault(require("./createChannelMetaTags.js"));
|
||||
|
||||
var _createBasicMetaTags = _interopRequireDefault(require("./createBasicMetaTags.js"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var createMetaTags = function createMetaTags(_ref) {
|
||||
var asset = _ref.asset,
|
||||
channel = _ref.channel;
|
||||
|
||||
if (asset) {
|
||||
return (0, _createAssetMetaTags.default)(asset);
|
||||
}
|
||||
|
||||
if (channel) {
|
||||
return (0, _createChannelMetaTags.default)(channel);
|
||||
}
|
||||
|
||||
return (0, _createBasicMetaTags.default)();
|
||||
};
|
||||
|
||||
var _default = createMetaTags;
|
||||
exports.default = _default;
|
23
client/build/utils/createPageTitle.js
Normal file
23
client/build/utils/createPageTitle.js
Normal file
|
@ -0,0 +1,23 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var _siteConfig = _interopRequireDefault(require("@config/siteConfig.json"));
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
var siteTitle = _siteConfig.default.details.title;
|
||||
|
||||
var createPageTitle = function createPageTitle(pageTitle) {
|
||||
if (!pageTitle) {
|
||||
return "".concat(siteTitle);
|
||||
}
|
||||
|
||||
return "".concat(siteTitle, " - ").concat(pageTitle);
|
||||
};
|
||||
|
||||
var _default = createPageTitle;
|
||||
exports.default = _default;
|
35
client/build/utils/determineContentTypeFromExtension.js
Normal file
35
client/build/utils/determineContentTypeFromExtension.js
Normal file
|
@ -0,0 +1,35 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
|
||||
var determineContentTypeFromExtension = function determineContentTypeFromExtension(thumbnail) {
|
||||
if (thumbnail) {
|
||||
var fileExt = thumbnail.substring(thumbnail.lastIndexOf('.'));
|
||||
|
||||
switch (fileExt) {
|
||||
case 'jpeg':
|
||||
case 'jpg':
|
||||
return 'image/jpg';
|
||||
|
||||
case 'png':
|
||||
return 'image/png';
|
||||
|
||||
case 'gif':
|
||||
return 'image/gif';
|
||||
|
||||
case 'mp4':
|
||||
return 'video/mp4';
|
||||
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
var _default = determineContentTypeFromExtension;
|
||||
exports.default = _default;
|
|
@ -5,278 +5,25 @@ Object.defineProperty(exports, "__esModule", {
|
|||
});
|
||||
exports.createMetaTags = void 0;
|
||||
|
||||
var determineOgThumbnailContentType = function determineOgThumbnailContentType(thumbnail) {
|
||||
if (thumbnail) {
|
||||
var fileExt = thumbnail.substring(thumbnail.lastIndexOf('.'));
|
||||
var createAssetMetaTags = require('createAssetMetaTags.js');
|
||||
|
||||
switch (fileExt) {
|
||||
case 'jpeg':
|
||||
case 'jpg':
|
||||
return 'image/jpeg';
|
||||
var createChannelMetaTags = require('createChannelMetaTags.js');
|
||||
|
||||
case 'png':
|
||||
return 'image/png';
|
||||
var createBasicMetaTags = require('createBasicMetaTags.js');
|
||||
|
||||
case 'gif':
|
||||
return 'image/gif';
|
||||
|
||||
case 'mp4':
|
||||
return 'video/mp4';
|
||||
|
||||
default:
|
||||
return 'image/jpeg';
|
||||
}
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
var createBasicMetaTags = function createBasicMetaTags(_ref) {
|
||||
var siteHost = _ref.siteHost,
|
||||
siteDescription = _ref.siteDescription,
|
||||
siteTitle = _ref.siteTitle,
|
||||
siteTwitter = _ref.siteTwitter,
|
||||
defaultThumbnail = _ref.defaultThumbnail;
|
||||
return [{
|
||||
property: 'og:title',
|
||||
content: siteTitle
|
||||
}, {
|
||||
property: 'twitter:title',
|
||||
content: siteTitle
|
||||
}, {
|
||||
property: 'og:url',
|
||||
content: siteHost
|
||||
}, {
|
||||
property: 'og:site_name',
|
||||
content: siteTitle
|
||||
}, {
|
||||
property: 'og:description',
|
||||
content: siteDescription
|
||||
}, {
|
||||
property: 'twitter:description',
|
||||
content: siteDescription
|
||||
}, {
|
||||
property: 'twitter:site',
|
||||
content: siteTwitter
|
||||
}, {
|
||||
property: 'twitter:card',
|
||||
content: 'summary_large_image'
|
||||
}, {
|
||||
property: 'og:image',
|
||||
content: defaultThumbnail
|
||||
}, {
|
||||
property: 'twitter:image',
|
||||
content: defaultThumbnail
|
||||
}, {
|
||||
property: 'og:image:type',
|
||||
content: 'image/jpeg'
|
||||
}];
|
||||
};
|
||||
|
||||
var createChannelMetaTags = function createChannelMetaTags(_ref2) {
|
||||
var siteHost = _ref2.siteHost,
|
||||
siteTitle = _ref2.siteTitle,
|
||||
siteTwitter = _ref2.siteTwitter,
|
||||
channel = _ref2.channel,
|
||||
defaultThumbnail = _ref2.defaultThumbnail;
|
||||
var name = channel.name,
|
||||
longId = channel.longId;
|
||||
return [{
|
||||
property: 'og:title',
|
||||
content: "".concat(name, " on ").concat(siteTitle)
|
||||
}, {
|
||||
property: 'twitter:title',
|
||||
content: "".concat(name, " on ").concat(siteTitle)
|
||||
}, {
|
||||
property: 'og:url',
|
||||
content: "".concat(siteHost, "/").concat(name, ":").concat(longId)
|
||||
}, {
|
||||
property: 'og:site_name',
|
||||
content: siteTitle
|
||||
}, {
|
||||
property: 'og:description',
|
||||
content: "".concat(name, ", a channel on ").concat(siteTitle)
|
||||
}, {
|
||||
property: 'twitter:site',
|
||||
content: siteTwitter
|
||||
}, {
|
||||
property: 'twitter:card',
|
||||
content: 'summary'
|
||||
}, {
|
||||
property: 'og:image',
|
||||
content: defaultThumbnail
|
||||
}, {
|
||||
property: 'twitter:image',
|
||||
content: 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 contentType = claimData.contentType;
|
||||
var videoEmbedUrl = "".concat(siteHost, "/video-embed/").concat(claimData.name, "/").concat(claimData.claimId);
|
||||
var showUrl = "".concat(siteHost, "/").concat(claimData.claimId, "/").concat(claimData.name);
|
||||
var source = "".concat(siteHost, "/").concat(claimData.claimId, "/").concat(claimData.name, ".").concat(claimData.fileExt);
|
||||
var ogTitle = claimData.title || claimData.name;
|
||||
var ogDescription = claimData.description || defaultDescription;
|
||||
var ogThumbnailContentType = determineOgThumbnailContentType(claimData.thumbnail);
|
||||
var ogThumbnail = claimData.thumbnail || defaultThumbnail;
|
||||
var metaTags = [{
|
||||
property: 'og:title',
|
||||
content: ogTitle
|
||||
}, {
|
||||
property: 'twitter:title',
|
||||
content: ogTitle
|
||||
}, {
|
||||
property: 'og:url',
|
||||
content: showUrl
|
||||
}, {
|
||||
property: 'og:site_name',
|
||||
content: siteTitle
|
||||
}, {
|
||||
property: 'og:description',
|
||||
content: ogDescription
|
||||
}, {
|
||||
property: 'twitter:description',
|
||||
content: ogDescription
|
||||
}, {
|
||||
property: 'og:image:width',
|
||||
content: 600
|
||||
}, {
|
||||
property: 'og:image:height',
|
||||
content: 315
|
||||
}, {
|
||||
property: 'twitter:site',
|
||||
content: siteTwitter
|
||||
}];
|
||||
|
||||
if (contentType === 'video/mp4' || contentType === 'video/webm') {
|
||||
metaTags.push({
|
||||
property: 'og:video',
|
||||
content: source
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:video:secure_url',
|
||||
content: source
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:video:type',
|
||||
content: contentType
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:image',
|
||||
content: ogThumbnail
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:image',
|
||||
content: ogThumbnail
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:image:type',
|
||||
content: ogThumbnailContentType
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:type',
|
||||
content: 'video.other'
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:card',
|
||||
content: 'player'
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:player',
|
||||
content: videoEmbedUrl
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:player:width',
|
||||
content: 600
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:text:player_width',
|
||||
content: 600
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:player:height',
|
||||
content: 337
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:player:stream',
|
||||
content: source
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:player:stream:content_type',
|
||||
content: contentType
|
||||
});
|
||||
} else {
|
||||
metaTags.push({
|
||||
property: 'og:image',
|
||||
content: source
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:image',
|
||||
content: source
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:image:type',
|
||||
content: contentType
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'og:type',
|
||||
content: 'article'
|
||||
});
|
||||
metaTags.push({
|
||||
property: 'twitter:card',
|
||||
content: 'summary_large_image'
|
||||
});
|
||||
}
|
||||
|
||||
return metaTags;
|
||||
};
|
||||
|
||||
var createMetaTags = function createMetaTags(_ref4) {
|
||||
var siteDescription = _ref4.siteDescription,
|
||||
siteHost = _ref4.siteHost,
|
||||
siteTitle = _ref4.siteTitle,
|
||||
siteTwitter = _ref4.siteTwitter,
|
||||
asset = _ref4.asset,
|
||||
channel = _ref4.channel,
|
||||
defaultDescription = _ref4.defaultDescription,
|
||||
defaultThumbnail = _ref4.defaultThumbnail;
|
||||
var createMetaTags = function createMetaTags(_ref) {
|
||||
var asset = _ref.asset,
|
||||
channel = _ref.channel;
|
||||
|
||||
if (asset) {
|
||||
return createAssetMetaTags({
|
||||
siteHost: siteHost,
|
||||
siteTitle: siteTitle,
|
||||
siteTwitter: siteTwitter,
|
||||
asset: asset,
|
||||
defaultDescription: defaultDescription,
|
||||
defaultThumbnail: defaultThumbnail
|
||||
});
|
||||
return createAssetMetaTags(asset);
|
||||
}
|
||||
|
||||
if (channel) {
|
||||
return createChannelMetaTags({
|
||||
siteHost: siteHost,
|
||||
siteTitle: siteTitle,
|
||||
siteTwitter: siteTwitter,
|
||||
channel: channel,
|
||||
defaultThumbnail: defaultThumbnail
|
||||
});
|
||||
return createChannelMetaTags(channel);
|
||||
}
|
||||
|
||||
return createBasicMetaTags({
|
||||
siteDescription: siteDescription,
|
||||
siteHost: siteHost,
|
||||
siteTitle: siteTitle,
|
||||
siteTwitter: siteTwitter,
|
||||
defaultThumbnail: defaultThumbnail
|
||||
});
|
||||
return createBasicMetaTags();
|
||||
};
|
||||
|
||||
exports.createMetaTags = createMetaTags;
|
|
@ -1,16 +1,4 @@
|
|||
import { connect } from 'react-redux';
|
||||
import View from './view';
|
||||
|
||||
const mapStateToProps = ({ site }) => {
|
||||
const { defaultDescription, defaultThumbnail, description: siteDescription, host: siteHost, title: siteTitle, twitter: siteTwitter } = site;
|
||||
return {
|
||||
defaultDescription,
|
||||
defaultThumbnail,
|
||||
siteDescription,
|
||||
siteHost,
|
||||
siteTitle,
|
||||
siteTwitter,
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, null)(View);
|
||||
export default connect(null, null)(View);
|
||||
|
|
|
@ -2,30 +2,22 @@ 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';
|
||||
import createPageTitle from '../../utils/createPageTitle';
|
||||
import createMetaTags from '../../utils/createMetaTags';
|
||||
import createCanonicalLink from '../../utils/createCanonicalLink';
|
||||
|
||||
class SEO extends React.Component {
|
||||
render () {
|
||||
// props from state
|
||||
const { defaultDescription, defaultThumbnail, siteDescription, siteHost, siteTitle, siteTwitter } = this.props;
|
||||
// props from parent
|
||||
const { asset, channel, pageUri } = this.props;
|
||||
let { pageTitle } = this.props;
|
||||
// create page title, tags, and canonical link
|
||||
pageTitle = createPageTitle(siteTitle, pageTitle);
|
||||
pageTitle = createPageTitle(pageTitle);
|
||||
const metaTags = createMetaTags({
|
||||
siteDescription,
|
||||
siteHost,
|
||||
siteTitle,
|
||||
siteTwitter,
|
||||
asset,
|
||||
channel,
|
||||
defaultDescription,
|
||||
defaultThumbnail,
|
||||
});
|
||||
const canonicalLink = createCanonicalLink(asset, channel, pageUri, siteHost);
|
||||
const canonicalLink = createCanonicalLink(asset, channel, pageUri);
|
||||
// render results
|
||||
return (
|
||||
<Helmet
|
||||
|
|
|
@ -1,29 +0,0 @@
|
|||
const createBasicCanonicalLink = (page, siteHost) => {
|
||||
return `${siteHost}/${page}`;
|
||||
};
|
||||
|
||||
const createAssetCanonicalLink = (asset, siteHost) => {
|
||||
let channelName, certificateId, name, claimId;
|
||||
if (asset.claimData) {
|
||||
({ channelName, certificateId, name, claimId } = asset.claimData);
|
||||
};
|
||||
if (channelName) {
|
||||
return `${siteHost}/${channelName}:${certificateId}/${name}`;
|
||||
};
|
||||
return `${siteHost}/${claimId}/${name}`;
|
||||
};
|
||||
|
||||
const createChannelCanonicalLink = (channel, siteHost) => {
|
||||
const { name, longId } = channel;
|
||||
return `${siteHost}/${name}:${longId}`;
|
||||
};
|
||||
|
||||
export const createCanonicalLink = (asset, channel, page, siteHost) => {
|
||||
if (asset) {
|
||||
return createAssetCanonicalLink(asset, siteHost);
|
||||
}
|
||||
if (channel) {
|
||||
return createChannelCanonicalLink(channel, siteHost);
|
||||
}
|
||||
return createBasicCanonicalLink(page, siteHost);
|
||||
};
|
|
@ -1,4 +1,17 @@
|
|||
const determineContentTypeFromExtension = require('determineContentTypeFromExtension.js');
|
||||
import siteConfig from '@config/siteConfig.json';
|
||||
import determineContentTypeFromExtension from './determineContentTypeFromExtension';
|
||||
|
||||
const {
|
||||
details: {
|
||||
host,
|
||||
title: siteTitle,
|
||||
twitter,
|
||||
},
|
||||
assetDefaults: {
|
||||
description: defaultDescription,
|
||||
thumbnail: defaultThumbnail,
|
||||
},
|
||||
} = siteConfig;
|
||||
|
||||
const VIDEO = 'VIDEO';
|
||||
const IMAGE = 'IMAGE';
|
||||
|
@ -20,12 +33,12 @@ const determineMediaType = (contentType) => {
|
|||
}
|
||||
};
|
||||
|
||||
const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail}) => {
|
||||
const createAssetMetaTags = (asset) => {
|
||||
const { claimData } = asset;
|
||||
const { contentType } = claimData;
|
||||
const videoEmbedUrl = `${siteHost}/video-embed/${claimData.name}/${claimData.claimId}`;
|
||||
const showUrl = `${siteHost}/${claimData.claimId}/${claimData.name}`;
|
||||
const source = `${siteHost}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
|
||||
const videoEmbedUrl = `${host}/video-embed/${claimData.name}/${claimData.claimId}`;
|
||||
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 = determineContentTypeFromExtension(claimData.thumbnail);
|
||||
|
@ -40,7 +53,7 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
|
|||
{property: 'og:url', content: showUrl},
|
||||
// site info
|
||||
{property: 'og:site_name', content: siteTitle},
|
||||
{property: 'twitter:site', content: siteTwitter},
|
||||
{property: 'twitter:site', content: twitter},
|
||||
{property: 'fb:app_id', content: '1371961932852223'},
|
||||
];
|
||||
if (determineMediaType(contentType) === VIDEO) {
|
||||
|
@ -78,4 +91,4 @@ const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDe
|
|||
return metaTags;
|
||||
};
|
||||
|
||||
module.exports = createAssetMetaTags;
|
||||
export default createAssetMetaTags;
|
||||
|
|
|
@ -1,29 +1,42 @@
|
|||
const determineContentTypeFromExtension = require('./determineContentTypeFromExtension.js');
|
||||
import siteConfig from '@config/siteConfig.json';
|
||||
import determineContentTypeFromExtension from './determineContentTypeFromExtension.js';
|
||||
|
||||
const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter, defaultThumbnail}) => {
|
||||
const {
|
||||
details: {
|
||||
description,
|
||||
host,
|
||||
title,
|
||||
twitter,
|
||||
},
|
||||
assetDefaults: {
|
||||
thumbnail,
|
||||
},
|
||||
} = siteConfig;
|
||||
|
||||
const createBasicMetaTags = () => {
|
||||
return [
|
||||
// page details
|
||||
{property: 'og:title', content: siteTitle},
|
||||
{property: 'twitter:title', content: siteTitle},
|
||||
{property: 'og:description', content: siteDescription},
|
||||
{property: 'twitter:description', content: siteDescription},
|
||||
{property: 'og:title', content: title},
|
||||
{property: 'twitter:title', content: title},
|
||||
{property: 'og:description', content: description},
|
||||
{property: 'twitter:description', content: description},
|
||||
// url
|
||||
{property: 'og:url', content: siteHost},
|
||||
{property: 'og:url', content: host},
|
||||
// site id
|
||||
{property: 'og:site_name', content: siteTitle},
|
||||
{property: 'twitter:site', content: siteTwitter},
|
||||
{property: 'og:site_name', content: title},
|
||||
{property: 'twitter:site', content: twitter},
|
||||
{property: 'fb:app_id', content: '1371961932852223'},
|
||||
// card type
|
||||
{property: 'og:type', content: 'article'},
|
||||
{property: 'twitter:card', content: 'summary_large_image'},
|
||||
// image
|
||||
{property: 'og:image', content: defaultThumbnail},
|
||||
{property: 'og:image', content: thumbnail},
|
||||
{property: 'og:image:width', content: 600},
|
||||
{property: 'og:image:height', content: 315},
|
||||
{property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)},
|
||||
{property: 'twitter:image', content: defaultThumbnail},
|
||||
{property: 'og:image:type', content: determineContentTypeFromExtension(thumbnail)},
|
||||
{property: 'twitter:image', content: thumbnail},
|
||||
{property: 'twitter:image:alt', content: 'Spee.ch Logo'},
|
||||
];
|
||||
};
|
||||
|
||||
module.exports = createBasicMetaTags;
|
||||
export default createBasicMetaTags;
|
||||
|
|
39
client/src/utils/createCanonicalLink.js
Normal file
39
client/src/utils/createCanonicalLink.js
Normal file
|
@ -0,0 +1,39 @@
|
|||
import siteConfig from '@config/siteConfig.json';
|
||||
|
||||
const {
|
||||
details: {
|
||||
host,
|
||||
},
|
||||
} = siteConfig;
|
||||
|
||||
const createBasicCanonicalLink = (page) => {
|
||||
return `${host}/${page}`;
|
||||
};
|
||||
|
||||
const createAssetCanonicalLink = (asset) => {
|
||||
let channelName, certificateId, name, claimId;
|
||||
if (asset.claimData) {
|
||||
({ channelName, certificateId, name, claimId } = asset.claimData);
|
||||
}
|
||||
if (channelName) {
|
||||
return `${host}/${channelName}:${certificateId}/${name}`;
|
||||
}
|
||||
return `${host}/${claimId}/${name}`;
|
||||
};
|
||||
|
||||
const createChannelCanonicalLink = (channel) => {
|
||||
const { name, longId } = channel;
|
||||
return `${host}/${name}:${longId}`;
|
||||
};
|
||||
|
||||
const createCanonicalLink = (asset, channel, page) => {
|
||||
if (asset) {
|
||||
return createAssetCanonicalLink(asset);
|
||||
}
|
||||
if (channel) {
|
||||
return createChannelCanonicalLink(channel);
|
||||
}
|
||||
return createBasicCanonicalLink(page);
|
||||
};
|
||||
|
||||
export default createCanonicalLink;
|
|
@ -1,6 +1,18 @@
|
|||
const determineContentTypeFromExtension = require('determineContentTypeFromExtension.js');
|
||||
import siteConfig from '@config/siteConfig.json';
|
||||
import determineContentTypeFromExtension from './determineContentTypeFromExtension';
|
||||
|
||||
const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defaultThumbnail}) => {
|
||||
const {
|
||||
details: {
|
||||
host,
|
||||
title: siteTitle,
|
||||
twitter,
|
||||
},
|
||||
assetDefaults: {
|
||||
thumbnail: defaultThumbnail,
|
||||
},
|
||||
} = siteConfig;
|
||||
|
||||
export const createChannelMetaTags = (channel) => {
|
||||
const { name, longId } = channel;
|
||||
return [
|
||||
// page detail tags
|
||||
|
@ -9,10 +21,10 @@ const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defau
|
|||
{property: 'og:description', content: `${name}, a channel on ${siteTitle}`},
|
||||
{property: 'twitter:description', content: `${name}, a channel on ${siteTitle}`},
|
||||
// url
|
||||
{property: 'og:url', content: `${siteHost}/${name}:${longId}`},
|
||||
{property: 'og:url', content: `${host}/${name}:${longId}`},
|
||||
// site info
|
||||
{property: 'og:site_name', content: siteTitle},
|
||||
{property: 'twitter:site', content: siteTwitter},
|
||||
{property: 'twitter:site', content: twitter},
|
||||
{property: 'fb:app_id', content: '1371961932852223'},
|
||||
// card type tags
|
||||
{property: 'og:type', content: 'article'},
|
||||
|
@ -27,4 +39,4 @@ const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defau
|
|||
];
|
||||
};
|
||||
|
||||
module.exports = createChannelMetaTags;
|
||||
export default createChannelMetaTags;
|
||||
|
|
15
client/src/utils/createMetaTags.js
Normal file
15
client/src/utils/createMetaTags.js
Normal file
|
@ -0,0 +1,15 @@
|
|||
import createAssetMetaTags from './createAssetMetaTags';
|
||||
import createChannelMetaTags from './createChannelMetaTags.js';
|
||||
import createBasicMetaTags from './createBasicMetaTags.js';
|
||||
|
||||
const createMetaTags = ({ asset, channel }) => {
|
||||
if (asset) {
|
||||
return createAssetMetaTags(asset);
|
||||
}
|
||||
if (channel) {
|
||||
return createChannelMetaTags(channel);
|
||||
}
|
||||
return createBasicMetaTags();
|
||||
};
|
||||
|
||||
export default createMetaTags;
|
16
client/src/utils/createPageTitle.js
Normal file
16
client/src/utils/createPageTitle.js
Normal file
|
@ -0,0 +1,16 @@
|
|||
import siteConfig from '@config/siteConfig.json';
|
||||
|
||||
const {
|
||||
details: {
|
||||
title: siteTitle,
|
||||
},
|
||||
} = siteConfig;
|
||||
|
||||
const createPageTitle = (pageTitle) => {
|
||||
if (!pageTitle) {
|
||||
return `${siteTitle}`;
|
||||
}
|
||||
return `${siteTitle} - ${pageTitle}`;
|
||||
};
|
||||
|
||||
export default createPageTitle;
|
|
@ -18,4 +18,4 @@ const determineContentTypeFromExtension = (thumbnail) => {
|
|||
return '';
|
||||
};
|
||||
|
||||
module.exports = determineContentTypeFromExtension;
|
||||
export default determineContentTypeFromExtension;
|
||||
|
|
|
@ -1,32 +0,0 @@
|
|||
const createAssetMetaTags = require('createAssetMetaTags.js');
|
||||
const createChannelMetaTags = require('createChannelMetaTags.js');
|
||||
const createBasicMetaTags = require('createBasicMetaTags.js');
|
||||
|
||||
export const createMetaTags = ({ siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail }) => {
|
||||
if (asset) {
|
||||
return createAssetMetaTags({
|
||||
siteHost,
|
||||
siteTitle,
|
||||
siteTwitter,
|
||||
asset,
|
||||
defaultDescription,
|
||||
defaultThumbnail,
|
||||
});
|
||||
}
|
||||
if (channel) {
|
||||
return createChannelMetaTags({
|
||||
siteHost,
|
||||
siteTitle,
|
||||
siteTwitter,
|
||||
channel,
|
||||
defaultThumbnail,
|
||||
});
|
||||
}
|
||||
return createBasicMetaTags({
|
||||
siteDescription,
|
||||
siteHost,
|
||||
siteTitle,
|
||||
siteTwitter,
|
||||
defaultThumbnail,
|
||||
});
|
||||
};
|
|
@ -1,6 +0,0 @@
|
|||
export const createPageTitle = (siteTitle, pageTitle) => {
|
||||
if (!pageTitle) {
|
||||
return `${siteTitle}`;
|
||||
}
|
||||
return `${siteTitle} - ${pageTitle}`;
|
||||
};
|
Loading…
Reference in a new issue