{% macro renderHeadings(headings) %}
  <ul class="pl-4">
    {% for heading in headings %}
      <li class="my-4">
        <a href="#{{ heading.slug }}" class="hover:text-primary-400">{{ heading.text }}</a>
        {% if heading.children %}
          {{ renderHeadings(heading.children)}}
        {% endif %}
      </li>
    {% endfor %}
  </ul>
{% endmacro %}

{% macro render(node, ctx) %}
  <div class="my-4 font-medium text-2xl">Table of Contents</div>
  <div class="-ml-3">
    {{ renderHeadings(ctx.headings) }}
  </div>
{% endmacro %}