Live QR Codes

package-lock.json

@@ -15,6 +15,7 @@
         "primeicons": "^7.0.0",
         "primevue": "^4.2.2",
         "tailwindcss-primeui": "^0.3.4",
+        "uqr": "^0.1.2",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5"
       },
@@ -6671,6 +6672,11 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uqr": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/uqr/-/uqr-0.1.2.tgz",
+      "integrity": "sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA=="
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "primeicons": "^7.0.0",
     "primevue": "^4.2.2",
     "tailwindcss-primeui": "^0.3.4",
+    "uqr": "^0.1.2",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
   },

src/components/QRCode.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
-import QRCodeImage from './QRCodeImage.vue';
+import { defineProps } from 'vue';
+
+import { renderSVG } from 'uqr';
+
+const { content } = defineProps({
+  content: String,
+});
+
+const svg = renderSVG(content);
+
 </script>
 
 <template>
   <div class="qr-code">
-    <QRCodeImage class="qr-code-image" />
 <!--    <span class="uuid">1337-9339</span>-->
+    <div :innerHTML="svg"></div>
   </div>
 </template>
 
@@ -13,6 +22,7 @@ import QRCodeImage from './QRCodeImage.vue';
 .qr-code {
   aspect-ratio: 1 / 1;
   background-color: white;
+  padding: 3px;
 }
 .uuid {
   color: rgba(51, 51, 51, 0.91);

src/components/Sticker.vue

@@ -5,11 +5,13 @@ import Image from 'primevue/image'
 import { type Organization, useOrganization } from '@/queries/organization'
 
 const {
+  id,
   layout, color,
   orgs,
   message1, message2,
   message3, message4,
 } = defineProps([
+  'id',
   'layout', 'color',
   "orgs",
   'message1', 'message2',
@@ -46,10 +48,14 @@ const myOrgs = computed(() => {
     return orgs.includes(org.id);
   });
 });
+
+const qrContent = computed(() => {
+  return `https://anactivist.com/${id}`;
+})
 </script>
 <template>
   <div class="sticker">
-    <QRCode class="qr-code"></QRCode>
+    <QRCode class="qr-code" :content="qrContent"></QRCode>
     <div class="content">
       <div class="orgs">
         <div v-for="org in myOrgs" :key="org.id">

src/views/StickerBuilderView.vue

@@ -75,7 +75,7 @@ const orgOptions = computed(() => {
   <div id="StickerPage">
 <!--    <Button class="w-20" type="submit" severity="secondary" label="Take a snapshot" />-->
     <div id="StickerWrapper" class="sticky z-10">
-      <Sticker v-bind="sticker" id="Sticker1" />
+      <Sticker v-bind="sticker" class="medium" />
 <!--      <p>8-inch sticker</p>-->
 <!--      <Sticker id="Sticker2" v-bind="sticker2" />-->
     </div>
@@ -226,7 +226,7 @@ label {
   gap: 1em;
   padding: 20px;
   top: 60px;
-  #Sticker1 {
+  .medium {
     width: 300px;
     @media (screen(sm)) {
       zoom: 250%;