Now supports a prefix path with static images

Author: kmacdonaO

README.md

@@ -95,6 +95,12 @@ This setting is used to make the plugin download binary assets into the public d
 **`staticAssetRootDir`** [optional]  
 This setting is ignored unless staticAssetDownload is set to true. This allows a developer to define a directory in the website that will contain all the downloaded assets. This can help to segregate the items coming from the server from other static data.  The default value is "asset", but it can be set to any string that is a valid directory name. 
 
+**`staticUrlPrefix`** [optional]  
+This setting is ignored unless staticAssetDownload is set to true. This needs to be set if the application has a pathPrefix defined in its gatsby-config.js file. In static mode all downloaded files are given a URL relative to the build root (/public) of the application by default. If there is a pathPrefix specified though, then the URLs need to be prefixed with that value as well.  
+For example: If there is a file "logo.png" it might be given a default URL of /server/logo.png . If however, the app uses a pathPrefix of /myApplication, this URL should be changed to /myApplication/server/logo.png.  
+Setting staticUrlPrefix equal to the pathPrefix will cause the plugin to make this adjustment in the Gatsby cache.   
+
+
 **`How to use static download:`**  
   Assume there is a digital asset on the server called Logo.jpg that contains an image to be used in a site.  
 If staticAssetDownload is false then the binary image will be stored in the cache as well as any selected renditions. (See 'renditions' flag above)   These binary files can then be queried and traversed via GraphQL  

gatsby-node.js

@@ -30,6 +30,7 @@ const fetch = require('./src/fetch');
  *       renditions: 'all',
  *       staticAssetDownload: false
  *       staticAssetRootDir: 'asset'
+ *       staticUrlPrefix: ''
  *     },
  * },
  * ]
@@ -66,7 +67,10 @@ const fetch = require('./src/fetch');
  * <b>staticAssetRootDir</b> this setting is only used if staticAssetDownload is true. It is used
  * to set a a prefix that will be prepended to all of the urls for downloaded files. For example:
  *  If it is set to "content" then the url of a downloaded image called Logo.jpg
- * will be /content/Logo.jpg.
+ * will be /content/Logo.jpg.<br>
+ * <b>staticUrlPrefix</b> (optional) should be set equal to the pathPrefix defined in the
+ * gatsby-config.js file. If pathPrefix is not used or staticAssetDownload is false then this
+ * parameter doesn't need to be set.
  *
  *
  */
@@ -86,7 +90,7 @@ exports.sourceNodes = async (
 
   const {
     contentServer, channelToken, proxyUrl = '', items: { limit } = 100, items: { query } = '', auth = '', preview = false, renditions = 'custom',
-    staticAssetDownload = false, staticAssetRootDir = 'assets', debug = false,
+    staticAssetDownload = false, staticAssetRootDir = 'assets', staticUrlPrefix = '', debug = false,
   } = configOptions;
 
   console.log('Using OCE plugin with the options: ', {
@@ -100,6 +104,7 @@ exports.sourceNodes = async (
     renditions,
     staticAssetDownload,
     staticAssetRootDir,
+    staticUrlPrefix,
     debug,
   });
   try {
@@ -132,6 +137,7 @@ exports.sourceNodes = async (
       await process.downloadMediaFilesToStaticDir({
         entities,
         staticAssetRootDir,
+        staticUrlPrefix,
         renditions,
         auth,
       });

package.json

@@ -2,7 +2,7 @@
   "name": "@oracle/gatsby-source-oce",
   "description": "Gatsby source plugin for using Oracle Content Management as a data source",
   "author": "Oracle America, Inc.",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "homepage": "https://github.com/oracle/gatsby-source-oce",
   "repository": {
     "type": "git",

src/process.js

@@ -88,7 +88,7 @@ exports.moveFieldsUp = (entities) => entities
 
 // const pretty = (o) => JSON.stringify(o, null, 2);
 
-const getMediaList = (element, renditions, staticRootDir = null) => {
+const getMediaList = (element, renditions, staticRootDir = null, staticUrlPrefix = '') => {
   const result = [];
   const baseKey = `oce-media-${element.id}`;
   // Get the asset name less the extension
@@ -106,7 +106,7 @@ const getMediaList = (element, renditions, staticRootDir = null) => {
   });
   // Only do this if we are downloading the asset to be referenced as a public url in the site
   if (staticRootDir) {
-    element.staticURL = `/${staticRootDir}/${element.name}`;
+    element.staticURL = `${staticUrlPrefix}/${staticRootDir}/${element.name}`;
   }
 
   // Now loop through renditions and grab the first version of each. The name of the rendition
@@ -126,7 +126,7 @@ const getMediaList = (element, renditions, staticRootDir = null) => {
         });
         // Only do this if we are downloading the asset to be referenced as a public url in the site
         if (staticRootDir) {
-          e.staticURL = `/${staticRootDir}/${e.name}/${element.name}`;
+          e.staticURL = `${staticUrlPrefix}/${staticRootDir}/${e.name}/${element.name}`;
         }
       }
     });
@@ -186,6 +186,7 @@ async function downloadToPublic(
 exports.downloadMediaFilesToStaticDir = async ({
   entities,
   staticAssetRootDir,
+  staticUrlPrefix,
   renditions,
   auth,
 }) => {
@@ -195,7 +196,7 @@ exports.downloadMediaFilesToStaticDir = async ({
   for (let idx = 0; idx < entities.length; idx++) {
     const e = entities[idx];
     if (isDigitalAsset(e)) {
-      const dataItemList = getMediaList(e, renditions, staticAssetRootDir);
+      const dataItemList = getMediaList(e, renditions, staticAssetRootDir, staticUrlPrefix);
       for (let mediaIndex = 0; mediaIndex < dataItemList.length; mediaIndex++) {
         const mediaObject = dataItemList[mediaIndex];
         const storagePath = `./public/${staticAssetRootDir}/${mediaObject.staticSubDir}`;