feat(language-selector): add languageMapping prop to rename languages…

… of choice

closes #116

README.md

@@ -358,13 +358,21 @@ import { LanguageSelector } from "astro-i18next/components";
 ---
 
 <LanguageSelector showFlag={true} class="my-select-class" />
+
+<!-- LanguageSelector with custom language naming -->
+<LanguageSelector
+  showFlag={true}
+  languageMapping={{ en: "Anglais" }}
+  class="my-select-class"
+/>
 ```
 
 #### LanguageSelector Props
 
-| Prop name | Type (default)     | Description                                               |
-| --------- | ------------------ | --------------------------------------------------------- |
-| showFlag  | ?boolean (`false`) | Choose to display the language emoji before language name |
+| Prop name       | Type (default)        | Description                                                                                 |
+| --------------- | --------------------- | ------------------------------------------------------------------------------------------- |
+| showFlag        | ?boolean (`false`)    | Choose to display the language emoji before language name                                   |
+| languageMapping | ?object (`undefined`) | Rewrite language names by setting the locale as key and the wording of your choice as value |
 
 ### HeadHrefLangs component
 

src/components/LanguageSelector.astro

@@ -4,24 +4,39 @@ import { localizePath } from "../..";
 import localeEmoji from "locale-emoji";
 import ISO6991 from "iso-639-1";
 
+interface languageMapping {
+  [localeCode: string]: string;
+}
+
 export interface Props extends astroHTML.JSX.SelectHTMLAttributes {
   showFlag?: boolean;
+  languageMapping?: languageMapping;
 }
 
 const supportedLanguages = i18next.languages;
 const currentLanguage = i18next.language;
 
 const { pathname } = Astro.url;
 
-const { showFlag = false, ...attributes } = Astro.props;
+const { showFlag = false, languageMapping, ...attributes } = Astro.props;
 ---
 
 <select onchange="location = this.value;" {...attributes}>
   {
     supportedLanguages.map((supportedLanguage: string) => {
       let value = localizePath(pathname, supportedLanguage);
       const flag = showFlag ? localeEmoji(supportedLanguage) + " " : "";
-      const nativeName = ISO6991.getNativeName(supportedLanguage);
+
+      let nativeName = "";
+      if (
+        languageMapping &&
+        languageMapping.hasOwnProperty(supportedLanguage)
+      ) {
+        nativeName = languageMapping[supportedLanguage];
+      } else {
+        nativeName = ISO6991.getNativeName(supportedLanguage);
+      }
+
       const label = flag + nativeName;
 
       return (