ruby.uy/_includes/next_meetup.html at 11389f2f0568f0e15485e9d3a8d226f837ea667e · rubyuy/ruby.uy · 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
{% assign next_meetup = site.data.next_meetup %}
{% assign host = site.data.companies[next_meetup.host] %}

{% if next_meetup.show %}
  <section class="next-meetup" style="display:none" data-meetup-date="{{ next_meetup.date_iso }}">
    <header>
      <div class="next-meetup-callout" aria-hidden=true>
        <h1 class="next-meetup-callout__title">Próxima meetup</h1>
        <svg class="next-meetup-callout__icon" width="41" height="39" viewBox="0 0 41 39" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
          <path d="M20.2242 19.6973L39.8992 23.5392L33.4961 34.9484L20.3406 19.9302L26.6273 38.7902H13.5883L20.1078 19.8138V19.6973H20.2242L20.1078 19.5809L13.5883 0.488037H26.6273L20.4571 19.2317L33.3797 4.3299L40.0156 15.7391L20.3406 19.5809L20.2242 19.6973ZM6.71951 4.3299L19.9914 19.5809L0.316406 15.7391L6.71951 4.3299ZM6.95235 34.9484L0.316406 23.5392L20.1078 19.6973L6.95235 34.9484Z" fill="white"/>
        </svg>
      </div>
    </header>
    <article>
      <div class="next-meetup__details" id="meetup">
        <img src="/assets/images/stars.svg" width="56" height="56" aria-hidden="true" focusable="false" class="stars">
        <h2>Podés ser parte de la próxima meetup!</h2>
        <ul aria-label="Next Meetup Details">
          <li aria-label="When">
            <img src="/assets/images/calendar_icon.svg" alt="Calendar Icon" width="50" height="49">
            {{ next_meetup.date | default: 'TBD' }}
          </li>
          <li aria-label="Time">
            <img src="/assets/images/clock_icon.svg" alt="Clock Icon" width="40" height="40">
            {{ next_meetup.time | default: 'TBD' }}
          </li>
          <li aria-label="Where">
            <img src="/assets/images/location_icon.svg" alt="Location Icon" width="34" height="42">
            <a href="{{ host.address_url}}" target="_blank" rel="noopener noreferrer">{{ host.name }} | {{ host.address }}</a>
          </li>
          {% if next_meetup.talks.size < 1 %}
            <li aria-label="Speakers">
              <img src="/assets/images/microphone_icon.svg" alt="Clock Icon" width="40" height="40">
              Speakers: TBD
            </li>
          {% endif %}
        </ul>
      </div>
      <ul class="next-meetup__speakers" aria-label="Next Meetup Speakers">
        {% for talk in next_meetup.talks %}
          <li>
            {% for speaker in talk.speakers %}
              <img src="https://github.com/{{ site.data.people[speaker].github }}.png" alt="Speaker Photo" loading="lazy" width="160" height="160" style="width: calc(100% / {{ talk.speakers.size }} - 1%)">
            {% endfor %}
            <article>
              <h1 aria-label="First Speaker Name">
                {% for speaker in talk.speakers %}
                  {{ site.data.people[speaker].name }}
                  {% unless forloop.last %}<br><br>{% endunless %}
                {% endfor %}
              </h1>
              <p aria-label="First Speaker Talk">{{ talk.name }}</p>
            </article>
          </li>
        {% endfor %}
      </ul>
    </article>
  </section>
  <script>
    (function() {
      var el = document.querySelector('[data-meetup-date]');
      if (!el) return;
      var meetupDate = new Date(el.dataset.meetupDate + 'T23:59:59');
      if (new Date() <= meetupDate) el.style.display = '';
    })();
  </script>
{% endif %}