feat: add localization for the companies list (feature-sliced#774)

Author: ratomiru

src/pages/_home/companies/_config.tsx

@@ -1,4 +1,4 @@
-type Company = {
+export type Company = {
     /* URL to your company website */
     url: string;
     /* Image path to your company logo */
@@ -113,3 +113,20 @@ export const companies: Company[] = [
         alt: "Blindtyping",
     },
 ];
+
+const japaneseCompanies: Company[] = [
+    {
+        url: "https://hapins.net/",
+        src: "ja/hapins.png",
+        alt: "HapInS",
+    },
+];
+
+const koreanCompanies: Company[] = [];
+
+export const localeToCompaniesMap: Record<string, Company[]> = {
+    ru: companies,
+    en: companies,
+    ja: japaneseCompanies,
+    ko: koreanCompanies,
+};

src/pages/_home/companies/index.tsx

@@ -1,16 +1,15 @@
-import React, { useMemo } from "react";
+import React from "react";
 // It's utility, not hook =)
 import getBaseUrl from "@docusaurus/useBaseUrl";
 import { translate } from "@docusaurus/Translate";
 import Marquee from "react-fast-marquee";
-import { shuffle } from "lodash-es";
 import { Section } from "@site/src/shared/ui";
 
-import { companies } from "./_config";
 import styles from "./styles.module.scss";
+import { useCompanies } from "./use-companies";
 
 export const Companies = () => {
-    const companiesShuffled = useMemo(() => shuffle(companies), []);
+    const companies = useCompanies();
 
     return (
         <Section
@@ -19,7 +18,7 @@ export const Companies = () => {
             containerClass={styles.rootContainer}
         >
             <Marquee pauseOnHover>
-                {companiesShuffled.map(({ url, src, alt }) => (
+                {companies.map(({ url, src, alt }) => (
                     <a
                         key={src}
                         className={styles.item}

src/pages/_home/companies/use-companies.ts

@@ -0,0 +1,38 @@
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { useMemo } from "react";
+import { shuffle } from "lodash-es";
+import { DEFAULT_LOCALE } from "@site/config/docusaurus/consts";
+import { companies, localeToCompaniesMap } from "./_config";
+
+const MIN_COMPANIES_AMOUNT = 8;
+
+export const useCompanies = () => {
+    const { i18n } = useDocusaurusContext();
+
+    const shuffledLocaleCompanies = useMemo(() => {
+        const localeCompanies =
+            localeToCompaniesMap[i18n.currentLocale] || companies;
+
+        const isEnoughLocaleCompanies =
+            localeCompanies.length >= MIN_COMPANIES_AMOUNT;
+
+        const isDefaultLocale = i18n.currentLocale === DEFAULT_LOCALE;
+
+        const isNeedAddDefaultLocaleCompanies =
+            !isEnoughLocaleCompanies && !isDefaultLocale;
+
+        const fullLocaleCompanies = isNeedAddDefaultLocaleCompanies
+            ? [
+                  ...localeCompanies,
+                  ...companies.slice(
+                      0,
+                      MIN_COMPANIES_AMOUNT - localeCompanies.length,
+                  ),
+              ]
+            : localeCompanies;
+
+        return shuffle(fullLocaleCompanies);
+    }, [i18n.currentLocale]);
+
+    return shuffledLocaleCompanies;
+};