carrotsearch/gatsby-plugin-relativize

Hacks the output generated by Gatsby to make it a relative URL site.

This repository is deprecated. The most up-to-date code is now at @carrotsearch/gatsby-theme-apidocs.

---

gatsby-plugin-relativize

A Gatsby plugin that post-processes the output to remove the dependency on absolute URLs. The post-processed site should work when deployed at any URL prefix.

The plugin is pretty much a fork of gatsby-plugin-ifps. The difference is in how it arrives at the runtime pathPrefix to use.

Installation

$ npm install --save @carrotsearch/gatsby-plugin-relativize

Usage

In gatsby-config.js, set prefixPath to __RELATIVIZE_PREFIX__ and include the plugin in the plugins array:

{
  pathPrefix: '__RELATIVIZE_PREFIX__',
  "plugins": [
    `@carrotsearch/gatsby-plugin-relativize`
  ]
}

Then, build the project with npm run build -- --prefix-paths. Better yet, set it by default in your package.json:

"scripts": {
  "build": "gatsby build --prefix-paths"
},

The hacks

The plugin applies the following post-processing hacks:

• Iterate over all output HTML files and replace every occurrence of __RELATIVIZE_PREFIX__ with the correct relative path based on the nesting depth of the file within the public/ folder.

• Iterate over all output JavaScript files and replace every occurrence of __RELATIVIZE_PREFIX__ with a runtime reference to window.__RELATIVIZE_PREFIX__.

• Adds a very small code snippet to every HTML page that defines the window.__RELATIVIZE_PREFIX__ global based on the current window.location.pathname. This ensures that Gatsby's runtime routing replaces the location with correct URLs.

gatsby-plugin-relativize's Issues

Gatsby fails to load a page with a certain GraphQL query.

Thanks a lot for writing this plugin first of all.

It seems like the plugin fails to generate correct .js file when a page contains a file or allFile GraphQL query. For example, one of my pages has the following:

query {
  docServiceImages: allFile(
    filter: { relativePath: { glob: "docservice-carousel-*.png" } }
    sort: { fields: relativePath, order: ASC }
  ) {
    nodes {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
}

When built with the gatsby-plugin-relativize plugin, yhe production build .js file will have something like this:

e.exports = JSON.parse('{"data":{"docServiceImages":{"nodes":[{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,...","aspectRatio":1.7857142857142858,"src": __RELATIVIZE_PREFIX__ + "/static/07425b49e3908d0a974b067ff0a964eb/ee604/docservice-carousel-1.png","srcSet": __RELATIVIZE_PREFIX__ + "/static/07425b49e3908d0a974b067ff0a964eb/69585/docservice-carousel-1.png 200w,\\n/__RELATIVIZE_PREFIX__/static/07425b49e3908d0a974b067ff0a964eb/497c6/docservice-carousel-1.png 400w,...

I see two issues here.

• JSON.parse() will fail to parse the JSON because the string patched by the plugin is not a valid JSON anymore. (__RELATIVIZE_PREFIX__ + "/static...)
• The plugin fails to patch \\n/__RELATIVIZE_PREFIX__/.

Not sure how we can patch properly, but I guess this plugin will not work with gatsby-image and gatsby-plugin-sharp which provides some image processing.