Atridad Lahiji
fed9bab2ea
All checks were successful
Ascently - Docs Deploy / build-and-push (push) Successful in 3m49s
112 lines
2.7 KiB
Plaintext
112 lines
2.7 KiB
Plaintext
---
|
|
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}
|
|
alt={alt}
|
|
width={size}
|
|
height={size}
|
|
data-light-src={lightModeQR}
|
|
data-dark-src={darkModeQR}
|
|
style="margin: auto;"
|
|
/>
|
|
)
|
|
}
|
|
|
|
<script is:inline define:vars={{ uniqueId, lightModeQR, darkModeQR }}>
|
|
(function () {
|
|
const img = document.getElementById(uniqueId);
|
|
if (!img) return;
|
|
|
|
const theme = document.documentElement.getAttribute("data-theme");
|
|
if (theme === "dark" && darkModeQR) {
|
|
img.setAttribute("src", darkModeQR);
|
|
} else if (lightModeQR) {
|
|
img.setAttribute("src", lightModeQR);
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<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);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Set initial theme on page load
|
|
updateQRCodes();
|
|
|
|
// Watch for theme changes
|
|
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>
|