---
layout: default
---
<section class="row mt-2">
  <header class="col-12">
    <h1>{{ page.title }}</h1>
  </header>

  <aside class="col-4">
    <menu class="list-group">
      {% for component in site.data.components %}
        {% assign title = component | replace: '_', ' ' | capitalize %}
        {% assign id = component | replace: '_', '-' %}

        <a class="list-group-item list-group-item-action" href="#{{ id }}" data-turbo="false">{{ title }}</a>
      {% endfor %}

      {% for component in site.data.full_width_components %}
        {% assign title = component | replace: '_', ' ' | capitalize %}
        {% assign id = component | replace: '_', '-' %}

        <a class="list-group-item list-group-item-action" href="#{{ id }}" data-turbo="false">{{ title }}</a>
      {% endfor %}
    </menu>
  </aside>

  <section class="col">
    {% for component in site.data.components %}
      {% assign component_include = 'theme/' | append: component | append: '.html' %}
      {% assign title = component | replace: '_', ' ' | capitalize %}
      {% assign id = component | replace: '_', '-' %}

      <section id="{{ id }}" class="mb-5">
        <header>
          <h2>{{ title }}</h2>
        </header>

        {% render component_include, data: site.data, locale: site.locale, i18n: site.i18n, cache: false %}
      </section>
    {% endfor %}
  </section>
</section>

<section class="mt-2">
  {% for component in site.data.full_width_components %}
    {% assign component_include = 'theme/' | append: component | append: '.html' %}
    {% assign title = component | replace: '_', ' ' | capitalize %}
    {% assign id = component | replace: '_', '-' %}

    <section id="{{ id }}" class="mb-5">
      <header>
        <h2>{{ title }}</h2>
      </header>

      {% render component_include, data: site.data, locale: site.locale, i18n: site.i18n, cache: false %}
    </section>
  {% endfor %}
</section>