queerpostbox/posts.html at main · chr-tatu/queerpostbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
---
layout: posts
title: All Postcards
include_modals: true
---

<div class="landing-layout">
  <aside class="sidebar">
    <div class="filters">
      <button class="filter-clear active">All postcards</button>
      <button class="filter-name" data-filter="country" aria-expanded="false" aria-controls="country-options">
        <span class="filter-label">Country</span>
        <svg class="filter-arrow" width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 1L6 6L1 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <div class="filter-options" id="country-options" role="listbox">
        {% assign posts_with_country = site.posts | where_exp: "post", "post.country" %}
        {% assign used_codes = posts_with_country | map: "country" | uniq %}
        {% for entry in site.data.countries %}
          {% if used_codes contains entry.code %}
            <button class="filter-option" role="option" data-country="{{ entry.code }}">{{ entry.name }}</button>
          {% endif %}
        {% endfor %}
      </div>
    </div>

    <button class="send-postcard-btn" aria-label="Send postcard">
      <img class="send-icon" src="{{ '/assets/icons/postcard.svg' | relative_url }}" alt="" aria-hidden="true">
      <span class="send-label">Send<span class="send-label-suffix"> postcard</span></span>
    </button>
  </aside>

  <div class="postcard-grid" id="postcard-grid" data-total-posts="{{ site.posts.size }}">
    {% assign total_posts = site.posts | size %}
    {% assign post_index = 0 %}
    {% for post in site.posts %}
      {% assign post_index = post_index | plus: 1 %}
      {% assign is_new = false %}
      {% if post_index <= 3 %}
        {% assign is_new = true %}
      {% endif %}
      {% assign post_number = total_posts | minus: post_index | plus: 1 %}
      <div class="postcard-item"
           data-index="{{ post_index }}"
           data-slug="{{ post.slug }}"
           data-permalink="{{ post.url | relative_url }}"
           data-title="{{ post.title | escape }}"
           data-date="{{ post.date | date: '%B %d, %Y' }}"
           data-country="{{ post.country }}"
           data-topic="{{ post.topic }}"
           data-content="{{ post.content | strip_html | escape_once }}"
           data-number="{{ post_number }}"
           {% if post.audio %}data-audio="{{ post.audio | relative_url }}"{% endif %}>
        {% if is_new %}
          <div class="new-badge">
            <span>New!</span>
          </div>
        {% endif %}
        <div class="postcard-link">
          {% if post.image-front %}
            <img src="{{ post.image-front | relative_url }}"
                 alt="{{ post.title }}"
                 class="postcard-image"
                 loading="lazy"
                 data-front="{{ post.image-front | relative_url }}"
                 data-back="{{ post.image-back | relative_url }}">
          {% else %}
            <div class="postcard-placeholder">No Image</div>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
</div>