feat: disable save button by default (#9)

Closes #4
Closes #5

BREAKING CHANGE: The Pinterest Save button isn't enabled by default anymore. Use the `saveButton` option to add it.

.eslintignore

@@ -1 +1,2 @@
 /gatsby-browser.js
+/gatsby-node.js

.gitignore

@@ -9,3 +9,4 @@ package-lock.json
 yarn.lock
 
 /gatsby-browser.js
+/gatsby-node.js

.prettierignore

@@ -3,3 +3,4 @@ coverage
 dist
 
 /gatsby-browser.js
+/gatsby-node.js

README.md

@@ -8,7 +8,6 @@
 
 <!-- prettier-ignore-start -->
 [![Build Status][build-badge]][build]
-[![Code Coverage][coverage-badge]][coverage]
 [![version][version-badge]][package]
 [![downloads][downloads-badge]][npmtrends]
 [![MIT License][license-badge]][license]
@@ -62,10 +61,13 @@ module.exports = {
     {
       resolve: `gatsby-plugin-pinterest`,
       options: {
-        // Set to true to hide the text and display only a round P button
-        round: false, // default
-        // Set to true to display a bigger button
-        tall: true, // default
+        // If you just want to use the default, you can set this to `true`, defaults to `false`
+        saveButton: {
+          // Set to true to hide the text and display only a round P button
+          round: false, // default
+          // Set to true to display a bigger button
+          tall: true, // default
+        },
       },
     },
 

package.json

@@ -22,6 +22,7 @@
   "homepage": "https://github.com/robinmetral/gatsby-plugin-pinterest#readme",
   "files": [
     "gatsby-browser.js",
+    "gatsby-node.js",
     "index.js"
   ],
   "scripts": {

src/gatsby-browser.js

@@ -1,18 +1,22 @@
-const injectPinterestScript = (tall, round) => {
+const injectPinterestScript = ({ saveButton = false }) => {
   const addJS = () => {
     const script = document.createElement("script");
     script.async = true;
     script.defer = true;
     script.src = "https://assets.pinterest.com/js/pinit.js";
 
-    script.setAttribute("data-pin-hover", "true");
+    if (Boolean(saveButton)) {
+      script.setAttribute("data-pin-hover", "true");
 
-    if (tall) {
-      script.setAttribute("data-pin-tall", "true");
-    }
+      const { round = false, tall = true } =
+        typeof saveButton === "boolean" ? {} : saveButton;
+      if (round) {
+        script.setAttribute("data-pin-round", "true");
+      }
 
-    if (round) {
-      script.setAttribute("data-pin-round", "true");
+      if (tall) {
+        script.setAttribute("data-pin-tall", "true");
+      }
     }
 
     document.getElementsByTagName("head")[0].appendChild(script);
@@ -23,10 +27,17 @@ const injectPinterestScript = (tall, round) => {
 
 let injectedPinterestScript = false;
 
-exports.onRouteUpdate = (args, { tall = true, round = false } = {}) => {
-  if (document.querySelector("[data-pin-do]") !== null) {
+exports.onRouteUpdate = (args, pluginOptions = {}) => {
+  const querySelectors = [
+    "[data-pin-do]",
+    Boolean(pluginOptions.saveButton) ? "img" : "",
+  ]
+    .filter(Boolean)
+    .join(",");
+
+  if (document.querySelector(querySelectors) !== null) {
     if (!injectedPinterestScript) {
-      injectPinterestScript(tall, round);
+      injectPinterestScript(pluginOptions);
 
       injectedPinterestScript = true;
     }

src/gatsby-node.js

@@ -0,0 +1,8 @@
+const deprecationWarning = `[gatsby-plugin-pinterest] From now on, you can use the 'saveButton' option to show Pinterest's save button on images.
+See https://github.com/robinmetral/gatsby-plugin-pinterest#usage`;
+
+exports.onPreInit = ({ reporter }, { round, tall } = {}) => {
+  if (round || tall) {
+    reporter.warn(deprecationWarning);
+  }
+};