Merge branch 'master' into scripts_dashboard_tests

asyncapi · Aug 4, 2023 · 5e9b54c · 5e9b54c
2 parents 3232cae + 481fd1f
commit 5e9b54c
Show file tree

Hide file tree

Showing 21 changed files with 818 additions and 144 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/config/all-tags.json b/config/all-tags.json
@@ -1 +1 @@
-{"languages":[{"name":"Go/Golang","color":"bg-[#8ECFDF]","borderColor":"border-[#00AFD9]"},{"name":"Java","color":"bg-[#ECA2A4]","borderColor":"border-[#EC2125]"},{"name":"JavaScript","color":"bg-[#F2F1C7]","borderColor":"border-[#BFBE86]"},{"name":"HTML","color":"bg-[#E2A291]","borderColor":"border-[#E44D26]"},{"name":"C/C++","color":"bg-[#93CDEF]","borderColor":"border-[#0080CC]"},{"name":"C#","color":"bg-[#E3AFE0]","borderColor":"border-[#9B4F96]"},{"name":"Python","color":"bg-[#A8D0EF]","borderColor":"border-[#3878AB]"},{"name":"TypeScript","color":"bg-[#7DBCFE]","borderColor":"border-[#2C78C7]"},{"name":"Kotlin","color":"bg-[#B1ACDF]","borderColor":"border-[#756BD9]"},{"name":"Scala","color":"bg-[#FFA299]","borderColor":"border-[#DF301F]"},{"name":"Markdown","color":"bg-[#BABEBF]","borderColor":"border-[#445B64]"},{"name":"YAML","color":"bg-[#FFB764]","borderColor":"border-[#F1901F]"},{"name":"R","color":"bg-[#84B5ED]","borderColor":"border-[#246BBE]"},{"name":"Ruby","color":"bg-[#FF8289]","borderColor":"border-[#FF000F]"},{"name":"Rust","color":"bg-[#FFB8AA]","borderColor":"border-[#E43716]"},{"name":"Shell","color":"bg-[#87D4FF]","borderColor":"border-[#389ED7]"},{"name":"Groovy","color":"bg-[#B6D5E5]","borderColor":"border-[#609DBC]"}],"technologies":[{"name":"Node.js","color":"bg-[#BDFF67]","borderColor":"border-[#84CE24]"},{"name":"Hermes","color":"bg-[#8AEEBD]","borderColor":"border-[#2AB672]"},{"name":"React JS","color":"bg-[#9FECFA]","borderColor":"border-[#08D8FE]"},{"name":".NET","color":"bg-[#A184FF]","borderColor":"border-[#5026D4]"},{"name":"ASP.NET","color":"bg-[#71C2FB]","borderColor":"border-[#1577BC]"},{"name":"Springboot","color":"bg-[#98E279]","borderColor":"border-[#68BC44]"},{"name":"AWS","color":"bg-[#FF9F59]","borderColor":"border-[#EF6703]"},{"name":"Docker","color":"bg-[#B8E0FF]","borderColor":"border-[#2596ED]"},{"name":"Node-RED","color":"bg-[#FF7474]","borderColor":"border-[#8F0101]"},{"name":"Maven","color":"bg-[#FF6B80]","borderColor":"border-[#CA1A33]"},{"name":"Saas","color":"bg-[#6AB8EC]","borderColor":"border-[#2275AD]"},{"name":"Kubernetes-native","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Scala","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Azure","color":"bg-[#4B93FF]","borderColor":"border-[#015ADF]"},{"name":"Jenkins","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Flask","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Nest Js","color":"bg-[#E1224E]","borderColor":"border-[#B9012b]"},{"name":"TypeScript","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Socket.IO","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Liquid","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Kotlin","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Spring Cloud Streams","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JHipster JDL","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Groovy","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Markdown","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Shell","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"WebComponents","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Babel","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Storybook","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"AsyncAPI Generator","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"VSCode","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"SmartPaste","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JetBrains","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"IntelliJ IDEA","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"}]}
+{"languages":[{"name":"Go/Golang","color":"bg-[#8ECFDF]","borderColor":"border-[#00AFD9]"},{"name":"Java","color":"bg-[#ECA2A4]","borderColor":"border-[#EC2125]"},{"name":"JavaScript","color":"bg-[#F2F1C7]","borderColor":"border-[#BFBE86]"},{"name":"HTML","color":"bg-[#E2A291]","borderColor":"border-[#E44D26]"},{"name":"C/C++","color":"bg-[#93CDEF]","borderColor":"border-[#0080CC]"},{"name":"C#","color":"bg-[#E3AFE0]","borderColor":"border-[#9B4F96]"},{"name":"Python","color":"bg-[#A8D0EF]","borderColor":"border-[#3878AB]"},{"name":"TypeScript","color":"bg-[#7DBCFE]","borderColor":"border-[#2C78C7]"},{"name":"Kotlin","color":"bg-[#B1ACDF]","borderColor":"border-[#756BD9]"},{"name":"Scala","color":"bg-[#FFA299]","borderColor":"border-[#DF301F]"},{"name":"Markdown","color":"bg-[#BABEBF]","borderColor":"border-[#445B64]"},{"name":"YAML","color":"bg-[#FFB764]","borderColor":"border-[#F1901F]"},{"name":"R","color":"bg-[#84B5ED]","borderColor":"border-[#246BBE]"},{"name":"Ruby","color":"bg-[#FF8289]","borderColor":"border-[#FF000F]"},{"name":"Rust","color":"bg-[#FFB8AA]","borderColor":"border-[#E43716]"},{"name":"Shell","color":"bg-[#87D4FF]","borderColor":"border-[#389ED7]"},{"name":"Groovy","color":"bg-[#B6D5E5]","borderColor":"border-[#609DBC]"}],"technologies":[{"name":"Node.js","color":"bg-[#BDFF67]","borderColor":"border-[#84CE24]"},{"name":"Hermes","color":"bg-[#8AEEBD]","borderColor":"border-[#2AB672]"},{"name":"React JS","color":"bg-[#9FECFA]","borderColor":"border-[#08D8FE]"},{"name":".NET","color":"bg-[#A184FF]","borderColor":"border-[#5026D4]"},{"name":"ASP.NET","color":"bg-[#71C2FB]","borderColor":"border-[#1577BC]"},{"name":"Springboot","color":"bg-[#98E279]","borderColor":"border-[#68BC44]"},{"name":"AWS","color":"bg-[#FF9F59]","borderColor":"border-[#EF6703]"},{"name":"Docker","color":"bg-[#B8E0FF]","borderColor":"border-[#2596ED]"},{"name":"Node-RED","color":"bg-[#FF7474]","borderColor":"border-[#8F0101]"},{"name":"Maven","color":"bg-[#FF6B80]","borderColor":"border-[#CA1A33]"},{"name":"Saas","color":"bg-[#6AB8EC]","borderColor":"border-[#2275AD]"},{"name":"Kubernetes-native","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Scala","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Azure","color":"bg-[#4B93FF]","borderColor":"border-[#015ADF]"},{"name":"Jenkins","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Flask","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Nest Js","color":"bg-[#E1224E]","borderColor":"border-[#B9012b]"},{"name":"TypeScript","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Socket.IO","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Liquid","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Kotlin","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Spring Cloud Streams","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JHipster JDL","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Groovy","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Markdown","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Shell","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"WebComponents","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Babel","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Storybook","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"AsyncAPI Generator","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JetBrains","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"IntelliJ IDEA","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"VSCode","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"SmartPaste","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"}]}
diff --git a/config/tools-automated.json b/config/tools-automated.json
@@ -117,6 +117,21 @@
   "Code Generators": {
     "description": "The following is a list of tools that generate code from an AsyncAPI document; not the other way around.",
     "toolsList": [
+      {
+        "title": "Golang AsyncAPI Code Generator",
+        "description": "Generate Go client and server boilerplate from AsyncAPI specifications. Can be called from `go generate` without requirements.\n",
+        "links": {
+          "repoUrl": "https://github.com/lerenn/asyncapi-codegen"
+        },
+        "filters": {
+          "language": "golang",
+          "categories": [
+            "code-generator"
+          ],
+          "hasCommercial": false,
+          "isAsyncAPIOwner": false
+        }
+      },
       {
         "title": "ZenWave SDK",
         "description": "DDD and API-First for Event-Driven Microservices",
@@ -142,21 +157,6 @@
           "hasCommercial": false,
           "isAsyncAPIOwner": false
         }
-      },
-      {
-        "title": "Golang AsyncAPI Code Generator",
-        "description": "Generate Go client and server boilerplate from AsyncAPI specifications. Can be called from `go generate` without requirements.\n",
-        "links": {
-          "repoUrl": "https://github.com/lerenn/asyncapi-codegen"
-        },
-        "filters": {
-          "language": "golang",
-          "categories": [
-            "code-generator"
-          ],
-          "hasCommercial": false,
-          "isAsyncAPIOwner": false
-        }
       }
     ]
   },
@@ -320,6 +320,26 @@
   "Mocking and Testing": {
     "description": "The tools below take specification documents as input, then publish fake messages to broker destinations for simulation purposes. They may also check that publisher messages are compliant with schemas.",
     "toolsList": [
+      {
+        "title": "Specmatic",
+        "description": "An API contract testing tool that helps ensure the correctness APIs by automatically generating test cases and verifying them against the API spec. It simplifies the process of testing APIs and reduces the likelihood of bugs and compatibility issues.",
+        "links": {
+          "websiteUrl": "https://specmatic.in",
+          "docsUrl": "https://specmatic.in/documentation/",
+          "repoUrl": "https://github.com/znsio/specmatic"
+        },
+        "filters": {
+          "language": "kotlin",
+          "technology": [
+            "maven"
+          ],
+          "categories": [
+            "mocking-and-testing"
+          ],
+          "hasCommercial": false,
+          "isAsyncAPIOwner": false
+        }
+      },
       {
         "title": "ZenWave SDK",
         "description": "DDD and API-First for Event-Driven Microservices",
@@ -475,15 +495,18 @@
     "description": "The following is a list of extensions for different IDEs like VSCode, IntelliJ IDEA and others",
     "toolsList": [
       {
-        "title": "asyncapi-preview",
-        "description": "VSCode extension that enables you to:\n  - Preview documentation generated using you AsyncAPI document. It uses AsyncAPI React component under the hood,\n  - Create AsyncAPI documents faster using SmartPaste functionality\n",
+        "title": "jAsyncAPI - IDEA plugin",
+        "description": "Idea plugin for the java-asyncapi - Helps to edit and validate AsyncAPI schemas.",
         "links": {
-          "repoUrl": "https://github.com/asyncapi/vs-asyncapi-preview"
+          "websiteUrl": "https://plugins.jetbrains.com/plugin/15673-asyncapi",
+          "docsUrl": "https://github.com/asyncapi/jasyncapi-idea-plugin#usage",
+          "repoUrl": "https://github.com/asyncapi/jasyncapi-idea-plugin"
         },
         "filters": {
+          "language": "Kotlin",
           "technology": [
-            "VSCode",
-            "SmartPaste"
+            "JetBrains",
+            "IntelliJ IDEA"
           ],
           "categories": [
             "ide-extension"
@@ -493,18 +516,15 @@
         }
       },
       {
-        "title": "jAsyncAPI - IDEA plugin",
-        "description": "Idea plugin for the java-asyncapi - Helps to edit and validate AsyncAPI schemas.",
+        "title": "asyncapi-preview",
+        "description": "VSCode extension that enables you to:\n  - Preview documentation generated using you AsyncAPI document. It uses AsyncAPI React component under the hood,\n  - Create AsyncAPI documents faster using SmartPaste functionality\n",
         "links": {
-          "websiteUrl": "https://plugins.jetbrains.com/plugin/15673-asyncapi",
-          "docsUrl": "https://github.com/asyncapi/jasyncapi-idea-plugin#usage",
-          "repoUrl": "https://github.com/asyncapi/jasyncapi-idea-plugin"
+          "repoUrl": "https://github.com/asyncapi/vs-asyncapi-preview"
         },
         "filters": {
-          "language": "Kotlin",
           "technology": [
-            "JetBrains",
-            "IntelliJ IDEA"
+            "VSCode",
+            "SmartPaste"
           ],
           "categories": [
             "ide-extension"

diff --git a/config/tools.json b/config/tools.json
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)"
+    }
+}