✨ Add crowdin live-translate feature!

next-i18next.config.js

@@ -6,6 +6,7 @@ module.exports = {
     defaultLocale: 'en',
     locales: [
       'en',
+      'cr',
       'da',
       'he',
       'de',
@@ -33,7 +34,7 @@ module.exports = {
       'hu'
     ],
 
-    localeDetection: true,
+    localeDetection: false,
   },
   returnEmptyString: false,
   appendNamespaceToCIMode: true,

src/pages/_app.tsx

@@ -61,7 +61,7 @@ function App(
   const analyticsEnabled = pageProps.analyticsEnabled ?? true;
   // TODO: make mapping from our locales to moment locales
   const language = getLanguageByCode(pageProps.session?.user?.language ?? 'en');
-  require(`dayjs/locale/${language.locale}.js`);
+  if (language.locale !== 'cr') require(`dayjs/locale/${language.locale}.js`);
   dayjs.locale(language.locale);
 
   const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>(
@@ -101,12 +101,18 @@ function App(
   return (
     <>
       <CommonHead />
+      {pageProps.locale === 'cr' && (
+        <>
+          <Script type="text/javascript" src="//cdn.crowdin.com/jipt/jipt.js" />
+          <Script type="text/javascript">var _jipt = []; _jipt.push(['project', 'homarr']);</Script>
+        </>
+      )}
       {analyticsEnabled === true && (
         <Script
-        src="https://umami.homarr.dev/script.js"
-        data-website-id="f133f10c-30a7-4506-889c-3a803f328fa4"
-        strategy="lazyOnload"
-      />
+          src="https://umami.homarr.dev/script.js"
+          data-website-id="f133f10c-30a7-4506-889c-3a803f328fa4"
+          strategy="lazyOnload"
+        />
       )}
       <SessionProvider session={pageProps.session}>
         <ColorSchemeProvider {...pageProps}>

src/pages/user/preferences.tsx

@@ -71,7 +71,6 @@ const SettingsComponent = ({
   boardsData: RouterOutputs['boards']['all'];
 }) => {
   const languagesData = languages.map((language) => ({
-    image: 'https://img.icons8.com/clouds/256/000000/futurama-bender.png',
     label: language.originalName,
     description: language.translatedName,
     value: language.shortName,
@@ -199,8 +198,8 @@ const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
   ({ image, label, description, country, ...others }: ItemProps, ref) => (
     <div ref={ref} {...others}>
       <Group noWrap>
-        <span className={`fi fi-${country?.toLowerCase()}`}></span>
-
+        {country !== 'CROWDIN' && <span className={`fi fi-${country?.toLowerCase()}`}></span>}
+        {country === 'CROWDIN' && <img src={'https://support.crowdin.com/assets/logos/crowdin-dark-symbol.png'} alt={label} width={16} height={16} />}
         <div>
           <Text size="sm">{label}</Text>
           <Text size="xs" opacity={0.65}>

src/tools/language.ts

@@ -2,7 +2,6 @@ export type Language = {
   shortName: string;
   originalName: string;
   translatedName: string;
-  emoji: string;
 
   /**
    * The country identified b<y the ISO-3166 alpha 2 code:
@@ -18,7 +17,6 @@ export const languages = [
     shortName: 'de',
     originalName: 'Deutsch',
     translatedName: 'German',
-    emoji: '🇩🇪',
     country: 'DE',
     locale: 'de',
   },
@@ -26,7 +24,6 @@ export const languages = [
     shortName: 'en',
     originalName: 'English',
     translatedName: 'English',
-    emoji: '🇬🇧',
     country: 'GB',
     locale: 'en-gb',
   },
@@ -35,7 +32,6 @@ export const languages = [
     shortName: 'da',
     originalName: 'Dansk',
     translatedName: 'Danish',
-    emoji: '🇩🇰',
     country: 'DK',
     locale: 'da',
   },
@@ -44,7 +40,6 @@ export const languages = [
     shortName: 'he',
     originalName: 'עברית',
     translatedName: 'Hebrew',
-    emoji: '🇮🇱',
     country: 'IL',
     locale: 'he',
   },
@@ -52,7 +47,6 @@ export const languages = [
     shortName: 'es',
     originalName: 'Español',
     translatedName: 'Spanish',
-    emoji: '🇪🇸',
     country: 'ES',
     locale: 'es',
   },
@@ -60,7 +54,6 @@ export const languages = [
     shortName: 'fr',
     originalName: 'Français',
     translatedName: 'French',
-    emoji: '🇫🇷',
     country: 'FR',
     locale: 'fr',
   },
@@ -68,7 +61,6 @@ export const languages = [
     shortName: 'it',
     originalName: 'Italiano',
     translatedName: 'Italian',
-    emoji: '🇮🇹',
     country: 'IT',
     locale: 'it',
   },
@@ -76,7 +68,6 @@ export const languages = [
     shortName: 'ja',
     originalName: '日本語',
     translatedName: 'Japanese',
-    emoji: '🇯🇵',
     country: 'JP',
     locale: 'ja',
   },
@@ -84,24 +75,14 @@ export const languages = [
     shortName: 'ko',
     originalName: '한국어',
     translatedName: 'Korean',
-    emoji: '🇰🇷',
     country: 'KR',
     locale: 'ko',
   },
-  {
-    shortName: 'lol',
-    originalName: 'LOLCAT',
-    translatedName: 'LOLCAT',
-    emoji: '🐱',
-    country: 'LOL',
-    locale: 'en-gb',
-  },
   // Norwegian
   {
     shortName: 'no',
     originalName: 'Norsk',
     translatedName: 'Norwegian',
-    emoji: '🇳🇴',
     country: 'NO',
     locale: 'nb',
   },
@@ -110,7 +91,6 @@ export const languages = [
     shortName: 'sk',
     originalName: 'Slovenčina',
     translatedName: 'Slovak',
-    emoji: '🇸🇰',
     country: 'SK',
     locale: 'sk',
   },
@@ -118,7 +98,6 @@ export const languages = [
     shortName: 'nl',
     originalName: 'Nederlands',
     translatedName: 'Dutch',
-    emoji: '🇳🇱',
     country: 'NL',
     locale: 'nl',
   },
@@ -126,7 +105,6 @@ export const languages = [
     shortName: 'pl',
     originalName: 'Polski',
     translatedName: 'Polish',
-    emoji: '🇵🇱',
     country: 'PL',
     locale: 'pl',
   },
@@ -134,7 +112,6 @@ export const languages = [
     shortName: 'pt',
     originalName: 'Português',
     translatedName: 'Portuguese',
-    emoji: '🇵🇹',
     country: 'PT',
     locale: 'pt',
   },
@@ -142,7 +119,6 @@ export const languages = [
     shortName: 'ru',
     originalName: 'Русский',
     translatedName: 'Russian',
-    emoji: '🇷🇺',
     country: 'RU',
     locale: 'ru',
   },
@@ -150,7 +126,6 @@ export const languages = [
     shortName: 'sl',
     originalName: 'Slovenščina',
     translatedName: 'Slovenian',
-    emoji: '🇸🇮',
     country: 'SI',
     locale: 'sl',
   },
@@ -158,7 +133,6 @@ export const languages = [
     shortName: 'sv',
     originalName: 'Svenska',
     translatedName: 'Swedish',
-    emoji: '🇸🇪',
     country: 'SE',
     locale: 'sv',
   },
@@ -166,7 +140,6 @@ export const languages = [
     shortName: 'uk',
     originalName: 'Українська',
     translatedName: 'Ukrainian',
-    emoji: '🇺🇦',
     country: 'UA',
     locale: 'uk',
   },
@@ -175,7 +148,6 @@ export const languages = [
     shortName: 'vi',
     originalName: 'Tiếng Việt',
     translatedName: 'Vietnamese',
-    emoji: '🇻🇳',
     country: 'VN',
     locale: 'vi',
   },
@@ -183,14 +155,12 @@ export const languages = [
     shortName: 'zh',
     originalName: '中文',
     translatedName: 'Chinese',
-    emoji: '🇨🇳',
     country: 'CN',
     locale: 'zh-cn',
   },
   {
     originalName: 'Ελληνικά',
     translatedName: 'Greek',
-    emoji: '🇬🇷',
     country: 'GR',
     shortName: 'gr',
     locale: 'el',
@@ -199,7 +169,6 @@ export const languages = [
     shortName: 'tr',
     originalName: 'Türkçe',
     translatedName: 'Turkish',
-    emoji: '🇹🇷',
     country: 'TR',
     locale: 'tr',
   },
@@ -207,7 +176,6 @@ export const languages = [
     shortName: 'lv',
     originalName: 'Latvian',
     translatedName: 'Latvian',
-    emoji: '🇱🇻',
     country: 'LV',
     locale: 'lv',
   },
@@ -215,7 +183,6 @@ export const languages = [
     shortName: 'hr',
     originalName: 'Hrvatski',
     translatedName: 'Croatian',
-    emoji: '🇭🇷',
     country: 'HR',
     locale: 'hr',
   },
@@ -224,10 +191,17 @@ export const languages = [
     shortName: 'hu',
     originalName: 'Magyar',
     translatedName: 'Hungarian',
-    emoji: '🇭🇺',
     country: 'HU',
     locale: 'hu',
   },
+  // Crowdin Live translate
+  {
+    shortName: 'cr',
+    originalName: 'Crowdin',
+    translatedName: '(Live translation)',
+    country: 'CROWDIN',
+    locale: 'cr',
+  },
 ] as const satisfies Readonly<Language[]>;
 
 export const getLanguageByCode = (code: string | null) =>