Assets aren't proceesed when using `pathPrefix` with `EleventyHtmlBasePlugin`
zeroby0 opened this issue · comments
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
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');