webc:for, before and after!

[sombriks]

Just want to share how webc:for is making my life easier :-)

BEFORE:

<!--- contact-bar.webc --->
<style webc:scoped>
    .contacts {
        display: flex;
    }
</style>
<div class="contacts">
    <script webc:type="js" webc:raw>
        $data.curriculum.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>

AFTER:

<!--- contact-bar.webc --->
<style webc:scoped>
    .contacts {
        display: flex;
    }
</style>
<div class="contacts">
  <a webc:for="c of $data.curriculum.contacts"
     webc:if="c.visible"
     target="_blank"
     :href="c.link"
     :alt="c.label"
     :title="c.label">
      <span :class="c.icon"></span>
  </a>
</div>

😄 😄 😄