feat(credential): add public /events/[slug]/credencial page

[aalvaropc]

What changed

The page the attendee actually sees, joining the renderer, the endpoint and the consent constants.

• src/pages/events/[slug]/credencial.astro — prerendered, gated on the credential.enabled flag.
• Islands under src/components/react/credential/: CredentialPage, CredentialForm, CredentialPreview, AvatarPicker, ShareBar, plus useFontsReady and useDecodedImage.
• A conditional CTA on the event page.

Stacked on #292, #294, #295 and #296.

Ships dark. getStaticPaths filters on credential.enabled, and no event carries the block in gdg-ica-data yet, so the route does not exist — the build produces the same page count as main. Turning it on is a one-line change in the data repo.

Why

The form is two steps, and the order is the decision.

Step 1 (first name, last name, GitHub, avatar) is entirely local and sends nothing. The attendee gets their shareable image before being asked for a DNI. Step 2 asks for what the official panel needs transcribed, plus the five consents. Asking for an identity document before giving anything back is where people abandon.

The success screen is blunt on purpose. The central risk of the hybrid funnel is someone filling our form, never touching the official panel, and arriving on the day believing they are registered. So the registration CTA is the largest element on the screen, the heading says literally "Todavía no estás inscrito", and the 15-minute timeout is flagged before they start. Tests pin that copy, because it is exactly the kind of wording a well-meaning refactor softens.

Three platform traps, each commented at the call site:

1. blob: is absent from the CSP. The photo is read with FileReader.readAsDataURL, never URL.createObjectURL. The directive is img-src 'self' data: https: in firebase.json, and the dev server sends no CSP header, so that breakage would only appear in production.
2. Fonts. useFontsReady blocks the first draw until Geist is loaded. ctx.font falls back to the default sans silently when the face is not ready, and the bug only shows on a cold load — the most likely visual defect in the feature, and one nobody would catch developing with a warm cache. document.fonts.ready alone is not enough, because a weight the page never renders in the DOM can still be unloaded when the canvas asks for it.
3. The QR is generated at build time with the qrcode dependency already used in [slug].astro, and passed as a data URL so the canvas draws it same-origin. A remote image would taint the canvas and make toDataURL throw at export. Printing it on the card is what makes every shared credential carry the funnel back to the panel that actually registers people.

The most likely integration bug, with a test. Submit calls signInAnonymouslyIfNeeded before the API. Without it, request() in src/lib/api.ts returns { success: false, error: "Not authenticated" } and the form fails silently with an English string in a Spanish UI. A test asserts the call order over a shared log, not merely that both happened.

The card is attached after the response. The group letter comes from a server-assigned sequence number, so a card composed before submitting would be stored and emailed with a placeholder. Create sends credentialImageDataUrl: null and the card is attached in a second call. The attach is not awaited into the UI path — the attendee already has their credential on screen, and a failed attach must not turn a successful registration into an error.

Privacy. Downscaling the photo to 512px strips EXIF, GPS included, so that never leaves the device. The picker opens on mascots and the photo is a deliberate opt-in, which also keeps the moderation queue short.

Sharing tries the Web Share API first — on mobile it posts the actual image and sidesteps the CSP — then falls back to a download, because some mobile browsers ignore download on a data: URL. Social links can only ever share the page URL, since every platform strips a client-side image out of a share intent, and saying so on screen beats a button that quietly posts a link when the user expected a card.

Known follow-up: dark mode

This page is built light-only, and the code says so at the call sites. That was correct when it was written — dark: variants existed in the codebase but nothing could trigger them, since no public page wired a theme.

PR #278 changes that: it adds a ThemeToggle and a design system across the public site. Once it lands, this page becomes the only public one that ignores the theme, and it will need dark variants on the form, the preview frame and the surrounding chrome. It also touches src/pages/events/[slug].astro, where this PR adds the CTA, so expect a small conflict there.

The card itself must stay light regardless. It is an image people post to social networks, not a surface of the site, so the canvas renderer is out of scope for that work — only the frame around it.

Merging this first was a deliberate call: #278 is still in progress, and holding a finished feature for an unfinished one costs more than the follow-up it creates.

How to test

pnpm test      # 20 RTL tests
pnpm build

Covered: step 1 asks for nothing sensitive; the button enables only with a name; an invalid GitHub username is flagged inline; submission is blocked until all five consents are checked and the error names which one is missing; the signInAnonymouslyIfNeeded ordering; a 429 rendered in Spanish; the official CTA carrying target="_blank" rel="noopener noreferrer"; and the canvas not announcing placeholder text as the attendee's name.

Known limit of this verification: because the route produces zero pages until the flag is on, the build validates the .astro and its getStaticPaths but does not bundle the island. Component coverage comes from tests and the linter, not the build. Review the page in a browser once the flag is flipped, before promoting it.

To exercise it end to end, point GDG_DATA_LOCAL_PATH at a local data clone with an event carrying credential.enabled: true, run the emulators, and set FIREBASE_EMULATOR_PROJECT to match the project you started them with.