upda/server/web
Varakh 5c089989cf
All checks were successful
/ build (push) Successful in 5m22s
feat(i18n): Add ability to translate the entire page including momentjs and Ant Design (#50)
Co-authored-by: Varakh <varakh@varakh.de>
Co-committed-by: Varakh <varakh@varakh.de>
2024-12-01 10:38:43 +00:00
..
ci feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
public feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
src feat(i18n): Add ability to translate the entire page including momentjs and Ant Design (#50) 2024-12-01 10:38:43 +00:00
.env feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
.env.development feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
.gitattributes feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
.gitignore feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
.npmrc feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
.nvmrc feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
.prettierignore feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
.prettierrc feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
.stylelintrc feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
eslint.config.js feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
index.html feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
package-lock.json Library updates and clean up 2024-11-29 22:36:59 +01:00
package.json feat(i18n): Add ability to translate the entire page including momentjs and Ant Design (#50) 2024-12-01 10:38:43 +00:00
README.md feat(i18n): Add ability to translate the entire page including momentjs and Ant Design (#50) 2024-12-01 10:38:43 +00:00
tsconfig.json feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
vite-env.d.ts feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00
vite.config.ts feat(embedded_ui): fully integrate UI into GoLang binary (#43) 2024-10-25 14:12:35 +00:00

README

Frontend for upda.

Configuration

  • During development: .env.development
  • Production derives the values from their main GoLang application, some environment variables are coupled with their backend one, some are exposed via WEB_*, but internally mapped to VITE_ in the app.go file

Development & contribution

Contributions are very welcome!

Prerequisites

It's probably worth checking out a node environment manager like nvm manager.

Required node and npm versions are outlined in the package.json.

Setup instructions

Run npm install which should install all dependencies.

Start

Use the npm run start command to start the development setup. Backend should be running.

Translation files

Pipeline checks for existing i18n keys, if you need to manually sync any language file, run npm run i18n-sync.

New translation languages

Adapt package.json and add the respective key to i18n-sync and checkstyle:i18n for the --languages argument, e.g. --languages en,new.

Run npm run i18n-sync to create and sync new language

Adapt languages.ts

enum Languages {
    // ...
    NEW = 'new'
}

Adapt locales.ts

enum Locales {
    // ...
    NEW = 'new-NEW'
}

Adapt LocaleProvider.tsx to detect the new language, assign proper momentjs locale.

// add import for Ant Design
import new_NEW from 'antd/lib/locale/new_NEW';

// add import for moment
// @ts-ignore
import new_localization from 'moment/dist/locale/new.js';

// getLocaleFromLanguage
if (LANGUAGES.NEW === language) {
    // ...
}

// getLanguageFromLocale
if (LANGUAGES.NEW === language) {
    // ...
}

// setLocales (uses import of moment)
// ...
else if (Languages.NEW === language) {
    // use import for Ant Design
    setAntLocale(new_NEW);
    // use import for moment
    moment.updateLocale(language, de_localization);
}

Adapt i18n/index.ts and import new language and make i18n detect it (locales are derived from it)

import newTranslation from './translations/new.json';

const resources = {
    //...
    new: {
        ...newTranslation
    }
};

Dependencies

To track unused dependencies

# install (if not yet present)
npm install -g depcheck typescript

# run
depcheck