QR Code

---
/**
 * QrCode — a QR code for a URL or a short text, encoded at build and drawn as one SVG path: the dark modules as runs
 * in each row, inside the four-module quiet zone a reader needs. Byte mode at error correction level M, versions 1 to
 * 10 (up to 213 ASCII characters); a longer text stops the build. Dark modules on a light ground by default, on a dark page too:
 * not every phone's camera reads a code drawn the other way round. It names what it opens, so a screen reader hears
 * where the code leads. Zero JavaScript, and nothing of the encoder reaches the browser.
 */
import type { HTMLAttributes } from 'astro/types';
import { qr, qrPath } from '../lib/qr';

interface Props extends HTMLAttributes<'div'> {
  /** What the code opens: a URL, usually. */
  value: string;
  /** The code's width, any CSS length. */
  size?: string;
  /** The modules' colour; unset, near black. */
  color?: string;
  /** The ground, the quiet zone included; unset, white. Keep the modules darker than the ground: a code drawn light on
   *  dark is one some cameras do not read. */
  ground?: string;
  /** What a screen reader hears; unset, "QR code to" and the value. */
  label?: string;
}

const { value, size = '8rem', color, ground, label, class: className, style, ...rest } = Astro.props;
const code = qr(value);
const quiet = 4;
const n = code.size + quiet * 2;
const vars = [`--ma-qr-size:${size}`, color && `--ma-qr-color:${color}`, ground && `--ma-qr-ground:${ground}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<div class:list={['ma-qr', className]} data-version={code.version} style={vars} {...rest}>
  <svg class="ma-qr__svg" viewBox={`0 0 ${n} ${n}`} role="img" aria-label={label ?? `QR code to ${value}`} shape-rendering="crispEdges">
    <rect class="ma-qr__ground" width={n} height={n} />
    <path class="ma-qr__modules" d={qrPath(code, quiet)} />
  </svg>
</div>

<style is:global>
  @layer components {
    :where(.ma-qr) { display: inline-block; inline-size: var(--ma-qr-size, 8rem); max-inline-size: 100%; line-height: 0; }
    :where(.ma-qr__svg) { display: block; inline-size: 100%; block-size: auto; }
    :where(.ma-qr__ground) { fill: var(--ma-qr-ground, #fff); }
    :where(.ma-qr__modules) { fill: var(--ma-qr-color, #0c0c0d); }
    @media (forced-colors: active) {
      :where(.ma-qr__ground) { fill: Canvas; }
      :where(.ma-qr__modules) { fill: CanvasText; }
    }
    /* nothing of its own moves; a transition a page puts on the code is dropped with reduced motion */
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-qr) { transition: none; }
    }
  }
</style>