cwaring / vuepress-plugin-ipfs

Host any VuePress project on IPFS

VuePress Plugin IPFS

Convert a VuePress 1.x bundle into relative paths making it suitable for hosting on IPFS.

Usage

npm i -D vuepress-plugin-ipfs

Setup

Add to config.js or theme/index.js

module.exports = {
  plugins: [
    ['vuepress-plugin-ipfs'],
  ]
}

Once included this this plugin will post process all generated pages and CSS files to use relative asset paths during a production build.

$withBase - Base URL helper

Sites hosted on IPFS will be accessed via a variable depth so it is important to use relative paths for assets wherever possible, however there are certain scenarios where this is not viable due to components being included on multiple pages (such as headers/footers) or when asset paths are programmatically included.

If your site is accessed via an IPFS gateway the base path will be computed to include the current IPFS gateway and CID. For example, https://gateway.ipfs.io/ipfs/<CID>/, then base will be configured to "/ipfs/<CID>/". The same goes for any IPNS gateway paths.

Therefore it is best to use this built in helper method to wrap asset paths. $withBase (injected onto Vue’s prototype) to generate the correct path when accessed via the root domain or IPFS gateway:

<img :src="$withBase('/foo.png')" alt="foo">

Tip: You can use the above syntax in theme components and Markdown files.

💡If you have a base key set in .vuepress/config.js or theme/index.js you will need to remove it in order for this plugin to work correctly.

vuepress-plugin-ipfs's Issues

Favicon 404 request on each page transition

Hey @cwaring - thanks for this awesome plugin!

ethereum.org is up & running on IPFS (ethereum/ethereum-org-website#896)!

One (minor) issue I'm noticing is with the favicon. It seems to work sometimes but others I'm seeing failed requests on every page I navigate to (I'm guessing because it's trying to access the favicon via a relative link from each page):

Any idea how to solve this favicon issue? I tried using/importing $withBase in the config.js but I suspect that's not doable.

Cheers

Improve root relative path processing

There are a few instances where robots crawling the social media meta assets paths will return a 404 on root pages due to the relative path of the asset, a proposed fix is to rewrite these paths to remove the initial '/' instead of inserting './'

When is $withBase necessary?

Hello again 😄

I'm curious when the $withBase helper is needed.

We just added IPFS support with this plugin (ethereum/ethereum-org-website#896) & everything seems to be working. I'm actually surprised our assets page is serving images correctly because we didn't add the helper within that component but it was needed for our other components (e.g. this one).

Are there specific rules for when this helper is needed? I thought it was within any component that references an image within the /public/ directory.

Thanks in advance!