---
layout: default
---

{% capture components %}
  {% for component in site.data.components %}
    {% assign component_include = "theme/" | append: component | append: ".html" %}
    {% assign title = component | replace: "_", " " | capitalize %}

    <section id="{{ component | replace: "_", "-" }}" class="mb-5">
      <header>
        {% include headings/with_link.html level=1 text=title %}
      </header>

      {% include {{ component_include }} %}
    </section>
  {% endfor %}
{% endcapture %}

{% capture full_width_components %}
  {% for component in site.data.full_width_components %}
    {% assign component_include = "theme/" | append: component | append: ".html" %}
    {% assign title = component | replace: "_", " " | capitalize %}

    <section id="{{ component | replace: "_", "-" }}" class="mb-5">
      <header>
        {% include headings/with_link.html level=1 text=title %}
      </header>

      {% include {{ component_include }} %}
    </section>
  {% endfor %}
{% endcapture %}

<div class="container-fluid">
  <div class="row">
    <aside class="col-12 col-md-3">
      <ol class="list-unstyled">
        {%- assign toc_full_width = full_width_components | table_of_contents: 1 -%}
        {%- assign toc = components | table_of_contents: 1 | concat: toc_full_width -%}

        {% for item in toc %}
          <li>
            <a href="#{{ item.id }}" data-turbo="false">
              {{- item.title -}}
            </a>
          </li>
        {% endfor %}
      </ol>
    </aside>

    <section class="col-12 col-md">
      {{ components }}
    </section>
  </div>
</div>

<section class="w-100">
  {{ full_width_components }}
</section>