feat: add i18n to onboarding flow via paraglide#950
Open
hturnbull93 wants to merge 2 commits into
Open
Conversation
Replaces all hardcoded UI strings in the onboarding pipeline with
paraglide message functions, enabling translation into any locale.
- Add 160+ onboarding_* keys to messages/en.json with translator
instructions for HTML-containing strings
- Add getter functions to options.ts (getDiscoveryOptions,
getMotivations, getSkills, getWeeklyHours, getIntentOptions)
returning {value, label} pairs — English values submitted to
Airtable unchanged, labels translated at render time
- Wire up paraglide in OnboardingFlow.svelte, ActionCards.svelte,
+page.svelte and +page.server.ts
- Add isomorphic-dompurify safeHtml() helper to sanitize all
{@html} calls, guarding against malicious LLM translation output
- Accept ?locale=<code> query param on the embed page to override
locale server- and client-side
- Allow PARAGLIDE_LOCALES to include locales not in
default-settings.js on local dev (warn instead of error);
CI still hard-errors to prevent deploying untranslated locales
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015aKhZeP6x8pgBkDEraXGUs
✅ Deploy Preview for pauseai ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
isomorphic-dompurify instantiates jsdom at module load time, which fails in Netlify's Deno edge runtime. Replace with a dependency-free allowlist sanitizer that works in any JS environment. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015aKhZeP6x8pgBkDEraXGUs
Collaborator
|
Explicit note that we do not know the (understood to be relatively old and bespoke) version of Deno that Netlify uses. They do not make this transparent. As a result I strongly endorse using this kind of approach (using a different dependency to avoid the complication.) |
Collaborator
|
@hturnbull93 do note that localisation is latent in production, but not currently used: the website remains en-only. Is your plan to expose localized versions of the join page only? (Or even just the embedded form?) We can do it but I'd really like to discuss some detail. More than doubling the number of entries in "messages" isn't ideal - it is the way Paraglide handles short UX strings but the special track has complicated our automatic l10n quite a lot. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
onboarding_*keys tomessages/en.jsonwith__instructionshints for HTML-containing strings to guide LLM translatorsoptions.ts(getDiscoveryOptions,getMotivations,getSkills,getWeeklyHours,getIntentOptions) returning{ value, label }pairs — English values are submitted to Airtable unchanged, labels are translated at render timeisomorphic-dompurifysafeHtml()helper to sanitize all{@html}calls, guarding against malicious LLM translation output?locale=<code>query param on the embed page to override locale server- and client-side (for iframe embeds)PARAGLIDE_LOCALESenv var to include locales not yet indefault-settings.json local dev (warns instead of errors); CI still hard-errors to prevent deploying untranslated localesTest plan
/embed/onboarding-form— all steps render correctly in English/embed/onboarding-form?locale=de— locale override accepted (German strings once translated)pnpm checkpasses with 0 errors🤖 Generated with Claude Code
https://claude.ai/code/session_015aKhZeP6x8pgBkDEraXGUs