CaZzzer/vpgen
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

attempt custom qrcode svg rendering

Browse Source
This commit is contained in:
Yuri Tatishchev 2025-01-01 19:28:02 -08:00
parent 32ab4104a7
commit 4439d0996d
Signed by: CaZzzer
GPG Key ID: E0EBF441EA424369
1 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/routes/clients/[id]/+page.svelte
View File

@ -2,7 +2,7 @@
import type { PageData } from './$types';
import QRCode from 'qrcode-svg';
import { CodeSnippet } from '$lib/components/app/code-snippet';
import { WireguardGuide } from '$lib/components/app/wireguard-guide/index.js';
import { WireguardGuide } from '$lib/components/app/wireguard-guide';
const { data }: { data: PageData } = $props();
@ -16,7 +16,39 @@
content: data.config,
join: true,
background: 'hsl(var(--accent-light))',
xmlDeclaration: false,
// predefined: true,
});
const modules = qrCode.qrcode.modules;
const length = modules.length;
const s = 1;
// Rectangles representing modules
// let pathData = '';
//
// for (let y = 0; y < length; y++) {
// for (let x = 0; x < length; x++) {
// let module = modules[x][y];
// if (module) {
// pathData += `M${x*s},${y*s} h${s} v${s} h-${s} Z `
// }
// }
// }
// const path = modules.reduce((acc, row, y) => {
// return acc + row.reduce((rowAcc, module, x) => {
// return module ? rowAcc + `M${x*s},${y*s} h${s} v${s} h-${s} Z ` : rowAcc;
// }, '');
// }, '');
const path = modules.flat().reduce((acc, module, i) => {
const x = Math.floor(i / length)
const y = i % length;
return module ? acc + `M${x*s},${y*s} h${s} v${s} h-${s} Z ` : acc;
}, '');
</script>
<svelte:head>
@ -31,6 +63,14 @@
<div class="overflow-hidden rounded-lg">
{@html qrCode.svg()}
</div>
<!--{qrCode.svg({ container: 'none' })}-->
<!--{qrCode.sv}-->
<div class="aspect-square min-h-64 p-3 bg-white rounded-lg">
<svg viewBox="0 0 {length*s*0.5} {length*s*0.5}" shape-rendering="crispEdges" image-rendering="optimizeQuality">
<path transform="scale(0.5)" d={path} />
</svg>
</div>
<!--{pathdata}-->
</section>
<section id="usage" class="flex w-full flex-col gap-2">
<h2 class="text-xl font-semibold">Usage</h2>