index.html

---
layout: default
---

{% include hero.html %}

<div class="wrapper">
  <!-- Tutorials with parts -->
  <h3 class="tutorial__category" id="frontend">Frontend</h3>
  {% for collection in site.collections %}
    {% if collection.category == "Frontend" %}
      <section class="tutorial">
        <h4 id="{{ collection.label }}" class="tutorial__title">{{ collection.title }}</h4>
        <section class="tutorial__parts">
          {% for docs in collection.docs %}
            {% assign loopindex = forloop.index0 | modulo: 2 %}
            {% capture thecycle %}{% cycle 'odd', 'even' %}{% endcapture %}
            {% if loopindex == 0 %}
              <div class="tutorial__row">
            {% endif %}
            {% assign className = "" %}
            {% if forloop.last and thecycle == 'odd' %}
              {% capture className %}{{ className }}{{ "tutorial-part--wide" }}{% endcapture %}
            {% endif %}
            {% if docs.finished == false %}
              {% capture className %}{{ className }} {{ "tutorial-part--unfinished" }}{% endcapture %}
            {% endif %}
            <!-- site-internal tutorials -->
            {% if collection.output == true %}
              {% if docs.finished == false %}
                <a class="tutorial-part {{ className }}">
              {% else %}
                <a class="tutorial-part {{ className }}" href="{{ docs.url }}">
              {% endif %}
                  {% if docs.finished == false %}
                    <p class="tutorial-part__title-part">Coming soon</p>
                  {% elsif collection.docs.size != 1 %}
                    <p class="tutorial-part__title-part">Chapter {{ forloop.index }}</p>
                  {% endif %}
                  <h5 class="tutorial-part__title">{{ docs.title }}</h5>
                  <!-- <p class="tutorial-part__desc">{{ docs.description }}</p> -->
                </a>
            <!-- external tutorials -->
            {% else %}
              <a class="tutorial-part {{ className }}" href="{{ docs.links_to }}">
                {% if collection.docs.size != 1 %}
                  <p class="tutorial-part__title-part">Part {{ forloop.index }}</p>
                {% endif %}
                <h3 class="tutorial-part__title">{{ docs.title }}</h3>
                <!-- <p class="tutorial-part__desc">{{ docs.description }}</p> -->
              </a>
            {% endif %}
            {% if loopindex == 1 %}
              </div>
            {% endif %}
          {% endfor %}
        </section>
      </section>
    {% endif %}
  {% endfor %}

  <h3 class="tutorial__category" id="datascience">Data Science</h3>
  {% for collection in site.collections %}
    {% if collection.category == "Data Science" %}
      <section class="tutorial">
        <h4 id="{{ collection.label }}" class="tutorial__title">{{ collection.title }}</h4>
        <section class="tutorial__parts">
          {% for docs in collection.docs %}
            {% assign loopindex = forloop.index0 | modulo: 2 %}
            {% if loopindex == 0 %}
              <div class="tutorial__row">
            {% endif %}
            {% if collection.docs.size == 1 %}
              {% assign className = "tutorial-part--wide" %}
            {% else %}
              {% assign className = "" %}
            {% endif %}
            <!-- site-internal tutorials -->
            {% if collection.output == true %}
              <a class="tutorial-part {{ className }}" href="{{ docs.url }}">
                {% if collection.docs.size != 1 %}
                  <p class="tutorial-part__title-part">Part {{ forloop.index }}</p>
                {% endif %}
                <h5 class="tutorial-part__title">{{ docs.title }}</h5>
                <!-- <p class="tutorial-part__desc">{{ docs.description }}</p> -->
              </a>
            <!-- external tutorials -->
            {% else %}
              <a class="tutorial-part {{ className }}" href="{{ docs.links_to }}">
                {% if collection.docs.size != 1 %}
                  <p class="tutorial-part__title-part">Part {{ forloop.index }}</p>
                {% endif %}
                <h3 class="tutorial-part__title">{{ docs.title }}</h3>
                <!-- <p class="tutorial-part__desc">{{ docs.description }}</p> -->
              </a>
            {% endif %}
            {% if loopindex == 1 %}
              </div>
            {% endif %}
          {% endfor %}
        </section>
      </section>
    {% endif %}
  {% endfor %}
</div>