https://github.com/carrotsearch/gatsby-plugin-relativize

Hacks the output generated by Gatsby to make it a relative URL site.
https://github.com/carrotsearch/gatsby-plugin-relativize

Last synced: 29 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/carrotsearch/gatsby-plugin-relativize
• Owner: carrotsearch
• Created: 2019-08-03T23:12:27.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-09-27T09:59:08.000Z (over 3 years ago)
• Last Synced: 2024-03-26T01:08:03.136Z (10 months ago)
• Language: JavaScript
• Size: 18.6 KB
• Stars: 0
• Watchers: 4
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
This repository is deprecated. The most up-to-date code is now at [@carrotsearch/gatsby-theme-apidocs](https://github.com/carrotsearch/gatsby-theme-apidocs/tree/master/plugins/gatsby-plugin-relativize).

---

# 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](https://github.com/moxystudio/gatsby-plugin-ipfs). The difference is in how it arrives at the runtime `pathPrefix` to use.

## Installation

```sh

$ 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:

```js

{

  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`:

```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.