index.html

---
## Note: menu items can be edited via /src/data/menu.json

title: Prototype Index
thumbnail: false
---

{% extends "@templates/layouts/menu.twig" %}

{% set config = site.data['menu.json'] %}
{% set groupedPages = site.pages|group('group') %}
{% set ungroupedPages = groupedPages['undefined']|default([]) %}

{% block content %}
<header class="menu-header">
  <div class="menu-header__ups-lockup">
    {% if config.logo %}
      {% if config.logo.url %}
        <a href="{{ config.logo.url }}" target="_blank">
      {% endif %}
      <img class="logo" src="{{ config.logo.src }}" alt="{{ config.logo.alt | default('') }}" />
      {% if config.logo.url %}
        </a>
      {% endif %}
    {% endif %}

    {% if config.header_links|length %}
    <nav class="menu-header__outlinks">
      <ul class="menu-header__outlinks-list">
        {% for link in config.header_links %}
        <li class="menu-header__outlinks-item">
          <a class="menu-header__outlinks-link" href="{{ link.url }}">{{ link.label }}</a>
        </li>
        {% endfor %}
      </ul>
    </nav>
    {% endif %}
  </div>
  <h1 class="menu-header__title">{{ page.title }}</h1>
</header>

<nav class="menu-content">

  {% if ungroupedPages is not empty %}
  <ul class="menu-content__list">

    {% for p in ungroupedPages if p.path != page.path and p.menu != false %}
      {% set thumbnail = p.thumbnail matches '/auto/i' ? p.screenshot : p.thumbnail %}
      <li class="menu-content__item{% if p.thumbnail %} menu-content__item--has-thumbnail{% else %} menu-content__item--no-thumbnail{% endif %}">
        <a class="menu-content__link" href="{{ puppy.url(p) }}">

          {% if thumbnail %}
          <div class="menu-content__images">
            <img src="{{ puppy.siteUrl('thumbnails/' ~ thumbnail) }}" alt="{{ p.title }}" />
          </div>
          {% endif %}

          <div class="menu-content__text">
            <div class="menu-content__text-inner">
              <h2 class="menu-content__title">{{ p.title }}</h2>
              {% if p.description %}
                <p class="menu-content__description">{{ p.description }}</p>
              {% endif %}
              {% if p.updated %}
                <h4 class="menu-content__updated">{{ p.updated }}</h4>
              {% endif %}
              {% if thumbnail %}
                {% include '@templates/svgs/menu/circle-arrow.twig' %}
              {% endif %}
            </div>
          </div>

          {% if not thumbnail %}
            <div class="menu-content__images">
              {% include '@templates/svgs/menu/circle-arrow.twig' %}
            </div>
          {% endif %}

        </a>
      </li>
    {% endfor %}

  </ul>
  {% endif %}

  {% for group, pages in groupedPages if group != 'undefined' %}
    <section class="menu-content__group">
      <h3 class="menu-content__group-head">{{ group }}</h3>
      <ul class="menu-content__group-pages">
      {% for p in pages if p.path != page.path and p.menu != false %}
        {% set thumbnail = p.thumbnail matches '/auto/i' ? p.screenshot : p.thumbnail %}
        <li class="menu-content__group-item">
          <a href="{{ puppy.url(p) }} " class="menu-content__group-item-link">
            {% if thumbnail %}
              <img class="menu-content__small-thumb" src="{{ puppy.siteUrl('thumbnails/' ~ thumbnail) }}" alt="{{ p.title }}" />
            {% endif %}
            <div class="menu-content__small-text">
              <div class="menu-content__small-text-inner">
                <h2 class="menu-content__small-title">{{ p.title }}</h2>
                {% if p.updated %}
                  <h4 class="menu-content__small-updated">{{ p.updated }}</h4>
                {% endif %}
              </div>
              {% include '@templates/svgs/menu/circle-arrow.twig' %}
            </div>
          </a>
        </li>
      {% endfor %}
      </ul>
    </section>
  {% endfor %}

</nav>

<footer class="menu-footer">
  <div class="menu-footer__inner">
    <p><a href="https://github.com/Upstatement/puppy">Built with Puppy</a></p>
  </div>
</footer>

{% endblock %}