apimodules.html

---
layout: page
title: "Officially recommended modules providing common functionality"
---
{% for module in site.api_modules %}
{% assign loopindex = forloop.index0 | modulo: 2 %}
{% if loopindex == 0 %}
<div class="row">
{% endif %}
  <div class="col s12 m6">
    <div class="card teal accent-2">
      <div class="card-content">
        <span class="card-title">{{module.name}}</span>
        <p>{{module.description}}</p>
      </div>
      <div class="card-action">
        <a class="modal-trigger orange-text text-darken-1" href="#modal{{module.name}}">See more details</a>
      </div>
    </div>
  </div>
{% if loopindex == 1 or forloop.last %}
</div>
{% endif %}
{% endfor %}
{% for module in site.api_modules %}
<div class="modal" id="modal{{module.name}}">
  <div class="modal-content">
    <h1>{{module.name}}</h1>
    <p>{{module.description}}</p>
    {{module.content | markdownify}}

    {% comment %} Check if module has any components at all {% endcomment %}
    {% assign has_components = false %}
    {% for component in site.components %}
    {% if component.module == module.name %}
    {% assign has_components = true %}
    {% endif %}
    {% endfor %}

    {% if has_components %}
      <hr/>
      <h2>Components</h2>
      {% for component in site.components %}
        {% if component.module == module.name %}
          <div class="card green lighten-5">
            <div class="card-content">
              <span class="card-title">{{component.name}}</span>
              {{component.content | markdownify}}
            </div>
          </div>
        {% endif %}
      {% endfor %}
    {% endif %}

    {% comment %} Check if module has any events at all {% endcomment %}
    {% assign has_events = false %}
    {% for event in site.events %}
    {% if event.module == module.name %}
    {% assign has_events = true %}
    {% endif %}
    {% endfor %}

    {% if has_events %}
      <hr/>
      <h2>Events</h2>
      {% for event in site.events %}
        {% if event.module == module.name %}
          <div class="card amber lighten-5">
            <div class="card-content">
              <span class="card-title">{{event.name}}</span>
              {{event.content | markdownify}}
            </div>
          </div>
        {% endif %}
      {% endfor %}
    {% endif %}
  </div>
</div>
{% endfor %}