11ty / eleventy-plugin-webc

Adds support for WebC *.webc files to Eleventy
https://www.11ty.dev/docs/languages/webc/
120 stars 10 forks source link

Plugin doesnt interpret webc component #84

Closed GuillaumeUnice closed 1 year ago

GuillaumeUnice commented 1 year ago

I'm on the latest version of 11ty:

    "@11ty/eleventy": "^2.0.1",
    "@11ty/eleventy-plugin-webc": "^0.11.1",

Here is my config file

const CleanCSS = require("clean-css");
const Image = require('@11ty/eleventy-img');
const pluginWebc = require("@11ty/eleventy-plugin-webc");
const { EleventyRenderPlugin } = require("@11ty/eleventy");

module.exports = function(eleventyConfig) {
    eleventyConfig.addNunjucksAsyncShortcode('Image', responsiveImage);
    eleventyConfig.addFilter("cssmin", function(code) {
        return new CleanCSS({}).minify(code).styles;
    });

    eleventyConfig.addPassthroughCopy("./src/assets");

    eleventyConfig.addPlugin(pluginWebc, {components: "_components/**/*.webc", useTransform: true,});
    eleventyConfig.addPlugin(EleventyRenderPlugin);
    return {
        dir: {
            input: "src",
            output: "public"
        }
    }
}

I have a base.njk file with inside

{% renderTemplate "webc" %}
    <foo webc:keep></foo>
{% endrenderTemplate %}

I added a file _components/foo.webc with simple text inside of it

And unfortunately nothing is render apart the balise tag When I look at somme tutorial I notice they do not return

    return {
        dir: {
            input: "src",
            output: "public"
        }
    }

in there config file is there a link maybe with my not working webc installation?

GuillaumeUnice commented 1 year ago

Actually it was the issue of course need to add "src/" Here is the good configuration then:

const CleanCSS = require("clean-css");
const Image = require('@11ty/eleventy-img');
const pluginWebc = require("@11ty/eleventy-plugin-webc");
const { EleventyRenderPlugin } = require("@11ty/eleventy");

module.exports = function(eleventyConfig) {
    eleventyConfig.addNunjucksAsyncShortcode('Image', responsiveImage);
    eleventyConfig.addFilter("cssmin", function(code) {
        return new CleanCSS({}).minify(code).styles;
    });

    eleventyConfig.addPassthroughCopy("./src/assets");

    eleventyConfig.addPlugin(pluginWebc, {components: "src/_components/**/*.webc", useTransform: true,});
    eleventyConfig.addPlugin(EleventyRenderPlugin);
    return {
        dir: {
            input: "src",
            output: "public"
        }
    }
}