@quintype/seo 1.41.4 → 1.42.0-watermark-feature.0

package/dist/index.cjs.js

@@ -320,6 +320,10 @@ 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 story = lodash.get(data, ["data", "story"]);
+  const fallbackValue = story ? false : true;
+  const isWatermarkDisabled = lodash.get(story, ["metadata", "watermark-image", "disabled"], fallbackValue);
+  const watermarkImageS3Key = lodash.get(story, ["watermark", "social", "image-s3-key"], "");
 
   if (!image) {
     return [];
@@ -331,15 +335,34 @@ function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
     tags.push({ name: "robots", content: "max-image-preview:large" });
   }
 
+  const watermarkImage = imageRatio => {
+    const imageContentParamsObj = {
+      w: 1200,
+      ar: imageRatio.join(":"),
+      auto: "format,compress",
+      ogImage: true,
+      mode: "crop",
+      overlay: watermarkImageS3Key,
+      overlay_position: "bottom",
+      overlay_width: 100
+    };
+
+    return `https://${config["cdn-image"]}/${image.path(imageRatio, imageContentParamsObj)}`;
+  };
+
+  const actualImage = imageRatio => {
+    const imageUrl = includesHost ? image : `https://${config["cdn-image"]}/${image.path(imageRatio, {
+      w: 1200,
+      auto: "format,compress",
+      ogImage: true,
+      enlarge: true
+    })}`;
+    return imageUrl;
+  };
   if (seoConfig.enableTwitterCards) {
     tags.push({
       name: "twitter:image",
-      content: includesHost ? image : `https://${config["cdn-image"]}/${image.path([16, 9], {
-        w: 1200,
-        auto: "format,compress",
-        ogImage: true,
-        enlarge: true
-      })}`
+      content: isWatermarkDisabled ? actualImage([16, 9]) : watermarkImage([40, 21])
     });
     alt && tags.push({ property: "twitter:image:alt", content: alt });
   }
@@ -347,12 +370,7 @@ function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
   if (seoConfig.enableOgTags) {
     tags.push({
       property: "og:image",
-      content: includesHost ? image : `https://${config["cdn-image"]}/${image.path([40, 21], {
-        w: 1200,
-        auto: "format,compress",
-        ogImage: true,
-        enlarge: true
-      })}`
+      content: isWatermarkDisabled ? actualImage([40, 21]) : watermarkImage([40, 21])
     });
     tags.push({ property: "og:image:width", content: 1200 });
     if (lodash.get(image, ["metadata", "focus-point"])) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/seo",
-  "version": "1.41.4",
+  "version": "1.42.0-watermark-feature.0",
   "description": "SEO Modules for Quintype",
   "main": "dist/index.cjs.js",
   "repository": "https://github.com/quintype/quintype-node-seo",

package/src/image-tags.js

@@ -112,6 +112,10 @@ 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 story = get(data, ["data", "story"]);
+  const fallbackValue = story ? false : true;
+  const isWatermarkDisabled = get(story, ["metadata", "watermark-image", "disabled"], fallbackValue);
+  const watermarkImageS3Key = get(story, ["watermark", "social", "image-s3-key"], "");
 
   if (!image) {
     return [];
@@ -123,17 +127,36 @@ export function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
     tags.push({ name: "robots", content: "max-image-preview:large" });
   }
 
+  const watermarkImage = (imageRatio) => {
+    const imageContentParamsObj = {
+      w: 1200,
+      ar: imageRatio.join(":"),
+      auto: "format,compress",
+      ogImage: true,
+      mode: "crop",
+      overlay: watermarkImageS3Key,
+      overlay_position: "bottom",
+      overlay_width: 100,
+    };
+
+    return `https://${config["cdn-image"]}/${image.path(imageRatio, imageContentParamsObj)}`;
+  };
+
+  const actualImage = (imageRatio) => {
+    const imageUrl = includesHost
+      ? image
+      : `https://${config["cdn-image"]}/${image.path(imageRatio, {
+          w: 1200,
+          auto: "format,compress",
+          ogImage: true,
+          enlarge: true,
+        })}`;
+    return imageUrl;
+  };
   if (seoConfig.enableTwitterCards) {
     tags.push({
       name: "twitter:image",
-      content: includesHost
-        ? image
-        : `https://${config["cdn-image"]}/${image.path([16, 9], {
-            w: 1200,
-            auto: "format,compress",
-            ogImage: true,
-            enlarge: true,
-          })}`,
+      content: isWatermarkDisabled ? actualImage([16, 9]) : watermarkImage([40, 21]),
     });
     alt && tags.push({ property: "twitter:image:alt", content: alt });
   }
@@ -141,14 +164,7 @@ export function ImageTags(seoConfig, config, pageType, data, { url = {} }) {
   if (seoConfig.enableOgTags) {
     tags.push({
       property: "og:image",
-      content: includesHost
-        ? image
-        : `https://${config["cdn-image"]}/${image.path([40, 21], {
-            w: 1200,
-            auto: "format,compress",
-            ogImage: true,
-            enlarge: true,
-          })}`,
+      content: isWatermarkDisabled ? actualImage([40, 21]) : watermarkImage([40, 21]),
     });
     tags.push({ property: "og:image:width", content: 1200 });
     if (get(image, ["metadata", "focus-point"])) {

package/test/image_tags_test.js

@@ -17,6 +17,16 @@ 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: {
@@ -48,6 +58,50 @@ describe("ImageTags", function () {
     );
   });
 
+  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 name="twitter: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;overlay=my%2Fwatermark-image.png&amp;overlay_position=bottom&amp;overlay_width=100"/>',
+      string
+    );
+    assertContains(
+      '<meta name="twitter: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;overlay=my%2Fwatermark-image.png&amp;overlay_position=bottom&amp;overlay_width=100"/>',
+      ampPageString
+    );
+  });
+
   it("adds image max size tag for story page", function () {
     const story = {
       "hero-image-s3-key": "my/image.png",
@@ -78,6 +132,11 @@ 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,
@@ -131,6 +190,11 @@ 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",
@@ -318,6 +382,11 @@ 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",