import path from "node:path";
import * as sass from "sass";
import { HtmlBasePlugin } from "@11ty/eleventy";

export default function (eleventyConfig) {
    eleventyConfig.addPlugin(HtmlBasePlugin);

    eleventyConfig.addGlobalData("layout", "default.liquid");

    eleventyConfig.addPassthroughCopy("assets/images");
    eleventyConfig.addPassthroughCopy("assets/fonts");

    // Creates the extension for use
    eleventyConfig.addExtension("scss", {
        outputFileExtension: "css", // optional, default: "html"
        useLayouts: false,

        // `compile` is called once per .scss file in the input directory
        compile: async function (inputContent, inputPath) {
            let parsed = path.parse(inputPath);
            if (parsed.name.startsWith("_")) { return; }
            let result = sass.compileString(inputContent, {
                loadPaths: [
                    parsed.dir || ".",
                    this.config.dir.includes
                ]
            });

            this.addDependencies(inputPath, result.loadedUrls);

            // This is the render function, `data` is the full data cascade
            return async (data) => {
                return result.css;
            };
        },
    });
    eleventyConfig.addTemplateFormats("scss");
};