From e772c32205d47a823ff595426e7c73ca9a67e72d Mon Sep 17 00:00:00 2001
From: Johannes Leimer <johannes.leimer@tngtech.com>
Date: Tue, 7 May 2024 14:01:50 +0200
Subject: [PATCH 1/3] Generate QR codes locally

---
 index.html | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 2bfaea1..b1089b3 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +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.tailwindcss.com?plugins=forms,typography"></script>
     <script
       src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
@@ -204,14 +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}"
             >
-              <img
-                :src="label.qrCodeUrl"
-                alt=""
-                width="100"
-                height="100"
+              <div
+                x-init="new QRCode($el, { text: label.text, correctLevel: QRCode.CorrectLevel.L})"
                 class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none"
-                referrerpolicy="no-referrer"
-              />
+              ></div>
               <div
                 class="flex-grow"
                 :class="{
@@ -271,12 +268,8 @@
                 .toString()
                 .padStart(leadingZerosInt + 1, "0");
               let text = this.prefix + paddedNumber;
-              // See https://goqr.me/api/doc/create-qr-code/
-              let qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(
-                text
-              )}`;
 
-              this.labels.push({ qrCodeUrl, text });
+              this.labels.push({ text });
             }
           },
           printLabels() {

From 6430e44e42e8c82eaba0dfad92bf75220414e292 Mon Sep 17 00:00:00 2001
From: Johannes Leimer <dev@johannes-leimer.de>
Date: Fri, 10 May 2024 03:28:53 +0200
Subject: [PATCH 2/3] Regenerate QR Codes properly

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index b1089b3..86f15f6 100644
--- a/index.html
+++ b/index.html
@@ -206,7 +206,7 @@
               :class="{'even:border-transparent odd:border-transparent': !borderToggle}"
             >
               <div
-                x-init="new QRCode($el, { text: label.text, correctLevel: QRCode.CorrectLevel.L})"
+                x-effect="$el.innerHTML=''; new QRCode($el, { text: label.text, correctLevel: QRCode.CorrectLevel.L});"
                 class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none"
               ></div>
               <div

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 3/3] 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();
           },