diff options
| -rwxr-xr-x | bun.lockb | bin | 290051 -> 291945 bytes | |||
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | src/components/Qr.svelte | 12 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/accepted/[text]/+page.svelte | 15 | ||||
| -rw-r--r-- | src/routes/(app)/qr/[text]/[icon]/+server.ts | 33 | ||||
| -rw-r--r-- | src/routes/(app)/qr/[text]/raw/+server.ts | 1 | ||||
| -rw-r--r-- | static/images/bitcoin-logo.png | bin | 0 -> 99084 bytes | |||
| -rw-r--r-- | static/images/nfc.png | bin | 0 -> 118238 bytes | |||
| -rw-r--r-- | static/images/tap.png | bin | 375651 -> 110037 bytes |
9 files changed, 51 insertions, 14 deletions
| Binary files differ diff --git a/package.json b/package.json index a2241d3c..dfe2b380 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,8 @@ }, "type": "module", "dependencies": { - "cordova-plugin-android-notch": "^1.0.3" + "canvas": "^3.1.2", + "cordova-plugin-android-notch": "^1.0.3", + "qrcode": "^1.5.4" } } diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte index 5f159442..da4ceb00 100644 --- a/src/components/Qr.svelte +++ b/src/components/Qr.svelte @@ -1,7 +1,11 @@ <script> import screenfull from "screenfull"; - let { text } = $props(); + let { icon, text } = $props(); let qr = $state(); + + let src = `/qr/${encodeURIComponent(text)}`; + if (icon) src += `/${icon}`; + else src += "/raw"; </script> <div @@ -10,9 +14,5 @@ onclick={() => screenfull.toggle(qr)} onkeydown={() => screenfull.toggle(qr)} > - <img - src={`/qr/${encodeURIComponent(text)}/raw`} - class="mx-auto" - alt="QR Code" - /> + <img {src} class="mx-auto" alt="QR Code" /> </div> diff --git a/src/routes/(app)/[username]/accepted/[text]/+page.svelte b/src/routes/(app)/[username]/accepted/[text]/+page.svelte index d96e48e2..1984cf81 100644 --- a/src/routes/(app)/[username]/accepted/[text]/+page.svelte +++ b/src/routes/(app)/[username]/accepted/[text]/+page.svelte @@ -9,15 +9,16 @@ </script> <div class="px-2"> - <div class="border-8 border-black p-8 max-w-[710px] mx-auto mt-20 space-y-5"> + <div class="border-8 border-black p-8 max-w-[580px] mx-auto mt-20 space-y-2 rounded-3xl"> <div class="flex gap-2 mx-auto justify-center"> - <img src="/images/bitcoin.png" class="w-16 h-16 my-auto" /> - <h3 class="text-5xl font-bold text-center my-auto"> - Bitcoin Accepted Here - </h3> + <!-- <img src="/images/bitcoin.png" class="w-16 h-16 my-auto" /> --> + <img src="/images/bitcoin-logo.png" class="my-auto w-[400px]" /> + <!-- <h3 class="text-5xl font-bold text-center my-auto"> --> + <!-- bitcoin --> + <!-- </h3> --> </div> - <Qr {text} /> - <div class="text-center text-4xl font-bold"> + <Qr {text} icon="nfc.png" /> + <div class="text-center text-4xl font-bold break-all"> coinos.io/{username.toLowerCase()} </div> {#if nfc} diff --git a/src/routes/(app)/qr/[text]/[icon]/+server.ts b/src/routes/(app)/qr/[text]/[icon]/+server.ts new file mode 100644 index 00000000..c2825877 --- /dev/null +++ b/src/routes/(app)/qr/[text]/[icon]/+server.ts @@ -0,0 +1,33 @@ +import { createCanvas, loadImage } from "canvas"; +import QRCode from "qrcode"; + +export async function GET({ params }) { + const { icon, text } = params; + const size = 600; + + const canvas = createCanvas(size, size); + await QRCode.toCanvas(canvas, text, { + errorCorrectionLevel: "H", + width: size, + }); + + const ctx = canvas.getContext("2d"); + + const logo = await loadImage(`static/images/${icon}`); + const logoSize = size * 0.3; + ctx.drawImage( + logo, + (size - logoSize) / 2, + (size - logoSize) / 2, + logoSize, + logoSize, + ); + + const buffer = canvas.toBuffer("image/png"); + return new Response(buffer, { + headers: { + "Content-Type": "image/png", + "Cache-Control": "public, max-age=31536000, immutable", + }, + }); +} diff --git a/src/routes/(app)/qr/[text]/raw/+server.ts b/src/routes/(app)/qr/[text]/raw/+server.ts index a24d3a3c..a2626c4d 100644 --- a/src/routes/(app)/qr/[text]/raw/+server.ts +++ b/src/routes/(app)/qr/[text]/raw/+server.ts @@ -14,3 +14,4 @@ export async function GET({ params }) { }, }); } + diff --git a/static/images/bitcoin-logo.png b/static/images/bitcoin-logo.png Binary files differnew file mode 100644 index 00000000..c9bdae0a --- /dev/null +++ b/static/images/bitcoin-logo.png diff --git a/static/images/nfc.png b/static/images/nfc.png Binary files differnew file mode 100644 index 00000000..9d86d727 --- /dev/null +++ b/static/images/nfc.png diff --git a/static/images/tap.png b/static/images/tap.png Binary files differindex 7e4b659e..a6622111 100644 --- a/static/images/tap.png +++ b/static/images/tap.png |
