Skip to content

Complete internationalization for Scira using gt-next#183

Open
andrewherndon wants to merge 13 commits intozaidmukaddam:mainfrom
gt-onboarding:locadex-run-v2
Open

Complete internationalization for Scira using gt-next#183
andrewherndon wants to merge 13 commits intozaidmukaddam:mainfrom
gt-onboarding:locadex-run-v2

Conversation

@andrewherndon
Copy link
Copy Markdown

This PR implements comprehensive i18n using the GT (General Translation) framework, across the entire codebase. It follows consistent patterns and introduces systematic code changes for translation support.

Test it out live: scira.generaltranslation.app

(Note: only Grok API in this deploy / no auth)

General Information:

  • Translations stored locally and generated at built time, locadex translate added to build command in package.json
  • Additional languages can be added as BCP 47 locale codes in the locales array in the gt.config.json config file
  • LLM search now has access to localized time information
  • All files with user-facing content have been modified

Common Patterns

  • Standard HTML elements wrapped with component
<T>
	<h4 className="text-lg font-medium">Billing History</h4>
	<p className="text-sm text-muted-foreground">View your past and upcoming invoices</p>
</T>
  • Localized Dates/Times integrated with existing structure by using useLocale() hook to determine the user’s locale
    • Replaced hardcoded en-US in Date objects with useLocale variable
const locale = useLocale();
...
{new Date(order.createdAt).toLocaleDateString(~~"en-US"~~locale, {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
})}
  • useGT() for string translations
    • Including toast errors/messages
const t = useGT();
...
<input
  type="text"
  name="query"
  placeholder={t('Ask anything...')}
...
/>
  • to ensure non proper currency rendering across locales while maintaining same format
<span>
	<Currency options={currencyOptions}> //currency options ensures original format
	    {15}
	</Currency>
</span>
<span className="text-zinc-500 dark:text-zinc-400 ml-2 text-sm">/month</span>
  • Content returning functions are converted to hooks
// previously was export const models = ...
export const getModels = (t: (content: string, options?: InlineTranslationOptions) => string) => [
  {
    value: 'scira-default',
    label: t('Grok 3.0 Mini'),
		...
	},
	...
]

// Usage in another file
const t = useGT();

const availableModels = useMemo(() => {
  return getModels(t);
}, [t]);
	

Other changes:

  • <GTProvider> wraps everything in layout
  • <LocaleSelector> added to header
  • loadTranslations.js created to load translations locally

Next Steps:

Test locally

  • Git clone the forked repository git clone https://github.com/generaltranslation/scira-locadex
  • Add all .env variables
  • pnpm build then pnpm start
  • All translations will load as they are saved locally within the public folder

Automated i18n (codegen, with automatic translations)

  • Sign into dash.generaltranslation.com
  • Install the Locadex App onto the Scira repository
  • Locadex will make an initial setup PR
  • After this initial PR, Locadex will listen for future PRs on main (or a specific branch), once it’s done internationalizing the new changes, it will add a commit onto that PR and you can merge it
    • (Open new PR with feature/update/etc → Locadex runs on it and adds a commit → PR is safe to merge)

Manual i18n (with automatic translations)

  • Sign into the dashboard
  • Create an API Key in the API Keys page
  • Add GT_API_KEY and GT_PROJECT_ID to your .env
  • Make sure to follow the patterns described above to new content/components you add to make sure that new content gets translated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant