Merge branch 'master' into enable-i18n

.dockerignore

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

.gitignore

@@ -7,11 +7,13 @@ node_modules
 out
 config/posts.json
 config/case-studies.json
+config/adopters.json
 public/rss.xml
 .env.local
 yarn.lock
 meetings.json
 .netlify
 .env
 cypress/screenshots
-cypress/videos
+cypress/videos
+/config/finance/json-data/*

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,45 @@ 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.
+
+### How to update information
+
+- YAML files must be stored in the `config/finance` directory.
+
+- Create separate folders for each year under `config/finance`, such as `config/finance/2023`. Inside each year's folder, include two YAML files: `Expenses.yml` and `ExpensesLink.yml`.
+
+- In `Expenses.yml`, record expenses for each month, specifying the `Category` and `Amount`.
+
+- In `ExpensesLink.yml`, provide discussion links related to expense categories.
+
+- When a new year begins, create a corresponding folder for that year under `config/finance` and place the YAML files inside the folder for that specific year. For example, create a folder named `config/finance/2024` for the year 2024 and `config/finance/2025` for the year 2025. Place the YAML file for each respective year inside its designated folder.
+
+- Modify the years within the `scripts/finance/index.js` , `lib/getUniqueCategories.js` and `components/FinancialSummary/BarChartComponent.js` to handle data for different years effectively.
+
 ## Case studies
 
 ### Overview

components/CaseTOC.js

@@ -0,0 +1,157 @@
+import { useMemo, useState } from "react";
+import Scrollspy from "react-scrollspy";
+import { twMerge } from "tailwind-merge";
+import ArrowRight from "./icons/ArrowRight";
+import { useHeadingsObserver } from "./helpers/useHeadingsObserver";
+
+const checkIfActive = (item, currSelected) => {
+  return item.slug === currSelected || item.children?.some((child) => checkIfActive(child, currSelected));
+}
+
+const convertContentToTocItems = (content, level = 1) => {
+  const tocItems = [];
+
+  for (let section of content) {
+    const item = {
+      lvl: level,
+      content: section.title,
+      slug: section.title
+        .replace(/<|>|"|\\|\/|=/gi, "")
+        .replace(/\s/gi, "-")
+        .toLowerCase(),
+    };
+
+    if (section.children && section.children.length > 0) {
+      const children = convertContentToTocItems(section.children, level + 1);
+      item.children = children;
+    }
+
+    tocItems.push(item);
+  }
+
+  return tocItems;
+};
+
+function TOCItem({ item, index, currSelected, closeMenu }) {
+  const [open, setOpen] = useState(false);
+  const handleClick = () => {
+    closeMenu();
+    setOpen(false);
+  };
+  const active = useMemo(() => checkIfActive(item, currSelected), [item, currSelected]);
+
+  return (
+    <>
+      <nav className="relative block max-w-max">
+        <a
+          className={`mb-1 transition duration-100 ease-in-out text-gray-900 font-normal text-sm font-sans antialiased hover:underline flex items-center ${
+             active && "text-primary-500 font-bold"
+          }`}
+          href={`#${item.slug}`}
+          key={index}
+          style={{ marginLeft: `${(item.lvl - 1) * 16}px` }}
+          onClick={handleClick}
+        >
+          {item.content}
+        </a>
+        {item.children && item.children.length > 0 && (
+          <span onClick={() => setOpen(!open)} className="cursor-pointer absolute -right-6 top-0 ">
+            <ArrowRight
+              className={`${
+                open ? "rotate-90" : "0"
+              } transform transition duration-200 ease-in-out h-5 text-gray-500`}
+            />
+          </span>
+        )}
+      </nav>
+      {item.children && item.children.length > 0 && (
+        <ul
+          className={`left-0 relative ${
+            open ? "max-h-[1000px]" : "max-h-[0.01px]"
+          } overflow-hidden transition-all duration-300 ease-in-out`}
+        >
+          {item.children.map((item, index) => (
+            <TOCItem
+              item={item}
+              index={index}
+              key={index}
+              closeMenu={closeMenu}
+              currSelected={currSelected}
+            />
+          ))}
+        </ul>
+      )}
+    </>
+  );
+}
+
+export default function CaseTOC({
+  className,
+  cssBreakingPoint = "xl",
+  toc,
+  contentSelector,
+}) {
+  if (!toc || !toc.length) return null;
+  const tocItems = useMemo(() => convertContentToTocItems(toc), [toc]);
+  const [open, setOpen] = useState(false);
+  const { currActive: selected } = useHeadingsObserver();
+
+  return (
+    <div
+      className={twMerge(
+        `${className} ${tocItems.length ? "" : "hidden"} ${
+          cssBreakingPoint === "xl" ? "xl:block" : "lg:block"
+        } md:top-24 md:max-h-(screen-14) z-20`,
+      )}
+    >
+      <div
+        className={`flex cursor-pointer ${tocItems.length ? "" : "hidden"} ${
+          cssBreakingPoint === "xl" ? "xl:cursor-auto" : "lg:cursor-auto"
+        } xl:mt-2`}
+      >
+        <h5
+          className={twMerge(
+            `${
+              open && "mb-4"
+            } flex-1 text-primary-500 font-medium uppercase tracking-wide text-sm font-sans antialiased ${
+              cssBreakingPoint === "xl"
+                ? "xl:mb-4 xl:text-xs xl:text-gray-900 xl:font-bold"
+                : "lg:mb-4 lg:text-xs lg:text-gray-900 lg:font-bold"
+            }`,
+          )}
+        >
+          On this page
+        </h5>
+        <div
+          className={`text-underline text-center p4 ${
+            cssBreakingPoint === "xl" ? "xl:hidden" : "lg:hidden"
+          }`}
+          onClick={() => setOpen(!open)}
+        >
+          <ArrowRight
+            className={`${
+              open ? "-rotate-90" : "rotate-90"
+            } transform transition duration-200 ease-in-out h-6 -mt-0.5 text-primary-500`}
+          />
+        </div>
+      </div>
+      <div
+        className={`${!open && "hidden"} ${
+          cssBreakingPoint === "xl" ? "xl:block" : "lg:block"
+        }`}
+      >
+        <ul className="mt-2">
+          {tocItems.map((item, index) => (
+            <TOCItem
+              item={item}
+              index={index}
+              key={index}
+              closeMenu={() => setOpen(false)}
+              currSelected={selected}
+            />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

components/FinancialSummary/AsyncAPISummary.js

@@ -0,0 +1,54 @@
+import Button from '../buttons/Button'
+import Heading from '../typography/Heading'
+import Paragraph from '../typography/Paragraph'
+
+export default function AsyncAPISummary() {
+    return (
+        <div className="px-4 sm:px-6 lg:px-8">
+            <div className="grid lg:grid-cols-9 lg:gap-8 lg:text-center my-8 mx-4">
+                <div className="col-start-3 col-span-5">
+                    <Heading level="h2" className="text-5xl text-center my-3 mx-3">
+                        AsyncAPI Financial Summary
+                    </Heading>
+                    <Paragraph typeStyle="body-md" className="my-1 max-w-4xl text-darkGunMetal">
+                        To help improve the current state of Event-Driven Architectures and their tooling, you can show your support for
+                        the AsyncAPI Initiative by making a financial contribution. We offer three donation options: <strong>Open Collective, GitHub
+                            Sponsors, and Linux Foundation Crowdfunding</strong>. Our expenses are managed through Open Collective and GitHub Sponsors,
+                        while Linux Foundation Crowdfunding operates separately.
+                    </Paragraph>
+                </div>
+            </div>
+            <div className="flex justify-center mb-20">
+                <Button
+                    text="Become a Sponsor"
+                    href="https://opencollective.com/asyncapi#category-CONTRIBUTE"
+                    target='_blank'
+                />
+            </div>
+            <div className="text-center text-sm mt-4">
+                <Heading level="h1" typeStyle="heading-md" className="4xl">
+                    Ways to Support Us?
+                </Heading>
+            </div>
+            <div className="text-center my-4 text-base max-width text-darkGunMetal">
+                <Paragraph typeStyle="body-sm" className="my-4">
+                    The easiest way to support AsyncAPI is by becoming a financial sponsor. While <br className="hidden lg:inline-block" />there are alternative options,
+                    they may involve greater effort. Contribute <br className="hidden lg:inline-block" />monetarily using the following channels.
+                </Paragraph>
+            </div>
+
+            <div className="text-center">
+                <a href="https://opencollective.com/asyncapi" target='_blank'>
+                    <img className="mx-4 inline w-10 h-10 transform transition-transform hover:scale-110 active:scale-90" src="/img/logos/OpenCollective.svg" alt="Open Collective" />
+                </a>
+                <a href="https://crowdfunding.lfx.linuxfoundation.org/projects/445898e9-42a2-4965-9e0a-c2a714f381bc" target='_blank'>
+                    <img className="mx-4 inline w-10 h-10 transform transition-transform hover:scale-110 active:scale-90" src="/img/logos/LFX.svg" alt="Linux Foundation" />
+                </a>
+                <a href="https://github.com/sponsors/asyncapi" target='_blank'>
+                    <img className="mx-4 inline w-10 h-10 transform transition-transform hover:scale-110 active:scale-90" src="/img/logos/github-black.svg" alt="Github" />
+                </a>
+            </div>
+
+        </div>
+    );
+}