Use sl-qr-code for our QR codes! (#6)

Author: third774

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@shoelace-style/shoelace": "^2.20.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "reveal.js": "^5.2.1"

pnpm-lock.yaml

@@ -1,35 +1,59 @@
+import SlQrCode from "@shoelace-style/shoelace/dist/react/qr-code/index.js";
+
 const Splash = () => {
   return (
     <section>
       <div className="quadrants">
         <div className="quadrant">
           <div className="quadrant-content">
             <img src="/logo.png" />
-            <h1>Welcome to<br/>Austin JavaScript</h1>
+            <h1>
+              Welcome to
+              <br />
+              Austin JavaScript
+            </h1>
             <p>we’re glad you’re here :)</p>
           </div>
         </div>
         <div className="quadrant">
           <div className="quadrant-content">
-            <img src="/discord-qr.png" width="300" />
-            <h2>Join us on <img src="/discord-mark-black.png" style={ { margin: '-5px 0', height: 30 } }/> Discord</h2>
+            <SlQrCode
+              value="https://discord.gg/SrRUFMXw3c"
+              label="Scan this QR code to join the Austin JavaScript Discord!"
+              size={300}
+            ></SlQrCode>
+
+            <h2 style={{ marginTop: "1rem" }}>
+              Join us on{" "}
+              <img
+                src="/discord-mark-black.png"
+                style={{ margin: "-5px 0", height: 30 }}
+              />{" "}
+              Discord
+            </h2>
           </div>
         </div>
         <div className="quadrant">
           <div className="quadrant-content">
-            <img src="/shirt-qr.png" width="300" />
-            <h2>Austin JavaScript Shirts are $25</h2>
+            <SlQrCode
+              value="https://opencollective.com/austin-javascript/donate/profile?interval=oneTime&amount=25"
+              label="Scan this QR code to contribute to the Austin JavaScript Open Collective, shirts are $25"
+              size={300}
+            ></SlQrCode>
+            <h2 style={{ marginTop: "1rem" }}>
+              Austin JavaScript Shirts are $25
+            </h2>
           </div>
         </div>
         <div className="quadrant">
           <div className="quadrant-content">
             <h2>Sponsored by</h2>
-            <img src="/cloudflare.png"/>
+            <img src="/cloudflare.png" />
           </div>
         </div>
       </div>
     </section>
-  )
-}
+  );
+};
 
-export default Splash
+export default Splash;

public/zilker-directions.png

@@ -1,3 +1,5 @@
+import SlQrCode from "@shoelace-style/shoelace/dist/react/qr-code/index.js";
+
 const Splash = () => {
   return (
     <section>
@@ -10,12 +12,32 @@ const Splash = () => {
         </div>
         <div className="quadrant">
           <div className="quadrant-content">
-            <h2>We want your feedback!</h2>
+            <SlQrCode
+              value="https://forms.gle/BEsMjyE3cxDUvVmq7"
+              label="Scan this QR code to give feedback!"
+              size={300}
+            ></SlQrCode>
+            <h2 style={{ marginTop: "1rem" }}>We want your feedback!</h2>
           </div>
         </div>
         <div className="quadrant">
           <div className="quadrant-content">
-            <h3>Meet us at Lazarus!</h3>
+            <div style={{ position: "relative" }}>
+              <img width={500} src="/zilker-directions.png" />
+              <h3
+                style={{
+                  marginTop: "1rem",
+                  position: "absolute",
+                  bottom: "4rem",
+                  right: "4rem",
+                  textWrap: "balance",
+                  background: "white",
+                  padding: ".5em",
+                }}
+              >
+                Meet us at Zilker Brewing!
+              </h3>
+            </div>
           </div>
         </div>
         <div className="quadrant">
@@ -25,7 +47,7 @@ const Splash = () => {
         </div>
       </div>
     </section>
-  )
-}
+  );
+};
 
-export default Splash
+export default Splash;

src/slides/splash.tsx

@@ -1,5 +1,16 @@
 @import "./theme";
 
+sl-qr-code {
+  padding: 0.75rem;
+  border-radius: 0.25rem;
+  background: white;
+
+  &::part(base) {
+    /* Removes line-height from canvas element */
+    display: block;
+  }
+}
+
 .agendaWrapper {
   display: flex;
   justify-content: center;
@@ -45,4 +56,5 @@
   h2 {
     color: rgba(255, 255, 255, 0.59);
   }
-}
+}
+