@quintype/seo 1.42.0-watermark-feature.12 → 1.42.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.42.0](https://github.com/quintype/quintype-node-seo/compare/v1.40.13...v1.42.0) (2023-04-03)
+
+
+### Features
+
+* **canonical:** Add canonical url toggle ([#539](https://github.com/quintype/quintype-node-seo/issues/539)) ([3c18124](https://github.com/quintype/quintype-node-seo/commit/3c181249b7adb06061a8a4c16aa71b640b21679c))
+
+
+### Bug Fixes
+
+* **canonical:** Toggle canonical tags ([1f8a4fe](https://github.com/quintype/quintype-node-seo/commit/1f8a4fe0955688080095275290dabe79dc6344d6))
+* **dates:**  update  datePublished ([#537](https://github.com/quintype/quintype-node-seo/issues/537)) ([b81f1ae](https://github.com/quintype/quintype-node-seo/commit/b81f1aeef63937673f376203a8d7a45b7a0de2b3))
+
 ### [1.41.4](https://github.com/quintype/quintype-node-seo/compare/v1.41.4-gsc-errors-fix.0...v1.41.4) (2022-12-12)
 
 ### [1.41.3](https://github.com/quintype/quintype-node-seo/compare/v1.41.2...v1.41.3) (2022-12-02)

package/dist/index.cjs.js

@@ -6,8 +6,8 @@ var lodash = require('lodash');
 var React = require('react');
 var ReactDomServer = require('react-dom/server');
 var get = require('lodash/get');
-var dateFnsTz = require('date-fns-tz');
 var url = require('url');
+var dateFnsTz = require('date-fns-tz');
 var isUndefined = require('lodash/isUndefined');
 var omitBy = require('lodash/omitBy');
 var quintypeJs = require('quintype-js');
@@ -25,7 +25,7 @@ function objectToTags(object) {
 }
 
 function getPropertyName(key) {
-  return key.startsWith("fb:") || key.startsWith("og:") ? "property" : "name";
+  return key.startsWith('fb:') || key.startsWith('og:') ? 'property' : 'name';
 }
 
 function stripMillisecondsFromTime(date, timezone) {
@@ -33,28 +33,20 @@ function stripMillisecondsFromTime(date, timezone) {
   if (!toReturn) return toReturn;
   const zonedTime = timezone && dateFnsTz.utcToZonedTime(date, timezone);
   const formatZonedTime = zonedTime && dateFnsTz.format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", { timeZone: timezone });
-  const formatToReturn = toReturn.split(".")[0] + "Z";
+  const formatToReturn = toReturn.split('.')[0] + "Z";
   return timezone ? formatZonedTime : formatToReturn;
 }
 
 function getQueryParams(url$1) {
   const urlObj = new url.URL(url$1);
   const search_params = new url.URLSearchParams(urlObj.search);
-  const getWidth = search_params.get("w") || "";
-  const getHeight = search_params.get("h") || "";
+  const getWidth = search_params.get('w') || '';
+  const getHeight = search_params.get('h') || '';
   return { width: getWidth, height: getHeight };
 }
 
 function isStoryPublic(story) {
-  return story.access === undefined || story.access === null || story.access === "public";
-}
-
-function getWatermarkImage(story, cdnSrc, cdnURL) {
-  const watermarkImageS3Key = lodash.get(story, ["watermark", "social", "image-s3-key"], "");
-  if (cdnSrc && cdnSrc.includes("gumlet") && watermarkImageS3Key.length > 0) {
-    return `https://${cdnURL}/${watermarkImageS3Key}`;
-  }
-  return watermarkImageS3Key;
+  return story.access === undefined || story.access === null || story.access === 'public';
 }
 
 function showAmpTag({ ampStoryPages = true }, pageType, story) {
@@ -328,13 +320,6 @@ function pickImage({ pageType, config, seoConfig, data, url }) {
  */
 function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
   const { image, alt, includesHost = false } = pickImage({ pageType, data, url, seoConfig, config });
-  const dataObj = lodash.get(data, ["data"], {});
-  const story = lodash.get(dataObj, ["story"], {});
-  const publisherConfig = lodash.get(data, ["config", "publisher-attributes"], {});
-  const fallbackValue = dataObj.hasOwnProperty("collection") ? true : false;
-  const isWatermarkDisabled = lodash.get(story, ["metadata", "watermark-image", "disabled"], fallbackValue);
-  const imageCdnSrc = publisherConfig.cdn_src;
-  const imageCdnUrl = publisherConfig.cdn_image || config["cdn-image"];
 
   if (!image) {
     return [];
@@ -346,44 +331,15 @@ function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
     tags.push({ name: "robots", content: "max-image-preview:large" });
   }
 
-  const getImageUrl = (imageRatio, imageProp) => {
-    return includesHost ? image : `https://${imageCdnUrl}/${image.path(imageRatio, imageProp)}`;
-  };
-
-  const getContent = (actualImageAR, watermarkImageAR) => {
-    const actualImageProp = {
-      w: 1200,
-      ar: actualImageAR.join(":"),
-      auto: "format,compress",
-      ogImage: true,
-      mode: "crop",
-      enlarge: true
-    };
-    const watermarkImageProp = {
-      w: 1200,
-      ar: watermarkImageAR.join(":"),
-      auto: "format,compress",
-      ogImage: true,
-      mode: "crop",
-      enlarge: true
-    };
-
-    const overlayWatermarkProp = Object.assign({}, watermarkImageProp, {
-      overlay: getWatermarkImage(story, imageCdnSrc, imageCdnUrl),
-      overlay_position: "bottom"
-    });
-    const updatedOverlay = imageCdnSrc && imageCdnSrc.includes("gumlet") ? Object.assign({}, overlayWatermarkProp, {
-      overlay_width_pct: 1
-    }) : Object.assign({}, overlayWatermarkProp, {
-      overlay_width: 100
-    });
-    return isWatermarkDisabled ? getImageUrl(actualImageAR, actualImageProp) : getImageUrl(watermarkImageAR, updatedOverlay);
-  };
-
   if (seoConfig.enableTwitterCards) {
     tags.push({
       name: "twitter:image",
-      content: getContent([16, 9], [40, 21])
+      content: includesHost ? image : `https://${config["cdn-image"]}/${image.path([16, 9], {
+        w: 1200,
+        auto: "format,compress",
+        ogImage: true,
+        enlarge: true
+      })}`
     });
     alt && tags.push({ property: "twitter:image:alt", content: alt });
   }
@@ -391,7 +347,12 @@ function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
   if (seoConfig.enableOgTags) {
     tags.push({
       property: "og:image",
-      content: getContent([40, 21], [40, 21])
+      content: includesHost ? image : `https://${config["cdn-image"]}/${image.path([40, 21], {
+        w: 1200,
+        auto: "format,compress",
+        ogImage: true,
+        enlarge: true
+      })}`
     });
     tags.push({ property: "og:image:width", content: 1200 });
     if (lodash.get(image, ["metadata", "focus-point"])) {
@@ -626,7 +587,6 @@ function generateArticleData(structuredData = {}, story = {}, publisherConfig =
 function generateArticleImageData(image, publisherConfig = {}) {
   const imageWidth = 1200;
   const imageHeight = 675;
-
   const articleImage = imageUrl(publisherConfig, image, imageWidth, imageHeight);
 
   return Object.assign({}, {
@@ -1113,7 +1073,6 @@ function buildCustomTags(customTags = {}, pageType = "") {
 function buildTagsFromStaticPage(config, page, url = {}, data) {
   const seoData = lodash.get(page, ["metadata", "seo"], {});
   const customSeo = lodash.get(data, ["data", "customSeo"], {});
-  if (lodash.isEmpty(seoData) && lodash.isEmpty(customSeo)) return;
 
   const { "meta-title": metaTitle, "meta-description": metaDescription, "meta-keywords": keywords } = seoData;
 

package/package.json

@@ -1,15 +1,13 @@
 {
   "name": "@quintype/seo",
-  "version": "1.42.0-watermark-feature.12",
+  "version": "1.42.0",
   "description": "SEO Modules for Quintype",
   "main": "dist/index.cjs.js",
   "repository": "https://github.com/quintype/quintype-node-seo",
   "author": "Quintype Developers <dev-core@quintype.com>",
   "license": "MIT",
   "peerDependencies": {
-    "lodash": "^4.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "lodash": "^4.0.0"
   },
   "scripts": {
     "build": "rollup -c",

package/src/image-tags.js

@@ -1,6 +1,5 @@
 import { get, isEmpty } from "lodash";
 import { FocusedImage } from "quintype-js";
-import { getWatermarkImage } from "./utils";
 
 function pickImageFromCard(story, cardId) {
   const { metadata = {} } = story.cards.find((card) => card.id === cardId) || {};
@@ -113,13 +112,6 @@ function pickImage({ pageType, config, seoConfig, data, url }) {
  */
 export function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
   const { image, alt, includesHost = false } = pickImage({ pageType, data, url, seoConfig, config });
-  const dataObj = get(data, ["data"], {});
-  const story = get(dataObj, ["story"], {});
-  const publisherConfig = get(data, ["config", "publisher-attributes"], {});
-  const fallbackValue = dataObj.hasOwnProperty("collection") ? true : false;
-  const isWatermarkDisabled = get(story, ["metadata", "watermark-image", "disabled"], fallbackValue);
-  const imageCdnSrc = publisherConfig.cdn_src;
-  const imageCdnUrl = publisherConfig.cdn_image || config["cdn-image"];
 
   if (!image) {
     return [];
@@ -131,49 +123,17 @@ export function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
     tags.push({ name: "robots", content: "max-image-preview:large" });
   }
 
-  const getImageUrl = (imageRatio, imageProp) => {
-    return includesHost ? image : `https://${imageCdnUrl}/${image.path(imageRatio, imageProp)}`;
-  };
-
-  const getContent = (actualImageAR, watermarkImageAR) => {
-    const actualImageProp = {
-      w: 1200,
-      ar: actualImageAR.join(":"),
-      auto: "format,compress",
-      ogImage: true,
-      mode: "crop",
-      enlarge: true,
-    };
-    const watermarkImageProp = {
-      w: 1200,
-      ar: watermarkImageAR.join(":"),
-      auto: "format,compress",
-      ogImage: true,
-      mode: "crop",
-      enlarge: true,
-    };
-
-    const overlayWatermarkProp = Object.assign({}, watermarkImageProp, {
-      overlay: getWatermarkImage(story, imageCdnSrc, imageCdnUrl),
-      overlay_position: "bottom",
-    });
-    const updatedOverlay =
-      imageCdnSrc && imageCdnSrc.includes("gumlet")
-        ? Object.assign({}, overlayWatermarkProp, {
-            overlay_width_pct: 1,
-          })
-        : Object.assign({}, overlayWatermarkProp, {
-            overlay_width: 100,
-          });
-    return isWatermarkDisabled
-      ? getImageUrl(actualImageAR, actualImageProp)
-      : getImageUrl(watermarkImageAR, updatedOverlay);
-  };
-
   if (seoConfig.enableTwitterCards) {
     tags.push({
       name: "twitter:image",
-      content: getContent([16, 9], [40, 21]),
+      content: includesHost
+        ? image
+        : `https://${config["cdn-image"]}/${image.path([16, 9], {
+            w: 1200,
+            auto: "format,compress",
+            ogImage: true,
+            enlarge: true,
+          })}`,
     });
     alt && tags.push({ property: "twitter:image:alt", content: alt });
   }
@@ -181,7 +141,14 @@ export function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
   if (seoConfig.enableOgTags) {
     tags.push({
       property: "og:image",
-      content: getContent([40, 21], [40, 21]),
+      content: includesHost
+        ? image
+        : `https://${config["cdn-image"]}/${image.path([40, 21], {
+            w: 1200,
+            auto: "format,compress",
+            ogImage: true,
+            enlarge: true,
+          })}`,
     });
     tags.push({ property: "og:image:width", content: 1200 });
     if (get(image, ["metadata", "focus-point"])) {

package/src/structured-data/structured-data-tags.js

@@ -129,7 +129,6 @@ function generateArticleData(structuredData = {}, story = {}, publisherConfig =
 function generateArticleImageData(image, publisherConfig = {}) {
   const imageWidth = 1200;
   const imageHeight = 675;
-
   const articleImage = imageUrl(publisherConfig, image, imageWidth, imageHeight);
 
   return Object.assign(

package/src/text-tags.js

@@ -144,7 +144,6 @@ function buildCustomTags(customTags = {}, pageType = "") {
 function buildTagsFromStaticPage(config, page, url = {}, data) {
   const seoData = get(page, ["metadata", "seo"], {});
   const customSeo = get(data, ["data", "customSeo"], {});
-  if (isEmpty(seoData) && isEmpty(customSeo)) return;
 
   const { "meta-title": metaTitle, "meta-description": metaDescription, "meta-keywords": keywords } = seoData;
 

package/src/utils.js

@@ -1,42 +1,35 @@
-import { format, utcToZonedTime } from "date-fns-tz";
-import { entries, get } from "lodash";
-import { URL, URLSearchParams } from "url";
+import {entries} from 'lodash';
+import { URL, URLSearchParams } from 'url';
+import { format, utcToZonedTime } from 'date-fns-tz';
 
 export function objectToTags(object) {
   return entries(object)
     .filter(([key, value]) => value)
-    .map(([key, value]) => ({ [getPropertyName(key)]: key, content: value }));
+    .map(([key, value]) => ({[getPropertyName(key)]: key, content: value}));
 }
 
 function getPropertyName(key) {
-  return key.startsWith("fb:") || key.startsWith("og:") ? "property" : "name";
+  return (key.startsWith('fb:') || key.startsWith('og:')) ? 'property' : 'name';
 }
 
 export function stripMillisecondsFromTime(date, timezone) {
   const toReturn = date.toJSON();
-  if (!toReturn) return toReturn;
+  if(!toReturn)
+    return toReturn
   const zonedTime = timezone && utcToZonedTime(date, timezone);
   const formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", { timeZone: timezone });
-  const formatToReturn = toReturn.split(".")[0] + "Z";
+  const formatToReturn = toReturn.split('.')[0]+"Z";
   return timezone ? formatZonedTime : formatToReturn;
 }
 
 export function getQueryParams(url) {
-  const urlObj = new URL(url);
+  const urlObj =  new URL(url);
   const search_params = new URLSearchParams(urlObj.search);
-  const getWidth = search_params.get("w") || "";
-  const getHeight = search_params.get("h") || "";
-  return { width: getWidth, height: getHeight };
+  const getWidth = search_params.get('w') || '';
+  const getHeight = search_params.get('h') || '';
+  return {width: getWidth, height: getHeight};
 }
 
 export function isStoryPublic(story) {
-  return story.access === undefined || story.access === null || story.access === "public";
-}
-
-export function getWatermarkImage(story, cdnSrc, cdnURL) {
-  const watermarkImageS3Key = get(story, ["watermark", "social", "image-s3-key"], "");
-  if (cdnSrc && cdnSrc.includes("gumlet") && watermarkImageS3Key.length > 0) {
-    return `https://${cdnURL}/${watermarkImageS3Key}`;
-  }
-  return watermarkImageS3Key;
+  return story.access === undefined || story.access === null || story.access === 'public';
 }

package/test/image_tags_test.js

@@ -17,16 +17,6 @@ describe("ImageTags", function () {
   it("gets the twitter tags", function () {
     const story = {
       "hero-image-s3-key": "my/image.png",
-      metadata: {
-        "watermark-image": {
-          disabled: true,
-        },
-      },
-      watermark: {
-        social: {
-          "image-s3-key": "my/watermark-image.png",
-        },
-      },
       alternative: {
         social: {
           default: {
@@ -49,55 +39,11 @@ describe("ImageTags", function () {
     const string = getSeoMetadata(seoConfig, config, "story-page", { data: { story: story } }, {});
     const ampPageString = getSeoMetadata(seoConfig, config, "story-page-amp", { data: { story: story } }, {});
     assertContains(
-      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?w=1200&amp;ar=16%3A9&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
+      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
       string
     );
     assertContains(
-      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?w=1200&amp;ar=16%3A9&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
-      ampPageString
-    );
-  });
-
-  it("gets the twitter tags with watermark", function () {
-    const story = {
-      "hero-image-s3-key": "my/image.png",
-      metadata: {
-        "watermark-image": {
-          disabled: false,
-        },
-      },
-      watermark: {
-        social: {
-          "image-s3-key": "my/watermark-image.png",
-        },
-      },
-      alternative: {
-        social: {
-          default: {
-            headline: null,
-            "hero-image": {
-              "hero-image-s3-key": "my/socialimage.png",
-            },
-          },
-        },
-        home: {
-          default: {
-            headline: null,
-            "hero-image": {
-              "hero-image-s3-key": "my/homeimage.png",
-            },
-          },
-        },
-      },
-    };
-    const string = getSeoMetadata(seoConfig, config, "story-page", { data: { story: story } }, {});
-    const ampPageString = getSeoMetadata(seoConfig, config, "story-page-amp", { data: { story: story } }, {});
-    assertContains(
-      '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true&amp;overlay=my%2Fwatermark-image.png&amp;overlay_position=bottom&amp;overlay_width=100"/>',
-      string
-    );
-    assertContains(
-      '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true&amp;overlay=my%2Fwatermark-image.png&amp;overlay_position=bottom&amp;overlay_width=100"/>',
+      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
       ampPageString
     );
   });
@@ -132,11 +78,6 @@ describe("ImageTags", function () {
   it("has facebook tags resized correctly", function () {
     const story = {
       "hero-image-s3-key": "my/images.png",
-      metadata: {
-        "watermark-image": {
-          disabled: true,
-        },
-      },
       "hero-image-metadata": {
         width: 2400,
         height: 1260,
@@ -174,11 +115,11 @@ describe("ImageTags", function () {
     const string = getSeoMetadata(seoConfig, config, "story-page", { data: { story: story } }, {});
     const ampPageString = getSeoMetadata(seoConfig, config, "story-page-amp", { data: { story: story } }, {});
     assertContains(
-      '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?rect=0%2C0%2C2400%2C1260&amp;w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
+      '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?rect=0%2C0%2C2400%2C1260&amp;w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
       string
     );
     assertContains(
-      '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?rect=0%2C0%2C2400%2C1260&amp;w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
+      '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fsocialimage.png?rect=0%2C0%2C2400%2C1260&amp;w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
       ampPageString
     );
     assertContains('<meta property="og:image:width" content="1200"/>', string);
@@ -190,11 +131,6 @@ describe("ImageTags", function () {
   it("gets card image values instead of story image values on card share", function () {
     const story = {
       "hero-image-s3-key": "my/image.png",
-      metadata: {
-        "watermark-image": {
-          disabled: true,
-        },
-      },
       cards: [
         {
           id: "sample-card-id",
@@ -227,7 +163,7 @@ describe("ImageTags", function () {
     const string = getSeoMetadata(seoConfig, config, "story-page", { data: { story: story } }, opts);
 
     assertContains(
-      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fcard%2Fimage.jpg?w=1200&amp;ar=16%3A9&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
+      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fcard%2Fimage.jpg?w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
       string
     );
   });
@@ -382,11 +318,6 @@ describe("ImageTags", function () {
   it("gets story data as fallback if the card metadata is falsy", function () {
     const story = {
       "hero-image-s3-key": "my/image.png",
-      metadata: {
-        "watermark-image": {
-          disabled: true,
-        },
-      },
       cards: [
         {
           id: "sample-card-id",
@@ -412,11 +343,11 @@ describe("ImageTags", function () {
     const ampPageString = getSeoMetadata(seoConfig, config, "story-page-amp", { data: { story: story } }, opts);
 
     assertContains(
-      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fimage.png?w=1200&amp;ar=16%3A9&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
+      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fimage.png?w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
       string
     );
     assertContains(
-      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fimage.png?w=1200&amp;ar=16%3A9&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
+      '<meta name="twitter:image" content="https://thumbor.assettype.com/my%2Fimage.png?w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
       ampPageString
     );
   });
@@ -437,7 +368,7 @@ describe("ImageTags", function () {
       };
       const string = getSeoMetadata(seoConfig, config, "home-page", { data: { collection: collection } }, {});
       assertContains(
-        '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fimage.png?rect=0%2C0%2C2400%2C1260&amp;w=1200&amp;ar=40%3A21&amp;auto=format%2Ccompress&amp;ogImage=true&amp;mode=crop&amp;enlarge=true"/>',
+        '<meta property="og:image" content="https://thumbor.assettype.com/my%2Fimage.png?rect=0%2C0%2C2400%2C1260&amp;w=1200&amp;auto=format%2Ccompress&amp;ogImage=true&amp;enlarge=true"/>',
         string
       );
       assertContains('<meta property="og:image:width" content="1200"/>', string);