🇻🇳 Add Vietnamese Language (#581)

apps/web/languages.json

@@ -0,0 +1,23 @@
+{
+  "ca": "Català",
+  "cs": "Česky",
+  "da": "Dansk",
+  "de": "Deutsch",
+  "en": "English",
+  "es": "Español",
+  "fi": "Suomi",
+  "fr": "Français",
+  "hr": "Hrvatski",
+  "hu": "Magyar",
+  "it": "Italiano",
+  "ko": "한국어",
+  "nl": "Nederlands",
+  "pl": "Polski",
+  "pt": "Português",
+  "pt-BR": "Português - Brasil",
+  "ru": "Pусский",
+  "sk": "Slovenčina",
+  "sv": "Svenska",
+  "vi": "Tiếng Việt",
+  "zh": "汉语"
+}

apps/web/next-i18next.config.js

@@ -1,30 +1,10 @@
 const path = require("path");
+const languages = require("./languages.json");
 
 module.exports = {
   i18n: {
     defaultLocale: "en",
-    locales: [
-      "ca",
-      "cs",
-      "da",
-      "de",
-      "en",
-      "es",
-      "fi",
-      "fr",
-      "hr",
-      "hu",
-      "it",
-      "ko",
-      "nl",
-      "pl",
-      "pt-BR",
-      "pt",
-      "ru",
-      "sk",
-      "sv",
-      "zh",
-    ],
+    locales: Object.keys(languages),
   },
   reloadOnPrerender: process.env.NODE_ENV === "development",
   localePath: path.resolve("./public/locales"),

apps/web/src/components/poll/language-selector.tsx

@@ -3,6 +3,7 @@ import Cookies from "js-cookie";
 import { useTranslation } from "next-i18next";
 
 import ChevronDown from "@/components/icons/chevron-down.svg";
+import languages from "~/languages.json";
 
 export const LanguageSelect: React.FunctionComponent<{
   className?: string;
@@ -21,26 +22,11 @@ export const LanguageSelect: React.FunctionComponent<{
           onChange?.(e.target.value);
         }}
       >
-        <option value="en">English</option>
-        <option value="ca">Català</option>
-        <option value="cs">Česky</option>
-        <option value="zh">汉语</option>
-        <option value="da">Dansk</option>
-        <option value="de">Deutsch</option>
-        <option value="es">Español</option>
-        <option value="fi">Suomi</option>
-        <option value="fr">Français</option>
-        <option value="hr">Hrvatski</option>
-        <option value="it">Italiano</option>
-        <option value="ko">한국어</option>
-        <option value="hu">Magyar</option>
-        <option value="nl">Nederlands</option>
-        <option value="pl">Polski</option>
-        <option value="pt">Português</option>
-        <option value="pt-BR">Português - Brasil</option>
-        <option value="ru">Pусский</option>
-        <option value="sk">Slovenčina</option>
-        <option value="sv">Svenska</option>
+        {Object.entries(languages).map(([code, name]) => (
+          <option key={code} value={code}>
+            {name}
+          </option>
+        ))}
       </select>
       <div className="pointer-events-none absolute inset-y-0 right-2 flex items-center">
         <ChevronDown className="w-5" />

apps/web/src/middleware.ts

@@ -21,6 +21,7 @@ const supportedLocales = [
   "ru",
   "sk",
   "sv",
+  "vi",
   "zh",
 ];
 

apps/web/src/utils/dayjs.tsx

@@ -126,6 +126,11 @@ const dayjsLocales: Record<
     timeFormat: "24h",
     import: () => import("dayjs/locale/zh"),
   },
+  vi: {
+    weekStartsOn: "monday",
+    timeFormat: "24h",
+    import: () => import("dayjs/locale/vi"),
+  },
 };
 
 dayjs.extend(localizedFormat);