Upcoming events page

.devcontainer/Dockerfile

@@ -5,7 +5,7 @@ FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${NODE_VERSION}
 # VARIANT can be either 'hugo' for the standard version or 'hugo_extended' for the extended version.
 ARG VARIANT=hugo_extended
 # VERSION can be either 'latest' or a specific version number
-ARG VERSION=latest
+ARG VERSION=0.128.0
 
 # Download Hugo
 RUN apt-get update && apt-get install -y ca-certificates openssl git curl && \

.devcontainer/devcontainer.json

@@ -12,7 +12,7 @@
 			// Update VERSION to pick a specific hugo version.
 			// Example versions: latest, 0.73.0, 0,71.1
 			// Rebuild the container if it already exists to update.
-			"VERSION": "latest",
+			"VERSION": "0.128.0",
 			// Update NODE_VERSION to pick the Node.js version: 12, 14
 			"NODE_VERSION": "14"
 		}

assets/scss/_components.scss

@@ -4,6 +4,7 @@
 @import "components/button";
 @import "components/candidates";
 @import "components/event";
+@import "components/upcoming-events";
 @import "components/faq";
 @import "components/faq-question";
 @import "components/faq-topic";

assets/scss/components/_upcoming-events.scss

@@ -0,0 +1,29 @@
+.no-events-fallback {
+  min-height: 60vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1rem;
+}
+
+.no-events-card {
+  background-color: #ffffff;
+  border-radius: 1rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+  padding: 3rem 2.5rem;
+  max-width: 32rem;
+  width: 100%;
+  text-align: center;
+
+  h2 {
+    margin: 0 0 0.75rem;
+    font-size: 1.75rem;
+  }
+
+  p {
+    margin: 0 0 1.75rem;
+    color: #555;
+    font-size: 1.05rem;
+    line-height: 1.5;
+  }
+}

content/events/upcoming/_index.md

@@ -0,0 +1,7 @@
+---
+title: "Upcoming Events"
+date: 2020-01-25T23:11:13Z
+draft: false
+
+layout: upcoming-events
+---

layouts/_default/upcoming-events.html

@@ -0,0 +1,52 @@
+{{ define "main" }}
+  {{- partial "navbar_temp.html" . -}}
+  <div class="about-page page">
+    <div class="home-section-grid home-section-dark">
+      <div class="home-section">
+        <div class="home-events">
+          {{ $today := time.AsTime (now.Format "2006-01-02") }}
+          {{ $upcoming := (where (where .Site.RegularPages "Section" "events") ".Date" "ge" $today).ByDate.Reverse }}
+          {{ range $upcoming }}
+            <a
+              data-date="{{ .Date.Format "2006-01-02" }}"
+              class="event_card_link hvr-float"
+              href="{{ .RelPermalink }}"
+              >{{- partial "event_card.html" . -}}</a
+            >
+          {{ end }}
+        </div>
+
+        <div style="display: none" class="no-events-fallback">
+          <div class="no-events-card">
+            <h2>No upcoming events right now</h2>
+            <p>
+              Check back soon, or take a look at everything we've run so far.
+            </p>
+            <a href="/events"
+              >{{- partial "button.html" (dict "label" "View all Events") -}}</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+
+      document.querySelectorAll(".event_card_link").forEach((card) => {
+        const [year, month, day] = card.dataset.date.split("-").map(Number);
+        const date = new Date(year, month - 1, day);
+
+        if (today > date) card.remove();
+      });
+
+      const events = document.querySelector(".home-events");
+      const fallback = document.querySelector(".no-events-fallback");
+
+      if (events.children.length === 0) fallback.style.display = "flex";
+    });
+  </script>
+{{ end }}