Language selection added

components/Languages.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react";
+
+type Props = {
+    langs: [string, string][]
+};
+
+const Languages: FC<Props> = ({ langs }) => (
+    <>
+        {langs.map(([code, name]) => (
+            <option value={code} key={code}>{name}</option>
+        ))}
+    </>
+);
+
+export default Languages;

pages/[[...slug]].tsx

@@ -3,6 +3,8 @@ import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from "next";
 import { useRouter } from "next/router";
 import Error from "next/error";
 import { googleScrape, extractSlug } from "../utils/translate";
+import Languages from "../components/Languages";
+import { languages, exceptions } from "../utils/languages.json";
 
 const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ translation, error, initial }) => {
     if (error)
@@ -10,9 +12,17 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ translation,
 
     const router = useRouter();
 
+    const [source, setSource] = useState("auto");
+    const [target, setTarget] = useState("en");
     const [query, setQuery] = useState("");
 
+    const updateTranslation = () => {
+        query && router.push(`/${source}/${target}/${query}`);
+    };
+
     useEffect(() => {
+        initial?.source && setSource(initial.source);
+        initial?.target && setTarget(initial.target);
         initial?.query && setQuery(initial.query);
     }, [initial]);
 
@@ -20,12 +30,34 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ translation,
         if (!query || query === initial?.query)
             return;
 
-        const timeout = setTimeout(() => router.push(`/auto/en/${query}`), 2000);
+        const timeout = setTimeout(updateTranslation, 1500);
         return () => clearTimeout(timeout);
     }, [query]);
 
+    useEffect(updateTranslation, [source, target]);
+
+    const langs = Object.entries(languages);
+    const sourceLangs = langs.filter(([code]) => !exceptions.source.includes(code));
+    const targetLangs = langs.filter(([code]) => !exceptions.target.includes(code));
+
     return (
         <div>
+            <div>
+                <label htmlFor="source">
+                    Source:
+                </label>
+                <select id="source" value={source} onChange={e => setSource(e.target.value)}>
+                    <Languages langs={sourceLangs} />
+                </select>
+            </div>
+            <div>
+                <label htmlFor="target">
+                    Target:
+                </label>
+                <select id="target" value={target} onChange={e => setTarget(e.target.value)}>
+                    <Languages langs={targetLangs} />
+                </select>
+            </div>
             <div>
                 <label htmlFor="query">
                     Query:

utils/languages.json

@@ -0,0 +1,127 @@
+{
+  "languages": {
+    "auto": "Detect",
+    "af": "Afrikaans",
+    "sq": "Albanian",
+    "am": "Amharic",
+    "ar": "Arabic",
+    "hy": "Armenian",
+    "az": "Azerbaijani",
+    "eu": "Basque",
+    "be": "Belarusian",
+    "bn": "Bengali",
+    "bs": "Bosnian",
+    "bg": "Bulgarian",
+    "ca": "Catalan",
+    "ceb": "Cebuano",
+    "ny": "Chichewa",
+    "zh": "Chinese",
+    "zh_HANT": "Chinese (Traditional)",
+    "co": "Corsican",
+    "hr": "Croatian",
+    "cs": "Czech",
+    "da": "Danish",
+    "nl": "Dutch",
+    "en": "English",
+    "eo": "Esperanto",
+    "et": "Estonian",
+    "tl": "Filipino",
+    "fi": "Finnish",
+    "fr": "French",
+    "fy": "Frisian",
+    "gl": "Galician",
+    "ka": "Georgian",
+    "de": "German",
+    "el": "Greek",
+    "gu": "Gujarati",
+    "ht": "Haitian Creole",
+    "ha": "Hausa",
+    "haw": "Hawaiian",
+    "iw": "Hebrew",
+    "hi": "Hindi",
+    "hmn": "Hmong",
+    "hu": "Hungarian",
+    "is": "Icelandic",
+    "ig": "Igbo",
+    "id": "Indonesian",
+    "ga": "Irish",
+    "it": "Italian",
+    "ja": "Japanese",
+    "jw": "Javanese",
+    "kn": "Kannada",
+    "kk": "Kazakh",
+    "km": "Khmer",
+    "rw": "Kinyarwanda",
+    "ko": "Korean",
+    "ku": "Kurdish (Kurmanji)",
+    "ky": "Kyrgyz",
+    "lo": "Lao",
+    "la": "Latin",
+    "lv": "Latvian",
+    "lt": "Lithuanian",
+    "lb": "Luxembourgish",
+    "mk": "Macedonian",
+    "mg": "Malagasy",
+    "ms": "Malay",
+    "ml": "Malayalam",
+    "mt": "Maltese",
+    "mi": "Maori",
+    "mr": "Marathi",
+    "mn": "Mongolian",
+    "my": "Myanmar (Burmese)",
+    "ne": "Nepali",
+    "no": "Norwegian",
+    "or": "Odia (Oriya)",
+    "ps": "Pashto",
+    "fa": "Persian",
+    "pl": "Polish",
+    "pt": "Portuguese",
+    "pa": "Punjabi",
+    "ro": "Romanian",
+    "ru": "Russian",
+    "sm": "Samoan",
+    "gd": "Scots Gaelic",
+    "sr": "Serbian",
+    "st": "Sesotho",
+    "sn": "Shona",
+    "sd": "Sindhi",
+    "si": "Sinhala",
+    "sk": "Slovak",
+    "sl": "Slovenian",
+    "so": "Somali",
+    "es": "Spanish",
+    "su": "Sundanese",
+    "sw": "Swahili",
+    "sv": "Swedish",
+    "tg": "Tajik",
+    "ta": "Tamil",
+    "tt": "Tatar",
+    "te": "Telugu",
+    "th": "Thai",
+    "tr": "Turkish",
+    "tk": "Turkmen",
+    "uk": "Ukrainian",
+    "ur": "Urdu",
+    "ug": "Uyghur",
+    "uz": "Uzbek",
+    "vi": "Vietnamese",
+    "cy": "Welsh",
+    "xh": "Xhosa",
+    "yi": "Yiddish",
+    "yo": "Yoruba",
+    "zu": "Zulu"
+  },
+  "exceptions": {
+    "source": [
+      "zh_HANT"
+    ],
+    "target": [
+      "auto"
+    ]
+  },
+  "mappings": {
+    "target": {
+      "zh_HANT": "zh-TW"
+    }
+  }
+}

utils/translate.ts

@@ -1,4 +1,7 @@
 import cheerio from "cheerio";
+import { mappings } from "./languages.json";
+
+const isKeyOf = <T extends object>(obj: T) => (key: keyof any): key is keyof T => key in obj;
 
 export async function googleScrape(
     source: string,
@@ -8,7 +11,10 @@ export async function googleScrape(
     translation?: string,
     error?: number
 }> {
-    const res = await fetch(`https://translate.google.com/m?sl=${source}&tl=${target}&q=${encodeURI(query)}`);
+    const newTarget = isKeyOf(mappings.target)(target)
+        ? mappings.target[target]
+        : target;
+    const res = await fetch(`https://translate.google.com/m?sl=${source}&tl=${newTarget}&q=${encodeURI(query)}`);
 
     if (!res.ok)
         return {