feat: embed luma calendar on home (#79)

Author: rnegron

.github/workflows/greetings.yml

@@ -15,6 +15,6 @@ jobs:
     steps:
       - uses: actions/first-interaction@v3
         with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          issue-message: "Gracias por tu interes en Fullstack Nights y por hacer este GitHub Issue! Pronto estaremos en contacto."
-          pr-message: "Gracias por tu interes en Fullstack Nights y por hacer este Pull Request! Pronto estaremos en contacto."
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          issue_message: "Gracias por tu interes en Fullstack Nights y por hacer este GitHub Issue! Pronto estaremos en contacto."
+          pr_message: "Gracias por tu interes en Fullstack Nights y por hacer este Pull Request! Pronto estaremos en contacto."

src/components/index.js

@@ -5,6 +5,7 @@ import FAQList from "./faq";
 import GradientBackground from "./gradient-background";
 import Image from "./image";
 import Layout from "./layout";
+import LumaEvents from "./luma-events";
 import PageHighlight from "./page-highlight";
 import PageSection from "./page-section";
 import ProfileCard from "./profile-card";
@@ -23,6 +24,7 @@ export {
   GradientBackground,
   Image,
   Layout,
+  LumaEvents,
   PageHighlight,
   PageSection,
   ProfileCard,

src/components/luma-events.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const LUMA_CALENDAR_ID = "cal-xorZLhCJO1uKH5s";
+
+function LumaEvents() {
+  const { t, i18n } = useTranslation();
+  const lang = i18n.language?.startsWith("es") ? "es" : "en";
+  const src = `https://luma.com/embed/calendar/${LUMA_CALENDAR_ID}/events?lang=${lang}`;
+
+  return (
+    <section className="mb-20 px-4">
+      <div className="max-w-2xl mx-auto text-center">
+        <h3 className="text-h3 font-extrabold mb-6">
+          {t("upcoming-event.upcoming-events")}
+        </h3>
+        <iframe
+          key={lang}
+          title="Fullstack Nights events on Luma"
+          src={src}
+          width="600"
+          height="450"
+          frameBorder="0"
+          allowFullScreen
+          aria-hidden="false"
+          tabIndex="0"
+          className="w-full max-w-full mx-auto"
+          style={{ border: "1px solid #bfcbda88", borderRadius: "4px" }}
+        />
+      </div>
+    </section>
+  );
+}
+
+export default LumaEvents;

src/locales/en.json

@@ -144,6 +144,7 @@
   },
   "upcoming-event": {
     "upcoming-event": "Upcoming event",
+    "upcoming-events": "Upcoming events",
     "at": "at",
     "venue": "Venue",
     "get-tickets": "Get tickets",

src/locales/es.json

@@ -144,6 +144,7 @@
   },
   "upcoming-event": {
     "upcoming-event": "Próximo evento",
+    "upcoming-events": "Próximos eventos",
     "at": "a las",
     "venue": "Sitio",
     "get-tickets": "Obtén tu boleto",

src/pages/index.js

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import {
   SEO,
   Layout,
+  LumaEvents,
   PageSection,
   CallToAction,
   PageHighlight,
@@ -46,7 +47,9 @@ function IndexPage() {
           venue={event.venue}
           participants={event.participants}
         />
-      ) : null}
+      ) : (
+        <LumaEvents />
+      )}
       <PageSection
         title={t("main-page.be-a-part-of-our-events")}
         description={t("main-page.our-events-are-done-by-the-community")}