Skip to content

notes.md

Latest commit

 

History

History
36 lines (27 loc) · 1.89 KB

notes.md

File metadata and controls

36 lines (27 loc) · 1.89 KB
Raw

QR code generator

Design decisions

Minimal layout

No SiteHeader or footer — this is a single-purpose utility tool that City staff use for 10 seconds. The Container component provides consistent margins and max-width.

Error correction locked to High

QR codes at error correction level H remain scannable with up to ~30% of the center obscured. This is required for the City seal overlay. The setting is not exposed to users to prevent accidentally generating unscannable codes.

City seal overlay

  • Uses the SVG version from sf.gov's static assets (same-origin in production)
  • Seal covers ~22% of the QR code area (within the 30% H-level tolerance)
  • A white circle is drawn behind the seal for contrast against the dark QR modules
  • If the seal fails to load (CORS in non-sf.gov contexts), the QR code generates without it and logs a warning

Size options

Three preset sizes cover the common use cases:

  • 256px — digital (email, Slack, internal docs)
  • 512px — print materials (flyers, letters)
  • 1024px — signage and posters (City Hall sculpture use case)

URL validation

Basic validation ensures the input is a well-formed URL with http:// or https:// protocol. This prevents staff from accidentally generating QR codes for invalid destinations.

Colors

QR code uses the design system's black (#0b0b0b) and white (#fcfcfc) tokens rather than pure black/white, maintaining visual consistency with SF.gov.

CORS consideration

The City seal is served from sf.gov/_next/static/media/. When this tool is hosted on a different origin (e.g., AWS Amplify), the seal image may be blocked by CORS when drawn to canvas. Options:

  1. Host the tool on sf.gov (same-origin, no issue)
  2. Add CORS headers to the static asset CDN
  3. Bundle the seal as a base64 data URI (increases page weight but eliminates the dependency)

Dependencies

  • qrcode (v1.5.4) — client-side QR code generation to canvas