update locale menu in order to better reflect website usage and translation status

Author: maltejur

components/head.tsx

@@ -25,10 +25,12 @@ export default function Head({
       {locales.map((locale) => (
         <meta
           property={
-            router.locale === locale ? "og:locale" : "og:locale:alternative"
+            router.locale === locale.code
+              ? "og:locale"
+              : "og:locale:alternative"
           }
-          content={locale}
-          key={locale}
+          content={locale.code}
+          key={locale.code}
         />
       ))}
       <script type="application/ld+json">

components/langSelect/index.tsx

@@ -8,89 +8,37 @@ import {
 } from "@material-ui/core";
 import React from "react";
 import { useRouter } from "next/router";
+import locales from "lib/locales";
 import classes from "./style.module.css";
 
-const languages: { name: string; locale: string; icon: string }[] = [
-  {
-    name: "Deutsch",
-    locale: "de",
-    icon: "de",
-  },
-  {
-    name: "English",
-    locale: "en",
-    icon: "gb",
-  },
-  {
-    name: "Esperanto",
-    locale: "eo",
-    icon: "eo",
-  },
-  {
-    name: "Español",
-    locale: "es",
-    icon: "mx",
-  },
-  // {
-  //   name: "Hindi",
-  //   locale: "hi",
-  //   icon: "india",
-  // },
-  {
-    name: "Hrvatski",
-    locale: "hr",
-    icon: "hr",
-  },
-  {
-    name: "Italiano",
-    locale: "it",
-    icon: "it",
-  },
-  {
-    name: "Malayalam",
-    locale: "ml",
-    icon: "india",
-  },
-  {
-    name: "Ukrainian",
-    locale: "uk",
-    icon: "uk",
-  },
-  {
-    name: "中文(简体)",
-    locale: "zh_Hans",
-    icon: "zh",
-  },
-];
-
 function MenuContent() {
   const router = useRouter();
 
   return (
     <>
-      {languages.map((language) => (
+      {locales.map((locale) => (
         <MenuItem
-          key={language.locale}
-          selected={router.locale === language.locale}
+          key={locale.code}
+          selected={router.locale === locale.code}
           onClick={() => {
             router.push(
               {
                 pathname: router.pathname,
                 query: router.query,
               },
               undefined,
-              { locale: language.locale }
+              { locale: locale.code }
             );
           }}
         >
           <ListItemIcon>
             <img
-              src={`/flags/${language.icon}.svg`}
-              alt={language.icon}
+              src={`/flags/${locale.icon}.svg`}
+              alt={locale.icon}
               className={classes.icon}
             />
           </ListItemIcon>
-          <ListItemText>{language.name}</ListItemText>
+          <ListItemText>{locale.name}</ListItemText>
         </MenuItem>
       ))}
     </>

lib/algorithms.ts

@@ -11,7 +11,7 @@ export async function getAlgorithmSlugs() {
         params: {
           algorithm: file.replace(".json", ""),
         },
-        locale,
+        locale: locale.code,
       }))
   );
 }

lib/categories.ts

@@ -18,7 +18,7 @@ export async function getCategories() {
       params: {
         category: normalize(category),
       },
-      locale,
+      locale: locale.code,
     }))
   );
 }

lib/languages.ts

@@ -11,7 +11,7 @@ export function getLanguages() {
       params: {
         language,
       },
-      locale,
+      locale: locale.code,
     }))
   );
 }

lib/locales.js

@@ -1,11 +1,49 @@
-module.exports = [
-    "de",
-    "en",
-    "eo",
-    "es",
-    "hr",
-    "it",
-    "ml",
-    "uk",
-    "zh_Hans"
+const locales = [
+  {
+    name: "English",
+    code: "en",
+    icon: "gb",
+  },
+  {
+    name: "简体中文",
+    code: "zh_Hans",
+    icon: "zh",
+  },
+  {
+    name: "Malayalam",
+    code: "ml",
+    icon: "india",
+  },
+  {
+    name: "Deutsch",
+    code: "de",
+    icon: "de",
+  },
+  {
+    name: "Esperanto",
+    code: "eo",
+    icon: "eo",
+  },
+  {
+    name: "Español",
+    code: "es",
+    icon: "mx",
+  },
+  {
+    name: "Italiano",
+    code: "it",
+    icon: "it",
+  },
+  {
+    name: "Hrvatski",
+    code: "hr",
+    icon: "hr",
+  },
+  {
+    name: "Ukrainian",
+    code: "uk",
+    icon: "uk",
+  },
 ];
+
+module.exports = locales;

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next-i18next.config.js

@@ -3,6 +3,6 @@ const locales = require("./lib/locales");
 module.exports = {
   i18n: {
     defaultLocale: "en",
-    locales,
+    locales: locales.map((locale) => locale.code),
   },
 };

scripts/fetch-algorithms.ts

@@ -265,16 +265,16 @@ const categoriesToSkip = ["main", "src", "algorithms", "problems"];
   process.chdir("./algorithms-explanation");
   await Promise.all(
     locales.map(async (locale) => {
-      if (fs.existsSync(locale)) {
-        for await (const dir of walk(locale)) {
+      if (fs.existsSync(locale.code)) {
+        for await (const dir of walk(locale.code)) {
           const match = dir.replace(/\\/g, "/").match(/(?:.+)\/(.+)\.md/);
           if (match) {
             const algorithm = algorithms[normalizeAlgorithm(match[1])];
             if (algorithm) {
               algorithm.explanationUrl[
-                locale
+                locale.code
               ] = `https://github.com/TheAlgorithms/Algorithms-Explanation/tree/master/${dir}`;
-              algorithm.body[locale] = await renderMarkdown(
+              algorithm.body[locale.code] = await renderMarkdown(
                 (await fs.promises.readFile(dir))
                   .toString()
                   .split("\n")
@@ -300,8 +300,9 @@ const categoriesToSkip = ["main", "src", "algorithms", "problems"];
             ).toString()
           );
           locales.forEach((locale) => {
-            if (algorithm.body[locale]) algorithm.body[locale] += `\n${render}`;
-            else algorithm.body[locale] = render;
+            if (algorithm.body[locale.code])
+              algorithm.body[locale.code] += `\n${render}`;
+            else algorithm.body[locale.code] = render;
           });
         }
       })

tsconfig.json

@@ -17,5 +17,5 @@
     "incremental": true
   },
   "exclude": ["node_modules"],
-  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js"]
+  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.mjs"]
 }