Skip to content

Commit 197c1be

Browse files
N2D4fomalhautb
N2D4
and
fomalhautb
authored
i18n with Quetzal (stack-auth#228)
* Quetzal setup stuff * Custom translation function * CI * Update stuff * Revert components * Various fixes * Hook * New IDs * Add auto-gen info header * Fix CI * Fix CI * Update translations * Update script * More fixes * Overrides * fixed quetzal * added more translations * added more translation * updated translation * added i18n docs * updated pnpm lock * fixed build --------- Co-authored-by: Zai Shi <zaishi00@outlook.com>
1 parent 89696a4 commit 197c1be

42 files changed

Lines changed: 2932 additions & 262 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/e2e-api-tests.yaml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,11 @@ jobs:
6969
- name: Create .env.test.local file for packages/stack-proxy
7070
run: cp packages/stack-proxy/.env.development packages/stack-proxy/.env.test.local
7171

72+
- name: Put QUETZAL_API_KEY in .env.local for packages/stack
73+
run: echo "QUETZAL_API_KEY=${{ secrets.QUETZAL_API_KEY }}" >> packages/stack/.env.local
74+
7275
- name: Build
7376
run: pnpm build
74-
env:
75-
QUETZAL_API_KEY: ${{ secrets.QUETZAL_API_KEY }}
7677

7778
- name: Start Docker Compose
7879
run: docker compose -f dependencies.compose.yaml up -d

‎.github/workflows/lint-and-build.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,12 @@ jobs:
7878

7979
- name: Typecheck
8080
run: pnpm typecheck
81+
82+
- name: Check for uncommitted changes
83+
run: |
84+
if [[ -n $(git status --porcelain) ]]; then
85+
echo "Error: There are uncommitted changes after build/lint/typecheck."
86+
echo "Please commit all changes before pushing."
87+
git status
88+
exit 1
89+
fi

‎.github/workflows/preview-docs.yaml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,15 @@ jobs:
5353

5454
- name: Create .env.production.local file for examples/supabase
5555
run: cp examples/supabase/.env.development examples/supabase/.env.production.local
56+
57+
- name: Put QUETZAL_API_KEY in .env.local for packages/stack
58+
run: echo "QUETZAL_API_KEY=${{ secrets.QUETZAL_API_KEY }}" >> packages/stack/.env.local
5659

5760
- name: Create .env.production.local file for packages/stack-proxy
5861
run: cp packages/stack-proxy/.env.development packages/stack-proxy/.env.production.local
5962

6063
- name: Build
6164
run: pnpm build
62-
env:
63-
QUETZAL_API_KEY: ${{ secrets.QUETZAL_API_KEY }}
6465

6566
- name: Check API is valid
6667
run: pnpm run fern check

‎.github/workflows/publish-docs.yaml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,14 +71,15 @@ jobs:
7171

7272
- name: Create .env.production.local file for examples/supabase
7373
run: cp examples/supabase/.env.development examples/supabase/.env.production.local
74+
75+
- name: Put QUETZAL_API_KEY in .env.local for packages/stack
76+
run: echo "QUETZAL_API_KEY=${{ secrets.QUETZAL_API_KEY }}" >> packages/stack/.env.local
7477

7578
- name: Create .env.production.local file for packages/stack-proxy
7679
run: cp packages/stack-proxy/.env.development packages/stack-proxy/.env.production.local
7780

7881
- name: Build
7982
run: pnpm build
80-
env:
81-
QUETZAL_API_KEY: ${{ secrets.QUETZAL_API_KEY }}
8283

8384
- name: Check API is valid
8485
run: pnpm run fern check

‎.vscode/settings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"hostable",
2020
"INBUCKET",
2121
"Jwks",
22+
"lucide",
2223
"Luma",
2324
"midfix",
2425
"Millis",
@@ -40,11 +41,14 @@
4041
"Proxied",
4142
"psql",
4243
"qrcode",
44+
"quetzallabs",
4345
"reqs",
4446
"stackframe",
4547
"supabase",
4648
"Svix",
49+
"tailwindcss",
4750
"totp",
51+
"tsup",
4852
"typecheck",
4953
"typehack",
5054
"Uncapitalize",

‎apps/dashboard/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,4 @@ NEXT_PUBLIC_STACK_SVIX_SERVER_URL=# For prod, leave it empty. For local developm
3636
# Misc, optional
3737
STACK_ACCESS_TOKEN_EXPIRATION_TIME=# enter the expiration time for the access token here. Optional, don't specify it for default value
3838
NEXT_PUBLIC_STACK_HEAD_TAGS=[{ "tagName": "script", "attributes": {}, "innerHTML": "// insert head tags here" }]
39+
STACK_DEVELOPMENT_TRANSLATION_LOCALE=# enter the locale to use for the translation provider here, for example: de-DE. Only works during development, not in production. Optional, by default don't translate

‎apps/dashboard/src/app/layout.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ThemeProvider } from '@/components/theme-provider';
55
import { cn } from '@/lib/utils';
66
import { stackServerApp } from '@/stack';
77
import { StackProvider, StackTheme } from '@stackframe/stack';
8-
import { getEnvVariable } from '@stackframe/stack-shared/dist/utils/env';
8+
import { getEnvVariable, getNodeEnvironment } from '@stackframe/stack-shared/dist/utils/env';
99
import { Toaster } from '@stackframe/stack-ui';
1010
import { Analytics } from "@vercel/analytics/react";
1111
import { GeistMono } from "geist/font/mono";
@@ -60,6 +60,10 @@ export default function RootLayout({
6060
children: React.ReactNode,
6161
}) {
6262
const headTags: TagConfigJson[] = JSON.parse(getEnvVariable('NEXT_PUBLIC_STACK_HEAD_TAGS'));
63+
const translationLocale = getEnvVariable('STACK_DEVELOPMENT_TRANSLATION_LOCALE', "") || undefined;
64+
if (translationLocale !== undefined && getNodeEnvironment() !== 'development') {
65+
throw new Error('STACK_DEVELOPMENT_TRANSLATION_LOCALE can only be used in development mode');
66+
}
6367

6468
return (
6569
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`} suppressHydrationWarning>
@@ -89,7 +93,7 @@ export default function RootLayout({
8993
<PageView />
9094
<SpeedInsights />
9195
<ThemeProvider>
92-
<StackProvider app={stackServerApp}>
96+
<StackProvider app={stackServerApp} lang={translationLocale as any}>
9397
<StackTheme>
9498
<ClientPolyfill />
9599
<RouterProvider>

‎docs/fern/docs.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,9 @@ navigation:
7676
- page: Colors and Styles
7777
icon: fa-regular fa-paint-brush
7878
path: ./docs/pages/customization/custom-styles.mdx
79+
- page: Internationalization
80+
icon: fa-regular fa-language
81+
path: ./docs/pages/customization/internationalization.mdx
7982
# - page: Customize Emails
8083
# icon: fa-regular fa-envelope
8184
- page: Custom Layouts and Pages

‎docs/fern/docs/pages/customization/internationalization.mdx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
slug: customization/internationalization
3+
---
4+
5+
## Setup
6+
7+
Internationalization with Stack is very straightforward. Simply pass the `lang` prop to the `StackProvider` component, and all the pages will be translated to the specified language.
8+
9+
```jsx title="layout.tsx"
10+
...
11+
<StackProvider ... lang={'de-DE'}>
12+
...
13+
</StackProvider>
14+
...
15+
```
16+
17+
By default, if no language is provided, it will be set to `en-US`.
18+
19+
You can choose which languages to use by employing your own methods, such as storing the language in `localStorage` or using the user's browser language.
20+
21+
## Supported languages
22+
23+
- `en-US`: English (United States)
24+
- `de-DE`: German (Germany)
25+
- `es-419`: Spanish (Latin America)
26+
- `es-ES`: Spanish (Spain)
27+
- `fr-CA`: French (Canada)
28+
- `fr-FR`: French (France)
29+
- `it-IT`: Italian (Italy)
30+
- `pt-BR`: Portuguese (Brazil)
31+
- `pt-PT`: Portuguese (Portugal)

‎packages/stack/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
QUETZAL_API_KEY=# replace with your Quetzal API Key (can be found on your dashboard https://getquetzal.com/dashboard/settings/project/0)

0 commit comments

Comments
 (0)