basepath calculated relative to nesting for IPFS hosting

[philholden]

A single site deployment may be hosted on both IPFS and a regular domain name using a gateway service:

https://blog.cloudflare.com/distributed-web-gateway/

However this means the basepath need to work both for:

https://mysite.io/about

and:

https://ipfs.io/ipfs/QmbHEhjtfuRrfhDWqDRQqpdX7EnE8ZzByT8t2YXCmfNDBt/about

in this case the following works:

basepath="./" in index.html
basepath="../" in about/index.html
basepath="../../" in blog/article1/index.html

Would it be possible to have a --relative-basepath export option that made the basepath of html files relative to their nesting?

[philholden]

This worked for me as a post processing step to allow me to host export at root or in a nested directory:

//walk.js in project root

const fs = require("fs"),
  path = require("path");
function walkDir(dir, callback) {
  fs.readdirSync(dir).forEach(f => {
    let dirPath = path.join(dir, f);
    let isDirectory = fs.statSync(dirPath).isDirectory();
    isDirectory ? walkDir(dirPath, callback) : callback(path.join(dir, f));
  });
}

walkDir(process.argv[2] || ".", function(filePath) {
  const fileContents = fs.readFileSync(filePath, "utf8");

  if (path.extname(filePath) !== ".html") return;
  const rel =
    "./" +
    filePath
      .replace(/^\//, "")
      .replace(process.argv[2], "")
      .replace(/^\//, "")
      .replace(/[^\/]+/g, "..")
      .replace(/\.\.$/, "");
  const contents = fileContents.replace(
    /<base href=[^>]*>/,
    `<base href="${rel}">`
  );
  fs.writeFileSync(filePath, contents, "utf8");
});

// package.json
"scripts": {
  "export": "sapper export && yarn walk",
  "walk": "node walk __sapper__/export"
}

[wighawag]

That would be great if there was an option indeed. I am also facing the same issue: deploying a website on ipfs while still having the website work in different situations.

@philholden I tried your script but I have still some references to <link href="/client/..." where the forward slash make it look up to the root.

I can probably fix it by modyfying the script but a built-in sapper solution would be great