Merge branch 'asyncapi:master' into master

.github/workflows/automerge-for-humans-merging.yml

@@ -18,30 +18,69 @@ on:
 
 jobs:
   automerge-for-humans:
-    if: github.event.pull_request.draft == false && (github.event.pull_request.user.login != 'asyncapi-bot' || github.event.pull_request.user.login != 'dependabot[bot]' || github.event.pull_request.user.login != 'dependabot-preview[bot]') #it runs only if PR actor is not a bot, at least not a bot that we know
+    # it runs only if PR actor is not a bot, at least not a bot that we know
+    if: |
+      github.event.pull_request.draft == false && 
+      (github.event.pull_request.user.login != 'asyncapi-bot' || 
+      github.event.pull_request.user.login != 'dependabot[bot]' || 
+      github.event.pull_request.user.login != 'dependabot-preview[bot]') 
     runs-on: ubuntu-latest
     steps:
-      - name: Get list of authors
-        uses: sergeysova/jq-action@v2
+      - name: Get PR authors
         id: authors
+        uses: actions/github-script@v7
         with:
-          # This cmd does following (line by line):
-          # 1. CURL querying the list of commits of the current PR via GH API. Why? Because the current event payload does not carry info about the commits.
-          # 2. Iterates over the previous returned payload, and creates an array with the filtered results (see below) so we can work wit it later. An example of payload can be found in https://docs.github.com/en/developers/webhooks-and-events/webhooks/webhook-events-and-payloads#webhook-payload-example-34.
-          # 3. Grabs the data we need for adding the `Co-authored-by: ...` lines later and puts it into objects to be used later on.
-          # 4. Filters the results by excluding the current PR sender. We don't need to add it as co-author since is the PR creator and it will become by default the main author.
-          # 5. Removes repeated authors (authors can have more than one commit in the PR).
-          # 6. Builds the `Co-authored-by: ...` lines with actual info.
-          # 7. Transforms the array into plain text. Thanks to this, the actual stdout of this step can be used by the next Workflow step (wich is basically the automerge).
-          cmd: | 
-            curl -H "Accept: application/vnd.github+json" -H "Authorization: Bearer ${{ secrets.GH_TOKEN }}" "${{github.event.pull_request._links.commits.href}}?per_page=100" | 
-              jq -r '[.[] 
-                | {name: .commit.author.name, email: .commit.author.email, login: .author.login}] 
-                | map(select(.login != "${{github.event.pull_request.user.login}}")) 
-                | unique 
-                | map("Co-authored-by: " + .name + " <" + .email + ">") 
-                | join("\n")'
-          multiline: true
+          script: |
+            // Get paginated list of all commits in the PR
+            try {
+              const commitOpts = github.rest.pulls.listCommits.endpoint.merge({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                pull_number: context.issue.number
+              });
+
+              const commits = await github.paginate(commitOpts);
+              return commits;
+            } catch (error) {
+              core.setFailed(error.message);
+              return [];
+            }
+
+      - name: Create commit message
+        id: create-commit-message
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const commits = ${{ steps.authors.outputs.result }};
+
+            if (commits.length === 0) {
+              core.setFailed('No commits found in the PR');
+              return '';
+            }
+
+            // Get unique authors from the commits list
+            const authors = commits.reduce((acc, commit) => {
+              const username = commit.author?.login || commit.commit.author?.name;
+              if (username && !acc[username]) {
+                acc[username] = {
+                  name: commit.commit.author?.name,
+                  email: commit.commit.author?.email,
+                }
+              }
+
+              return acc;
+            }, {});
+
+            // Create a string of the form "Co-authored-by: Name <email>"
+            // ref: https://docs.github.com/en/pull-requests/committing-changes-to-your-project/creating-and-editing-commits/creating-a-commit-with-multiple-authors
+            const coAuthors = Object.values(authors).map(author => {
+              return `Co-authored-by: ${author.name} <${author.email}>`;
+            }).join('\n');
+
+            core.debug(coAuthors);;
+
+            return coAuthors;
+
       - name: Automerge PR
         uses: pascalgn/automerge-action@22948e0bc22f0aa673800da838595a3e7347e584 #v0.15.6 https://github.com/pascalgn/automerge-action/releases/tag/v0.15.6
         env:
@@ -50,6 +89,6 @@ jobs:
           MERGE_METHOD: "squash"
           # Using the output of the previous step (`Co-authored-by: ...` lines) as commit description.
           # Important to keep 2 empty lines as https://docs.github.com/en/pull-requests/committing-changes-to-your-project/creating-and-editing-commits/creating-a-commit-with-multiple-authors#creating-co-authored-commits-on-the-command-line mentions
-          MERGE_COMMIT_MESSAGE: "{pullRequest.title} (#{pullRequest.number})\n\n\n${{ steps.authors.outputs.value }}" 
+          MERGE_COMMIT_MESSAGE: "{pullRequest.title} (#{pullRequest.number})\n\n\n${{ steps.create-commit-message.outputs.result }}"
           MERGE_RETRIES: "20"
           MERGE_RETRY_SLEEP: "30000"

ADDING_TRANSLATIONS.md

@@ -3,10 +3,10 @@
 We appreciate your valuable contributions to the AsyncAPI website, whether it's adding or improving existing translations.
 
 ## Table of contents <!-- omit in toc -->
-- [Improving existing translations:](#improving-existing-translations)
-- [Adding translations to a partially localized page:](#adding-translations-to-a-partially-localized-page)
-- [Adding translations to a new page:](#adding-translations-to-a-new-page)
-- [Adding a new locale:](#adding-a-new-locale)
+- [Improving existing translations](#improving-existing-translations)
+- [Adding translations to a partially localized page](#adding-translations-to-a-partially-localized-page)
+- [Adding translations to a new page](#adding-translations-to-a-new-page)
+- [Adding a new locale](#adding-a-new-locale)
 
 ## Improving existing translations
 
@@ -45,7 +45,7 @@ Use the translation hook with the key specified in the `locales` folder.
 
 Suppose the Landing Page has a button that is still in English when the language is set to German:
 - Navigate to the file where the component is defined.
-- Import the `useTranslation` hook from `lib/i18n`.
+- Import the `useTranslation` hook from `utils/i18n`.
 - Extract the translation function from the hook `const { t } = useTranslation();`.
 - Use it to pass the key of the required translation value. Make sure to add the required key to the `locales` folder according to the page's scope. In this example, we are adding translation for a button, since all translation keys related to buttons need to be specified in `common.json`.
 
@@ -54,7 +54,7 @@ Example:
 `ICSFileButton.js`
 ```diff
 ...
-+ import { useTranslation } from '../../lib/i18n';
++ import { useTranslation } from '../../utils/i18n';
 
 export default function ICSFButton({
 - text = 'Download ICS File',
@@ -131,10 +131,10 @@ The process for adding translations to a page that is not yet available in any e
 
 **4. Configure i18n routing**
 After adding a new internationalized page, test it to sure the page is being served on the website when someone visits it.
-  - Replace the `next/link` component with the `LinkComponent` from `components/link.js` in the files where the page's `href` is being referenced.
-  - Make sure to add the exact same `href` to the `lib/i18nPaths.js` in the respective locales which support that `href`.
+  - Replace the `next/link` component with the `LinkComponent` from `components/link.tsx` in the files where the page's `href` is being referenced.
+  - Make sure to add the exact same `href` to the `utils/i18n.ts` in the respective locales which support that `href`.
 
-  For example, if you want to translate the `pages/newsletter/index.js` page, so that if someone visits `asyncapi.com/de/newsletter`, it shows the page in the `German` locale.
+  For example, if you want to translate the `pages/newsletter.tsx` page, so that if someone visits `asyncapi.com/de/newsletter`, it shows the page in the `German` locale.
 
   - Add new `JSON` files to the `locales/en` and `locales/de` folder.
 
@@ -167,7 +167,7 @@ After adding a new internationalized page, test it to sure the page is being ser
   };
   ```
 
-  - Copy and add static site functions to the `newsletter/index.js` page.
+  - Copy and add static site functions to the `newsletter.tsx` page.
 
   `pages` folder directory structure
   ```diff
@@ -179,14 +179,14 @@ After adding a new internationalized page, test it to sure the page is being ser
      ┗ index.js
   ```
 
-  `newsletter/index.js`
+  `newsletter.tsx`
   ```diff
   ...
   + import {
   +   getAllLanguageSlugs,
   +   getLanguage,
   +   useTranslation
-  + } from "../../lib/i18n";
+  + } from "../../utils/i18n";
 
   export default function NewsletterIndexPage() {
 
@@ -217,7 +217,7 @@ After adding a new internationalized page, test it to sure the page is being ser
 
   - Add custom route `LinkComponent` wherever the `next/link` is used for routing to the `/newsletter` href.
 
-  `lib/i18nPaths.js`
+  `utils/i18n.ts`
   ```diff
   const i18nPaths = {
       en: [
@@ -252,12 +252,12 @@ If you want to add a new locale like `fr` to serve pages in the French locale on
   - Copy the existing `JSON` files present in the `en` folder. Change the values of those translation keys according to the new localization.
 
 **2. Modify i18n configuration**
-  - Navigate to the `next-i18next-static-site.config.js` file in the root of the project folder.
+  - Navigate to the `next-i18next.config.js` file in the root of the project folder.
   - Add the name of the newly added `locale` to the `languages` array.
 
 **3. Configure i18n routing**
 After adding a new internationalized page, ensure it is being served on the website when someone visits.
-  - Make sure to add the same `href` to the `lib/i18nPaths.js` in the respective locales supporting that `href`.
+  - Make sure to add the same `href` to the `utils/i18n.ts` in the respective locales supporting that `href`.
 
 If you have added the 'fr' locale and translated the 'tools/cli' page, clicking 'Tools -> CLI' in the navigation menu will redirect the user to 'asyncapi.com/fr/tools/cli'.
 
@@ -278,9 +278,9 @@ If you have added the 'fr' locale and translated the 'tools/cli' page, clicking
 +  ┃ ┗ tools.json
 ```
 
-- Change the `next-i18next-static-site.config.js` config.
+- Change the `next-i18next.config.js` config.
 
-`next-i18next-static-site.config.js`
+`next-i18next.config.js`
 ```diff
 module.exports = {
     i18n: {
@@ -290,11 +290,16 @@ module.exports = {
         namespaces: ["landing-page", "common", "tools"],
         defaultNamespace: "landing-page",
     },
+    langMap: {
+    en: 'English',
+    de: 'Deutsch',
++   fr: 'French',
+  },
 };
 ```
  - Add new locale routing.
 
-`lib/i18nPaths.js`
+`utils/i18n.ts`
 ```diff
 const i18nPaths = {
     en: [

components/icons/Icons.mdx

@@ -30,6 +30,7 @@ import IconGuide from './Guide';
 import IconHome from './Home';
 import IconHub from './Hub';
 import InfoIcon from './InfoIcon';
+import IconLanguage from './Language';
 import IconLightBulb from './LightBulb';
 import IconLinkedIn from './LinkedIn';
 import IconLoupe from './Loupe';
@@ -236,6 +237,10 @@ These are the icons used in the AsyncAPI website.
   <InfoIcon />
 </IconItem>
 
+<IconItem name="Language">
+  <IconLanguage />
+</IconItem>
+
 <IconItem name="Light Bulb">
   <IconLightBulb />
 </IconItem>

components/icons/Language.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Language Icon for language selector component
+ */
+export default function IconLanguage({ className = '' }) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='none'
+      viewBox='0 0 24 24'
+      strokeWidth={1.5}
+      stroke='currentColor'
+      className={`size-5 ${className}`}
+    >
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        d='m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802'
+      />
+    </svg>
+  );
+}

components/languageSelector/LanguageSelect.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
+import i18nextConfig from '@/next-i18next.config';
+
 import type { SelectProps } from '../form/Select';
+import IconLanguage from '../icons/Language';
 
 /**
  * @description LanguageSelect component for selecting a language.
@@ -11,20 +14,28 @@ import type { SelectProps } from '../form/Select';
  * @param {string} props.selected - The currently selected option value.
  */
 export default function LanguageSelect({ className = '', onChange = () => {}, options = [], selected }: SelectProps) {
+  const { langMap } = i18nextConfig;
+
   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:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}`
-      )}
-      value={selected}
-    >
-      {options.map((option, index) => (
-        <option key={index} value={option.value} data-testid='Option-form'>
-          {option.text}
-        </option>
-      ))}
-    </select>
+    <div className='relative inline-block'>
+      <div className='relative flex items-center gap-2'>
+        {/* Display Icon Next to the Select Box */}
+        <IconLanguage className='pointer-events-none absolute left-3 text-gray-600' />
+        <select
+          data-testid='Select-form'
+          onChange={(ev) => onChange(ev.target.value)}
+          className={twMerge(
+            `form-select h-full px-10 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:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}`
+          )}
+          value={selected}
+        >
+          {options.map((option, index) => (
+            <option key={index} value={option.value} data-testid='Option-form'>
+              {langMap[option.text.toLowerCase() as keyof typeof langMap] || option.text}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
   );
 }