Assets aren't proceesed when using pathPrefix with EleventyHtmlBasePlugin

[zeroby0]

Describe the bug

When using the pathPrefix eleventy config option with EleventyHtmlBasePlugin, URLs are prefixed, so they don't refer to the assets any more, and vite doesn't process/copy them anymore.

For example, when pathPrefix isn't used, there is an assets folder in the build directory. Compiled css and images processed by the 11ty-img plugin are in it. The import alias is resolved to <link rel="stylesheet" href="/assets/index.4d32abd0.css">.

When pathPrefix is added, the assets folder doesn't exist anymore, and the import alias isn't resolved: <link rel="stylesheet" href="/sarl/@root/styles/index.css">.

To Reproduce

Create a new slinkity site: https://slinkity.dev/docs/quick-start/

Add pathPrefix and htmlBase plugin to 11ty config:

const slinkity = require('slinkity')
const { EleventyHtmlBasePlugin } = require("@11ty/eleventy");

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(slinkity.plugin, slinkity.defineConfig({
    renderers: [],
  }))

  eleventyConfig.addPlugin(EleventyHtmlBasePlugin)
  eleventyConfig.addPassthroughCopy('public')

  return {
    dir: {
      input: 'src',
    },

    pathPrefix: "/sarl/"
  }
}

Run npm run build.

Version

    "@11ty/eleventy": "^2.0.0-canary.25",
    "slinkity": "^1.0.0-canary.0",

Additional context

Related issue: #181

[zeroby0]

For others with the same problem, my temporary fix is to manually prefix the urls after the build.

// package.json
"build": "eleventy; node htmlbase.js"

// htmlbase.js

const fs = require('fs');
const path = require('path');
const htmlBasePlugin = require("@11ty/eleventy/src/Plugins/HtmlBasePlugin.js");

filter = null;

class EleventyConfig {
  pathPrefix = "/sarl/";   // Prefix here

  addFilter(name, func) { };
  addTransform(name, func) { };

  addAsyncFilter(name, func) {
    filter = func;
  }
}

htmlBasePlugin(new EleventyConfig());

function getHtmlFiles(directoryPath) {
  const files = fs.readdirSync(directoryPath);

  let htmlFiles = [];

  files.forEach((file) => {
    const filePath = path.join(directoryPath, file);
    const fileStat = fs.statSync(filePath);

    if (fileStat.isDirectory()) {
      const subDirectoryFiles = getHtmlFiles(filePath);
      htmlFiles = htmlFiles.concat(subDirectoryFiles);
    } else if (path.extname(file) === '.html') {
      htmlFiles.push(filePath);
    }
  });

  return htmlFiles;
}


async function process(directory) {
  const htmlFiles = getHtmlFiles(directory);

  const promises = htmlFiles.map(async (htmlFile) => {
    const html = fs.readFileSync(htmlFile, 'utf8');
    const html_tx = await filter(html);

    fs.writeFileSync(htmlFile, html_tx, 'utf8');
  })

  await Promise.all(promises);
}

process('_site');

[bholmesdev]

Thanks for sharing a workaround to this issue @zeroby0. I am sorry to say that Slinkity is no longer maintained. To make this clear to new users, I have archived the repository, and I have updated the project README to reflect the current status.

If the community would like to fork and keep Slinkity alive, all code is open and MIT licensed. I apologize for the radio silence, but I hope this clarifies everything!