From 0918ab73498ed57f310d2c3ffeeee8c8aff859b6 Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Tue, 30 Jan 2024 18:07:16 +0000 Subject: [PATCH] update language settings --- app/i18n/settings.ts | 89 ++++++++++++++++++++++++++----- components/site-header-mobile.tsx | 11 ++-- components/site-header.tsx | 10 ++-- config/site.ts | 3 +- hooks/useAppSettings.ts | 9 +++- 5 files changed, 97 insertions(+), 25 deletions(-) diff --git a/app/i18n/settings.ts b/app/i18n/settings.ts index 87ebeb0..7c2f64d 100644 --- a/app/i18n/settings.ts +++ b/app/i18n/settings.ts @@ -1,27 +1,90 @@ import type { InitOptions } from "i18next" +import { siteConfig } from "@/config/site" + export const fallbackLng = "en" export const languages = [fallbackLng, "it", "ko", "fr", "zh-CN", "es"] as const export type LocaleTypes = (typeof languages)[number] export const defaultNS = "translation" export const cookieName = "i18next" -export const LanguageMapping: Record = { - en: "English", - it: "Italiano", - ko: "한국어", - fr: "Français", - "zh-CN": "中文", - 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: "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: "Chinese simpl.", + enabled: false, + }, + { + key: "zh-TW", + label: "Chinese trad.", + enabled: false, + }, + { + key: "es", + label: "Español", + 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 index 7ebfa05..8c208df 100644 --- a/components/site-header-mobile.tsx +++ b/components/site-header-mobile.tsx @@ -10,6 +10,7 @@ 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, @@ -17,12 +18,13 @@ import { 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"]) => { > - {LanguageMapping[lang] ?? LanguageMapping["en"]} + {activeLanguageLabel} {isOpen && (
- {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 ( @@ -34,7 +30,7 @@ export function SiteHeader({ lang }: SiteHeaderProps) {
- {LanguageMapping[lang] ?? LanguageMapping["en"]} + {activeLanguageLabel}
} diff --git a/config/site.ts b/config/site.ts index 922f61f..3720739 100644 --- a/config/site.ts +++ b/config/site.ts @@ -1,7 +1,8 @@ export type SiteConfig = typeof siteConfig export const siteConfig = { - showLanguageSwitcher: true, // 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 index c4af3c7..8482ebe 100644 --- 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, } }