Dynamic server side qr code generation

2025-09-29 10:57:58 +02:00
parent 4a92ade93c
commit 2c7bd14f48
8 changed files with 412 additions and 33 deletions
--- a/app/connect/page.tsx
+++ b/app/connect/page.tsx
@@ -5,24 +5,32 @@ import { Button } from "@/components/ui/button";
 import { BlurFade } from "@/components/magicui/blur-fade";
 import { TrackedLink } from "@/components/util-tracked-link";
 import { Metadata } from "next";
+import MyQrCode from "@/components/element-qr";
+import Link from "next/link";

-const BLUR_FADE_DELAY = 0.01;
+const BLUR_FADE_DELAY = 0.05;

 export const metadata: Metadata = {
  alternates: {
    canonical: `${DATA.url}/connect`,
  },
-}
+};

 export default function ConnectPage() {
-  const featuredSocials = ["Email", "LinkedIn", "GoogleScholar", "arXiv", "ResearchGate", "Gitea"];
-  const socialLinks = Object.entries(DATA.contact.social)
-    .filter(([name]) => featuredSocials.includes(name));
+  const featuredSocials = [
+    "Email",
+    "LinkedIn",
+    "GoogleScholar",
+    "arXiv",
+    "ResearchGate",
+    "Gitea",
+  ];
+  const socialLinks = Object.entries(DATA.contact.social).filter(([name]) =>
+    featuredSocials.includes(name)
+  );

  return (
-    <main 
-      className="inset-0 flex flex-col items-center justify-center bg-background"
-    >
+    <main className="inset-0 flex flex-col items-center justify-center bg-background">
      <div className="flex flex-col items-center space-y-8 text-center max-w-sm w-full p-6">
        <BlurFade delay={BLUR_FADE_DELAY * 1}>
          <Image
@@ -35,40 +43,47 @@ export default function ConnectPage() {
            priority
          />
        </BlurFade>
-        
        <BlurFade delay={BLUR_FADE_DELAY * 2}>
          <h1 className="text-4xl font-bold tracking-tight">
            Dr. Steffen Illium
          </h1>
        </BlurFade>
+
+        <BlurFade delay={BLUR_FADE_DELAY * 3} className="w-full">
+          <hr />
+        </BlurFade>
+
        <BlurFade delay={BLUR_FADE_DELAY * 3}>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-2 w-full">              
+          <h2 className="text-4xl tracking-tight">Contact</h2>
+        </BlurFade>
+        <BlurFade delay={BLUR_FADE_DELAY * 4}>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-2 w-full">
            {socialLinks.map(([name, social]) => (
-                <TrackedLink className="truncate" href={social.url} key={name} eventName={`${name}-social`} target="_blank">
-                    <Button variant="outline" className="w-full">
-                        <social.icon className="size-4 mr-2" />
-                        {name}
-                    </Button>
-                </TrackedLink>
+              <TrackedLink
+                className="truncate"
+                href={social.url}
+                key={name}
+                eventName={`${name}-social`}
+                target="_blank">
+                <Button variant="outline" className="w-full">
+                  <social.icon className="size-4 mr-2" />
+                  {name}
+                </Button>
+              </TrackedLink>
            ))}
          </div>
        </BlurFade>
-
-        <div className="flex w-full flex-col items-center space-y-4 pb-4">
-
-          <BlurFade delay={BLUR_FADE_DELAY * 5}>
-            <a href="/images/qr.png" download="SteffenIllium-QRCode.png">
-              <Image
-                src="/images/qr.png"
-                alt="QR Code to connect"
-                width={240}
-                height={240}
-                className="rounded-xl shadow-lg hover:opacity-80 transition-opacity"
-              />
-            </a>
-          </BlurFade>
-        </div>
+        <BlurFade delay={BLUR_FADE_DELAY * 5} className="w-full">
+          <hr />
+        </BlurFade>
+        <BlurFade
+          delay={BLUR_FADE_DELAY * 5}
+          className="flex w-full flex-col items-center my-2 pb-6">
+          <Link href={DATA.url}>
+            <MyQrCode />
+          </Link>
+        </BlurFade>
      </div>
    </main>
  );
-}
+}
--- a/app/resume.tsx
+++ b/app/resume.tsx
@@ -11,7 +11,7 @@ const domain: string = "steffenillium.de";
 export const DATA = {
  name: "Steffen Illium",
  initials: "SI",
-  url: `https://${domain}.de`,
+  url: `https://${domain}`,
  domain: `${domain}`,
  location: "Augsburg, Germany",
  locationLink: "https://www.google.com/maps/place/Augsburg",
--- a/components/element-qr.tsx
+++ b/components/element-qr.tsx
@@ -0,0 +1,14 @@
+import { DATA } from "@/app/resume";
+import { QRCode } from "@/components/ui/shadcn-io/qr-code";
+
+const BACKGROUND_COLOR = "hsl(var(--background))";
+const FOREGROUND_COLOR = "hsl(var(--foreground))";
+
+const MyQrCode = () => (
+  <QRCode
+    background={BACKGROUND_COLOR}
+    foreground={FOREGROUND_COLOR}
+    data={DATA.url + "/connect"}
+  />
+);
+export default MyQrCode;
--- a/components/ui/shadcn-io/qr-code/index.tsx
+++ b/components/ui/shadcn-io/qr-code/index.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import { formatHex, oklch } from 'culori';
+import QR from 'qrcode';
+import { type HTMLAttributes, useEffect, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+export type QRCodeProps = HTMLAttributes<HTMLDivElement> & {
+  data: string;
+  foreground?: string;
+  background?: string;
+  robustness?: 'L' | 'M' | 'Q' | 'H';
+};
+
+const oklchRegex = /oklch\(([0-9.]+)\s+([0-9.]+)\s+([0-9.]+)\)/;
+
+const getOklch = (color: string, fallback: [number, number, number]) => {
+  const oklchMatch = color.match(oklchRegex);
+
+  if (!oklchMatch) {
+    return { l: fallback[0], c: fallback[1], h: fallback[2] };
+  }
+
+  return {
+    l: Number.parseFloat(oklchMatch[1]),
+    c: Number.parseFloat(oklchMatch[2]),
+    h: Number.parseFloat(oklchMatch[3]),
+  };
+};
+
+export const QRCode = ({
+  data,
+  foreground,
+  background,
+  robustness = 'M',
+  className,
+  ...props
+}: QRCodeProps) => {
+  const [svg, setSVG] = useState<string | null>(null);
+
+  useEffect(() => {
+    const generateQR = async () => {
+      try {
+        const styles = getComputedStyle(document.documentElement);
+        const foregroundColor =
+          foreground ?? styles.getPropertyValue('--foreground');
+        const backgroundColor =
+          background ?? styles.getPropertyValue('--background');
+
+        const foregroundOklch = getOklch(
+          foregroundColor,
+          [0.21, 0.006, 285.885]
+        );
+        const backgroundOklch = getOklch(backgroundColor, [0.985, 0, 0]);
+
+        const newSvg = await QR.toString(data, {
+          type: 'svg',
+          color: {
+            dark: formatHex(oklch({ mode: 'oklch', ...foregroundOklch })),
+            light: formatHex(oklch({ mode: 'oklch', ...backgroundOklch })),
+          },
+          width: 200,
+          errorCorrectionLevel: robustness,
+          margin: 0,
+        });
+
+        setSVG(newSvg);
+      } catch (err) {
+        console.error(err);
+      }
+    };
+
+    generateQR();
+  }, [data, foreground, background, robustness]);
+
+  if (!svg) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn('size-full', '[&_svg]:size-full', className)}
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: "Required for SVG"
+      dangerouslySetInnerHTML={{ __html: svg }}
+      {...props}
+    />
+  );
+};
--- a/components/ui/shadcn-io/qr-code/server.tsx
+++ b/components/ui/shadcn-io/qr-code/server.tsx
@@ -0,0 +1,42 @@
+import QR from 'qrcode';
+import type { HTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+export type QRCodeProps = HTMLAttributes<HTMLDivElement> & {
+  data: string;
+  foreground: string;
+  background: string;
+  robustness?: 'L' | 'M' | 'Q' | 'H';
+};
+
+export const QRCode = async ({
+  data,
+  foreground,
+  background,
+  robustness = 'M',
+  className,
+  ...props
+}: QRCodeProps) => {
+  const svg = await QR.toString(data, {
+    type: 'svg',
+    color: {
+      dark: foreground,
+      light: background,
+    },
+    width: 200,
+    errorCorrectionLevel: robustness,
+  });
+
+  if (!svg) {
+    throw new Error('Failed to generate QR code');
+  }
+
+  return (
+    <div
+      className={cn('size-full', '[&_svg]:size-full', className)}
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: "Required for SVG"
+      dangerouslySetInnerHTML={{ __html: svg }}
+      {...props}
+    />
+  );
+};
--- a/package.json
+++ b/package.json
@@ -21,12 +21,14 @@
    "cheerio": "^1.1.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "culori": "^4.0.2",
    "gray-matter": "^4.0.3",
    "lucide-react": "^0.544.0",
    "mdx-bundler": "^10.1.1",
    "motion": "^12.23.16",
    "next": "15.5.3",
    "next-themes": "^0.4.6",
+    "qrcode": "^1.5.4",
    "react": "19.1.1",
    "react-dom": "19.1.1",
    "react-icons": "^5.5.0",
@@ -48,7 +50,9 @@
  "devDependencies": {
    "@eslint/eslintrc": "^3.3.1",
    "@tailwindcss/postcss": "^4.1.13",
+    "@types/culori": "^4.0.1",
    "@types/node": "^24.5.2",
+    "@types/qrcode": "^1.5.5",
    "@types/react": "^19.1.13",
    "@types/react-dom": "^19.1.9",
    "eslint": "^9.36.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
+      culori:
+        specifier: ^4.0.2
+        version: 4.0.2
      gray-matter:
        specifier: ^4.0.3
        version: 4.0.3
@@ -62,6 +65,9 @@ importers:
      next-themes:
        specifier: ^0.4.6
        version: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      qrcode:
+        specifier: ^1.5.4
+        version: 1.5.4
      react:
        specifier: 19.1.1
        version: 19.1.1
@@ -120,9 +126,15 @@ importers:
      '@tailwindcss/postcss':
        specifier: ^4.1.13
        version: 4.1.13
+      '@types/culori':
+        specifier: ^4.0.1
+        version: 4.0.1
      '@types/node':
        specifier: ^24.5.2
        version: 24.5.2
+      '@types/qrcode':
+        specifier: ^1.5.5
+        version: 1.5.5
      '@types/react':
        specifier: ^19.1.13
        version: 19.1.13
@@ -1076,6 +1088,9 @@ packages:
  '@tybys/wasm-util@0.10.1':
    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}

+  '@types/culori@4.0.1':
+    resolution: {integrity: sha512-43M51r/22CjhbOXyGT361GZ9vncSVQ39u62x5eJdBQFviI8zWp2X5jzqg7k4M6PVgDQAClpy2bUe2dtwEgEDVQ==}
+
  '@types/d3-array@3.2.2':
    resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}

@@ -1133,6 +1148,9 @@ packages:
  '@types/node@24.5.2':
    resolution: {integrity: sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==}

+  '@types/qrcode@1.5.5':
+    resolution: {integrity: sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==}
+
  '@types/react-dom@19.1.9':
    resolution: {integrity: sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==}
    peerDependencies:
@@ -1347,6 +1365,10 @@ packages:
  ajv@6.12.6:
    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}

+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
  ansi-styles@4.3.0:
    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
    engines: {node: '>=8'}
@@ -1451,6 +1473,10 @@ packages:
    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
    engines: {node: '>=6'}

+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
  caniuse-lite@1.0.30001743:
    resolution: {integrity: sha512-e6Ojr7RV14Un7dz6ASD0aZDmQPT/A+eZU+nuTNfjqmRrmkmQlnTNWH0SKmqagx9PeW87UVqapSurtAXifmtdmw==}

@@ -1490,6 +1516,9 @@ packages:
  client-only@0.0.1:
    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}

+  cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+
  clsx@2.1.1:
    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
    engines: {node: '>=6'}
@@ -1532,6 +1561,10 @@ packages:
  csstype@3.1.3:
    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}

+  culori@4.0.2:
+    resolution: {integrity: sha512-1+BhOB8ahCn4O0cep0Sh2l9KCOfOdY+BXJnKMHFFzDEouSr/el18QwXEMRlOj9UY5nCeA8UN3a/82rUWRBeyBw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
  d3-array@3.2.4:
    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
    engines: {node: '>=12'}
@@ -1608,6 +1641,10 @@ packages:
      supports-color:
        optional: true

+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+
  decimal.js-light@2.5.1:
    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}

@@ -1636,6 +1673,9 @@ packages:
  devlop@1.1.0:
    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}

+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+
  discontinuous-range@1.0.0:
    resolution: {integrity: sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==}

@@ -1660,6 +1700,9 @@ packages:
    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
    engines: {node: '>= 0.4'}

+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
  emoji-regex@9.2.2:
    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}

@@ -1927,6 +1970,10 @@ packages:
    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
    engines: {node: '>=8'}

+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
  find-up@5.0.0:
    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
    engines: {node: '>=10'}
@@ -1970,6 +2017,10 @@ packages:
  functions-have-names@1.2.3:
    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}

+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
  get-intrinsic@1.3.0:
    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
    engines: {node: '>= 0.4'}
@@ -2185,6 +2236,10 @@ packages:
    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
    engines: {node: '>= 0.4'}

+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
  is-generator-function@1.1.0:
    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
    engines: {node: '>= 0.4'}
@@ -2376,6 +2431,10 @@ packages:
    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
    engines: {node: '>= 12.0.0'}

+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
  locate-path@6.0.0:
    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
    engines: {node: '>=10'}
@@ -2719,14 +2778,26 @@ packages:
    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
    engines: {node: '>= 0.4'}

+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
  p-limit@3.1.0:
    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
    engines: {node: '>=10'}

+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
  p-locate@5.0.0:
    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
    engines: {node: '>=10'}

+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
  parent-module@1.0.1:
    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
    engines: {node: '>=6'}
@@ -2768,6 +2839,10 @@ packages:
    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
    engines: {node: '>=12'}

+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
  possible-typed-array-names@1.1.0:
    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
    engines: {node: '>= 0.4'}
@@ -2798,6 +2873,11 @@ packages:
    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
    engines: {node: '>=6'}

+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
  queue-microtask@1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}

@@ -2935,6 +3015,13 @@ packages:
  remark-stringify@11.0.0:
    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}

+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+
  reselect@5.1.1:
    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}

@@ -2999,6 +3086,9 @@ packages:
    engines: {node: '>=10'}
    hasBin: true

+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
  set-function-length@1.2.2:
    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
    engines: {node: '>= 0.4'}
@@ -3063,6 +3153,10 @@ packages:
    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
    engines: {node: '>= 0.4'}

+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
  string.prototype.includes@2.0.1:
    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
    engines: {node: '>= 0.4'}
@@ -3089,6 +3183,10 @@ packages:
  stringify-entities@4.0.4:
    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}

+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
  strip-bom-string@1.0.0:
    resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
    engines: {node: '>=0.10.0'}
@@ -3307,6 +3405,9 @@ packages:
    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
    engines: {node: '>= 0.4'}

+  which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+
  which-typed-array@1.1.19:
    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
    engines: {node: '>= 0.4'}
@@ -3327,6 +3428,13 @@ packages:
    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
    engines: {node: '>=0.10.0'}

+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+
  yallist@5.0.0:
    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
    engines: {node: '>=18'}
@@ -3336,6 +3444,14 @@ packages:
    engines: {node: '>= 14.6'}
    hasBin: true

+  yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+
+  yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+
  yocto-queue@0.1.0:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}
@@ -4154,6 +4270,8 @@ snapshots:
      tslib: 2.8.1
    optional: true

+  '@types/culori@4.0.1': {}
+
  '@types/d3-array@3.2.2': {}

  '@types/d3-color@3.1.3': {}
@@ -4208,6 +4326,10 @@ snapshots:
    dependencies:
      undici-types: 7.12.0

+  '@types/qrcode@1.5.5':
+    dependencies:
+      '@types/node': 24.5.2
+
  '@types/react-dom@19.1.9(@types/react@19.1.13)':
    dependencies:
      '@types/react': 19.1.13
@@ -4433,6 +4555,8 @@ snapshots:
      json-schema-traverse: 0.4.1
      uri-js: 4.4.1

+  ansi-regex@5.0.1: {}
+
  ansi-styles@4.3.0:
    dependencies:
      color-convert: 2.0.1
@@ -4564,6 +4688,8 @@ snapshots:

  callsites@3.1.0: {}

+  camelcase@5.3.1: {}
+
  caniuse-lite@1.0.30001743: {}

  ccount@2.0.1: {}
@@ -4612,6 +4738,12 @@ snapshots:

  client-only@0.0.1: {}

+  cliui@6.0.0:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+
  clsx@2.1.1: {}

  collapse-white-space@2.1.0: {}
@@ -4648,6 +4780,8 @@ snapshots:

  csstype@3.1.3: {}

+  culori@4.0.2: {}
+
  d3-array@3.2.4:
    dependencies:
      internmap: 2.0.3
@@ -4714,6 +4848,8 @@ snapshots:
    dependencies:
      ms: 2.1.3

+  decamelize@1.2.0: {}
+
  decimal.js-light@2.5.1: {}

  decode-named-character-reference@1.2.0:
@@ -4742,6 +4878,8 @@ snapshots:
    dependencies:
      dequal: 2.0.3

+  dijkstrajs@1.0.3: {}
+
  discontinuous-range@1.0.0: {}

  doctrine@2.1.0:
@@ -4772,6 +4910,8 @@ snapshots:
      es-errors: 1.3.0
      gopd: 1.2.0

+  emoji-regex@8.0.0: {}
+
  emoji-regex@9.2.2: {}

  encoding-sniffer@0.2.1:
@@ -5224,6 +5364,11 @@ snapshots:
    dependencies:
      to-regex-range: 5.0.1

+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
  find-up@5.0.0:
    dependencies:
      locate-path: 6.0.0
@@ -5264,6 +5409,8 @@ snapshots:

  functions-have-names@1.2.3: {}

+  get-caller-file@2.0.5: {}
+
  get-intrinsic@1.3.0:
    dependencies:
      call-bind-apply-helpers: 1.0.2
@@ -5552,6 +5699,8 @@ snapshots:
    dependencies:
      call-bound: 1.0.4

+  is-fullwidth-code-point@3.0.0: {}
+
  is-generator-function@1.1.0:
    dependencies:
      call-bound: 1.0.4
@@ -5722,6 +5871,10 @@ snapshots:
      lightningcss-win32-arm64-msvc: 1.30.1
      lightningcss-win32-x64-msvc: 1.30.1

+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
  locate-path@6.0.0:
    dependencies:
      p-locate: 5.0.0
@@ -6359,14 +6512,24 @@ snapshots:
      object-keys: 1.1.1
      safe-push-apply: 1.0.0

+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
  p-limit@3.1.0:
    dependencies:
      yocto-queue: 0.1.0

+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
  p-locate@5.0.0:
    dependencies:
      p-limit: 3.1.0

+  p-try@2.2.0: {}
+
  parent-module@1.0.1:
    dependencies:
      callsites: 3.1.0
@@ -6408,6 +6571,8 @@ snapshots:

  picomatch@4.0.3: {}

+  pngjs@5.0.0: {}
+
  possible-typed-array-names@1.1.0: {}

  postcss-selector-parser@6.0.10:
@@ -6439,6 +6604,12 @@ snapshots:

  punycode@2.3.1: {}

+  qrcode@1.5.4:
+    dependencies:
+      dijkstrajs: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+
  queue-microtask@1.2.3: {}

  railroad-diagrams@1.0.0: {}
@@ -6680,6 +6851,10 @@ snapshots:
      mdast-util-to-markdown: 2.1.2
      unified: 11.0.5

+  require-directory@2.1.1: {}
+
+  require-main-filename@2.0.0: {}
+
  reselect@5.1.1: {}

  resolve-from@4.0.0: {}
@@ -6740,6 +6915,8 @@ snapshots:

  semver@7.7.2: {}

+  set-blocking@2.0.0: {}
+
  set-function-length@1.2.2:
    dependencies:
      define-data-property: 1.1.4
@@ -6852,6 +7029,12 @@ snapshots:
      es-errors: 1.3.0
      internal-slot: 1.1.0

+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
  string.prototype.includes@2.0.1:
    dependencies:
      call-bind: 1.0.8
@@ -6907,6 +7090,10 @@ snapshots:
      character-entities-html4: 2.1.0
      character-entities-legacy: 3.0.0

+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
  strip-bom-string@1.0.0: {}

  strip-bom@3.0.0: {}
@@ -7204,6 +7391,8 @@ snapshots:
      is-weakmap: 2.0.2
      is-weakset: 2.0.4

+  which-module@2.0.1: {}
+
  which-typed-array@1.1.19:
    dependencies:
      available-typed-arrays: 1.0.7
@@ -7224,10 +7413,37 @@ snapshots:

  word-wrap@1.2.5: {}

+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  y18n@4.0.3: {}
+
  yallist@5.0.0: {}

  yaml@2.8.1: {}

+  yargs-parser@18.1.3:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+
+  yargs@15.4.1:
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+
  yocto-queue@0.1.0: {}

  zwitch@2.0.4: {}
--- a/public/images/qr.png
+++ b/public/images/qr.png