Merge branch 'master' into newcontribguideaaabbbccc

components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import type { AccordionItemType } from '@/types/components/AccordionItemType';
+
+import Accordion from './Accordion';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;
+
+const sampleAccordionItemList: AccordionItemType[] = [
+  {
+    title: 'Accordion Item 1',
+    content: 'This is the content of accordion item 1.'
+  },
+  {
+    title: 'Accordion Item 2',
+    content: 'This is the content of accordion item 2.'
+  },
+  {
+    title: 'Accordion Item 3',
+    content: 'This is the content of accordion item 3.'
+  }
+];
+
+export const SampleAccordion: Story = {
+  args: {
+    accordionItems: sampleAccordionItemList
+  }
+};

components/Accordion/Accordion.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import type { AccordionItemType } from '@/types/components/AccordionItemType';
+
+import AccordionItem from './AccordionItem';
+
+export interface AccordionProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** List of accordian items objects each containing title and content. */
+  accordionItems: AccordionItemType[];
+}
+
+/**
+ * This is the Accordion component. It displays a list of items that can be expanded or collapsed.
+ */
+export default function Accordion({ accordionItems = [] }: AccordionProps) {
+  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
+
+  return (
+    <div>
+      {accordionItems.map(({ title, content }, index) => (
+        <AccordionItem
+          key={index}
+          itemIndex={index}
+          title={title}
+          content={content}
+          isActive={index === activeIndex}
+          setActiveIndex={setActiveIndex}
+        />
+      ))}
+    </div>
+  );
+}

components/Accordion/AccordionItem.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+export interface AccordionItemProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** Index of the accordion item. */
+  itemIndex: number;
+
+  /** Title of the accordion item. */
+  title: string;
+
+  /** Content of the accordion item. */
+  content: React.ReactNode;
+
+  /** Whether the accordion item is active(open) or not. */
+  isActive: boolean;
+
+  /** Function to set the active index of the accordion item. */
+  setActiveIndex: (index: number | null) => void;
+}
+
+/**
+ * This is the AccordionItem component. It displays a single item that can be expanded or collapsed.
+ */
+export default function AccordionItem({ itemIndex, title, content, isActive, setActiveIndex }: AccordionItemProps) {
+  const handleClick = () => {
+    const nextIndex = isActive ? null : itemIndex;
+
+    setActiveIndex(nextIndex);
+  };
+
+  return (
+    <div className='my-2 flex size-full flex-col gap-1 border border-gray-200 bg-white px-2'>
+      <button className='flex h-8 w-full items-center justify-between rounded-sm py-2' onClick={handleClick}>
+        <div className='font-body font-semibold text-gray-800 antialiased'>{title}</div>
+        <div>
+          {isActive ? (
+            <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+              <path
+                d='M18 15C18 15 13.5811 9.00001 12 9C10.4188 8.99999 6 15 6 15'
+                stroke='#556061'
+                stroke-width='1.5'
+                stroke-linecap='round'
+                stroke-linejoin='round'
+              />
+            </svg>
+          ) : (
+            <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+              <path
+                d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9'
+                stroke='#556061'
+                stroke-width='1.5'
+                stroke-linecap='round'
+                stroke-linejoin='round'
+              />
+            </svg>
+          )}
+        </div>
+      </button>
+      {isActive && (
+        <div className='rounded-sm border-t border-gray-200 py-2 font-body font-regular text-gray-700 antialiased'>
+          {content}
+        </div>
+      )}
+    </div>
+  );
+}

components/MDX/MDX.tsx

@@ -29,6 +29,7 @@ import Caption from '../Caption';
 import DocsCards from '../docs/DocsCards';
 import Visualizer from '../docs/Visualizer';
 import CodeBlock from '../editor/CodeBlock';
+import FAQ from '../faq/FAQ';
 import Figure from '../Figure';
 import GeneratorInstallation from '../GeneratorInstallation';
 import Column from '../layout/Column';
@@ -308,6 +309,7 @@ export function getMDXComponents() {
     Text,
     Warning,
     Sponsors,
+    FAQ,
     Caption,
     Row,
     Column,

components/faq/FAQ.tsx

@@ -0,0 +1,10 @@
+import Accordion from '@/components/Accordion/Accordion';
+
+import { faqList } from './FAQList';
+
+/**
+ * This is the FAQ component. It tells the user about the frequently asked questions. It has been created to render FAQ list inside MDX file.
+ */
+export default function FAQ() {
+  return <Accordion accordionItems={faqList} />;
+}

components/faq/FAQList.tsx

@@ -0,0 +1,88 @@
+import Link from 'next/link';
+import React from 'react';
+
+import type { AccordionItemType as FAQ } from '@/types/components/AccordionItemType';
+
+/**
+ * This is the FAQ list. It contains the frequently asked questions and their answers.
+ */
+export const faqList: FAQ[] = [
+  {
+    title: 'What is the goal of the project?',
+    content: <div>To make asynchronous APIs as successful and mature as REST APIs.</div>
+  },
+  {
+    title: 'What protocols does it support?',
+    content: (
+      <div>
+        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{' '}
+        <a
+          href='https://www.asyncapi.com/docs/reference/specification/latest#serverBindingsObject'
+          className='border-b border-secondary-400 font-semibold text-gray-900 transition duration-300 ease-in-out hover:border-secondary-500'
+        >
+          AsyncAPI specification documentation
+        </a>
+        .
+      </div>
+    )
+  },
+  {
+    title: 'Who are the users of AsyncAPI?',
+    content: (
+      <div>
+        <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>
+      </div>
+    )
+  },
+  {
+    title: 'What is the AsyncAPI Community?',
+    content: (
+      <div>
+        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.
+      </div>
+    )
+  },
+  {
+    title: 'Who can use it?',
+    content: (
+      <div>
+        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.
+      </div>
+    )
+  },
+  {
+    title: 'Where can I find more information?',
+    content: (
+      <div>
+        <ul className='font-normal list-disc pl-8 font-semibold text-gray-900 antialiased'>
+          <li className='py-1'>
+            <Link
+              href='/docs'
+              className='border-b border-secondary-400 transition duration-300 ease-in-out hover:border-secondary-500'
+            >
+              Official AsyncAPI Documentation
+            </Link>{' '}
+          </li>
+          <li className='py-1'>
+            <a
+              href='https://www.youtube.com/watch?v=UID1nnuFDtM&list=PLbi1gRlP7piitNgvqhIAvGNZM_kvP0r8R'
+              className='border-b border-secondary-400 transition duration-300 ease-in-out hover:border-secondary-500'
+            >
+              Presentation by Fran Méndez
+            </a>{' '}
+          </li>
+        </ul>
+      </div>
+    )
+  }
+];

components/navigation/BlogPostCard.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import BlogPostItem from './BlogPostItem';
+
+const meta: Meta<typeof BlogPostItem> = {
+  title: 'Components/BlogPostCard',
+  component: BlogPostItem,
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          maxWidth: '400px'
+        }}
+      >
+        <Story />
+      </div>
+    )
+  ]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BlogPostItem>;
+
+export const BlogPostCard: Story = {
+  args: {
+    post: {
+      title: 'Blog Post Title',
+      date: '2024-07-28T06:30:00.000Z',
+      type: 'Blog Category',
+      tags: ['Tag 1', 'Tag 2'],
+      cover: '/img/posts/release-notes-3.0.0/cover.webp',
+      authors: [
+        {
+          name: 'Author Name',
+          photo: '/favicon-194x194.png',
+          link: 'https://x.com/AsyncAPISpec',
+          byline: 'Author Byline'
+        }
+      ],
+      excerpt: 'This is a blog post excerpt.',
+      toc: [
+        {
+          content: 'Table of Content 1',
+          slug: 'table-of-content-1',
+          lvl: 1,
+          i: 0,
+          seen: 0
+        },
+        {
+          content: 'Table of Content 2',
+          slug: 'table-of-content-2',
+          lvl: 2,
+          i: 1,
+          seen: 0
+        },
+        {
+          content: 'Table of Content 3',
+          slug: 'table-of-content-3',
+          lvl: 2,
+          i: 2,
+          seen: 0
+        }
+      ],
+      readingTime: 22,
+      sectionSlug: '/blog-section-slug',
+      sectionWeight: 0,
+      id: 'pages/blog/blog-post-slug',
+      isIndex: false,
+      slug: '/blog-post-slug',
+      featured: false
+    }
+  }
+};

components/navigation/BlogPostItem.tsx

@@ -14,22 +14,24 @@ import Heading from '../typography/Heading';
 import Paragraph from '../typography/Paragraph';
 
 interface BlogPostItemProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** The blog post data. */
   post: IBlogPost;
+
+  /** Additional CSS classes for styling. */
   className?: string;
+
+  /** The HTML id attribute for the component. */
   id?: string;
 }
 
 /**
- * @description Functional component representing a single blog post item.
- * @param {Object} props - Props for the BlogPostItem component.
- * @param {IBlogPost} props.post - The blog post data.
- * @param {string} [props.className=''] - Additional CSS classes for styling.
- * @param {string} [props.id=''] - The HTML id attribute for the component.
- * @param {Ref<HTMLLIElement>} ref - Reference object for the component.
+ * Functional component representing a single blog post item.
  */
 export default forwardRef(function BlogPostItem(
   { post, className = '', id = '' }: BlogPostItemProps,
-  ref: Ref<HTMLLIElement>
+  ref: Ref<HTMLLIElement> /** Reference object for the component. */
 ) {
   let typeColors: [string, string] = ['bg-indigo-100', 'text-indigo-800'];
 
@@ -50,7 +52,7 @@ export default forwardRef(function BlogPostItem(
   }
 
   return (
-    <li className={`rounded-lg ${className}`} ref={ref} id={id}>
+    <li className={`list-none rounded-lg ${className}`} ref={ref} id={id}>
       <article className='h-full rounded-lg'>
         <Link href={post.slug}>
           <span

markdown/about/index.md

@@ -99,12 +99,4 @@ All the information about the project's economy, the amount of the donations, th
 - [**AsyncAPI Open Meetings**](https://github.com/asyncapi): AsyncAPI hosts different meetings every week. They are focused on different topics, sometimes purely technical and sometimes about community building. Pick one and join us! [Learn more about our meetings](/community/meetings)
 
 ## 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)
+<FAQ />

types/components/AccordionItemType.ts

@@ -0,0 +1,4 @@
+export interface AccordionItemType {
+  title: string;
+  content: React.ReactNode;
+}