May 2025 (#8)

* May 2025

* Add Sponsors component

Author: third774

src/App.tsx

@@ -1,25 +1,25 @@
-import { useEffect, useRef } from 'react'
-import Reveal from 'reveal.js'
-import Highlight from 'reveal.js/plugin/highlight/highlight'
-import Notes from 'reveal.js/plugin/notes/notes'
-import 'reveal.js/dist/reveal.css'
-import './styles/index.scss'
-import Splash from './slides/splash'
-import Agenda202504 from './slides/agenda-2025-04'
-import Thanks from './slides/thanks'
+import { useEffect, useRef } from "react";
+import Reveal from "reveal.js";
+import Highlight from "reveal.js/plugin/highlight/highlight";
+import Notes from "reveal.js/plugin/notes/notes";
+import "reveal.js/dist/reveal.css";
+import "./styles/index.scss";
+import Splash from "./slides/splash";
+import Agenda202505 from "./slides/agenda-2025-05";
+import Thanks from "./slides/thanks";
 
 function App() {
-  const deckDivRef = useRef<HTMLDivElement>(null) // reference to deck container div
-  const deckRef = useRef<Reveal.Api | null>(null) // reference to deck reveal instance
+  const deckDivRef = useRef<HTMLDivElement>(null); // reference to deck container div
+  const deckRef = useRef<Reveal.Api | null>(null); // reference to deck reveal instance
 
   useEffect(() => {
     // Prevents double initialization in strict mode
-    if (deckRef.current) return
+    if (deckRef.current) return;
 
     deckRef.current = new Reveal(deckDivRef.current!, {
-      transition: 'slide',
+      transition: "slide",
       // other config options
-    })
+    });
 
     deckRef.current
       .initialize({
@@ -28,29 +28,29 @@ function App() {
       })
       .then(() => {
         // good place for event handlers and plugin setups
-      })
+      });
 
     return () => {
       try {
         if (deckRef.current) {
-          deckRef.current.destroy()
-          deckRef.current = null
+          deckRef.current.destroy();
+          deckRef.current = null;
         }
       } catch (e) {
-        console.warn('Reveal.js destroy call failed.')
+        console.warn("Reveal.js destroy call failed.");
       }
-    }
-  }, [])
+    };
+  }, []);
 
   return (
     <div className="reveal" ref={deckDivRef}>
       <div className="slides">
         <Splash />
-        <Agenda202504 />
+        <Agenda202505 />
         <Thanks />
       </div>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

src/components/Sponsors.tsx

@@ -0,0 +1,8 @@
+export function Sponsors() {
+  return (
+    <>
+      <h2>Sponsored by</h2>
+      <img src="/cloudflare.png" />
+    </>
+  );
+}

src/slides/agenda-2025-05.tsx

@@ -0,0 +1,24 @@
+const Agenda202505 = () => {
+  return (
+    <section>
+      <div className="agendaWrapper">
+        <div className="agenda">
+          <h2>Agenda</h2>
+          <ol>
+            <li>Welcome!</li>
+            <li>Shirts!</li>
+            <li>Frontend Masters raffle</li>
+            <li>
+              <a href="https://docs.google.com/presentation/d/1FgcXPH4iqv90Nf1Ljl8wwaG8ZLolq_7FlPvDvK8zbtM">
+                Vibe Coding a Tamagotchi App
+              </a>
+            </li>
+            <li>Wrap up</li>
+          </ol>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Agenda202505;

src/slides/splash.tsx

@@ -1,4 +1,5 @@
 import SlQrCode from "@shoelace-style/shoelace/dist/react/qr-code/index.js";
+import { Sponsors } from "../components/Sponsors";
 
 const Splash = () => {
   return (
@@ -47,8 +48,7 @@ const Splash = () => {
         </div>
         <div className="quadrant">
           <div className="quadrant-content">
-            <h2>Sponsored by</h2>
-            <img src="/cloudflare.png" />
+            <Sponsors />
           </div>
         </div>
       </div>

src/slides/thanks.tsx

@@ -1,4 +1,5 @@
 import SlQrCode from "@shoelace-style/shoelace/dist/react/qr-code/index.js";
+import { Sponsors } from "../components/Sponsors";
 
 const Splash = () => {
   return (
@@ -42,7 +43,7 @@ const Splash = () => {
         </div>
         <div className="quadrant">
           <div className="quadrant-content">
-            <h3>sponsored by</h3>
+            <Sponsors />
           </div>
         </div>
       </div>

src/styles/index.scss

@@ -21,6 +21,7 @@ sl-qr-code {
 
 .agenda {
   color: $black;
+  --r-link-color: var(--r-link-color-dark);
 }
 
 .quadrants {
@@ -57,4 +58,3 @@ sl-qr-code {
     color: rgba(255, 255, 255, 0.59);
   }
 }
-