Dynamicly load locale files from config

README.md

@@ -174,6 +174,7 @@ Navigate to the `client` directory and find the `config.js` file. This file cont
 ##### Parameters
 | Name | Type | Description |
 | ---- | ---- | ----------- |
+| `availableLocales` | Array<String> | Available locales for the website. |
 | `supportInviteUrl` | String | URL for the your Discord support server invite. Used in the many places in the website. |
 | `docsUrl` | String | URL for the your website documentation website. |
 | `api.url` | String | Base API URL for the website. In development, it will be `http://localhost:3001`. |
@@ -190,6 +191,7 @@ Navigate to the `client` directory and find the `config.js` file. This file cont
 | `customHostnames` | Array<String> | Custom hostnames for the profiles. You may need to change this to your own custom hostnames. |
 
 > [!NOTE]
+> - The `availableLocales` value is used for the available locales for the website. You can change these values to your own available locales. Locale files should be in the `client/locales` directory with the format `en.json`, `tr.json`, etc. You can add new locale files to this directory and add the locale key to the `availableLocales` value.
 > - The `supportInviteUrl` and `docsUrl` values are used in the website for the support server and documentation links. You can change these values to your own support server and documentation links.
 > - The `api.url` value is used for making API requests from the client to the server. You should change this value to your own API URL.
 > - The `analytics.url`, `analytics.script`, `analytics.websiteId`, and `analytics.domains` values are used for setting up analytics on the website. We use [Umami Analytics](https://umami.is) for analytics. Any other analytics service is not supported.

client/app/components/Providers/Auth/index.jsx

@@ -5,6 +5,7 @@ import useAuthStore from '@/stores/auth';
 import getAuthenticatedUser from '@/lib/request/auth/getAuthenticatedUser';
 import useLanguageStore from '@/stores/language';
 import useGeneralStore from '@/stores/general';
+import config from '@/config';
 
 export default function AuthProvider({ children }) {
   const setUser = useAuthStore(state => state.setUser);
@@ -20,7 +21,7 @@ export default function AuthProvider({ children }) {
       })
       .catch(() => setUser(null))
       .finally(() => {
-        setLanguage('en');
+        setLanguage(config.availableLocales.find(locale => locale.default).code);
         setShowFullPageLoading(false);
       });
 

client/config.js

@@ -20,7 +20,24 @@ import { IoIosChatboxes } from 'react-icons/io';
 import { PiWaveformBold } from 'react-icons/pi';
 
 const config = {
-  __DISABLE_POST_HUG_ON_DEVELOPMENT: true,
+  availableLocales: [
+    {
+      name: 'English',
+      code: 'en',
+      flag: '🇺🇸',
+      default: true
+    },
+    {
+      name: 'Turkish',
+      code: 'tr',
+      flag: '🇹🇷'
+    },
+    {
+      name: 'Azerbaijani',
+      code: 'az',
+      flag: '🇦🇿'
+    }
+  ],
   showStandoutProductAds: true,
   supportInviteUrl: 'https://invite.discord.place',
   docsUrl: 'https://docs.discord.place',

client/locales/az.json

@@ -0,0 +1,3 @@
+{
+  "hello": "world"
+}

client/locales/tr.json

@@ -0,0 +1,3 @@
+{
+  "hello": "world"
+}

client/stores/language/index.js

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 import i18n from 'i18next';
-import en from '@/locales/en.json';
+import config from '@/config';
 
 i18n.init({
   fallbackLng: 'en',
@@ -14,11 +14,21 @@ i18n.init({
   }
 });
 
+const localeContents = {};
+
+config.availableLocales
+  .map(async locale => {
+    const file = await import(`../../locales/${locale.code}.json`).catch(() => null);
+    if (!file) throw new Error(`Failed to load locale file for ${locale.code} at /locales/${locale.code}.json`);
+
+    localeContents[locale.code] = file.default;
+  });
+
 const useLanguageStore = create(set => ({
   language: 'loading',
   setLanguage: async language => {
-    const availableLanguages = ['en'];
-    if (!availableLanguages.includes(language)) language = 'en';
+    const availableLanguages = config.availableLocales.map(locale => locale.code);
+    if (!availableLanguages.includes(language)) language = config.availableLocales.find(locale => locale.default).code;
 
     set({ language });
   }
@@ -29,10 +39,7 @@ export function t(key, variables) {
 
   if (language === 'loading') return '';
 
-  switch (language) {
-    case 'en':
-      i18n.addResourceBundle('en', 'translation', en, true, true);
-  }
+  i18n.addResourceBundle(language, 'translation', localeContents[language], true, true);
 
   return i18n.t(key, variables);
 }