Snippet to determine if a Liquid value is `blank`, `""`, `empty`, or `null`

log.liquid

{% comment %}
  Accepts 3 arguments: 
  
  log: <Liquid object> 
  label: <string>
  floating: <boolean>
{% endcomment %}

<div
  style="
    border-radius: 0.375rem;
    background-color: #1F2937;
    font-size: 13px;
    color: #34D399;
    margin: 0.5rem;
    padding: 1rem;
    font-family: 'Menlo', monospace;
    {% if floating %} position: absolute; top: 1rem; left: 1rem; z-index:9999999{% endif %};
  "
>
  <div style="display: flex;">
    <div style="flex-shrink: 0; flex: 1 1 0%;">
      <svg
        style="width: 24px; height: 24px;"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
      >
        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
      </svg>
    </div>
    <div style="margin-left: 12px; ">
      <p style="margin-bottom: 4px; font-family: 'Menlo', monospace;">
        <strong>{{ label }}</strong>
      </p>
      <ul style="margin-top: 0;">
        {%- liquid
          case log
            when null
              echo '<li>type > <strong>null</strong></li>'
            when ''
              echo "<li>type > <strong>''</strong></li>"
            when empty
              echo '<li>type > <strong>empty</strong></li>'
            when blank
              echo '<li>type > <strong>blank</strong></li>'
            else
              echo '<li>string > <strong>' | append: log | append: '</strong></li>'
          endcase
        -%}
      </ul>
    </div>
  </div>
</div>