fix(gatsby-theme-bodiless): Properly prefix paths for bodiless gatsby… (

#1502)

## Changes
Applies path prefix (if active) to all gatsby image urls

## Related Issues
Fixes #1501

packages/gatsby-theme-bodiless/create-node.js

@@ -243,12 +243,16 @@ const fixed = async ({
   };
 };
 
-const generateGatsbyImage = async ({ file, preset, reporter }, options) => {
+const generateGatsbyImage = async ({
+  file, preset, reporter, pathPrefix
+}, options) => {
   // skip image generation when unknown preset is passed
   if (!Object.values(GatsbyImagePresets).includes(preset)) {
     return undefined;
   }
   const { sharpArgs } = options || {};
+  sharpArgs.pathPrefix = pathPrefix;
+
   switch (preset) {
     case GatsbyImagePresets.Fixed:
       return fixed({
@@ -394,7 +398,7 @@ const generateGatsbyImage = async ({ file, preset, reporter }, options) => {
  * leveraging logic from gatsby-source-filesystem
  * https://github.com/gatsbyjs/gatsby/blob/39baf4eb504dcbb4d231f4baf8b109d0dcabb1da/packages/gatsby-source-filesystem/src/extend-file-node.js
  */
-const copyFileToStatic = (node, reporter) => {
+const copyFileToStatic = (node, reporter, pathPrefix = '') => {
   const fileAbsolutePath = node.absolutePath;
   const fileName = `${node.internal.contentDigest}/${pathUtil.basename(fileAbsolutePath)}`;
 
@@ -425,7 +429,7 @@ const copyFileToStatic = (node, reporter) => {
     );
   }
 
-  return `/static/${fileName}`;
+  return `${pathPrefix}/static/${fileName}`;
 };
 
 const createImageNode = ({ node, content }) => {
@@ -461,12 +465,15 @@ const createImageNode = ({ node, content }) => {
   return imageNode;
 };
 
-const generateImages = async ({ imageNode, content, reporter }, options) => {
+const generateImages = async ({
+  imageNode, content, reporter, pathPrefix
+}, options) => {
   const parsedContent = JSON.parse(content);
   return generateGatsbyImage({
     file: imageNode,
     preset: parsedContent.preset,
     reporter,
+    pathPrefix,
   }, options);
 };
 
@@ -475,6 +482,7 @@ const createBodilessNode = async ({
   actions,
   loadNodeContent,
   reporter,
+  pathPrefix,
 }, pluginOptions) => {
   const nodeContent = await loadNodeContent(node);
   const { createNode, createParentChildLink } = actions;
@@ -485,14 +493,15 @@ const createBodilessNode = async ({
   if (imageNode !== undefined) {
     const publicUrl = pathUtil.isAbsolute(imageNode.path)
       ? imageNode.path
-      : copyFileToStatic(imageNode, reporter);
+      : copyFileToStatic(imageNode, reporter, pathPrefix);
     let gatsbyImgData;
     // skip gatsby img data generation when an image from json does not exist in filesystem
     if (fse.existsSync(imageNode.absolutePath)) {
       gatsbyImgData = await generateImages({
         imageNode,
         content: nodeContent,
         reporter,
+        pathPrefix,
       }, gatsbyImageOptions);
     }
 
@@ -535,6 +544,7 @@ exports.onCreateNode = ({
   actions,
   loadNodeContent,
   reporter,
+  pathPrefix,
 }, pluginOptions) => {
   // Add slug field to Bodiless node
   if (node.internal.type === BODILESS_NODE_TYPE) {
@@ -553,6 +563,7 @@ exports.onCreateNode = ({
       actions,
       loadNodeContent,
       reporter,
+      pathPrefix,
     }, pluginOptions);
   }
 };

sites/__cxstarter__/gatsby-config.js

@@ -116,5 +116,6 @@ module.exports = {
   flags: {
     DEV_SSR: false,
   },
+  pathPrefix: process.env.GATSBY_PATH_PREFIX || '',
   plugins,
 };