Merge branch 'Extend#2135' of https://github.com/vishvamsinh28/website …

…into Extend#2135

components/MDX.js

@@ -62,6 +62,12 @@ export function getMDXComponents() {
     td: props => <td {...props} className={`${props.className || ''} px-6 py-4 border-b border-gray-200 text-sm leading-5 text-gray-700 tracking-tight`} />,
     pre: props => CodeComponent(props.children.props),
     code:  props => <code {...props} className={`${props.className || ''} px-1 py-0.5 bg-gray-200 text-gray-800 rounded font-mono text-sm`} />,
+    details: (props) => 
+      <details {...props} className={`${ props.className || ''} mb-1 font-heading antialiased text-gray-900`}/>,
+    summary: (props) => 
+      <summary {...props} className={`${props.className || ''} my-2 font-heading cursor-pointer antialiased font-semibold text-gray-900`}/>,
+    p: (props) => 
+    <p {...props} className={`${props.className || ''} ml-4 cursor-pointer`}/>,
     hr: props => <hr {...props} className={`${props.className || ''} my-8`} />,
     CodeBlock,
     ChapterSuggestions,

components/buttons/ScrollButton.js

@@ -23,7 +23,7 @@ function ScrollButton(){
 
         })
     }
-    return <div className="fixed bottom-14 right-4  h-16 w-12 z-50">
+    return <div className="fixed bottom-14 right-4 h-16 w-12 z-40">
         {backToTopButton &&(
             <button className="rounded-full shadow-md bg-white " onClick={scrollUp}> <img src={scrollImage}/></button>
         )}

components/navigation/MobileNavMenu.js

@@ -9,7 +9,7 @@ import Link from 'next/link';
 
 export default function MobileNavMenu({ onClickClose = () => {} }) {
   return (
-    <div className="fixed top-0 inset-x-0 py-2 transition transform origin-top-right max-h-full lg:hidden overflow-y-scroll">
+    <div className="fixed top-0 z-60 inset-x-0 py-2 transition transform origin-top-right max-h-full lg:hidden overflow-y-scroll">
       <div className="rounded-lg shadow-lg">
         <div className="rounded-lg shadow-xs bg-white divide-y-2 divide-gray-50">
           <div className="pt-5 pb-6 px-5 space-y-6">

components/navigation/NavBar.js

@@ -9,7 +9,6 @@ import LearningPanel from './LearningPanel'
 import CommunityPanel from "./CommunityPanel"
 import MobileNavMenu from './MobileNavMenu'
 import otherItems from './otherItems'
-
 import GithubButton from "../buttons/GithubButton"
 import { SearchButton } from '../AlgoliaSearch';
 import IconLoupe from '../icons/Loupe';
@@ -100,7 +99,7 @@ export default function NavBar({
   useEffect(() => {
     setMobileMenuOpen(false);
     setOpen(null);
-  }, [asPath])
+  }, [asPath]);
 
   return (
     <div className={`bg-white ${className} z-50`}>

config/meetings.json

@@ -1,25 +1,11 @@
 [
-  {
-    "title": "Spec 3.0 Docs Meeting",
-    "calLink": "https://www.google.com/calendar/event?eid=aHJwdnA1bzI1ajVjNzliZ2h2bm1nZnI3b3MgY19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bn",
-    "url": "https://github.com/asyncapi/community/issues/793",
-    "banner": "",
-    "date": "2023-08-31T14:30:00.000Z"
-  },
   {
     "title": "Spec 3.0 Meeting",
     "calLink": "https://www.google.com/calendar/event?eid=NDEzM2E1ZGE5YWttYXVpYW9zbTl1cWM1YWMgY19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bn",
     "url": "https://github.com/asyncapi/community/issues/857",
     "banner": "",
     "date": "2023-09-06T16:00:00.000Z"
   },
-  {
-    "title": "AsyncAPI spec v3 support in Diff",
-    "calLink": "https://www.google.com/calendar/event?eid=YnVvZWt1azlwcTQxNzZnNzNpZ2c3cjdmbzAgY19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bn",
-    "url": "https://github.com/asyncapi/community/issues/858",
-    "banner": "",
-    "date": "2023-08-29T13:30:00.000Z"
-  },
   {
     "title": "Brainstorm on AsyncAPI Cheat Sheet Poster",
     "calLink": "https://www.google.com/calendar/event?eid=bGx1dXBuc2x1a29mN3RzMmQzcGFjaWM4anMgY19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bn",

config/newsroom_videos.json

@@ -17,16 +17,16 @@
     "description": "https://github.com/asyncapi/community/issues/917.",
     "videoId": "KDort611FNg"
   },
-  {
-    "image_url": "https://i.ytimg.com/vi/YREb9wuYCOA/hqdefault.jpg",
-    "title": "AsyncAPI v3 announcement",
-    "description": "Join us live to learn about all the goodies that AsyncAPI v3 brings.",
-    "videoId": "YREb9wuYCOA"
-  },
   {
     "image_url": "https://i.ytimg.com/vi/Vm4ZKFb2PVE/hqdefault.jpg",
     "title": "Community Meeting(October 31th, 2023)",
     "description": "Powered by Restream https://restream.io https://github.com/asyncapi/community/issues/916.",
     "videoId": "Vm4ZKFb2PVE"
+  },
+  {
+    "image_url": "https://i.ytimg.com/vi/FN5eR1Zqh9c/hqdefault.jpg",
+    "title": "AsyncAPI Conf on Tour 2023 in Madrid",
+    "description": "AACoT'23 Madrid Edition streamed live from StageOne at SNGULAR. 00:00 Waiting 57:12 Opening 1:26:07 Everything You Wish ...",
+    "videoId": "FN5eR1Zqh9c"
   }
 ]

cypress/test/components/campaignTests/AnnouncementHero.cy.js

@@ -7,26 +7,28 @@ beforeEach(() => {
   mount(<AnnouncementHero />);
 });
 
+// .skip should be removed once the AnnouncementHero component is rendered in the website
 describe('AnnouncementHero Component', () => {
-  it('should render the component when the date is within the valid range', () => {
+  it.skip('should render the component when the date is within the valid range', () => {
     const mockDate = new Date(2021, 10, 12).getTime();
     cy.clock(mockDate);
     cy.get('[data-testid="AnnouncementHero-main-div"]').should('exist');
   });
 
   //check if announcement rendered is small or large .
-  it('should render a small announcement when "small" prop is true', () => {
+  it.skip('should render a small announcement when "small" prop is true', () => {
     mount(<AnnouncementHero small />);
     cy.get('[data-testid="AnnouncementHero-main-div"]').should('have.class', 'mb-4');
   });
 
-  it('should display the correct event information', () => {
+  it.skip('should display the correct event information', () => {
     // Assert the event details
     cy.get('[data-testid="Paragraph-test"]').should('exist');
     cy.get('h2').should('exist');
 
   });
-  it('should have a link and text for the button', () => {
+
+  it.skip('should have a link and text for the button', () => {
     mount(<AnnouncementHero />);
     cy.get('[data-testid="Button-link"]')
       .should('have.attr', 'target', '_blank')
@@ -38,7 +40,7 @@ describe('AnnouncementHero Component', () => {
    });
 
   //check if announcement rendered is small or large .
-  it('should render a small announcement when "small" prop is true', () => {
+  it.skip('should render a small announcement when "small" prop is true', () => {
     const mockDate = new Date('2023-05-01T00:00:00Z');
     cy.clock(mockDate.getTime());
 
@@ -47,7 +49,7 @@ describe('AnnouncementHero Component', () => {
     cy.get('[data-testid="AnnouncementHero-main-div"]').should('have.class', 'mb-4');
   });
 
-  it('should render a large announcement when "small" prop is false', () => {
+  it.skip('should render a large announcement when "small" prop is false', () => {
     const mockDate = new Date('2023-05-01T00:00:00Z');
     cy.clock(mockDate.getTime());
 

cypress/test/components/campaignTests/Banner.cy.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { mount } from '@cypress/react';
 import Banner from '../../../../components/campaigns/Banner';
 
+// .skip should be removed once the Banner component is rendered in the website with default functionalities
 describe('Banner Component', () => {
-  it('should not render the banner when the date is not within the valid range', () => {
+  it.skip('should not render the banner when the date is not within the valid range', () => {
     const today = new Date();
     const [day,  month, year] = [today.getUTCDate(),  today.getUTCMonth(),  today.getUTCFullYear()];
     if (year > 2022 || month !== 10 || day < 6) {
@@ -17,21 +18,21 @@ describe('Banner Component', () => {
     }
   });
 
-  it('should render the banner when the date is within the valid range', () => {
+  it.skip('should render the banner when the date is within the valid range', () => {
     const mockDate = new Date(2021, 10, 12).getTime();
     cy.clock(mockDate);
     mount(<Banner />);
     cy.get('[data-testid="Banner-main-div"]').should('be.visible');
   });
 
-  it('should display the correct message when the date is within the valid range', () => {
+  it.skip('should display the correct message when the date is within the valid range', () => {
     const mockDate = new Date(2021, 10, 12).getTime();
     cy.clock(mockDate);
     mount(<Banner />);
     cy.contains('.font-medium', 'AsyncAPI Conference 2022 has ended').should('be.visible');
   });
 
-  it('should have a link to the recordings playlist', () => {
+  it.skip('should have a link to the recordings playlist', () => {
     const mockDate = new Date(2021, 10, 12).getTime();
     cy.clock(mockDate);
     mount(<Banner />);
@@ -41,7 +42,7 @@ describe('Banner Component', () => {
       .should('have.attr', 'rel', 'noopener noreferrer');
   });
 
-  it('should have the max-w-screen-xl class in the div element', () => {
+  it.skip('should have the max-w-screen-xl class in the div element', () => {
     const mockDate = new Date(2021, 10, 12).getTime();
     cy.clock(mockDate);
     mount(<Banner />);

pages/about/index.md

@@ -100,11 +100,47 @@ All the information about the project's economy, the amount of the donations, th
 
 ## FAQs
 
-- **What is the goal of the project?** To make asynchronous APIs as successful and mature as REST APIs.
-- **What protocols does it support?** AsyncAPI is protocol-agnostic, so you can use it for APIs that work over any protocol (e.g., AMQP, MQTT, WebSockets, Kafka, STOMP, HTTP, Mercure, etc). For more information, refer to the [AsyncAPI specification documentation](https://www.asyncapi.com/docs/reference/specification/latest#serverBindingsObject).
-- **Who are the users of AsyncAPI?** AsyncAPI users are those who implement and maintain event-driven architecture. For example, people that write backend API using WebSocket, or people that maintain communication between their microservices using Kafka.
-- **What is the AsyncAPI Community?** It’s the core of the initiative. The AsyncAPI community contributes to the development of the tool, it promotes access and distribution of the specification allowing freedom of use, study, copying, modification, and redistribution to anyone who wishes to do so. The cooperation between these people in all areas of software production generates a substantial improvement in the quality of the software, as well as greater dissemination and sustainability over time, and prioritizing the benefit of society over any other.
-- **Who can use it?** Anyone. All projects under AsyncAPI Initiative are part of the Linux Foundation, licensed under the Apache 2.0 license. It’s open to use and contribution.
-- **Where can I find more information?**
-    - [Official AsyncAPI Documentation](/docs)
-    - [Presentation by Fran Méndez, explaining the project](https://www.youtube.com/watch?v=UID1nnuFDtM&list=PLbi1gRlP7piitNgvqhIAvGNZM_kvP0r8R)
+<details class="cursor-pointer">
+<summary>What is the goal of the project?</summary>
+
+<p> To make asynchronous APIs as successful and mature as REST APIs.</p>
+
+</details>
+
+<details class="cursor-pointer ">
+<summary>What protocols does it support?</summary>
+
+<p>AsyncAPI is protocol-agnostic, so you can use it for APIs that work over any protocol (e.g., AMQP, MQTT, WebSockets, Kafka, STOMP, HTTP, Mercure, etc). For more information, refer to the [AsyncAPI specification documentation](https://www.asyncapi.com/docs/reference/specification/latest#serverBindingsObject).
+</p>
+
+</details>
+
+<details class="cursor-pointer">
+<summary>Who are the users of AsyncAPI?</summary>
+
+<p>AsyncAPI users are those who implement and maintain event-driven architecture. For example, people that write backend API using WebSocket, or people that maintain communication between their microservices using Kafka.</p>
+
+</details>
+
+<details class="cursor-pointer">
+<summary>What is the AsyncAPI Community?</summary>
+
+<p>It’s the core of the initiative. The AsyncAPI community contributes to the development of the tool, it promotes access and distribution of the specification allowing freedom of use, study, copying, modification, and redistribution to anyone who wishes to do so. The cooperation between these people in all areas of software production generates a substantial improvement in the quality of the software, as well as greater dissemination and sustainability over time, and prioritizing the benefit of society over any other.</p>
+
+</details>
+
+<details class="cursor-pointer">
+<summary>Who can use it?</summary>
+
+<p>Anyone. All projects under AsyncAPI Initiative are part of the Linux Foundation, licensed under the Apache 2.0 license. It’s open to use and contribution.</p>
+
+</details>
+
+<details class="cursor-pointer">
+<summary>Where can I find more information?</summary>
+
+&nbsp;[Official AsyncAPI Documentation](/docs)
+
+&nbsp;[Presentation by Fran Méndez, explaining the project](https://www.youtube.com/watch?v=UID1nnuFDtM&list=PLbi1gRlP7piitNgvqhIAvGNZM_kvP0r8R)
+
+</details>