From e447e16544cae7c492ffc5de92a1635231cf5af8 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 19 Jul 2018 13:37:23 -0700 Subject: [PATCH] changed SEO utils to pull info directly from config --- client/build/containers/SEO/index.js | 20 +- client/build/containers/SEO/view.js | 36 +-- client/build/utils/createAssetMetaTags.js | 192 +++++++++++++ client/build/utils/createBasicMetaTags.js | 79 +++++ client/build/utils/createCanonicalLink.js | 55 ++++ client/build/utils/createChannelMetaTags.js | 81 ++++++ client/build/utils/createMetaTags.js | 32 +++ client/build/utils/createPageTitle.js | 23 ++ .../determineContentTypeFromExtension.js | 35 +++ client/build/utils/metaTags.js | 271 +----------------- client/src/containers/SEO/index.js | 14 +- client/src/containers/SEO/view.jsx | 18 +- client/src/utils/canonicalLink.js | 29 -- client/src/utils/createAssetMetaTags.js | 27 +- client/src/utils/createBasicMetaTags.js | 39 ++- client/src/utils/createCanonicalLink.js | 39 +++ client/src/utils/createChannelMetaTags.js | 22 +- client/src/utils/createMetaTags.js | 15 + client/src/utils/createPageTitle.js | 16 ++ .../determineContentTypeFromExtension.js | 2 +- client/src/utils/metaTags.js | 32 --- client/src/utils/pageTitle.js | 6 - 22 files changed, 658 insertions(+), 425 deletions(-) create mode 100644 client/build/utils/createAssetMetaTags.js create mode 100644 client/build/utils/createBasicMetaTags.js create mode 100644 client/build/utils/createCanonicalLink.js create mode 100644 client/build/utils/createChannelMetaTags.js create mode 100644 client/build/utils/createMetaTags.js create mode 100644 client/build/utils/createPageTitle.js create mode 100644 client/build/utils/determineContentTypeFromExtension.js delete mode 100644 client/src/utils/canonicalLink.js create mode 100644 client/src/utils/createCanonicalLink.js create mode 100644 client/src/utils/createMetaTags.js create mode 100644 client/src/utils/createPageTitle.js delete mode 100644 client/src/utils/metaTags.js delete mode 100644 client/src/utils/pageTitle.js diff --git a/client/build/containers/SEO/index.js b/client/build/containers/SEO/index.js index 68ed79ed..bbd3c41e 100644 --- a/client/build/containers/SEO/index.js +++ b/client/build/containers/SEO/index.js @@ -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; \ No newline at end of file diff --git a/client/build/containers/SEO/view.js b/client/build/containers/SEO/view.js index 659abd7f..16b25365 100644 --- a/client/build/containers/SEO/view.js +++ b/client/build/containers/SEO/view.js @@ -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, diff --git a/client/build/utils/createAssetMetaTags.js b/client/build/utils/createAssetMetaTags.js new file mode 100644 index 00000000..1a8d5476 --- /dev/null +++ b/client/build/utils/createAssetMetaTags.js @@ -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; \ No newline at end of file diff --git a/client/build/utils/createBasicMetaTags.js b/client/build/utils/createBasicMetaTags.js new file mode 100644 index 00000000..00d1709a --- /dev/null +++ b/client/build/utils/createBasicMetaTags.js @@ -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; \ No newline at end of file diff --git a/client/build/utils/createCanonicalLink.js b/client/build/utils/createCanonicalLink.js new file mode 100644 index 00000000..281a68e4 --- /dev/null +++ b/client/build/utils/createCanonicalLink.js @@ -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; \ No newline at end of file diff --git a/client/build/utils/createChannelMetaTags.js b/client/build/utils/createChannelMetaTags.js new file mode 100644 index 00000000..71134e84 --- /dev/null +++ b/client/build/utils/createChannelMetaTags.js @@ -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; \ No newline at end of file diff --git a/client/build/utils/createMetaTags.js b/client/build/utils/createMetaTags.js new file mode 100644 index 00000000..98c33201 --- /dev/null +++ b/client/build/utils/createMetaTags.js @@ -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; \ No newline at end of file diff --git a/client/build/utils/createPageTitle.js b/client/build/utils/createPageTitle.js new file mode 100644 index 00000000..72577c0e --- /dev/null +++ b/client/build/utils/createPageTitle.js @@ -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; \ No newline at end of file diff --git a/client/build/utils/determineContentTypeFromExtension.js b/client/build/utils/determineContentTypeFromExtension.js new file mode 100644 index 00000000..ecaa987e --- /dev/null +++ b/client/build/utils/determineContentTypeFromExtension.js @@ -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; \ No newline at end of file diff --git a/client/build/utils/metaTags.js b/client/build/utils/metaTags.js index 7bcf305e..383a32f0 100644 --- a/client/build/utils/metaTags.js +++ b/client/build/utils/metaTags.js @@ -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; \ No newline at end of file diff --git a/client/src/containers/SEO/index.js b/client/src/containers/SEO/index.js index 8a004ff6..8cec1202 100644 --- a/client/src/containers/SEO/index.js +++ b/client/src/containers/SEO/index.js @@ -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); diff --git a/client/src/containers/SEO/view.jsx b/client/src/containers/SEO/view.jsx index 58c12cf3..85574695 100644 --- a/client/src/containers/SEO/view.jsx +++ b/client/src/containers/SEO/view.jsx @@ -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 ( { - 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); -}; diff --git a/client/src/utils/createAssetMetaTags.js b/client/src/utils/createAssetMetaTags.js index 539e2cd3..c207676f 100644 --- a/client/src/utils/createAssetMetaTags.js +++ b/client/src/utils/createAssetMetaTags.js @@ -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; diff --git a/client/src/utils/createBasicMetaTags.js b/client/src/utils/createBasicMetaTags.js index 1eac8331..a6233615 100644 --- a/client/src/utils/createBasicMetaTags.js +++ b/client/src/utils/createBasicMetaTags.js @@ -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; diff --git a/client/src/utils/createCanonicalLink.js b/client/src/utils/createCanonicalLink.js new file mode 100644 index 00000000..d73e183d --- /dev/null +++ b/client/src/utils/createCanonicalLink.js @@ -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; diff --git a/client/src/utils/createChannelMetaTags.js b/client/src/utils/createChannelMetaTags.js index ffb82a3c..a74548b4 100644 --- a/client/src/utils/createChannelMetaTags.js +++ b/client/src/utils/createChannelMetaTags.js @@ -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; diff --git a/client/src/utils/createMetaTags.js b/client/src/utils/createMetaTags.js new file mode 100644 index 00000000..19287478 --- /dev/null +++ b/client/src/utils/createMetaTags.js @@ -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; diff --git a/client/src/utils/createPageTitle.js b/client/src/utils/createPageTitle.js new file mode 100644 index 00000000..0093e190 --- /dev/null +++ b/client/src/utils/createPageTitle.js @@ -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; diff --git a/client/src/utils/determineContentTypeFromExtension.js b/client/src/utils/determineContentTypeFromExtension.js index de2ed530..cd7f85b4 100644 --- a/client/src/utils/determineContentTypeFromExtension.js +++ b/client/src/utils/determineContentTypeFromExtension.js @@ -18,4 +18,4 @@ const determineContentTypeFromExtension = (thumbnail) => { return ''; }; -module.exports = determineContentTypeFromExtension; +export default determineContentTypeFromExtension; diff --git a/client/src/utils/metaTags.js b/client/src/utils/metaTags.js deleted file mode 100644 index 9dd8167d..00000000 --- a/client/src/utils/metaTags.js +++ /dev/null @@ -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, - }); -}; diff --git a/client/src/utils/pageTitle.js b/client/src/utils/pageTitle.js deleted file mode 100644 index 2b577c0b..00000000 --- a/client/src/utils/pageTitle.js +++ /dev/null @@ -1,6 +0,0 @@ -export const createPageTitle = (siteTitle, pageTitle) => { - if (!pageTitle) { - return `${siteTitle}`; - } - return `${siteTitle} - ${pageTitle}`; -};