From 8180c12941cfa6c9ca73c08fc96d9a2836a6af9f Mon Sep 17 00:00:00 2001
From: Johannes Leimer <dev@johannes-leimer.de>
Date: Mon, 27 May 2024 00:19:05 +0200
Subject: [PATCH] Use Qrious qr-code rendering library

---
 index.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 86f15f6..c09ed15 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
       rel="canonical"
       href="https://tobiasmaier.info/asn-qr-code-label-generator/"
     />
-    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
     <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
     <script
       src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
@@ -205,10 +205,10 @@
               class="flex h-[9mm] w-[24.4mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300"
               :class="{'even:border-transparent odd:border-transparent': !borderToggle}"
             >
-              <div
-                x-effect="$el.innerHTML=''; new QRCode($el, { text: label.text, correctLevel: QRCode.CorrectLevel.L});"
+              <img
+                x-effect="generateQrCode($el, label.text);"
                 class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none"
-              ></div>
+              ></img>
               <div
                 class="flex-grow"
                 :class="{
@@ -272,6 +272,9 @@
               this.labels.push({ text });
             }
           },
+          generateQrCode(element, value) {
+            new QRious({ element, value });
+          },
           printLabels() {
             window.print();
           },