Merge branch 'combineToolsTest' of https://github.com/vishvamsinh28/w…

…ebsite into combineToolsTest

.all-contributorsrc

@@ -61,10 +61,10 @@
       ]
     },
     {
-      "login": "alequetzalli",
-      "name": "Alejandra Quetzalli ",
+      "login": "quetzalliwrites",
+      "name": "Quetzalli Writes",
       "avatar_url": "https://avatars.githubusercontent.com/u/19964402?v=4",
-      "profile": "https://github.com/alequetzalli",
+      "profile": "https://github.com/quetzalliwrites",
       "contributions": [
         "doc",
         "review",

README.md

@@ -125,7 +125,7 @@ After cloning repository to your local, perform the following steps from the roo
 #### Steps:
 1. Build the Docker image:
     ```bash 
-    docker build -t asyncapi-website .`
+    docker build -t asyncapi-website .
     ```
 2. Start the container:
     ```bash
@@ -336,7 +336,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="http://www.fmvilas.com/"><img src="https://avatars.githubusercontent.com/u/242119?v=4?s=100" width="100px;" alt="Fran Méndez"/><br /><sub><b>Fran Méndez</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=fmvilas" title="Code">💻</a> <a href="https://github.com/asyncapi/website/commits?author=fmvilas" title="Documentation">📖</a> <a href="https://github.com/asyncapi/website/issues?q=author%3Afmvilas" title="Bug reports">🐛</a> <a href="#design-fmvilas" title="Design">🎨</a> <a href="#maintenance-fmvilas" title="Maintenance">🚧</a> <a href="#infra-fmvilas" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#ideas-fmvilas" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/asyncapi/website/pulls?q=is%3Apr+reviewed-by%3Afmvilas" title="Reviewed Pull Requests">👀</a> <a href="#blog-fmvilas" title="Blogposts">📝</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://dev.to/derberg"><img src="https://avatars.githubusercontent.com/u/6995927?v=4?s=100" width="100px;" alt="Lukasz Gornicki"/><br /><sub><b>Lukasz Gornicki</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=derberg" title="Code">💻</a> <a href="https://github.com/asyncapi/website/commits?author=derberg" title="Documentation">📖</a> <a href="https://github.com/asyncapi/website/issues?q=author%3Aderberg" title="Bug reports">🐛</a> <a href="#design-derberg" title="Design">🎨</a> <a href="#maintenance-derberg" title="Maintenance">🚧</a> <a href="#infra-derberg" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#ideas-derberg" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/asyncapi/website/pulls?q=is%3Apr+reviewed-by%3Aderberg" title="Reviewed Pull Requests">👀</a> <a href="#blog-derberg" title="Blogposts">📝</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/magicmatatjahu"><img src="https://avatars.githubusercontent.com/u/20404945?v=4?s=100" width="100px;" alt="Maciej Urbańczyk"/><br /><sub><b>Maciej Urbańczyk</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=magicmatatjahu" title="Code">💻</a> <a href="https://github.com/asyncapi/website/commits?author=magicmatatjahu" title="Documentation">📖</a> <a href="https://github.com/asyncapi/website/issues?q=author%3Amagicmatatjahu" title="Bug reports">🐛</a> <a href="#design-magicmatatjahu" title="Design">🎨</a> <a href="#maintenance-magicmatatjahu" title="Maintenance">🚧</a> <a href="#infra-magicmatatjahu" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#ideas-magicmatatjahu" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/asyncapi/website/pulls?q=is%3Apr+reviewed-by%3Amagicmatatjahu" title="Reviewed Pull Requests">👀</a> <a href="#blog-magicmatatjahu" title="Blogposts">📝</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/alequetzalli"><img src="https://avatars.githubusercontent.com/u/19964402?v=4?s=100" width="100px;" alt="Alejandra Quetzalli "/><br /><sub><b>Alejandra Quetzalli </b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=alequetzalli" title="Documentation">📖</a> <a href="https://github.com/asyncapi/website/pulls?q=is%3Apr+reviewed-by%3Aalequetzalli" title="Reviewed Pull Requests">👀</a> <a href="#talk-alequetzalli" title="Talks">📢</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/quetzalliwrites"><img src="https://avatars.githubusercontent.com/u/19964402?v=4?s=100" width="100px;" alt="Quetzalli Writes "/><br /><sub><b>Quetzalli Writes</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=quetzalliwrites" title="Documentation">📖</a> <a href="https://github.com/asyncapi/website/pulls?q=is%3Apr+reviewed-by%3Aquetzalliwrites" title="Reviewed Pull Requests">👀</a> <a href="#talk-quetzalliwrites" title="Talks">📢</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://aayushmau5.github.io/"><img src="https://avatars.githubusercontent.com/u/54525741?v=4?s=100" width="100px;" alt="Aayush Kumar Sahu"/><br /><sub><b>Aayush Kumar Sahu</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=aayushmau5" title="Code">💻</a> <a href="https://github.com/asyncapi/website/issues?q=author%3Aaayushmau5" title="Bug reports">🐛</a> <a href="#design-aayushmau5" title="Design">🎨</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://boyney.io/"><img src="https://avatars.githubusercontent.com/u/3268013?v=4?s=100" width="100px;" alt="David Boyne"/><br /><sub><b>David Boyne</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=boyney123" title="Code">💻</a> <a href="#design-boyney123" title="Design">🎨</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/jessemenning"><img src="https://avatars.githubusercontent.com/u/62108913?v=4?s=100" width="100px;" alt="Jesse Menning"/><br /><sub><b>Jesse Menning</b></sub></a><br /><a href="#blog-jessemenning" title="Blogposts">📝</a></td>

assets/docs/fragments/contribution-notes.md

@@ -11,4 +11,4 @@ To get started as a Docs contributor:
 
 Do you have a documentation contributor question and you're wondering how to tag me into a GitHub discussion or PR? Never fear!
 
-Tag me in your AsyncAPI Doc PRs or [GitHub Discussions](https://github.com/asyncapi/community/discussions/categories/docs) via my GitHub handle, [`alequetzalli`](https://github.com/alequetzalli) 🐙.
+Tag me in your AsyncAPI Doc PRs or [GitHub Discussions](https://github.com/asyncapi/community/discussions/categories/docs) via my GitHub handle, [`quetzalliwrites`](https://github.com/quetzalliwrites) 🐙.

components/Calendar.tsx

@@ -28,10 +28,16 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
 
   const CALENDAR_URL =
     'https://calendar.google.com/calendar/embed?src=c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com&ctz=UTC';
-  const eventsExist = eventsData.length > 0;
+  const currentDate = new Date();
+  const eventsExist = eventsData?.filter((event: IEvent) => moment(event.date).isAfter(currentDate)).length > 0;
 
   return (
-    <div className={twMerge('overflow-hidden rounded-md border border-gray-200 bg-white p-4', className)}>
+    <div
+      className={twMerge(
+        'overflow-hidden rounded-md border border-gray-200 bg-white p-4 h-full flex flex-col gap-2',
+        className
+      )}
+    >
       <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.mdSemibold}>
         {t('calendar.title')}
       </Heading>
@@ -43,7 +49,7 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
                 <span className='flex-1 self-center text-center'>{moment(event.date).format('D')}</span>
               </div>
               <div className='grow text-left sm:mt-0 sm:pl-6'>
-                <h2 className='title-font text-xl font-medium text-gray-900 hover:text-gray-500'>{event.title}</h2>
+                <h2 className='title-font font-medium text-gray-900 hover:text-gray-500'>{event.title}</h2>
                 <p className='text-gray-600'>
                   {moment(event.date).local().format('LLLL')} UTC
                   {moment(event.date).local().format('Z')}
@@ -53,13 +59,12 @@ export default function Calendar({ className = '', size }: ICalendarProps) {
           </li>
         ))}
       </ul>
-      {eventsExist ? (
-        <div className='pt-4' data-testid='Calendar-button'>
+      <div className='h-full content-center'>
+        {!eventsExist && <div className='font-bold text-gray-700 lg:pb-8'>{t('calendar.noMeetingsMessage')}</div>}
+        <div className='sm:pt-0 md:pt-2 lg:pb-8 lg:pt-0' data-testid='Calendar-button'>
           <GoogleCalendarButton href={CALENDAR_URL} text={t('calendar.viewCalendarBtn')} />
         </div>
-      ) : (
-        <div className='mt-2 text-gray-700'>{t('calendar.noMeetingsMessage')}</div>
-      )}
+      </div>
     </div>
   );
 }

components/MDX/MDX.tsx

@@ -1,7 +1,7 @@
 import { MDXProvider as CoreMDXProvider } from '@mdx-js/react';
 import mermaid from 'mermaid';
 import Link from 'next/link';
-import React, { useLayoutEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   TwitterDMButton,
   TwitterFollowButton,
@@ -97,7 +97,7 @@ function MermaidDiagram({ graph }: MermaidDiagramProps) {
   /**
    * @description Renders the Mermaid diagram.
    */
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!graph) {
       return;
     }

components/NewsletterSubscribe.tsx

@@ -1,11 +1,11 @@
-import { useTranslation } from 'next-i18next';
 import React, { useState } from 'react';
 
 import IconCircularLoader from '@/components/icons/CircularLoader';
 import { ButtonType } from '@/types/components/buttons/ButtonPropsType';
 import { InputTypes } from '@/types/components/InputBoxPropsType';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
+import { useTranslation } from '../utils/i18n';
 import Button from './buttons/Button';
 import InputBox from './InputBox';
 import Loader from './Loader';
@@ -26,6 +26,7 @@ interface NewsletterSubscribeProps {
   title?: string;
   subtitle?: string;
   type?: string;
+  errorSubtitle?: string;
 }
 
 /**
@@ -37,19 +38,21 @@ interface NewsletterSubscribeProps {
  * @param {string} props.title - The title of the Subscribe card.
  * @param {string} props.subtitle - The subtitle of the Subscribe card.
  * @param {string} props.type - The type of subscription.
+ * @param {string} props.errorSubtitle - The error subtitle to be displayed.
  */
 export default function NewsletterSubscribe({
   className = 'p-8 text-center text-black',
   dark = false,
   title = 'Subscribe to our newsletter to receive news about AsyncAPI.',
   subtitle = 'We respect your inbox. No spam, promise ✌️',
-  type = 'Newsletter'
+  type = 'Newsletter',
+  errorSubtitle = 'Subscription failed, please let us know about it by submitting a bug'
 }: NewsletterSubscribeProps) {
   const [email, setEmail] = useState<string>('');
   const [name, setName] = useState<string>('');
   const [status, setStatus] = useState<FormStatus>(FormStatus.NORMAL);
 
-  const { t } = useTranslation('common');
+  const { t, ready } = useTranslation('common', { keyPrefix: 'newsletterCTA' });
 
   const headTextColor = dark ? 'text-white' : '';
   const paragraphTextColor = dark ? 'text-gray-300' : '';
@@ -94,10 +97,10 @@ export default function NewsletterSubscribe({
     return (
       <div className={className} data-testid='NewsletterSubscribe-main'>
         <Heading level={HeadingLevel.h3} textColor={headTextColor} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
-          {t('newsletterCTA.successTitle')}
+          {ready ? t('successTitle') : 'Thank you for subscribing!'}
         </Heading>
         <Paragraph className='mb-8' textColor={paragraphTextColor}>
-          {t('newsletterCTA.subtitle')}
+          {ready ? t('subtitle') : subtitle}
         </Paragraph>
       </div>
     );
@@ -107,12 +110,12 @@ export default function NewsletterSubscribe({
     return (
       <div className={className} data-testid='NewsletterSubscribe-main'>
         <Heading level={HeadingLevel.h3} textColor={headTextColor} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
-          {t('newsletterCTA.errorTitle')}
+          {ready ? t('errorTitle') : 'Something went wrong'}
         </Heading>
         <Paragraph className='mb-8' textColor={paragraphTextColor}>
-          {t('newsletterCTA.errorSubtitle')}{' '}
+          {ready ? t('errorSubtitle') : errorSubtitle}{' '}
           <TextLink href='https://github.com/asyncapi/website/issues/new?template=bug.md' target='_blank'>
-            {t('newsletterCTA.errorLinkText')}
+            {ready ? t('errorLinkText') : 'here'}
           </TextLink>
         </Paragraph>
       </div>
@@ -122,10 +125,10 @@ export default function NewsletterSubscribe({
   return (
     <div className={className} data-testid='NewsletterSubscribe-main'>
       <Heading level={HeadingLevel.h3} textColor={headTextColor} typeStyle={HeadingTypeStyle.lg} className='mb-4'>
-        {title}
+        {ready ? t('title') : title}
       </Heading>
       <Paragraph className='mb-8' textColor={paragraphTextColor}>
-        {subtitle}
+        {ready ? t('subtitle') : subtitle}
       </Paragraph>
       {status === 'loading' ? (
         <Loader loaderText={'Waiting for response...'} loaderIcon={<IconCircularLoader dark />} dark={dark} />
@@ -134,20 +137,20 @@ export default function NewsletterSubscribe({
           <InputBox
             inputType={InputTypes.TEXT}
             inputName='name'
-            placeholder={t('newsletterCTA.nameInput')}
+            placeholder={ready ? t('nameInput') : 'Your name'}
             inputValue={name}
             setInput={setName}
           />
           <InputBox
             inputType={InputTypes.EMAIL}
             inputName='email'
-            placeholder={t('newsletterCTA.emailInput')}
+            placeholder={ready ? t('emailInput') : 'Your email'}
             inputValue={email}
             setInput={setEmail}
           />
           <Button
             type={ButtonType.SUBMIT}
-            text={t('newsletterCTA.subscribeBtn')}
+            text={ready ? t('subscribeBtn') : 'Subscribe'}
             className='mt-2 w-full md:mr-2 md:mt-0 md:flex-1'
             href=''
           />

components/data/buckets.ts

@@ -93,7 +93,7 @@ export const buckets: Bucket[] = [
     name: 'Explorer',
     title: 'Specification Explorer',
     description: 'Simplifying our Specification JSON Schema like a pro.',
-    link: '/docs/reference/specification/v3.0.0-Explorer',
+    link: '/docs/reference/specification/v3.0.0-explorer',
     className: 'bg-teal-200',
     borderClassName: 'border-orange-200',
     icon: IconExplorer