list.j2

{% from "macros.j2" import render_navigation %}

{% block style %}
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{{ static_url }}ginza.css">
{% endblock %}

{%- macro render_item(subject) -%}
  <div id="item-{{ subject.id }}" class="item {{ subject.type|title }}">
    {% if subject.cover and subject.cover.src %}
      <a class="item-image js-cover" data-src="{{ subject.cover.src|thumbnail('m') }}" href="{{ linkify(subject.url) }}"></a>
    {% elif subject.image %}
      <a class="item-image js-cover" data-src="{{ subject.image|thumbnail('m') }}" href="{{ linkify(subject.url) }}"></a>
    {% else %}
      <a class="item-image" href="{{ linkify(subject.url) }}"></a>
    {% endif %}
    <a class="item-main" href="{{ linkify(subject.url) }}">
      <div class="item-meta">
        {% if subject.duration %}
          <span class="item-label">{{ subject.duration }}</span>
        {% endif %}
        <time datetime="{{ subject.published_at|xmldatetime }}">{{ subject.published_at.strftime('%b %d, %Y') }}</time>
      </div>
      <h3>{{ subject.title }}</h3>
      {%- if subject.subtitle %}
        <div class="item-subtitle">{{ subject.subtitle }}</div>
      {%- endif -%}
    </a>
  </div>
{%- endmacro -%}

{% macro render_head(site) %}
<div class="head">
  <div class="inner">
    <div class="head_logo">
      <a href="{{ linkify('/') }}">
        {% if site.logo %}
          <img src="{{ site.logo.src|thumbnail('ss') }}" alt="{{ site.name }}"/>
        {% endif %}
        <span>{{ site.name }}</span>
      </a>
    </div>
    <div class="head_subscribe">
      {% if features.algolia %}
        <a href="#" class="js-search" data-id="{{ site.algolia_id }}" data-key="{{ site.algolia_key }}">
          <i class="icon icon-search" aria-label="Search"></i>
        </a>
      {% endif %}
      {% if features.post %}
        <button class="js-subscribe">Subscribe</button>
      {% endif %}
    </div>
  </div>
</div>
{% endmacro %}

{% macro render_site_info(site) %}
  <div class="info_main">
    <h1 class="info_title"><a class="h-card" rel="me" href="{{ linkify('/') }}">{{ site.name }}</a></h1>
    {% if site.summary %}
      <h2 class="info_subtitle">{{ site.summary }}</h2>
    {% endif %}
    <nav class="info_nav">
      {% for nav in site.primary_links -%}
        <a href="{{ nav.url }}"{% if nav.blank %} target="_blank"{% endif %}>{{ nav.title }}</a>
      {% endfor %}
    </nav>
  </div>
{% endmacro %}

{% macro render_podcast_info(site) %}
  {% set podcast = site.podcast %}
  {% if podcast.image %}
    <a class="info_logo" href="{{ linkify('/') }}">
      <img src="{{ podcast.image|thumbnail('ss') }}" alt="{{ podcast.title }}">
    </a>
  {% endif %}
  <div class="info_main">
    <h1 class="info_title"><a class="h-card" rel="me" href="{{ linkify('/') }}">{{ podcast.title }}</a></h1>
    {% if podcast.subtitle %}
      <h2 class="info_subtitle">{{ podcast.subtitle }}</h2>
    {% endif %}
    <nav class="info_nav">
      <a href="/feed/audio.xml">RSS</a>
      {% for nav in podcast.links %}
        <a href="{{ nav.url }}"{% if nav.blank %} target="_blank"{% endif %}>{{ nav.title }}</a>
      {% endfor %}
    </nav>
  </div>
{% endmacro %}

{% macro render_tag_info(tag) %}
<div class="info_main">
  <h1 class="info_title"><a class="h-card" rel="me" href="{{ linkify(tag.url) }}">{{ tag.name }}</a></h1>
  {% if tag.summary %}
    <h2 class="info_subtitle">{{ tag.summary }}</h2>
  {% endif %}
  <nav class="info_nav">
    {% for nav in site.primary_links -%}
      <a href="{{ nav.url }}"{% if nav.blank %} target="_blank"{% endif %}>{{ nav.title }}</a>
    {% endfor %}
  </nav>
</div>
{% endmacro %}


{% macro render_author_info(author) %}
{% if author.avatar %}
  <a class="info_logo" href="{{ linkify('/') }}">
    <img class="avatar" src="{{ author.avatar|thumbnail('ss') }}" alt="{{ author.name }}">
  </a>
{% endif %}
<div class="info_main">
  <h1 class="info_title"><a class="h-card" rel="me" href="{{ linkify(author.url) }}">{{ author.name }}</a></h1>
  <nav class="info_nav">
    {% for nav in site.primary_links -%}
      <a href="{{ nav.url }}"{% if nav.blank %} target="_blank"{% endif %}>{{ nav.title }}</a>
    {% endfor %}
  </nav>
</div>
{% endmacro %}


{% block body %}
  {% set cover = site.cover %}
  {% if page.type == 'tag' %}
    {% set tag = page.topic %}
    {% if tag.cover and tag.cover.src %}
      {% set cover = tag.cover %}
    {% endif %}
  {% endif %}
  <div {% if cover -%}
    class="head-cover js-cover" data-src="{{ cover.src|thumbnail }}"
  {%- else -%}
    class="head-cover"
  {%- endif %}>
    {{ render_head(site) }}
    <div class="info _{{ page.type }}">
      <div class="inner">
        {% if page.type == 'audio_list' and site.podcast %}
          {{ render_podcast_info(site) }}
        {% elif page.type == 'tag' %}
          {{ render_tag_info(page.topic) }}
        {% elif page.type == 'author' %}
          {{ render_author_info(page.topic) }}
        {% elif page.type == 'lang' %}
          {% set info = page.topic %}
          <div class="info_main">
            <h1 class="info_title">{{ info.name }}</h1>
            <nav class="info_nav">
              {% for nav in site.primary_links -%}
                <a href="{{ nav.url }}"{% if nav.blank %} target="_blank"{% endif %}>{{ nav.title }}</a>
              {% endfor %}
            </nav>
          </div>
        {% else %}
          {{ render_site_info(site) }}
        {% endif %}
      </div>
    </div>
  </div>
  <div class="main">
    <div class="inner">
      <div class="items">
        {% for subject in page.items %}
          {{ render_item(subject) }}
        {% endfor %}
      </div>
      {{ render_navigation(site, page) }}
    </div>
  </div>
  {% include "_snippets/site_foot.j2" %}
  {% include "_snippets/brand_foot.j2" %}
{% endblock %}