index.html

---
show_header: true
permalink: /
---

{% assign sorted_hacks = site.hacks | where:"upcoming",true | sort:"date" | reverse %}
{% assign next_hack = sorted_hacks | first %}
{% assign start_time = next_hack.date | slice:0,10 | append:"T09:30Z" %}

<p class="lead">
  An online event where you can meet friends and work on something new
</p>

<section class="map">
  <div>
    <h2>Live Map</h2>
    {% include livemap.html %}
  </div>
</section>

<section class="📅">
  <div>
    <h2>Next event</h2>
      {% if next_hack %}
      <p>
        <time class="⏰" datetime="{{start_time}}">
          {{ start_time | date_to_long_string }}

          <span>
            <script>
              document.currentScript.replaceWith(
                document.createTextNode(
                  new Intl.DateTimeFormat('default', {
                    hour: 'numeric',
                    minute: 'numeric',
                    timeZoneName: 'long'
                  })
                    .format(new Date("{{start_time}}"))
                )
              )
            </script>
            <noscript>
              {{ start_time | date: "%k:%M%P %Z" }}
            </noscript>
          </span>

        </time>
      </p>
      {% else %}
        <p class="☹️">
          There's nothing lined up! ☹️</p>
      {% endif %}
  </div>
  <p class="🖱️">
    <a href="{{ site.url }}/calendar.ics" data-emoji="📅">Add to your calendar</a>
  </p>
</section>

<p class="🖱️">
  <a href="{{ site.url }}/join" data-emoji="👉">Join us on Discord</a>
</p>

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Event",
    "name": "{{ site.title }}",
    "description": "{{ site.description | split:"." | first }}",
    {% if next_hack %}
    "startDate": "{{start_time}}",
    {% endif %}
    "eventStatus": "https://schema.org/EventScheduled",
    "eventAttendanceMode": "https://schema.org/OnlineEventAttendanceMode",
    "location": {
      "@type":"VirtualLocation",
      "url": "{{ site.discord_invite_url }}"
    },
    "image": [
      "https://remotehack.space/images/RH-social-square.jpg",
      "https://remotehack.space/images/RH-social-landscape.jpg"
    ]
  }
</script>