feat: allow realtive paths for files in markdown (#261)

* Fix image URL handling in image preprocessor plugin * Update gatsby-remark-copy-linked-files to gatsby-remark-copy-relative-linked-files * Add custom filename option to gatsby-remark-copy-relative-linked-files plugin
iterative · Feb 8, 2024 · a7125cd · a7125cd
1 parent 0aa76e4
commit a7125cd
Show file tree

Hide file tree

Showing 4 changed files with 1,841 additions and 1,885 deletions.
diff --git a/packages/gatsby-theme-iterative/gatsby-config.js b/packages/gatsby-theme-iterative/gatsby-config.js
@@ -111,7 +111,6 @@ module.exports = ({
               includeDefaultCss: true
             }
           },
-          'gatsby-remark-copy-linked-files',
           'gatsby-remark-external-links',
           {
             resolve: 'gatsby-remark-autolink-headers',
@@ -133,7 +132,15 @@ module.exports = ({
           'gatsby-remark-responsive-iframe',
           require.resolve('./plugins/resize-image-plugin'),
           require.resolve('./plugins/external-link-plugin'),
-          require.resolve('./plugins/null-link-plugin')
+          require.resolve('./plugins/null-link-plugin'),
+          // moving this plugin after external-link-plugin to allow images to be copied to public folder
+          {
+            resolve: 'gatsby-remark-copy-relative-linked-files',
+            options: {
+              filename: ({ name, hash, extension }) =>
+                `${name}-${hash}.${extension}`
+            }
+          }
         ]
       }
     },

diff --git a/packages/gatsby-theme-iterative/package.json b/packages/gatsby-theme-iterative/package.json
@@ -31,7 +31,7 @@
     "gatsby-plugin-sitemap": "^6.11.0",
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
     "gatsby-remark-autolink-headers": "^6.11.0",
-    "gatsby-remark-copy-linked-files": "^6.11.0",
+    "gatsby-remark-copy-relative-linked-files": "^1.5.0",
     "gatsby-remark-embed-gist": "^1.2.1",
     "gatsby-remark-embedder": "^7.0.0",
     "gatsby-remark-external-links": "^0.0.4",

diff --git a/packages/gatsby-theme-iterative/plugins/image-preprocessor/index.js b/packages/gatsby-theme-iterative/plugins/image-preprocessor/index.js
@@ -14,7 +14,7 @@ module.exports = async (
   const preprocessImageNode = async node => {
     if (node.type === 'image') {
       const { url } = node
-      if (url && !(url.startsWith('http://') || url.startsWith('https://'))) {
+      if (url && url.startsWith('/')) {
         const imagePath = path.resolve(directory, path.join(baseDir, url))
 
         const imageNode = await getRemarkFileDependency({