Merge branch 'master' into markdown_tests

.all-contributorsrc

@@ -555,6 +555,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "raj17ce",
+      "name": "Raj Patel",
+      "avatar_url": "https://avatars.githubusercontent.com/u/116947399?v=4",
+      "profile": "https://github.com/raj17ce",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/workflows/if-nodejs-pr-testing.yml

@@ -4,6 +4,8 @@ name: PR testing - if Node project
 on:
   pull_request:
     types: [opened, reopened, synchronize, ready_for_review]
+  push:
+    branches: [master]
 
 jobs:
   test-nodejs-pr:
@@ -106,3 +108,12 @@ jobs:
               issue_number: context.payload.pull_request.number,
               body: body
             })
+
+      - if: steps.packagejson.outputs.exists == 'true'
+        name: Upload Coverage to Codecov
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673
+        with:
+          fail_ci_if_error: true
+          files: ./coverage/lcov.info
+          token: ${{ secrets.CODECOV_TOKEN }}
+          verbose: true

README.md

@@ -395,6 +395,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Shiva953"><img src="https://avatars.githubusercontent.com/u/120790871?v=4?s=100" width="100px;" alt="Neutron"/><br /><sub><b>Neutron</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=Shiva953" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/sagarkori143"><img src="https://avatars.githubusercontent.com/u/129517558?v=4?s=100" width="100px;" alt="Sagar Kori"/><br /><sub><b>Sagar Kori</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=sagarkori143" title="Documentation">📖</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/raj17ce"><img src="https://avatars.githubusercontent.com/u/116947399?v=4?s=100" width="100px;" alt="Raj Patel"/><br /><sub><b>Raj Patel</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=raj17ce" title="Code">💻</a></td>
+    </tr>
   </tbody>
 </table>
 

components/AlgoliaSearch.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 export const INDEX_NAME = 'asyncapi';
@@ -283,6 +283,7 @@ export default function AlgoliaSearch({ children }: { children: React.ReactNode
  */
 export function SearchButton({ children, indexName = INDEX_NAME, ...props }: ISearchButtonProps) {
   const { onOpen, onInput } = useContext(SearchContext);
+  const [Children, setChildren] = useState<string | React.ReactNode>('');
   const searchButtonRef = useRef<HTMLButtonElement>(null);
   const actionKey = getActionKey();
 
@@ -308,6 +309,12 @@ export function SearchButton({ children, indexName = INDEX_NAME, ...props }: ISe
     };
   }, [onInput, searchButtonRef]);
 
+  useEffect(() => {
+    if (typeof children === 'function') {
+      setChildren(children({ actionKey }));
+    }
+  }, []);
+
   return (
     <button
       type='button'
@@ -318,7 +325,7 @@ export function SearchButton({ children, indexName = INDEX_NAME, ...props }: ISe
       {...props}
       data-testid='Search-Button'
     >
-      {typeof children === 'function' ? children({ actionKey }) : children}
+      {Children}
     </button>
   );
 }

components/Avatar.tsx

@@ -32,9 +32,17 @@ export default function Avatar({ name, photo, link, className }: AvatarProps) {
   );
 
   return link ? (
-    <a href={link} data-testid='Avatars-link'>
+    <button
+      onClick={(e) => {
+        e.preventDefault();
+
+        window.open(link, '_blank');
+      }}
+      data-testid='Avatars-link'
+      className='cursor-pointer border-none bg-inherit p-0'
+    >
       {avatar}
-    </a>
+    </button>
   ) : (
     <React.Fragment>{avatar}</React.Fragment>
   );

components/Loader.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
+import AsyncAPIColorIcon from './icons/AsyncAPIColorIcon';
+
 interface LoaderProps {
   // eslint-disable-next-line prettier/prettier
 
@@ -25,7 +27,7 @@ interface LoaderProps {
  */
 export default function Loader({
   loaderText = '',
-  loaderIcon = null,
+  loaderIcon = <AsyncAPIColorIcon alt='Loading...' />,
   className = '',
   dark = false,
   pulsating = false

components/dashboard/table/Row.tsx

@@ -16,47 +16,52 @@ export default function Row({ item }: RowProps) {
   return (
     <li>
       <div className=' rounded-md border border-gray-200 bg-white p-4'>
-        <a target='_blank' rel='noreferrer' href={`https://github.com/${item.resourcePath}`}>
-          <div className='flex justify-between'>
-            <div className='flex flex-col gap-2'>
-              <div className='flex items-center gap-1 underline'>
-                <img
-                  alt='issue or pull-request icon'
-                  className='size-4'
-                  src={item.isPR ? '/img/illustrations/icons/pull-request.svg' : '/img/illustrations/icons/issue.svg'}
-                  data-testid='Row-img-issue'
-                />
-                <a
-                  target='_blank'
-                  rel='noreferrer'
-                  className='text-sm font-light lowercase text-gray-900'
-                  href={`https://github.com/${item.repo}`}
-                  data-testid='Row-github-redirect'
-                >
-                  {item.repo}
-                </a>
-              </div>
-
+        <div className='flex justify-between'>
+          <div className='flex flex-col gap-2'>
+            <div className='flex items-center gap-1 underline'>
+              <img
+                alt='issue or pull-request icon'
+                className='size-4'
+                src={item.isPR ? '/img/illustrations/icons/pull-request.svg' : '/img/illustrations/icons/issue.svg'}
+                data-testid='Row-img-issue'
+              />
+              <a
+                target='_blank'
+                rel='noreferrer'
+                className='text-sm font-light lowercase text-gray-900'
+                href={`https://github.com/${item.repo}`}
+                data-testid='Row-github-redirect'
+              >
+                {item.repo}
+              </a>
+            </div>
+            <a target='_blank' rel='noreferrer' href={`https://github.com/${item.resourcePath}`}>
               <span
                 className='two-liner w-full text-base font-medium leading-5 text-gray-900'
                 data-testid='Row-spanText'
               >
                 {item.title}
               </span>
-
-              {item.labels && item?.labels?.length > 0 && (
-                <div className='flex flex-wrap items-center gap-1'>
-                  {item.labels.map((label) => (
-                    <span key={label.name} className={'rounded-full bg-secondary-300 px-2 text-sm leading-5'}>
-                      {label.name}
-                    </span>
-                  ))}
-                </div>
-              )}
-            </div>
-            <img alt='arrow icon' src='/img/illustrations/icons/arrow.svg' />
+            </a>
+            {item.labels && item?.labels?.length > 0 && (
+              <div className='flex flex-wrap items-center gap-1'>
+                {item.labels.map((label) => (
+                  <span key={label.name} className={'rounded-full bg-secondary-300 px-2 text-sm leading-5'}>
+                    {label.name}
+                  </span>
+                ))}
+              </div>
+            )}
           </div>
-        </a>
+          <a
+            target='_blank'
+            rel='noreferrer'
+            className='my-auto w-fit'
+            href={`https://github.com/${item.resourcePath}`}
+          >
+            <img alt='arrow icon' src='/img/illustrations/icons/arrow.svg' />
+          </a>
+        </div>
       </div>
     </li>
   );

components/navigation/BlogPostItem.tsx

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import Link from 'next/link';
 import type { Ref } from 'react';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import TextTruncate from 'react-text-truncate';
 
 import { BlogPostType } from '@/types/components/navigation/BlogPostType';
@@ -77,47 +77,46 @@ export default forwardRef(function BlogPostItem(
                     {post.type}
                   </span>
                 </Paragraph>
-                <Link href={post.slug}>
-                  <span className='block'>
-                    <Heading level={HeadingLevel.h5} typeStyle={HeadingTypeStyle.smSemibold} className='mt-2'>
-                      {post.title}
-                    </Heading>
-                    <Paragraph typeStyle={ParagraphTypeStyle.sm} className='mt-3'>
-                      <TextTruncate element='span' line={4} text={post.excerpt} />
-                    </Paragraph>
-                  </span>
-                </Link>
+                <span className='block'>
+                  <Heading level={HeadingLevel.h5} typeStyle={HeadingTypeStyle.smSemibold} className='mt-2'>
+                    {post.title}
+                  </Heading>
+                  <Paragraph typeStyle={ParagraphTypeStyle.sm} className='mt-3'>
+                    <TextTruncate element='span' line={4} text={post.excerpt} />
+                  </Paragraph>
+                </span>
               </div>
               <div className='mt-6 flex items-center'>
                 <div className='relative shrink-0'>
                   <AuthorAvatars authors={post.authors} />
                 </div>
                 <div className='ml-3'>
                   <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.xsSemibold} textColor='text-gray-900'>
-                    <span className='hover:underline'>
+                    <span>
                       {post.authors
                         .map((author, index) =>
                           author.link ? (
-                            <a
+                            <button
                               key={index}
                               data-alt={author.name}
-                              href={author.link}
+                              className='cursor-pointer border-none bg-inherit p-0 hover:underline'
                               onClick={(e) => {
-                                e.stopPropagation();
+                                e.preventDefault();
+
+                                // Handle the click event, e.g., navigate to author.link
+                                window.open(author.link, '_blank');
                               }}
-                              target='_blank'
-                              rel='noreferrer'
                             >
                               {author.name}
-                            </a>
+                            </button>
                           ) : (
                             author.name
                           )
                         )
-                        .reduce((prev, curr) => (
-                          <>
+                        .reduce((prev, curr, index) => (
+                          <React.Fragment key={`author-${index}`}>
                             {prev} & {curr}
-                          </>
+                          </React.Fragment>
                         ))}
                     </span>
                   </Heading>

components/newsroom/FeaturedBlogPost.tsx

@@ -88,18 +88,9 @@ export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogP
                       {post.authors
                         .map((author, index) =>
                           author.link ? (
-                            <a
-                              key={index}
-                              data-alt={author.name}
-                              href={author.link}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                              }}
-                              target='_blank'
-                              rel='noreferrer'
-                            >
+                            <span key={index} data-alt={author.name} rel='noreferrer'>
                               {author.name}
-                            </a>
+                            </span>
                           ) : (
                             author.name
                           )

components/tools/ToolsCard.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import type { ToolData, VisibleDataListType } from '@/types/components/tools/ToolDataType';
 import { HeadingTypeStyle } from '@/types/typography/Heading';
@@ -92,9 +92,12 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
                   }, 500)
                 }
               >
-                <div ref={descriptionRef} className={`line-clamp-3 ${isTruncated && 'after:content-["..."]'}`}>
+                <span
+                  ref={descriptionRef}
+                  className={`line-clamp-3 inline-block ${isTruncated && 'after:ml-1 after:content-["..."]'}`}
+                >
                   {toolData.description}
-                </div>
+                </span>
               </span>
             </Paragraph>
 

config/MAINTAINERS.json

@@ -258,7 +258,6 @@
             "website",
             "spec-json-schemas",
             "generator",
-            "asyncapi-react",
             "extensions-catalog",
             "bindings",
             "enterprise-patterns",
@@ -321,6 +320,7 @@
         "availableForHire": false,
         "isTscMember": true,
         "repos": [
+            "asyncapi-react",
             "conference-website",
             "chatbot"
         ],