Merge branch 'master' into FinanceSummary#1723

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+.next
+.github

Dockerfile

@@ -0,0 +1,19 @@
+# Development Docker file
+FROM node:18-alpine
+
+WORKDIR /async
+
+# Install development dependencies
+COPY package.json package-lock.json ./
+RUN npm install
+
+# Copy the rest of the application files
+COPY . .
+
+# Expose the port for development (if needed)
+EXPOSE 3000
+
+# Set environment variables for development (optional)
+ENV NODE_ENV=development
+
+CMD ["npm", "run", "dev"]

README.md

@@ -96,6 +96,27 @@ npm run build
 
 Generated files of the website go to the `.next` folder.
 
+### Run locally using Docker
+
+#### Prerequisites:
+
+- [install Docker](https://docs.docker.com/get-docker/)
+
+
+After cloning repository to your local, perform the following steps from the root of the repository.
+
+#### Steps:
+1. Build the Docker image:
+    ```bash 
+    docker build -t asyncapi-website .`
+    ```
+2. Start the container:
+    ```bash
+    docker run --rm -it -v "$PWD":/async -p 3000:3000 asyncapi-website
+    ```
+
+Now you're running AsyncAPI website in a development mode. Container is mapped with your local copy of the website. Whenever you make changes to the code, the website will refresh and changes visible in localhost:3000.
+
 ## Updating information about project finance
 
 AsyncAPI Financial Summary page aims to provide transparency and clarity regarding the organization's financial activities. It serves as a platform to showcase how donations are accepted, different sponsorship options, and how the generated funds are utilized.

components/footer/FooterList.js

@@ -49,7 +49,7 @@ export const initiativeLinks = [
   },
   {
     label: "Shop",
-    url: "https://asyncapi.threadless.com",
+    url: "https://www.store.asyncapi.com/",
   },
   {
     label: "Jobs",

components/icons/DocsArrow.js

@@ -0,0 +1,7 @@
+export default function DocsArrow({ isDropDown, activeDropDownItem, onClick, className }) {
+    return (
+        <div className={`w-6 my-auto p-2 rounded-md cursor-pointer ${isDropDown && 'hover:bg-gray-100'}`} onClick={isDropDown ? onClick : () => { }}>
+          {isDropDown && <img src='/img/illustrations/icons/arrow.svg' className={`transition-transform w-fit m-auto duration-200 transform ${className} ${activeDropDownItem ? 'rotate-90' : ''}`} />}
+        </div>
+      );
+}

components/layout/DocsLayout.js

@@ -89,7 +89,7 @@ export default function DocsLayout({ post, navItems = {}, children }) {
             className="hidden lg:flex lg:flex-shrink-0"
             data-testid="DocsLayout-main"
           >
-            <div className="flex flex-col w-64 border-r border-gray-200 bg-white py-2">
+            <div className="flex flex-col w-72 border-r border-gray-200 bg-white py-2">
               <div className="flex-1 flex flex-col md:overflow-y-auto md:sticky md:top-20 md:max-h-(screen-14)">
                 <SearchButton
                   className="mt-8 mb-4 mr-2 flex items-center text-left text-sm space-x-3 px-3 py-1.5 bg-white hover:bg-secondary-100 border-gray-300 hover:border-secondary-500 border text-gray-700 hover:text-secondary-500 shadow-sm transition-all duration-500 ease-in-out rounded-md"

components/navigation/DocsNav.js

@@ -1,8 +1,12 @@
+import React, { useState, useEffect } from 'react';
 import DocsNavItem from './DocsNavItem';
 import IconHome from '../icons/Home';
+import SubCategoryDocsNav from './SubCategoryDocsNav';
+import DocsArrow from '../icons/DocsArrow';
 
 import { buckets } from '../data/buckets';
 
+
 const serializedBuckets = buckets.reduce((acc, bucket) => {
   acc[bucket.name] = {
     ...bucket,
@@ -19,28 +23,35 @@ const serializedBuckets = buckets.reduce((acc, bucket) => {
 export default function DocsNav({
   item,
   active,
-  onClick = () => {},
+  onClick = () => { },
 }) {
   const subCategories = item.children;
   const bucket = serializedBuckets[item.item.rootSectionId];
 
+  const [openSubCategory, setOpenSubCategory] = useState(active.startsWith(item.item.slug));
+
+  const onClickHandler = () => {
+    setOpenSubCategory(!openSubCategory);
+    onClick();
+  }
+
+  useEffect(() => {
+    setOpenSubCategory(active.startsWith(item.item.slug));
+  }, [active])
+
   return (
     <li className='mb-4' key={item.item.title} data-testid="DocsNav-item">
-      <DocsNavItem {...item.item} activeSlug={active} defaultClassName='font-body text-sm text-black hover:font-semibold' inactiveClassName='font-regular' activeClassName='font-semibold' bucket={bucket} onClick={onClick} />
-      <ul className='border-l border-gray-200 pl-4 ml-3 mt-1'>
-        {Object.values(subCategories).map((subCategory) => (
-          <li key={subCategory.item.title}  data-testid="DocsNav-subitem">
-            <DocsNavItem {...subCategory.item} activeSlug={active} defaultClassName={`font-body text-sm text-black leading-8 ${subCategory.children ? 'hover:font-semibold' : 'hover:text-secondary-600'}`} inactiveClassName='font-regular' activeClassName={subCategory.children ? 'font-semibold' : 'text-secondary-600'} onClick={onClick} />
-            <ul className='border-l border-gray-200 pl-4'>
-              {subCategory.children && subCategory.children.map(subItem => (
-                <li key={subItem.title}>
-                  <DocsNavItem {...subItem} activeSlug={active} defaultClassName='font-body text-sm text-gray-700 leading-7 hover:text-secondary-600' inactiveClassName='font-regular' activeClassName='text-secondary-600' onClick={onClick} />
-                </li>
-              ))}
-            </ul>
-          </li>
-        ))}
-      </ul>
+      <div className='flex gap-2'>
+        <DocsArrow isDropDown={Object.values(subCategories).length > 0} activeDropDownItem={openSubCategory} onClick={() => setOpenSubCategory(!openSubCategory)} />
+        <DocsNavItem {...item.item} activeSlug={active} defaultClassName='font-body text-sm text-black hover:font-semibold' inactiveClassName='font-regular' activeClassName='font-semibold' bucket={bucket} onClick={onClickHandler} />
+      </div>
+      {openSubCategory && (
+        <ul className='border-l border-gray-200 pl-4 ml-3 mt-1'>
+          {Object.values(subCategories).map((subCategory) => (
+            <SubCategoryDocsNav key={subCategory.item.title} subCategory={subCategory} activeItem={active} onClick={onClick} />
+          ))}
+        </ul>
+      )}
     </li>
   );
 }

components/navigation/SubCategoryDocsNav.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+import DocsNavItem from "./DocsNavItem";
+import DocsArrow from "../icons/DocsArrow";
+
+export default function SubCategoryDocsNav({ subCategory, activeItem, onClick }) {
+    const [openSubCategoryChildren, setOpenSubCategoryChildren] = useState(activeItem.startsWith(subCategory.item.slug));
+
+    const onClickHandler = () => {
+      setOpenSubCategoryChildren(!openSubCategoryChildren);
+      onClick();
+    }
+
+    useEffect(() => {
+      setOpenSubCategoryChildren(activeItem.startsWith(subCategory.item.slug));
+    }, [activeItem])
+
+    return (
+      <li key={subCategory.item.title} data-testid="DocsNav-subitem">
+        <div className='flex gap-2'>
+          <DocsArrow isDropDown={subCategory.children} activeDropDownItem={openSubCategoryChildren} onClick={() => setOpenSubCategoryChildren(!openSubCategoryChildren)} />
+          <DocsNavItem {...subCategory.item} activeSlug={activeItem} defaultClassName={`font-body text-sm text-black leading-8 ${subCategory.children ? 'hover:font-semibold' : 'hover:text-secondary-600'}`} inactiveClassName='font-regular' activeClassName={subCategory.children ? 'font-semibold' : 'text-secondary-600'} onClick={onClickHandler} />
+        </div>
+        {openSubCategoryChildren && (
+          <ul className='border-l ml-8 border-gray-200 pl-4'>
+            {subCategory.children && subCategory.children.map(subItem => (
+              <li key={subItem.title}>
+                <DocsNavItem {...subItem} activeSlug={activeItem} defaultClassName='font-body text-sm text-gray-700 leading-7 hover:text-secondary-600' inactiveClassName='font-regular' activeClassName='text-secondary-600' onClick={onClick} />
+              </li>
+            ))}
+          </ul>
+        )}
+      </li>
+    )
+}

config/newsroom_videos.json

@@ -1,4 +1,10 @@
 [
+  {
+    "image_url": "https://i.ytimg.com/vi/prFgD14u7T0/hqdefault.jpg",
+    "title": "Overview of AsyncAPI v3",
+    "description": "Join us for an insightful stream diving deep into the latest advancements of AsyncAPI v3! We'll explore this cutting-edge ...",
+    "videoId": "prFgD14u7T0"
+  },
   {
     "image_url": "https://i.ytimg.com/vi/-OsMet9h_dg/hqdefault.jpg",
     "title": "3 Request/Reply Use Cases",
@@ -22,11 +28,5 @@
     "title": "AsyncAPI Conf on Tour 2023 in Bangalore, India",
     "description": "AACoT'23 Bangalore Edition live from Postman Offices in India.",
     "videoId": "g6CPg77Lf5Q"
-  },
-  {
-    "image_url": "https://i.ytimg.com/vi/p68PUXDMsks/hqdefault.jpg",
-    "title": "Community Meeting(November 28th, 2023)",
-    "description": "https://github.com/asyncapi/community/issues/918.",
-    "videoId": "p68PUXDMsks"
   }
 ]

pages/docs/reference/specification/v3.0.0.md

@@ -14,10 +14,9 @@ The AsyncAPI Specification is licensed under [The Apache License, Version 2.0](h
 
 The AsyncAPI Specification is a project used to describe message-driven APIs in a machine-readable format. It’s protocol-agnostic, so you can use it for APIs that work over any protocol (e.g., AMQP, MQTT, WebSockets, Kafka, STOMP, HTTP, Mercure, etc).
 
-The AsyncAPI Specification defines a set of files required to describe the API of an [application](#definitionsApplication).
-These files can be used to create utilities, such as documentation, code, integration, or testing tools.
+The AsyncAPI Specification defines a set of fields that can be used in an AsyncAPI document to describe an [application](#definitionsApplication)'s API. The document may reference other files for additional details or shared fields, but it is typically a single, primary document that encapsulates the API description.
 
-The file(s) SHOULD describe the operations an [application](#definitionsApplication) performs. For instance, consider the following AsyncAPI definition snippet:
+The AsyncAPI document SHOULD describe the operations an [application](#definitionsApplication) performs. For instance, consider the following AsyncAPI definition snippet:
 
 ```yaml
 channels:
@@ -60,6 +59,7 @@ operations:
 
 Aside from the issues mentioned above, there may also be infrastructure configuration that is not represented here. For instance, a system may use a read-only channel for receiving messages, a different one for sending them, and an intermediary process that will forward messages from one channel to the other.
 
+
 ## <a name="definitions"></a>Definitions
 
 ### <a name="definitionsServer"></a>Server