Demo `mustache.js` minor issues

What happens when fields don't exist?

In general stick to the documentation for required fields****

For a simple card, use ★ Title for the question;

And use ★ Key point notes for the answer!

Here's an example card

A simple fix

A simple fix with :only-child removes the margin when only H1 exists

Here's how it looks with only the H1 (it'll look the same as usual if other fields exist)

The problem

46 (allow for two fields only with Simple cards)

The way I've coded the html in the .mustache files:

<div class="simple-KeyPoint">
  <div class="simple-KeyPoint_Code">
    {{{★ Key point (code block or image)}}}
  </div>
  <div class="simple-KeyPoint_Notes">
    {{{★ Key point notes}}}
  </div>
</div>

Leaves whitespace when compiled, no matter whether the json value is an "" empty string or if the "key": "value" pair are removed completely.

:empty doesn't work if there's whitespace because no browser supports that yet[^1] so the only way is to tighten up the HTML like this:

<div class="simple-KeyPoint_Notes">{{{★ Key point notes}}}</div>

I don't really want to do that as it's nice to read as it is. You could use a post-process HTML Minifier but that feels like overkill.

`{{ mustache tags }}` work even without `json` values existing

{
  "★ Title": "What will each residents[<b>‘key’</b>] print out?",

  "★ Key point notes": "<p>Access a <strong>dictionary</strong> item with it's <code>key</code>, which returns it's <code>value</code> ..."

}

Why is this an issue?

Aesthetics. The latest CSS has changed so that if H1 is :only-child of .simple-Header it removes the extra grey colour. If the H2 and p exist the grey background shows.

[^1]: :empty won't work, because the way I've coded it leaves some whitespace, even if the json is an empty string. :blank would work, but it's not supported by any browser.

badlydrawnrob / anki