Merge pull request #131 from privacy-scaling-explorations/lang-switcher

turn on lang. switcher with language with active translations
privacy-scaling-explorations · Feb 6, 2024 · 8514728 · 8514728
2 parents 40098d6 + f1558c8
commit 8514728
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 27 deletions.
diff --git a/app/i18n/settings.ts b/app/i18n/settings.ts
@@ -1,28 +1,99 @@
 import type { InitOptions } from "i18next"
 
+import { siteConfig } from "@/config/site"
+
 export const fallbackLng = "en"
-export const languages = [fallbackLng, "it", "ko", "fr", "zh-CN", "zh-TW", "es"] as const
+export const languages = [
+  fallbackLng,
+  "it",
+  "ko",
+  "fr",
+  "zh-CN",
+  "zh-TW",
+  "es",
+] as const
 export type LocaleTypes = (typeof languages)[number]
 export const defaultNS = "translation"
 export const cookieName = "i18next"
 
-export const LanguageMapping: Record<string, string> = {
-  en: "English",
-  it: "Italiano",
-  ko: "한국어",
-  fr: "Français",
-  "zh-CN": "中文",
-  "zh-TW": "正體中文",
-  es: "Español",
+interface Language {
+  key: string
+  label: string
+  enabled?: boolean
 }
 
+/**
+ * List of languages
+ * @param key - language key
+ * @param label - language label
+ * @param enabled - enable or disable language (when disabled, it will not be shown in the language switcher)
+ */
+export const languageList: Language[] = [
+  {
+    key: "en",
+    label: "English",
+    enabled: true,
+  },
+  {
+    key: "es",
+    label: "Español",
+    enabled: true,
+  },
+  {
+    key: "zh-TW",
+    label: "正體中文",
+    enabled: true,
+  },
+  {
+    key: "it",
+    label: "Italiano",
+    enabled: true,
+  },
+  {
+    key: "ko",
+    label: "한국어",
+    enabled: false,
+  },
+  {
+    key: "fr",
+    label: "Français",
+    enabled: false,
+  },
+  {
+    key: "de",
+    label: "Deutsch",
+    enabled: false,
+  },
+  {
+    key: "ar",
+    label: "Arabic",
+    enabled: false,
+  },
+  {
+    key: "zh-CN",
+    label: "中文",
+    enabled: false,
+  },
+
+  {
+    key: "ja",
+    label: "日本語",
+    enabled: false,
+  },
+]
+
+// list of only enabled languages
 export const languagesItems: { label: string; value: string }[] =
-  Object.entries(LanguageMapping).map(([value, label]) => {
-    return {
-      label,
-      value,
-    }
-  }) ?? []
+  languageList
+    .filter((item) =>
+      siteConfig.showOnlyEnabledLanguages ? item.enabled : true
+    )
+    .map(({ key: value, label }) => {
+      return {
+        label,
+        value,
+      }
+    }) ?? []
 
 export function getOptions(lng = fallbackLng, ns = defaultNS): InitOptions {
   return {

diff --git a/components/site-header-mobile.tsx b/components/site-header-mobile.tsx
@@ -10,19 +10,21 @@ import HeaderVector from "@/public/icons/menu-burger.svg"
 import { LangProps } from "@/types/common"
 import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
+import { useAppSettings } from "@/hooks/useAppSettings"
 import {
   Discord,
   Github,
   Mirror,
   Twitter,
 } from "@/components/svgs/social-medias"
 import { useTranslation } from "@/app/i18n/client"
-import { LanguageMapping, languagesItems } from "@/app/i18n/settings"
+import { languageList } from "@/app/i18n/settings"
 
 import { Icons } from "./icons"
 
 const LanguageSwitcher = ({ lang }: LangProps["params"]) => {
   const [isOpen, setIsOpen] = useState(false)
+  const { activeLanguageLabel } = useAppSettings(lang)
 
   if (!siteConfig?.showLanguageSwitcher) return null
 
@@ -37,13 +39,16 @@ const LanguageSwitcher = ({ lang }: LangProps["params"]) => {
       >
         <Icons.globe className="text-white" size={22} fill="white" />
         <span className="text-base font-medium uppercase text-white">
-          {LanguageMapping[lang] ?? LanguageMapping["en"]}
+          {activeLanguageLabel}
         </span>
         <Icons.arrowDown />
       </button>
       {isOpen && (
         <div className="ml-8 mt-4 flex flex-col gap-1">
-          {languagesItems?.map(({ label, value: languageKey }, index) => {
+          {languageList?.map(({ label, key: languageKey, enabled }, index) => {
+            const showLanguage = siteConfig.showOnlyEnabledLanguages && !enabled
+
+            if (showLanguage) return null // skip disabled languages
             const isActive = languageKey === lang
             return (
               <Link

diff --git a/components/site-header.tsx b/components/site-header.tsx
@@ -3,11 +3,7 @@
 import { siteConfig } from "@/config/site"
 import { useAppSettings } from "@/hooks/useAppSettings"
 import { MainNav } from "@/components/main-nav"
-import {
-  LanguageMapping,
-  LocaleTypes,
-  languagesItems,
-} from "@/app/i18n/settings"
+import { LocaleTypes, languagesItems } from "@/app/i18n/settings"
 
 import { Icons } from "./icons"
 import { SiteHeaderMobile } from "./site-header-mobile"
@@ -19,7 +15,7 @@ type SiteHeaderProps = {
 }
 
 export function SiteHeader({ lang }: SiteHeaderProps) {
-  const { MAIN_NAV } = useAppSettings(lang)
+  const { MAIN_NAV, activeLanguageLabel } = useAppSettings(lang)
 
   return (
     <header className="sticky top-0 z-40 w-full bg-white shadow-sm">
@@ -34,7 +30,7 @@ export function SiteHeader({ lang }: SiteHeaderProps) {
                   <div className="flex items-center gap-1">
                     <Icons.globe size={22} />
                     <span className="!text-base !font-normal text-tuatara-950">
-                      {LanguageMapping[lang] ?? LanguageMapping["en"]}
+                      {activeLanguageLabel}
                     </span>
                   </div>
                 }

diff --git a/config/site.ts b/config/site.ts
@@ -1,7 +1,8 @@
 export type SiteConfig = typeof siteConfig
 
 export const siteConfig = {
-  showLanguageSwitcher: false, // TODO: enable when we have more languages
+  showLanguageSwitcher: true, // enable when we have more languages
+  showOnlyEnabledLanguages: true, // enable to show only enabled languages
   name: "Privacy & Scaling Explorations",
   description:
     "Enhancing Ethereum through cryptographic research and collective experimentation.",

diff --git a/hooks/useAppSettings.ts b/hooks/useAppSettings.ts
@@ -1,9 +1,15 @@
 import { MainNavProps } from "@/components/main-nav"
 import { useTranslation } from "@/app/i18n/client"
-import { LocaleTypes } from "@/app/i18n/settings"
+import { LocaleTypes, fallbackLng, languageList } from "@/app/i18n/settings"
 
 export function useAppSettings(lang: LocaleTypes) {
   const { t } = useTranslation(lang, "common")
+
+  // get the active language label
+  const activeLanguage =
+    languageList.find((language) => language.key === lang)?.label ??
+    languageList.find((language) => language.key === fallbackLng)?.label
+
   const MAIN_NAV: MainNavProps["items"] = [
     {
       title: t("menu.home"),
@@ -48,5 +54,6 @@ export function useAppSettings(lang: LocaleTypes) {
 
   return {
     MAIN_NAV,
+    activeLanguageLabel: activeLanguage,
   }
 }