@imgix/gatsby - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [1.1.0](https://github.com/imgix/gatsby/compare/v1.0.2...v1.1.0) (2021-02-09)
+
+
+### Features
+
+* help the user find the correct getURL configuration ([8e35b18](https://github.com/imgix/gatsby/commit/8e35b183b85d3ef359c4101d9b88f97cff7abb69))
+
 ## [1.0.2](https://github.com/imgix/gatsby/compare/v1.0.1...v1.0.2) (2021-02-04)
@@ -2,0 +9,0 @@

dist/common/constants.d.ts

@@ -1,2 +0,2 @@
-export declare const VERSION = "1.0.1";
+export declare const VERSION = "1.0.2";
 //# sourceMappingURL=constants.d.ts.map

dist/common/constants.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '1.0.1';
+exports.VERSION = '1.0.2';
 //# sourceMappingURL=constants.js.map

dist/common/utils.d.ts

@@ -15,2 +15,6 @@ import * as TE from 'fp-ts/lib/TaskEither';
 export declare const transformUrlForWebProxy: (url: string, domain: string) => string;
+export declare const findPossibleURLsInNode: (node: object, depth?: number) => {
+    path: string;
+    value: string;
+}[];
 //# sourceMappingURL=utils.d.ts.map

dist/common/utils.js

@@ -21,2 +21,9 @@ "use strict";
 };
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -26,3 +33,3 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformUrlForWebProxy = exports.invariant = exports.fetchJSON = exports.fetch = exports.noop = exports.semigroupImgixUrlParams = exports.resolveUrlFromSourceData = exports.taskEitherFromSourceDataResolver = void 0;
+exports.findPossibleURLsInNode = exports.transformUrlForWebProxy = exports.invariant = exports.fetchJSON = exports.fetch = exports.noop = exports.semigroupImgixUrlParams = exports.resolveUrlFromSourceData = exports.taskEitherFromSourceDataResolver = void 0;
 var pipeable_1 = require("fp-ts/lib/pipeable");
@@ -74,2 +81,34 @@ var Semigroup_1 = require("fp-ts/lib/Semigroup");
 exports.transformUrlForWebProxy = transformUrlForWebProxy;
+function isURL(str) {
+    var pattern = new RegExp('\\/\\/' + // the first two slashes after the protocl
+        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
+        '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+        '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+        '(\\#[-a-z\\d_]*)?$', 'i');
+    return pattern.test(str);
+}
+var findPossibleURLsInNode = function (node, depth) {
+    if (depth === void 0) { depth = 0; }
+    if (depth > 5) {
+        return [];
+    }
+    return Object.entries(node).reduce(function (p, _a) {
+        var key = _a[0], value = _a[1];
+        if (typeof value === 'string' && isURL(value)) {
+            return __spreadArrays(p, [{ path: key, value: value }]);
+        }
+        if (typeof value === 'object' && value != null) {
+            return __spreadArrays(p, exports.findPossibleURLsInNode(value, depth + 1).map(function (_a) {
+                var path = _a.path, value = _a.value;
+                return ({
+                    path: key + "." + path,
+                    value: value,
+                });
+            }));
+        }
+        return p;
+    }, []);
+};
+exports.findPossibleURLsInNode = findPossibleURLsInNode;
 //# sourceMappingURL=utils.js.map

dist/modules/gatsby-transform-node/gatsby-node.js

@@ -71,2 +71,3 @@ "use strict";
 var imgix_core_js_wrapper_1 = require("../../common/imgix-core-js-wrapper");
+var utils_1 = require("../../common/utils");
 var publicTypes_1 = require("../../publicTypes");
@@ -203,3 +204,13 @@ var createImgixFixedFieldConfig_1 = require("../gatsby-source-url/createImgixFixedFieldConfig");
                                         rawURL: E.getOrElseW(function () {
-                                            return gatsbyContext.reporter.panic("Error when resolving URL value for node type " + fieldOptions.nodeType);
+                                            var urlPathsFound = typeof node === 'object' && node != null
+                                                ? utils_1.findPossibleURLsInNode(node)
+                                                : [];
+                                            return gatsbyContext.reporter.panic("Error when resolving URL value for node type " + fieldOptions.nodeType + ". This probably means that the getURL function in gatsby-config.js is incorrectly set. Please read this project's README for detailed instructions on how to set this correctly.\n                          \n" + (urlPathsFound.length > 0
+                                                ? "Potential images were found at these paths: \n" + urlPathsFound
+                                                    .map(function (_a) {
+                                                    var path = _a.path, value = _a.value;
+                                                    return " - " + path + "\n   Usage: getURL: (node) => " + (value.startsWith('http') ? "node." + path : "`https:${node." + path + "}`");
+                                                })
+                                                    .join('\n') + "\n"
+                                                : '') + "\n                          ");
                                         })(rawURLE),
@@ -206,0 +217,0 @@ };

package.json

 {
-  "version": "1.0.2",
+  "version": "1.1.0",
   "name": "@imgix/gatsby",
@@ -4,0 +4,0 @@ "description": "A Gatsby plugin to integrate with imgix's APIs",

README.md

@@ -137,22 +137,3 @@ <!-- ix-docs-ignore -->
         fields: [
-          // Add an object to this array for each node type you want to modify
-          {
-            // This is an example for Contentful.
-
-            // This is the GraphQL node type that you want to modify. There's
-            // more info on how to find this below.
-            nodeType: 'ContentfulAsset',
-
-            // This is used to pull the raw image URL from the node you want to
-            // transform. It is passed the node to transform as an argument, and
-            // expects a URL to be returned.
-            // This needs to return a fully-qualified URL, which is why we are
-            // prepending `https:`, since contentful provides protocol-less
-            // URLs.
-            getURL: (node) => `https:${node.file.url}`,
-
-            // This is the name of imgix field that will be added to the type.
-            fieldName: 'imgixImage',
-          },
-          // Add other elements for each node type to transform.
+          // Add an object to this array for each node type you want to modify. Follow the instructions below for this.
         ],
@@ -165,7 +146,124 @@ },
 
+##### Adding a `fields` item correctly
+
+It's necessary to add a configuration for each GraphQL node type you would like to modify. For example, if you have a page which queries both for blog posts, and also blog post categories, you will need to add items for each type separately.
+
+The first step is to find the node type you would like to modify. To do this, look at the GraphQL query for the image you would like to modify. You need to find the node type for the node that image belongs to. For example, for the following query, the node type is `ContentfulAsset`, since that is the type of `heroImage`. This can be confirmed by copying the query into the GraphiQL editor and hovering over the node type. More detailed instructions on how to find the node types can be found in [this section](#finding-a-nodes-type)
+
+```graphql
+query HomeQuery {
+  allContentfulBlogPost {
+    nodes {
+      heroImage { # this is the node to modify
+        fluid {...}
+      }
+    }
+  }
+
+}
+```
+
+Then, you need to configure a field for this node type. The quickest way to configure this is to see if the examples below include a configuration for the node that you would like to transform. If it exists, just copy and paste that into the list of `fields`, and you're done. Otherwise, skip to the section for manual setup.
+
+###### gatsby-source-contentful
+
+```js
+// ContentfulAsset
+{
+  nodeType: "ContentfulAsset",
+  fieldName: "imgixImage",
+  getURL: node => `https:${node.file.url}`
+},
+```
+
+###### gatsby-source-datocms
+
+```js
+{
+  nodeType: "DatoCmsAsset",
+  getURL: node => node.entityPayload.attributes.url,
+  fieldName: "imgixImage",
+},
+```
+
+###### Manual config (if your node type doesn't exist above)
+
+```js
+{
+  // This is the GraphQL node type that you want to modify. There's
+  // more info on how to find this below.
+  nodeType: '',
+
+  // This is used to pull the raw image URL from the node you want to
+  // transform. It is passed the node to transform as an argument, and
+  // expects a URL to be returned.
+  // See more information below on how to set this.
+  getURL: (node) => node.imageUrl,
+
+  // This is the name of imgix field that will be added to the type.
+  fieldName: 'imgixImage',
+},
+```
+
+The `getURL` function needs to return a **fully-qualified URL**.
+
+The steps to setting this value correctly is:
+
+1. Set the function to this:
+
+   ```js
+   getURL: (node) => {
+     console.log(node);
+   };
+   ```
+
+2. Inspect the logged output. The plugin will try to find a suitable image url in the node's data for you, and if it successfully finds one, it will output the code to replace the function with in the corresponding error message.
+
+   For example, for `ContentfulAsset`, it will display the following error message:
+
+   ```
+   Error when resolving URL value for node type ContentfulAsset. This
+   probably means that the getURL function in gatsby-config.js is
+   incorrectly set. Please read this project's README for detailed
+   instructions on how to set this correctly.
+
+   Potential images were found at these paths:
+    - file.url
+      Usage: getURL: (node) => `https:${node.file.url}`
+   ```
+
+   As we can see, the correct value for the function is
+
+   ```js
+   getURL: (node) => `https:${node.file.url}
+   ```
+
+   If no value was suggested, you will need to inspect the logged output to find a suitable image URL that corresponds to the image you want to transform. For example, if we're searching ContentfulAsset's data, we see the following output in the console:
+
+   ```js
+   {
+     // ...
+     file: {
+       url: '//images.ctfassets.net/../.jpg',
+       details: { size: 7316629, image: [Object] },
+       fileName: 'image.jpg',
+       contentType: 'image/jpeg'
+     },
+     // ...
+   }
+   ```
+
+   Therefore, we need to return `file.url`.
+
+3. Set the function to the correct value, **making sure that the URL includes an http or https.** For this example, since the image URL didn't have a `https`, we have to add one:
+
+   ```js
+   getURL: (node) => `https:${node.file.url}`;
+   ```
+
 ##### Finding a node's type
 
-The easiest way to find a node's type is to hover over the `node` in the GraphiQL query explorer. This can usually be found at http://localhost:8000/\_\_graphql.
+The easiest way to find a node's type is to copy the query to the GraphiQL explorer (can be found at [localhost:8000/\_\_graphql](http://localhost:8000/__graphql)). Then, while holding Cmd or Ctrl, hover over the node that you are trying to find the type for.
 
-In the screenshot below, we have hovered over the `node` field, and we can see the type is `ContentfulAsset`. This is the value we can set in the plugin's config.
+In the screenshot below, we have hovered over the `heroImage` field, and we can see the type is `ContentfulAsset`. This is the value we can set in the plugin's config.
 
@@ -172,0 +270,0 @@ <img alt="hovering over node type to see node type is ContentfulAsset" src="assets/transform-hover-node.png" width="324"/>

src/common/constants.ts

@@ -1,1 +0,1 @@
-export const VERSION = '1.0.2';
+export const VERSION = '1.1.0';

src/common/utils.ts

@@ -71,1 +71,39 @@ import { pipe } from 'fp-ts/lib/pipeable';
 };
+
+function isURL(str: string) {
+  var pattern = new RegExp(
+    '\\/\\/' + // the first two slashes after the protocl
+      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
+      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+      '(\\#[-a-z\\d_]*)?$',
+    'i',
+  );
+  return pattern.test(str);
+}
+
+export const findPossibleURLsInNode = (
+  node: object,
+  depth: number = 0,
+): { path: string; value: string }[] => {
+  if (depth > 5) {
+    return [];
+  }
+
+  return Object.entries(node).reduce((p, [key, value]) => {
+    if (typeof value === 'string' && isURL(value)) {
+      return [...p, { path: key, value }];
+    }
+    if (typeof value === 'object' && value != null) {
+      return [
+        ...p,
+        ...findPossibleURLsInNode(value, depth + 1).map(({ path, value }) => ({
+          path: `${key}.${path}`,
+          value,
+        })),
+      ];
+    }
+    return p;
+  }, [] as { path: string; value: string }[]);
+};

src/modules/gatsby-transform-node/gatsby-node.ts

@@ -11,2 +11,3 @@ import { Do } from 'fp-ts-contrib/lib/Do';
 import { createImgixClient } from '../../common/imgix-core-js-wrapper';
+import { findPossibleURLsInNode } from '../../common/utils';
 import { ImgixGatsbyOptionsIOTS } from '../../publicTypes';
@@ -193,3 +194,3 @@ import { createImgixFixedFieldConfig } from '../gatsby-source-url/createImgixFixedFieldConfig';
                       : imgixImageType.name,
-                  resolve: (node: any) => {
+                  resolve: (node: unknown) => {
                     const rawURLE = getFieldValue({
@@ -201,7 +202,31 @@ fieldOptions,
                     return {
-                      rawURL: E.getOrElseW(() =>
-                        gatsbyContext.reporter.panic(
-                          `Error when resolving URL value for node type ${fieldOptions.nodeType}`,
-                        ),
-                      )(rawURLE),
+                      rawURL: E.getOrElseW(() => {
+                        const urlPathsFound =
+                          typeof node === 'object' && node != null
+                            ? findPossibleURLsInNode(node)
+                            : [];
+
+                        return gatsbyContext.reporter.panic(
+                          `Error when resolving URL value for node type ${
+                            fieldOptions.nodeType
+                          }. This probably means that the getURL function in gatsby-config.js is incorrectly set. Please read this project's README for detailed instructions on how to set this correctly.
+                          
+${
+  urlPathsFound.length > 0
+    ? `Potential images were found at these paths: 
+${urlPathsFound
+  .map(
+    ({ path, value }) =>
+      ` - ${path}
+   Usage: getURL: (node) => ${
+     value.startsWith('http') ? `node.${path}` : `\`https:\${node.${path}}\``
+   }`,
+  )
+  .join('\n')}
+`
+    : ''
+}
+                          `,
+                        );
+                      })(rawURLE),
                     };
@@ -208,0 +233,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

356450

increased by2.88%

Lines of code

4722

increased by2.45%

Number of lines in readme file

841

increased by13.19%

No dependency changes