Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 13 additions & 6 deletions frontend/viewer/README.md
Original file line number Diff line number Diff line change
@@ -1,34 +1,41 @@
Typical development workflow should be to run `task fw-lite-web` in the repo root.

### i18n
### i18n

We're using a different library here from the lexbox UI. The core lib is https://lingui.dev/
with a Svelte plugin https://github.com/HenryLie/svelte-i18n-lingui

Basic usage looks like this:

```sveltehtml
<span>{$t`Logout`}</span>
```
for the english text 'Logout'. Then to make localization files run:

for the English text 'Logout'. Then to make localization files, run:

```bash
pnpm run i18n:extract
```

This will update the files under `/src/locales/`. If you want, you can then feed those files to an AI and it will translate them for you.

#### Adding a new language
The `/src/locales/` folder contains one file per language, named using its language code (e.g. `es.json` for Spanish).
You must update `frontend/viewer/lingui.config.ts` with the additional language code, then run `pnpm run i18n:extract` to generate the new locale file

The `/src/locales/` folder contains one file per language, named using its language code (e.g., `es.json` for Spanish).
You must update `frontend/viewer/lingui.config.ts` with the additional language code, then run `pnpm run i18n:extract` to generate the new locale file.

#### Advanced Usage

for formatted values you can do this:
For formatted values you can do this:

```sveltehtml
<span>{$t`Hello ${name}, how are you today?`}</span>
```

### ShadCN

add a new component
Add a new component with this:

```bash
pnpx shadcn-svelte@next add context-menu
```
Loading
Loading