Error when dealing with macro (parseAggregate: expected colon after dict key)

[msm1227]

I am completely new to using macros so this may be a simple fix. I am getting the following error:

parseAggregate: expected colon after dict key (via Template render error)

This is my macro:

{% macro impactColor(injuryLevel) %}    
   {%- if {{injuryLevel}} == "Low" -%}
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400" style="color: green;">
    {%- elif {{injuryLevel}} == "Medium" -%}
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400" style="color: yellow;">
    {%- elif {{injuryLevel}} == "High" -%}
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400" style="color: red;">
    {%- endif -%}
            {{ injuryLevel }}
    </span>
{% endmacro %}

I am referencing in my code like this:

{% from "impactColor.njk" import impactColor %}

<p class="text-xs text-gray-500 dark:text-gray-400">
   <strong>Impact Level:</strong> 
      {{ impactColor(
       injuryLevel = {{ injury.data.impact }}) }}
</p>

I am assuming the that error is in the macro based off the error and not how I am importing/using it in my template. Any help would be appreciated.

Thanks!

[pdehaan]

Close, but I think you have too many {{...}} braces:

---
title: 11ty-3036
injuries:
  - data: { impact: "Low" }
  - data: { impact: "Medium" }
  - data: { impact: "High" }
  - data: { impact: "Extreme" }
---

{% macro impactColor(injuryLevel) %}
  {%- if injuryLevel == "Low" -%}
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400" style="color: green;">
  {%- elif injuryLevel == "Medium" -%}
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400" style="color: yellow;">
  {%- elif injuryLevel == "High" -%}
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400" style="color: red;">
  {%- endif -%}
    {{ injuryLevel }}
  </span>
{% endmacro %}

{# {% from "impactColor.njk" import impactColor %} #}

{% for injury in injuries %}
  <p class="text-xs text-gray-500 dark:text-gray-400">
    <strong>Impact Level:</strong> 
    {{ impactColor(injuryLevel = injury.data.impact) }}
  </p>
{% endfor %}

OUTPUT

<p class="text-xs text-gray-500 dark:text-gray-400">
    <strong>Impact Level:</strong> 
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400" style="color: green;">Low</span>
</p>

<p class="text-xs text-gray-500 dark:text-gray-400">
    <strong>Impact Level:</strong> 
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400" style="color: yellow;">Medium</span>
</p>

<p class="text-xs text-gray-500 dark:text-gray-400">
    <strong>Impact Level:</strong> 
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400" style="color: red;">High</span>
</p>

<p class="text-xs text-gray-500 dark:text-gray-400">
    <strong>Impact Level:</strong> 
    Extreme
    </span>
</p>

(Note that it sort of broke when I passed an invalid impact level of "Extreme" and didnt display the opening <span> tag.)

[pdehaan]

Or if you want an alternate idea which uses a color map and tailwind colors:

---
title: 11ty-3036
injuries:
  - data: { impact: "Low" }
  - data: { impact: "Medium" }
  - data: { impact: "High" }
  - data: { impact: "Extreme" }
---

{% macro impactColor(injuryLevel) %}
  {%- set colorMap = {
    Low: "text-green-800",
    Medium: "text-yellow-300",
    High: "text-red-600"
  } -%}
  {%- set color = colorMap[injuryLevel] | default("text-purple-600") -%}
  <span class="injury-impact text-xs text-gray-500 dark:text-gray-400 {{ color }}">
    {{- injuryLevel -}}
  </span>
{% endmacro %}

{# {% from "impactColor.njk" import impactColor %} #}

{% for injury in injuries %}
  <p class="text-xs text-gray-500 dark:text-gray-400">
    <strong>Impact Level:</strong> 
    {{ impactColor(injuryLevel = injury.data.impact) }}
  </p>
{% endfor %}

OUTPUT

  <p class="text-xs text-gray-500 dark:text-gray-400">
    <strong>Impact Level:</strong> 
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400 text-green-800">Low</span>
  </p>

  <p class="text-xs text-gray-500 dark:text-gray-400">
    <strong>Impact Level:</strong> 
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400 text-yellow-300">Medium</span>
  </p>

  <p class="text-xs text-gray-500 dark:text-gray-400">
    <strong>Impact Level:</strong> 
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400 text-red-600">High</span>
  </p>

  <p class="text-xs text-gray-500 dark:text-gray-400">
    <strong>Impact Level:</strong> 
    <span class="injury-impact text-xs text-gray-500 dark:text-gray-400 text-purple-600">Extreme</span>
  </p>

[msm1227]

This worked! Thank you so much!