Open kjvdven opened 7 months ago
I'm making a style guide with eleventy and now I have a short code for displaying the component. For previewing the component I use an iFrame.
Now I want to replace the iFrame with a webcomponent and I was hoping I could use the eleventy-plugin-webc for that.
// Code examples shortcode eleventyConfig.addPairedShortcode( "component", async function (content, language = "html", preview = true, markup = true) { var code = content.trim(); code = await prettier.format(code, { printWidth: 120, parser: "html", }); var component = ""; var iframeID = eleventyConfig.getFilter("getRandomUUID")(); if (preview && language === "html") { var iframeContent = `<link rel="stylesheet" href="/assets/css/design-system.css"><link rel="stylesheet" href="/assets/css/iframe.css">${code}<script type="module" src="/assets/js/design-system.js"></script><script type="module" src="/assets/js/iframe.js"></script>`; component += `<div class="ld-preview"><iframe id="iframe-${iframeID}" style="width: 100%;" srcdoc="${iframeContent.replace(/"/g, """)}" onload="this.style.height=this.contentDocument.body.scrollHeight +'px';"></iframe></div>`; } if (markup) { code = code.replace(/(<svg[^>]*>)[\s\S]*?(<\/svg>)/g, "$1\n<!-- SVG content -->\n$2"); code = await prettier.format(code, { printWidth: 120, parser: "html", }); component += `<div class="ld-markup">${eleventyPrism(code, language)}</div>\n`; } component += `<webc-test>${code}</webc-test>`; component += `<webc-preview>${code}</webc-preview>`; return `<div class="ld-component">${component}</div>\n`; }, );
I hoped that the 2 webc components would be processed, but it seems they are ignored. If I manually put the webc components in a liquid file the components do render as expected.
{% renderTemplate "webc" %} <webc-preview></webc-preview> {% endrenderTemplate %}
Is this something which can be achieved with the "eleventy-plugin-webc" or should I look for other solutions?
I'm making a style guide with eleventy and now I have a short code for displaying the component. For previewing the component I use an iFrame.
Now I want to replace the iFrame with a webcomponent and I was hoping I could use the eleventy-plugin-webc for that.
I hoped that the 2 webc components would be processed, but it seems they are ignored. If I manually put the webc components in a liquid file the components do render as expected.
Is this something which can be achieved with the "eleventy-plugin-webc" or should I look for other solutions?