Download translations on build, use API in dev mode

frontend/.env

@@ -0,0 +1,2 @@
+VITE_TOLGEE_API_URL=https://translate.ficsit.app
+VITE_TOLGEE_API_KEY=tgpak_grpxa5lfgvzdsnluovswknluonrtc3rxnzzw2nttmjww6

frontend/.gitignore

@@ -87,8 +87,5 @@ typings/
 # Yarn Integrity file
 .yarn-integrity
 
-# dotenv environment variables file
-.env
-
 # next.js build output
 .next

frontend/codegen.yml

@@ -2,7 +2,7 @@ overwrite: true
 schema: 'https://api.ficsit.app/v2/query'
 documents: 'src/**/*.graphql'
 generates:
-  ./src/lib/generated/graphql.ts:
+  ./src/lib/generated/graphql/graphql.ts:
     plugins:
       - add:
           content: '/* eslint-disable */'
@@ -11,7 +11,7 @@ generates:
       - 'typed-document-node'
     config:
       useTypeImports: true
-  ./src/lib/generated/graphql.schema.urql.json:
+  ./src/lib/generated/graphql/graphql.schema.urql.json:
     plugins:
       - 'urql-introspection'
     config:
@@ -29,4 +29,4 @@ config:
     AnnouncementID: string
     BootstrapVersionID: string
     GuideID: string
-    UserID: string
+    UserID: string

frontend/package.json

@@ -6,14 +6,18 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "postinstall": "run-s graphql-codegen",
+    "postinstall": "run-p graphql-codegen translations",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "eslint --ignore-path .gitignore .",
     "format": "eslint --ignore-path .gitignore --fix .",
     "graphql-codegen": "graphql-codegen --config codegen.yml",
     "graphql-codegen:watch": "graphql-codegen --config codegen.yml --watch",
-    "generate:watch": "run-p graphql-codegen:watch"
+    "generate:watch": "run-p graphql-codegen:watch",
+    "translations": "node ./tools/translations.cjs",
+    "translations:pull": "tolgee pull -s untranslated -s translated -s reviewed",
+    "translations:compare": "tolgee compare",
+    "translations:sync": "tolgee sync -Y"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.0",
@@ -65,6 +69,7 @@
     "@types/semver": "^7.5.6",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
+    "dotenv": "^16.4.5",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.0",

frontend/src/App.svelte

@@ -3,7 +3,7 @@
   import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from '@floating-ui/dom';
   import { Modal, initializeStores, storePopup } from '@skeletonlabs/skeleton';
   import { FormatIcu } from '@tolgee/format-icu';
-  import { FormatSimple, Tolgee, TolgeeProvider } from '@tolgee/svelte';
+  import { DevTools, FormatSimple, Tolgee, TolgeeProvider } from '@tolgee/svelte';
   import { setContextClient } from '@urql/svelte';
 
   import T, { translationElementPart } from '$lib/components/T.svelte';
@@ -33,10 +33,16 @@
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow, size });
   
   const tolgee = Tolgee()
+    .use(DevTools())
     .use(FormatSimple())
     .use(FormatIcu())
     .init({
       language: 'en',
+      fallbackLanguage: 'en',
+      
+      apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
+      apiKey: import.meta.env.VITE_TOLGEE_API_KEY,
+
       staticData: i18n,
     });
 

frontend/src/lib/core/graphql.ts

@@ -3,7 +3,7 @@ import { persistedExchange } from '@urql/exchange-persisted';
 import type { Client } from '@urql/svelte';
 import { createClient, fetchExchange } from '@urql/svelte';
 
-import schema from '$lib/generated/graphql.schema.urql.json';
+import { schema } from '$lib/generated';
 
 export function initializeGraphQLClient(apiEndpointURL: string): Client {
   return createClient({

frontend/src/lib/generated/.gitignore

@@ -1,3 +1,5 @@
-graphql.schema.urql.json
-graphql.ts
-i18n/
+*
+!*/
+
+!/index.ts
+!graphql/index.ts

frontend/src/lib/generated/graphql/index.ts

@@ -0,0 +1,4 @@
+export * from './graphql';
+import schema from './graphql.schema.urql.json';
+
+export { schema };

frontend/tools/translations.cjs

@@ -0,0 +1,30 @@
+const child_process = require('child_process');
+const fs = require('fs');
+const path = require('path');
+require('dotenv').config();
+
+const generatedDir = path.join(__dirname, '../src/lib/generated');
+const i18nDir = path.join(generatedDir, 'i18n');
+const i18nFile = path.join(i18nDir, 'index.ts');
+
+if (fs.existsSync(i18nDir)) {
+  console.log('Clearing i18n directory');
+  fs.rmSync(i18nDir, { recursive: true });
+  fs.mkdirSync(i18nDir);
+}
+
+console.log('Pulling translations');
+child_process.execSync(`pnpm translations:pull -ak ${process.env.VITE_TOLGEE_API_KEY}`, { stdio: 'inherit' });
+
+const langs = fs.readdirSync(i18nDir).map(file => file.replace('.json', ''));
+console.log('Languages:', langs.join(', '));
+
+const fileContent = '/* eslint-disable */\n' 
+  + langs.map(lang => `import ${lang.replace('-', '_')} from './${lang}.json';`).join('\n') 
+  + '\n\n' 
+  + 'export const i18n = {\n' 
+  + langs.map(lang => `  "${lang}": ${lang.replace('-', '_')},`).join('\n') 
+  + '\n};\n';
+
+fs.writeFileSync(i18nFile, fileContent);
+console.log('Translations generated');

frontend/tsconfig.json

@@ -23,6 +23,7 @@
 				"./src/lib/generated/wailsjs/*"
 			]
 		},
+    "types": ["vite/client"],
   },
 	"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "*.ts"],
 	"exclude": ["src/lib/generated/wailsjs/**/*"]