Add upcoming event preview

- Add a new event to the src/globals/events.js file
- The latest non-hidden event will be rendered into the page
- If the event was yesterday or earlier, show a fallback
  linking to meetup until a new event is added and the
  site is built and deployed again

Author: BrianMitchL

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
+indent_style = space
+indent_size = 2

.eleventy.js

@@ -20,6 +20,18 @@ module.exports = function (eleventyConfig) {
     return `Eleventy ${eleventyVersion}`;
   });
 
+  eleventyConfig.addFilter('formatDateTime', function (date) {
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+      timeZoneName: 'short',
+    });
+  });
+
   eleventyConfig.addPlugin(inclusiveLangPlugin);
 
   if (process.env.ELEVENTY_ENV === 'production') {

src/globals/events.js

@@ -0,0 +1,15 @@
+module.exports = [
+  {
+    title: 'November Meetup',
+    date: new Date('2020-11-25T18:00-06:00'),
+    link: 'https://www.meetup.com/JavaScriptMN/',
+    location: 'Virtual',
+    hidden: true,
+  },
+  {
+    title: 'October Meetup',
+    date: new Date('2020-10-28T18:00-05:00'),
+    link: 'https://www.meetup.com/JavaScriptMN/events/hmzgxrybcnblc/',
+    location: 'Virtual',
+  },
+].sort((a, b) => b.date.getTime() - a.date.getTime());

src/includes/nextEvent.js

@@ -0,0 +1,14 @@
+(function () {
+  const upcoming = document.getElementById('upcoming-event');
+  const fallback = document.getElementById('upcoming-event-fallback');
+
+  const upcomingDate = new Date(
+    upcoming.querySelector('time[datetime]').getAttribute('datetime')
+  );
+  // show the event time until the end of the day it's scheduled for
+  upcomingDate.setHours(23, 59, 59, 999);
+  if (Date.now() > upcomingDate.getTime()) {
+    upcoming.classList.add('hidden');
+    fallback.classList.remove('hidden');
+  }
+})();

src/includes/nextEvent.njk

@@ -0,0 +1,36 @@
+{% set event = events | rejectattr('hidden') | first %}
+
+<div class="mb-8">
+  <h2
+    class="inline-block bg-black text-white text-2xl font-bold px-4 mb-2 transform -rotate-1"
+  >
+    Upcoming
+  </h2>
+  {# next event #}
+  <div class="bg-jsmn-yellow text-2xl p-4" id="upcoming-event">
+    <h3 class="font-bold">{{ event.title }}</h3>
+    <p class="text-lg">
+      <time datetime="{{ event.date.toISOString() }}">
+        {{ event.date | formatDateTime }}
+      </time>
+      <br>
+      {{ event.location }}
+    </p>
+    <p>
+      <a href="{{ event.link }}" class="text-lg font-bold underline">Details & 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="underline">Check
+      Meetup.com for updates</a>
+  </div>
+</div>
+
+{% set js %}
+  {% include "nextEvent.js" %}
+{% endset %}
+<script type="text/javascript">
+  {{ js | jsmin | safe }}
+</script>

src/index.njk

@@ -33,21 +33,7 @@ changeFreq: daily
 <div class="container mx-auto px-2 mb-10">
   <div class="x-h-screen flex justify-center items-center">
     <div class="w-full">
-      <div class="mb-8">
-        <h2
-          class="inline-block bg-black text-white text-2xl font-bold px-4 mb-2 transform -rotate-1"
-        >
-          Upcoming
-        </h2>
-        <div class="bg-jsmn-yellow text-2xl font-bold p-4">
-          Eleventy
-          <small
-            >and the
-            <abbr title="Just Another Monstrosity">JAM</abbr> fad</small
-          >
-          <i>by Brian Mitchell and Ryan Rampersad</i>
-        </div>
-      </div>
+      {% include 'nextEvent.njk' %}
       <div>
         <div class="flex justify-end items-center mb-2">
           <h2