Add inlang to make the contribution of translations easier (LAION-A…

…I#3393)

## Description

This PR add the `inlang.config.js` and `@inlang/cli` to Open-Assistant
to solve the issue LAION-AI#3077

With these changes, translators can manage translations in a no-code web
editor and useful linting rules and machine translations can be used
within the editor or via the `@inlang/cli`.

I added a badge with the current translation status and a short
description to the contribution guidelines.

### Preview

**Editor**
A live instance of the editor can be previewed with the following link:
https://inlang.com/editor/github.com/NiklasBuchfink/Open-Assistant

**Badge**
[![translation
badge](https://inlang.com/badge?url=github.com/NiklasBuchfink/Open-Assistant)](https://inlang.com/editor/github.com/NiklasBuchfink/Open-Assistant?ref=badge)

## Further information

To check the status of the translations, exece `npx inlang lint`. Other
useful command like `machine translate` and `open editor` your can find
in the [docs](https://inlang.com/documentation/apps/inlang-cli).

Within this week, the inlang VS code extension should also work ootb for
`i18next` projects and helps extract messages and display inline
annotations.

.vscode/extensions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "ms-vscode-remote.remote-containers",
     "ms-vscode-remote.vscode-remote-extensionpack",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "inlang.vs-code-extension"
   ]
 }

CONTRIBUTING.md

@@ -143,3 +143,11 @@ automatically deploy the built release to the dev machine.
 
 See
 [here](https://github.com/LAION-AI/Open-Assistant/blob/main/data/datasets/README.md)
+
+## Translations
+
+[![translation badge](https://inlang.com/badge?url=github.com/LAION-AI/Open-Assistant)](https://inlang.com/editor/github.com/LAION-AI/Open-Assistant?ref=badge)
+
+To add translations, you can manually edit the JSON translation files in
+`website/public/locales`, use the [inlang](https://inlang.com/) online editor,
+or run `npm run inlang:lint` inside `website` to find missing translations.

inlang.config.js

@@ -0,0 +1,18 @@
+export async function defineConfig(env) {
+  const { default: i18nextPlugin } = await env.$import(
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-i18next@2/dist/index.js"
+  );
+  const { default: standardLintRules } = await env.$import(
+    "https://cdn.jsdelivr.net/gh/inlang/standard-lint-rules@2/dist/index.js"
+  );
+
+  return {
+    referenceLanguage: "en",
+    plugins: [
+      i18nextPlugin({
+        pathPattern: "./website/public/locales/{language}/*.json",
+      }),
+      standardLintRules(),
+    ],
+  };
+}

website/package.json

@@ -17,6 +17,9 @@
     "cypress:run:contract": "cypress run --config-file ./cypress.config.contract.js",
     "cypress:component": "cypress run --component",
     "cypress:image-baseline": "cypress-image-diff -u",
+    "inlang:lint": "npx inlang lint --config ../inlang.config.js",
+    "inlang:machine-translate": "npx inlang machine translate --config ../inlang.config.js",
+    "inlang:open-editor": "npx inlang open editor",
     "jest": "jest --watch",
     "fix:lint": "eslint --fix src/ --ext .js,.jsx,.ts,.tsx",
     "fix:format": "prettier --write ./src",
@@ -38,6 +41,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@icons-pack/react-simple-icons": "^5.11.0",
+    "@inlang/cli": "^0.10.1",
     "@marsidev/react-turnstile": "^0.0.7",
     "@next-auth/prisma-adapter": "^1.0.6",
     "@next/bundle-analyzer": "^13.4.4",