Updated docs with QR Codes

docs/src/components/QRCode.astro

@@ -0,0 +1,96 @@
+---
+import * as QR from "qrcode";
+
+interface Props {
+    data: string;
+    size?: number;
+    alt?: string;
+}
+
+const { data, size = 200, alt = "QR Code" } = Astro.props;
+
+// Generate QR code for dark mode
+let darkModeQR = "";
+try {
+    darkModeQR = await QR.toDataURL(data, {
+        width: size,
+        margin: 2,
+        color: {
+            dark: "#FFBF00",
+            light: "#17181C",
+        },
+    });
+} catch (err) {
+    console.error("Failed to generate dark mode QR code:", err);
+}
+
+// Generate QR code for light mode
+let lightModeQR = "";
+try {
+    lightModeQR = await QR.toDataURL(data, {
+        width: size,
+        margin: 2,
+        color: {
+            dark: "#F24B3C",
+            light: "#FFFFFF",
+        },
+    });
+} catch (err) {
+    console.error("Failed to generate light mode QR code:", err);
+}
+
+const uniqueId = `qr-${Math.random().toString(36).substr(2, 9)}`;
+---
+
+{
+    (darkModeQR || lightModeQR) && (
+        <img
+            id={uniqueId}
+            src={lightModeQR}
+            alt={alt}
+            width={size}
+            height={size}
+            data-light-src={lightModeQR}
+            data-dark-src={darkModeQR}
+            style="margin: auto;"
+        />
+    )
+}
+
+<script>
+    function updateQRCodes() {
+        const theme = document.documentElement.getAttribute("data-theme");
+        const qrImages = document.querySelectorAll(
+            "img[data-light-src][data-dark-src]",
+        );
+
+        qrImages.forEach((img) => {
+            const lightSrc = img.getAttribute("data-light-src");
+            const darkSrc = img.getAttribute("data-dark-src");
+
+            if (theme === "dark" && darkSrc) {
+                img.setAttribute("src", darkSrc);
+            } else if (lightSrc) {
+                img.setAttribute("src", lightSrc);
+            }
+        });
+    }
+
+    updateQRCodes();
+
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (
+                mutation.type === "attributes" &&
+                mutation.attributeName === "data-theme"
+            ) {
+                updateQRCodes();
+            }
+        });
+    });
+
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["data-theme"],
+    });
+</script>