static data and webc templates instead of 11ty.js

[sombriks]

Hello all,

i have this simpl link iterator which works fine, however i would like to know if there is any way to perform anything similar using webc templates.

const list = require("../assets/links.json")

module.exports = class {
    data() {
        return {
            "layout": "base.webc"
        }
    }

    mkLink(l) {
        return `<a style="display:inline-block;" href="${l.link}" target="_blank">${l.label}</a>\n`
    }

    render(data) {
        return `<br/>${list.map(this.mkLink).join("")}`
    }
}

thanks in advance for any guidance

[darthmall]

You can use a render function: https://11ty.webc.fun/recipes/looping-render-function/

[cfjedimaster]

Any reason why you want this to be WebC versus Liquid or another option?

[sombriks]

@cfjedimaster i am pretty new on eleventy and got a initial fond on webc.

i ended up studying more and understanding how to properly use static data

---
layout: base.webc
---

{%- for link in links -%}
  <a target="_blank" href="{{link.link}}" style="display:inline-block;">{{link.label}}</a>
{%- endfor -%}

As for my webc components i can get similar results with this:

    <div class="contacts">
        <script webc:type="js" webc:is="a">
           extra.contacts.filter(c => c.visible).map(c => `
     <a target="_blank" href="${c.link}" alt="${c.label}" title="${c.label}">
       <span class="${c.icon}"></span>
     </a>
            `).join("\n")
        </script>
    </div>

Both links and extra are static json files from my data folder.