This content originally appeared on Raymond Camden and was authored by Raymond Camden
It's been a little while since I've blogged about the Eleventy WebC feature, and that's good because just recently some nice little nuggets landed in the project. Specifically...
I want to share a demo of loops later, but I thought I'd first look into else and elseif, specifically in regards to my first post on WebC back in October: First Experience Building with Eleventy's WebC Plugin
In that post, I built a WebC file to create a simple placeholder with SVG. The component was incredibly simple, but it needed a bit of logic which wasn't possible in WebC at the time. Luckily I could "escape" by embedding Liquid:
<template webc:type="11ty" 11ty:type="liquid">{% if width == blank %} {% assign width = "199" %}{% endif %}{% if height == blank %} {% assign height = "199" %}{% endif %}<svg ns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}" viewbox="0 0 {{width}} {{height}}"> <rect width="100%" height="100%" fill="#ff0000"></rect> {% if text %} <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">{{ text }}</text> {% endif %}</svg></template>This worked, but I wanted to see if I could use the new directives instead. I ended up with this version first:
<svg ns="http://www.w3.org/2000/svg" :width="width?width:199" :height="height?height:199" viewbox="0 0 {{width}} {{height}}"> <rect width="100%" height="100%" fill="#00cc00"></rect> <text webc:if="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" @text="text"></text></svg>You'll notice that both width and height now are dynamic and will use 199 each foir a default. Next, I made the text element only show up if the text attribute was passed. You'll notice though that viewbox wasn't updated.
So... I had a quandary. I knew I could turn viewbox into a JavaScript expression, but I wasn't sure how to "embed" a check for undefined variables. I first tried the nullish coalescing operator which sounded like it would work, but it doesn't support a variable that's not declared.
I then decided to pivot. What if my logic changed to - you either specify height and width, or I default both? I rewrote the component like so:
<svg ns="http://www.w3.org/2000/svg" webc:if="width && height" :width="width" :height="height" :viewbox="'0 0 '+width+' '+height"> <rect width="100%" height="100%" fill="#00cc00"></rect> <text webc:if="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" @text="text"></text></svg><svg ns="http://www.w3.org/2000/svg" webc:else width="199" height="199" viewbox="0 0 199 199"> <rect width="100%" height="100%" fill="#00cc00"></rect> <text webc:if="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" @text="text"></text></svg>I'm not terribly happy with the fact that I have to repeat the code twice, it feels a bit risky in case I make other changes to the SVG, but then again, it's still only a few lines of code.
If you want to see this in action, you can find the code up on Glitch here: https://glitch.com/edit/#!/webc-placeholder-latest. The live version may be found here: https://glitch.com/edit/#!/webc-placeholder-latest
p.s. As a quick aside, if you like WebC, check out https://11ty.webc.fun/ for good examples.
This content originally appeared on Raymond Camden and was authored by Raymond Camden
Raymond Camden | Sciencx (2023-03-28T18:00:00+00:00) WebC Updates in Eleventy. Retrieved from https://www.scien.cx/2023/03/28/webc-updates-in-eleventy/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.