maizzle / framework

Quickly build HTML emails with Tailwind CSS.
https://maizzle.com
MIT License
1.24k stars 49 forks source link

Getting undefined when using <raw> or @{{ #171

Closed happylinks closed 4 years ago

happylinks commented 4 years ago

I'm trying to not escape my vars in {{}} but they keep turning into undefined. I wrapped it in<raw> which didn't fix it, I also added @{{ but that didn't work for the href's. Unsure what I'm doing wrong.

Template:

---
title: You have been invited
bodyClass: bg-white h-full font-sans p-4 text-gray-900
htmlClass: bg-white h-full font-sans p-4 text-gray-900
---

<extends src="src/layouts/master.html">
  <block name="template">
    <raw>
      <div>
        <h1 class="mb-4 text-2xl font-bold leading-tight text-black">
          {{ givenName }} invited you to {{ storyName }}
        </h1>
        <p class="mb-12 text-base font-medium leading-tight">
          {{ fullName }} has invited you to edit
          <a href="@{{inviteLink}}" class="underline text-tella"
            >{{ storyName }}</a
          >
          on X.
        </p>
        <a
          href="{{ inviteLink }}"
          class="inline-flex items-center px-6 py-3 text-lg font-medium text-white no-underline border border-transparent rounded h-9 transition ease-in-out duration-150 focus:outline-none hover:shadow bg-tella focus:border-tella focus:shadow-outline-purple active:text-gray-400"
          >Open in X</a
        >
        <component src="src/components/footer.html"></component>
      </div>
    </raw>
  </block>
</extends>

Generated:

<div>
--
  | <h1 class="mb-4 text-2xl font-bold leading-tight text-black">
  | undefined invited you to undefined
  | </h1>
  | <p class="mb-12 text-base font-medium leading-tight">
  | undefined has invited you to edit
  | <a href="@undefined" class="underline text-tella">undefined</a>
  | on Tella.
  | </p>
  | <a href="undefined" class="inline-flex items-center px-6 py-3 text-lg font-medium text-white no-underline border border-transparent rounded h-9 transition ease-in-out duration-150 focus:outline-none hover:shadow bg-tella focus:border-tella focus:shadow-outline-purple active:text-gray-400">Open in Tella</a>
happylinks commented 4 years ago

Downgraded to maizzle 1.0.3 and that seems to fix it

cossssmin commented 4 years ago

Got it, it's an issue introduced by 7dab46d in v1.0.5.

Will revert that and release a patch this coming week - just want to also update posthtml-expressions and get posthtml/posthtml-expressions#78 in. Thanks for reporting it! 👍

P.S.: once we get <raw> working properly again, note that you don't need @{{ }} inside it, so you can simply write <a href="{{ inviteLink }}" class="underline text-tella">

happylinks commented 4 years ago

Awesome! Thanks for the fast response. Also, Maizzle is great!

cossssmin commented 4 years ago

Thanks for the appreciation and sorry for any issues caused, it was a stupid mistake on my end 🤦‍♂️

cossssmin commented 4 years ago

Fixed in v1.0.9