feat: add translation hooks and packages

.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",

components/Hero.js

@@ -8,18 +8,26 @@ import Heading from './typography/Heading'
 import Paragraph from './typography/Paragraph'
 import AlgoliaSearch, { SearchButton } from './AlgoliaSearch'; // Import AlgoliaSearch component
 import IconLoupe from './icons/Loupe';
+import {
+  getAllLanguageSlugs,
+  getLanguage,
+  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('landingPageHeroHeading_1')} {` `}
             <span className="block md:-mt-4">
               {" "}
-              Event-Driven Architectures (EDA)
+              {t('landingPageHeroHeading_2')}
             </span>
           </Heading>
           <Heading level="h2" typeStyle="body-lg" textColor="text-gray-700" className="mb-10 max-w-4xl mx-auto">
@@ -69,5 +77,4 @@ export default function Hero({ className = ''}) {
       </header>
     </>
   );
-}
-
+}

components/buttons/GithubButton.js

@@ -2,7 +2,7 @@ import Button from './Button'
 import IconGithub from '../icons/Github'
 
 export default function GithubButton({
-  text = 'View on Github',
+  text = 'Github',
   href = 'https://github.com/asyncapi',
   target = '_blank',
   iconPosition = 'left',

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>
+    )
+}

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;

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,7 +168,19 @@ export default function NavBar({
               <IconLoupe />
             </SearchButton>
 
-            <GithubButton text="Star on GitHub" href="https://github.com/asyncapi/spec" className="py-2 ml-2" inNav="true" />
+            <LanguageSelect
+              options={uniqueLangs}
+              onChange={(value) => {
+                setLang(value.toLowerCase());
+                changeLanguage(value.toLowerCase());
+              }}
+              className=""
+              selected={i18n.language.toLocaleUpperCase()}
+            />
+
+            <GithubButton text="GitHub" href="https://github.com/asyncapi/spec" className="py-2 ml-2" inNav="true" />
+
+
           </div>
         </nav>
 

lib/locales.js

@@ -0,0 +1,18 @@
+import { languages, namespaces } from "next-i18next-static-site";
+
+// Load all locales, required for next-i18n-static-site
+// Can be changed based on your folder structure
+const locales = {};
+languages.map((language) => {
+  locales[language] = {};
+
+  namespaces.map((namespace) => {
+    locales[language][namespace] = require("./../locales/" +
+      language +
+      "/" +
+      namespace +
+      ".json");
+  });
+});
+
+export default locales;

locales/de/common.json

@@ -0,0 +1,4 @@
+{
+    "landingPageHeroHeading_1": "Die Zukunft gestalten",
+    "landingPageHeroHeading_2": "Ereignisgesteuerte Architekturen (EDA)"
+}

locales/en/common.json

@@ -0,0 +1,4 @@
+{
+    "landingPageHeroHeading_1": "Building the future of",
+    "landingPageHeroHeading_2": "Event-Driven Architectures (EDA)"
+}

next-i18next-static-site-config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    i18n: {
+        languages: ["en", "de"],
+        defaultLanguage: "en",
+        namespaces: ["common"],
+        defaultNamespace: "common",
+    },
+};

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,
   },
-})
+}));