feat: add translation hooks and packages (#1980)

asyncapi · Aug 2, 2023 · 97f0446 · 97f0446
1 parent 94e0ddc
commit 97f0446
Show file tree

Hide file tree

Showing 16 changed files with 730 additions and 83 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,7 +3,7 @@ module.exports = {
     "browser": true,
     "es6": true,
   },
-  "extends": ["eslint:recommended", "plugin:react/recommended" , "plugin:cypress/recommended"],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:cypress/recommended"],
   "globals": {
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly",

diff --git a/components/Hero.js b/components/Hero.js
@@ -8,18 +8,24 @@ import Heading from './typography/Heading'
 import Paragraph from './typography/Paragraph'
 import AlgoliaSearch, { SearchButton } from './AlgoliaSearch'; // Import AlgoliaSearch component
 import IconLoupe from './icons/Loupe';
+import {
+  useTranslation,
+} from "next-i18next-static-site";
 
 export default function Hero({ className = ''}) {
+
+  const { t } = useTranslation();
+
   return (
     <>
       <AnnouncementHero className='my-4' />
       <header className={`px-2 mt-12 ${className}`}>
         <div className="text-center">
           <Heading level="h1" typeStyle="heading-xl" className="mb-4">
-            Building the future of {` `}
+            {t('main.header')} {` `}
             <span className="block md:-mt-4">
               {" "}
-              Event-Driven Architectures (EDA)
+              {t('main.subHeader')}
             </span>
           </Heading>
           <Heading level="h2" typeStyle="body-lg" textColor="text-gray-700" className="mb-10 max-w-4xl mx-auto">
@@ -69,5 +75,4 @@ export default function Hero({ className = ''}) {
       </header>
     </>
   );
-}
-
+}
diff --git a/components/languageSelector/LanguageSelect.js b/components/languageSelector/LanguageSelect.js
@@ -0,0 +1,21 @@
+import { twMerge } from 'tailwind-merge'
+export default function LanguageSelect({
+    className = '',
+    onChange = () => { },
+    options = [],
+    selected,
+}) {
+    return (
+        <select data-testid="Select-form"
+            onChange={(ev) => onChange(ev.target.value)}
+            className={twMerge(`form-select h-full py-0 px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 ${className}`)}
+            value={selected}
+        >
+            {options.map((option, index) => (
+                <option key={index} selected={option.value === selected} value={option.value} data-testid="Option-form">
+                    {option.text}
+                </option>
+            ))}
+        </select>
+    )
+}
diff --git a/components/link.js b/components/link.js
@@ -0,0 +1,48 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { defaultLanguage, languages } from "next-i18next-static-site";
+
+const LinkComponent = ({ children, locale, ...props }) => {
+  const router = useRouter();
+  const { pathname, query, asPath } = router;
+
+  // Detect current language
+  const slug = asPath.split("/")[1];
+  const langSlug = languages.includes(slug) && slug;
+  const language = query.lang || langSlug || defaultLanguage;
+
+  let href = props.href || pathname;
+
+  if (locale) {
+    if (props.href) {
+      href = `/${locale}${href}`;
+    } else {
+      if (pathname.startsWith("/404")) {
+        href = `/${locale}`;
+      } else {
+        href = pathname.replace("[lang]", locale);
+      }
+    }
+  } else {
+    if (language) {
+      href = `/${language}${href}`;
+    } else {
+      href = `/${href}`;
+    }
+  }
+
+  // Fix double slashes
+  href = href.replace(/([^:]\/)\/+/g, "$1").replace("//", "/");
+
+  return (
+    <Link href={href} passHref>
+      {children}
+    </Link>
+  );
+};
+
+export const LinkText = ({ href, children, ...props }) => {
+  return <Link href={href || ""}>{children}</Link>;
+};
+
+export default LinkComponent;
diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
@@ -14,16 +14,57 @@ import GithubButton from "../buttons/GithubButton"
 import { SearchButton } from '../AlgoliaSearch';
 import IconLoupe from '../icons/Loupe';
 import Link from 'next/link';
+import LanguageSelect from '../languageSelector/LanguageSelect';
+import {
+  defaultLanguage,
+  languages,
+  useTranslation,
+} from "next-i18next-static-site";
 
 const isMobile = isMobileDevice();
+const uniqueLangs = [...new Set(["EN", "DE"])].map((repo) => ({
+  key: repo,
+  text: repo,
+}));
 
 export default function NavBar({
   className = '',
   hideLogo = false,
 }) {
-  const { asPath } = useRouter();
+  const router = useRouter();
+  const { pathname, query, asPath } = router;
   const [open, setOpen] = useState();
   const [mobileMenuOpen, setMobileMenuOpen] = useState();
+  const [lang, setLang] = useState("en");
+  const { i18n } = useTranslation();
+
+  const changeLanguage = async (locale) => {
+    // Detect current language
+    const slug = asPath.split("/")[1];
+    const langSlug = languages.includes(slug) && slug;
+    const language = query.lang || langSlug || defaultLanguage;
+
+    let href = pathname;
+
+    if (locale) {
+      if (pathname.startsWith("/404")) {
+        href = `/${locale}`;
+      } else {
+        href = pathname.replace("[lang]", locale);
+      }
+    } else {
+      if (language) {
+        href = `/${language}${href}`;
+      } else {
+        href = `/${href}`;
+      }
+    }
+
+    // Fix double slashes
+    href = href.replace(/([^:]\/)\/+/g, "$1").replace("//", "/");
+
+    router.push(href);
+  };
 
   function outsideClick(menu) {
     if (open !== menu) return;
@@ -107,9 +148,9 @@ export default function NavBar({
           <div className="relative" onMouseLeave={() => showMenu(null)} ref={communityRef}>
             <NavItem
               text="Community"
-              href="/community" 
-              onClick={() => showOnClickMenu('community')} 
-              onMouseEnter={() => showMenu('community')} 
+              href="/community"
+              onClick={() => showOnClickMenu('community')}
+              onMouseEnter={() => showMenu('community')}
               hasDropdown
             />
             {open === 'community' && <CommunityPanel />}
@@ -127,6 +168,17 @@ export default function NavBar({
               <IconLoupe />
             </SearchButton>
 
+            {/* // Language Picker Component */}
+            {/* <LanguageSelect
+              options={uniqueLangs}
+              onChange={(value) => {
+                setLang(value.toLowerCase());
+                changeLanguage(value.toLowerCase());
+              }}
+              className=""
+              selected={i18n.language.toLocaleUpperCase()}
+            /> */}
+
             <GithubButton text="Star on GitHub" href="https://github.com/asyncapi/spec" className="py-2 ml-2" inNav="true" />
           </div>
         </nav>

diff --git a/lib/locales.js b/lib/locales.js
@@ -0,0 +1,19 @@
+import { languages, namespaces } from "next-i18next-static-site";
+
+function loadLocales() {
+  // Load all locales, required for next-i18n-static-site
+  const locales = {};
+  languages.map((language) => {
+    locales[language] = {};
+    namespaces.map((namespace) => {
+      locales[language][namespace] = require("./../locales/" +
+        language +
+        "/" +
+        namespace +
+        ".json");
+    });
+  });
+  return locales;
+}
+
+export default loadLocales;
diff --git a/locales/de/landing-page.json b/locales/de/landing-page.json
@@ -0,0 +1,6 @@
+{
+    "main": {
+        "header": "Die Zukunft gestalten",
+        "subHeader": "Ereignisgesteuerte Architekturen (EDA)"
+    }
+}
diff --git a/locales/en/landing-page.json b/locales/en/landing-page.json
@@ -0,0 +1,6 @@
+{
+    "main": {
+        "header": "Building the future of",
+        "subHeader": "Event-Driven Architectures (EDA)"
+    }
+}
diff --git a/next-i18next-static-site.config.js b/next-i18next-static-site.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+    i18n: {
+        languages: ["en", "de"],
+        defaultLanguage: "en",
+        namespaces: ["landing-page"],
+        defaultNamespace: "landing-page",
+    },
+};
diff --git a/next.config.js b/next.config.js
@@ -1,9 +1,10 @@
-const frontmatter = require('remark-frontmatter')
-const images = require('remark-images')
-const gemoji = require('remark-gemoji-to-emoji')
-const a11yEmoji = require('@fec/remark-a11y-emoji')
-const slug = require('remark-slug')
-const headingId = require('remark-heading-id')
+const frontmatter = require('remark-frontmatter');
+const images = require('remark-images');
+const gemoji = require('remark-gemoji-to-emoji');
+const a11yEmoji = require('@fec/remark-a11y-emoji');
+const slug = require('remark-slug');
+const headingId = require('remark-heading-id');
+const { i18n } = require("./next-i18next-static-site.config");
 
 const withMDX = require('@next/mdx')({
   extension: /\.mdx?$/,
@@ -18,8 +19,11 @@ const withMDX = require('@next/mdx')({
     ],
     rehypePlugins: [],
   },
-})
-module.exports = withMDX({
+});
+
+const withTM = require("next-transpile-modules")(["next-i18next-static-site"]);
+
+module.exports = withTM(withMDX({
   pageExtensions: ['js', 'md'],
   eslint: {
     ignoreDuringBuilds: true,
@@ -33,6 +37,9 @@ module.exports = withMDX({
     // config.resolve.alias["react/jsx-dev-runtime"] = require.resolve('react/jsx-dev-runtime');
     // config.resolve.alias["react/jsx-runtime"] = require.resolve('react/jsx-runtime');
 
-    return config
+    return config;
+  },
+  publicRuntimeConfig: {
+    i18n,
   },
-})
+}));