Add basic events

eleventy.config.ts

@@ -1,3 +1,14 @@
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import advancedFormat from "dayjs/plugin/advancedFormat";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+dayjs.extend(advancedFormat);
+
 // Note: Eleventy type definitions are not yet available, hence the use of `any` in this file.
 
 export default function (eleventyConfig: any) {
@@ -9,6 +20,51 @@ export default function (eleventyConfig: any) {
         "md",
     ]);
 
+    const eventDateFormat = "YYYY-M-D h:mm A";
+
+    eleventyConfig.addCollection("events", (collectionApi: any) => {
+        return collectionApi
+            .getFilteredByTag("events")
+            .sort((a: any, b: any) => {
+                const aDate = dayjs(a.start, eventDateFormat);
+                const bDate = dayjs(b.start, eventDateFormat);
+                return bDate.unix() - aDate.unix();
+            })
+            .reverse();
+    });
+
+    eleventyConfig.addFilter("formatDate", (date: Date, template: string, timezone: string = "America/New_York") => {
+        // Reference: https://day.js.org/docs/en/display/format
+        const d = dayjs.tz(date, timezone);
+        return d.format(template);
+    });
+
+    eleventyConfig.addShortcode("formatEventDates", (start: string, end: string, timezone: string) => {
+        const startDate = dayjs.tz(start, eventDateFormat, timezone);
+        const endDate = dayjs.tz(end, eventDateFormat, timezone);
+
+        return `${startDate.format("MMMM D, YYYY")} @ ${startDate.format("h:mm A")} - ${endDate.format("h:mm A z")}`;
+    });
+
+    eleventyConfig.addShortcode(
+        "eventGoogleCalendarLink",
+        (title: string, details: string, location: string, start: string, end: string, timezone: string) => {
+            // Reference: https://github.com/InteractionDesignFoundation/add-event-to-calendar-docs/blob/main/services/google.md
+            const startDate = dayjs.tz(start, eventDateFormat, timezone).utc();
+            const endDate = dayjs.tz(end, eventDateFormat, timezone).utc();
+            const datesFormat = "YYYYMMDD[T]HHmm00[Z]";
+            const dates = `${startDate.format(datesFormat)}/${endDate.format(datesFormat)}`;
+
+            const dst = new URL("https://calendar.google.com/calendar/r/eventedit");
+            dst.searchParams.set("text", title);
+            dst.searchParams.set("dates", dates);
+            dst.searchParams.set("ctz", timezone);
+            dst.searchParams.set("location", location);
+            dst.searchParams.set("details", details);
+            return dst.toString();
+        },
+    );
+
     return {
         dir: {
             input: "src",

package.json

@@ -18,6 +18,7 @@
     "license": "CC-BY-SA 4.0",
     "dependencies": {
         "@11ty/eleventy": "3.0.0-alpha.17",
+        "dayjs": "^1.11.12",
         "tsx": "^4.16.2"
     },
     "devDependencies": {

src/_includes/layouts/event.html

@@ -0,0 +1,13 @@
+---
+layout: layouts/base.html
+---
+<div class="event content my-6">
+    <h1 class="title">{{title}}</h1>
+    <p class="subtitle">{% formatEventDates start, end, timezone %}</p>
+    <p class="subtitle">{{location}}</p>
+    <p>{{content}}</p>
+    <p class="has-text-centered my-6">
+        <a class="button is-rounded is-primary" href="{{link}}" target="_blank">Event website</a>
+        <a class="button is-rounded is-link" href="{% eventGoogleCalendarLink title, link, location, start, end, timezone %}" target="_blank">Add to Calendar</a>
+    </p>
+</div>

src/_includes/layouts/events.html

@@ -0,0 +1,33 @@
+---
+layout: layouts/base.html
+eleventyImport:
+  collections: ["events"]
+---
+<div class="events content my-6">
+    {{ content }}
+</div>
+
+{% for event in collections.events reversed %}
+<div class="columns event-list-item">
+  <div class="column is-one-fifth">
+    <div class="level">
+      <div class="level-item has-text-centered is-family-display">
+        <div>
+          <p>{{event.data.start | formatDate: "MMM"}}</p>
+          <p class="is-size-3">{{event.data.start | formatDate: "D"}}</p>
+          <p>{{event.data.start | formatDate: "YYYY"}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="column">
+    <a class="title is-3 is-family-display" href="{{event.url}}">{{event.data.title}}</a>
+    <p class="subtitle my-1">{% formatEventDates event.data.start, event.data.end, event.data.timezone %}</p>
+    <p class="subtitle">{{event.data.location}}</p>
+    <p>{{event.content}}</p>
+    <p class="my-4">
+      <a href="{{event.url}}">More details</a>
+    </p>
+  </div>
+</div>
+{% endfor %}

src/_includes/layouts/page.html

@@ -1,6 +1,5 @@
 ---
 layout: layouts/base.html
-section: page
 ---
 <div class="page content my-6">
     {{ content }}

src/events.md

@@ -0,0 +1,6 @@
+---
+layout: layouts/events.html
+title: Events
+---
+
+# Events

src/events/events.11tydata.js

@@ -0,0 +1,4 @@
+export default {
+    layout: "event.html",
+    tags: "events",
+};

src/events/hardware-happy-hour-portland-2.md

@@ -0,0 +1,16 @@
+---
+layout: layouts/event.html
+title: Hardware Happy Hour Portland
+start: 2023-10-17 6:00 PM
+end: 2023-10-17 10:00 PM
+timezone: America/Los_Angeles
+organizer: Hardware Happy Hour
+location: The Bye Bye 1011 NE Alberta St, Portland
+link: https://www.meetup.com/hardware-happy-hour-3h-portland/
+---
+
+Hardware Happy Hour is an informal way to socialize, show off your projects, and talk about the world of hardware.
+
+We welcome anyone interested in any kind of hardware from beginner to expert: Arduino DIYers, engineers, hardware start up founders, e-textile experimenters, LED-curious folks, 3D printing enthusiasts or robotics geeks.
+
+If you’re working on something even vaguely related please do bring it along. No presentations, no pitch decks, just projects and conversation.

src/events/osh-licensing-with-alicia-seidle-gibb.md

@@ -0,0 +1,12 @@
+---
+layout: layouts/event.html
+title: OSH + Licensing with Alicia Seidle Gibb
+start: 2023-10-25 1:00 PM
+end: 2023-10-25 2:30 PM
+timezone: America/New_York
+organizer: OSHWA
+location: Online
+link: https://www.youtube.com/watch?v=P7foUM-UrqU
+---
+
+Join us for a conversation on open source and licensing by OSHWA Executive Director Alicia Gibb

src/events/oshwa-on-opencv.md

@@ -0,0 +1,12 @@
+---
+layout: layouts/event.html
+title: OSHWA on OpenCV Live
+start: 2023-10-19 12:00 PM
+end: 2023-10-19 1:00 PM
+timezone: America/Los_Angeles
+organizer: OpenCV
+location: Online
+link: https://youtube.com/live/BswArZlx4dY
+---
+
+Join us on OpenCV Live on October 19th at 9am Pacific/12pm Eastern to talk all things Open Source and OSHWA!

src/static/styles/oshwa.css

@@ -11,6 +11,15 @@
         sans-serif;
 }
 
+.is-family-text {
+    font-family: var(--oshwa-family-text);
+}
+
+.is-family-display {
+    font-family: var(--oshwa-family-display);
+    font-weight: bold;
+}
+
 /* Bulma customizations */
 :root {
     --bulma-body-size: 18px;