lume: add events page fed by Events API

Signed-off-by: Xe Iaso <me@xeiaso.net>

3 files changed, 66 insertions, 0 deletions

diff --git a/lume/src/_components/EventCard.jsx b/lume/src/_components/EventCard.jsx
new file mode 100644
index 0000000..62dbcfe
--- /dev/null
+++ b/lume/src/_components/EventCard.jsx
@@ -0,0 +1,34 @@
+const timestampPBtoDate = ({ seconds }) => {
+    return new Date(seconds * 1000);
+};
+
+const formatDate = (date) => {
+    return date.toLocaleDateString('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+    });
+};
+
+// takes within.website.x.mi.Event
+export default ({ name, url, start_date, end_date, location, description }) => {
+    const startDate = formatDate(timestampPBtoDate(start_date));
+    const endDate = formatDate(timestampPBtoDate(end_date));
+    return (
+        <div className="rounded-lg p-4 bg-bg-1 dark:bg-bgDark-1">
+            <h2 className="text-lg mb-2 text-fg-1 dark:text-fgDark-1">
+                <a href={url} target="_blank" rel="noopener noreferrer" className="text-blue-dark dark:text-blueDark-light">
+                    {name} <span role="img" aria-label="link">🔗</span>
+                </a>
+            </h2>
+            <div className="card-content text-fg-1 dark:text-fgDark-1">
+                <p>
+                    {location} - {startDate} {start_date.seconds !== end_date.seconds ? `thru ${endDate})}` : ""}
+                </p>
+                <p className="prose">
+                    {description}
+                </p>
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/lume/src/_data/.gitignore b/lume/src/_data/.gitignore
index 2d0f2ed..0f87891 100644
--- a/lume/src/_data/.gitignore
+++ b/lume/src/_data/.gitignore
@@ -3,6 +3,7 @@ authors.json
 characters.json
 commit.json
 contactLinks.json
+events.json
 jobHistory.json
 notableProjects.json
 pronouns.json
diff --git a/lume/src/events.jsx b/lume/src/events.jsx
new file mode 100644
index 0000000..4a313b2
--- /dev/null
+++ b/lume/src/events.jsx
@@ -0,0 +1,31 @@
+import EventCard from "./_components/EventCard.jsx";
+
+export const title = "Events";
+export const layout = "base.njk";
+export const date = "2012-12-31";
+export const desc = "A list of the upcoming events that I plan to attend and what I'll do there.";
+
+export default ({ events }) => {
+    if (events.events === undefined) {
+        return (
+            <>
+                <h1 className="text-3xl mb-4">Events</h1>
+                <p>
+                    I don't have any events planned right now or my events API is down. Check back later!
+                </p>
+            </>
+        );
+    }
+
+    return (
+        <>
+            <h1 className="text-3xl mb-4">Events</h1>
+
+            <p className="my-4">Where in the world is Xe Iaso?</p>
+
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {events.events.map((event) => EventCard(event))}
+            </div>
+        </>
+    );
+}
\ No newline at end of file