Create events page

Author: BrianMitchL

src/events.njk

@@ -0,0 +1,42 @@
+---
+layout: base
+title: Events
+---
+
+<div class="container mx-auto mt-8 p-2">
+  <h1 class="text-4xl font-bold mb-8">Events</h1>
+
+  {% include "nextEvent.njk" %}
+
+  <h2
+    class="inline-block bg-black text-white text-2xl font-bold px-4 mb-2 transform -rotate-1"
+  >
+    Past
+  </h2>
+
+  <div class="divide-y divide-black divide-solid">
+    {% for event in events | rejectattr('hidden') %}
+      <article class="py-4" data-past-event>
+        <h3 class="font-bold text-2xl">{{ event.title }}</h3>
+        <p class="text-lg">
+          <time datetime="{{ event.date.toISOString() }}">
+            {{ event.date | formatDateTime }}
+          </time>
+        </p>
+        <p class="text-lg">
+          {{ event.location }}
+        </p>
+        <p>
+          <a href="{{ event.link }}" class="text-lg font-bold hover:underline" target="_blank" rel="noopener noreferrer">Details</a>
+        </p>
+      </article>
+    {% endfor %}
+  </div>
+</div>
+
+{% set js %}
+  {% include "events.js" %}
+{% endset %}
+<script type="text/javascript">
+  {{ js | jsmin | safe }}
+</script>

src/globals/events.js

@@ -12,4 +12,35 @@ module.exports = [
     link: 'https://www.meetup.com/JavaScriptMN/events/hmzgxrybcnblc/',
     location: 'Virtual',
   },
+  {
+    title: 'September Event: Show and Tell',
+    date: new Date('2020-09-30T18:00-05:00'),
+    link: 'https://www.meetup.com/JavaScriptMN/events/hmzgxrybcmbnc/',
+    location: 'Virtual',
+  },
+  {
+    title:
+      'August Event: Code Championship and Recursion in the Wild – Luke Schlangen',
+    date: new Date('2020-08-26T18:00-05:00'),
+    link: 'https://www.meetup.com/JavaScriptMN/events/jtgdmrybclbjc/',
+    location: 'Virtual',
+  },
+  {
+    title: 'July Event: Virtual Show-and-Tell',
+    date: new Date('2020-07-29T18:00-05:00'),
+    link: 'https://www.meetup.com/JavaScriptMN/events/jtgdmrybckbmc/',
+    location: 'Virtual',
+  },
+  {
+    title: 'February Event: JS Frameworks and Low Code Tools w/ Tim Murphy',
+    date: new Date('2020-02-26T18:00-06:00'),
+    link: 'https://www.meetup.com/JavaScriptMN/events/jtgdmrybcdbjc/',
+    location: 'WeWork Uptown',
+  },
+  {
+    title: 'January Event: Short Talks',
+    date: new Date('2020-01-29T18:00-06:00'),
+    link: 'https://www.meetup.com/JavaScriptMN/events/jtgdmrybccbmc/',
+    location: 'WeWork Uptown',
+  },
 ].sort((a, b) => b.date.getTime() - a.date.getTime());

src/globals/site.json

@@ -13,6 +13,10 @@
       "path": "/",
       "text": "Home"
     },
+    {
+      "path": "/events/",
+      "text": "Events"
+    },
     {
       "path": "/sponsors/",
       "text": "Sponsors"

src/includes/events.js

@@ -0,0 +1,15 @@
+(function () {
+  const pastEvents = document.querySelectorAll('[data-past-event]');
+
+  for (const event of pastEvents) {
+    const time = new Date(
+      event.querySelector('time[datetime]').getAttribute('datetime')
+    );
+    // hide the event until the end of the day it's scheduled for
+    time.setHours(23, 59, 59, 999);
+    if (Date.now() < time.getTime()) {
+      // TIL this is a thing, wow!
+      event.outerHTML = '';
+    }
+  }
+})();

src/includes/footer.njk

@@ -30,7 +30,7 @@
         <ul aria-describedby="footer-connect">
           {% for link in site.connect %}
           <li>
-            <a class="hover:underline" href="{{ link.href }}"
+            <a class="hover:underline" href="{{ link.href }}" rel="noopener noreferrer"
               >{{ link.text }}</a
             >
           </li>

src/includes/header.njk

@@ -46,7 +46,7 @@
         class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-between"
       >
         <div class="flex-shrink-0 self-center">
-          <a href="{{ '/' | url }}" class="flex sm:hidden w-auto">
+          <a href="{{ '/' | url }}" class="flex md:hidden w-auto">
             <img
               class="h-8"
               src="{{ '/jsmn-logo.svg' | url }}"
@@ -55,7 +55,7 @@
           </a>
           <a
             href="{{ '/' | url }}"
-            class="hidden sm:flex items-center w-auto"
+            class="hidden md:flex items-center w-auto"
           >
             <img
               class="h-8 block"

src/includes/nextEvent.njk

@@ -1,10 +1,14 @@
 {% set event = events | rejectattr('hidden') | first %}
 
-<div class="mb-20">
+<article class="mb-20">
   <h2
     class="inline-block bg-black text-white text-2xl font-bold px-4 mb-2 transform -rotate-1"
   >
+    {% if page.url !== '/events/' | url %}
+    <a href="{{ '/events/' | url }}">Upcoming</a>
+    {% else %}
     Upcoming
+    {% endif %}
   </h2>
   {# next event #}
 
@@ -25,17 +29,17 @@
         {{ event.location }}
       </p>
       <p>
-        <a href="{{ event.link }}" class="text-lg font-bold hover:underline">Details &amp; RSVP</a>
+        <a href="{{ event.link }}" class="text-lg font-bold hover:underline" target="_blank" rel="noopener noreferrer">Details &amp; RSVP</a>
       </p>
     </div>
     {# fallback #}
     <div class="bg-jsmn-yellow text-2xl font-bold p-4 hidden"
         id="upcoming-event-fallback">
-      <a href="https://www.meetup.com/javascriptmn/" class="hover:underline">Check
+      <a href="https://www.meetup.com/javascriptmn/" class="hover:underline" target="_blank" rel="noopener noreferrer">Check
         Meetup.com for updates</a>
     </div>
   </div>
-</div>
+</article>
 
 {% set js %}
   {% include "nextEvent.js" %}