This needs to be properly tested and rewritten to make sense. Please ask questions on the forums and contribute.
For Silex CMS to work 11ty requires at least the 11ty fetch plugin installed. And it is recommended to install the 11ty image plugin and the 11ty i18n plugin.
Here is how to installl them
npm install @11ty/eleventy @11ty/eleventy-fetch @11ty/eleventy-img
Also you will need to configure 11ty to copy CSS files to the final website. For that you need to create this .eleventy.js file:
// .eleventy.js
const { EleventyI18nPlugin } = require("@11ty/eleventy");
const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {
// Serve CSS along with the site
eleventyConfig.addPassthroughCopy({"silex/hosting/css/*.css": "css"});
// For the fetch plugin
eleventyConfig.watchIgnores.add('**/.cache/**')
// i18n plugin
eleventyConfig.addPlugin(EleventyI18nPlugin, {
// any valid BCP 47-compatible language tag is supported
defaultLanguage: "en",
});
// Image plugin
eleventyConfig.addShortcode("image", async function(src, alt, sizes) {
let metadata = await Image(src, {
widths: [300, 600],
formats: ["avif", "jpeg"]
});
let imageAttributes = {
alt,
sizes,
loading: "lazy",
decoding: "async",
};
// You bet we throw an error on a missing alt (alt="" works okay)
return Image.generateHTML(metadata, imageAttributes);
});
};