feat: add table of contents in case study

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/TOC.js

@@ -34,7 +34,7 @@ export default function TOC({
       </div>
       <div className={`${!open && 'hidden'} ${cssBreakingPoint === 'xl' ? 'xl:block' : 'lg:block'}`}>
         <Scrollspy
-          items={tocItems.map(item => item.slugWithATag)}
+          items={tocItems.map(item => item.slug)}
           currentClassName="text-primary-500 font-bold"
           componentTag="div"
           rootEl={contentSelector}

components/helpers/useHeadingsObserver.js

@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * @description Custom hook to observe headings and set the current active heading
+ * @example const { currActive } = useHeadingsObserver();
+ * @returns {object} currActive - current active heading
+ */
+export function useHeadingsObserver() {
+  const observer = useRef(null);
+  const headingsRef = useRef([]);
+  const [currActive, setCurrActive] = useState(null);
+
+  useEffect(() => {
+    const callback = (entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          setCurrActive(entry.target.id);
+        }
+      })
+    }
+
+    // The heading in from top 20% of the viewport to top 30% of the viewport will be considered as active
+    observer.current = new IntersectionObserver(callback, {
+      rootMargin: '-20% 0px -70% 0px',
+    });
+
+    headingsRef.current = document.querySelectorAll('h2, h3');
+    headingsRef.current.forEach(heading => {
+      observer.current.observe(heading);
+    })
+
+    return () => observer.current.disconnect();
+  }, []);
+
+  return { currActive }
+}

components/typography/Heading.js

@@ -3,7 +3,8 @@ export default function Heading({
     level = 'h2',
     textColor = 'text-primary-800',
     className,
-    children
+    children,
+    id
 }) {
     let classNames = ''
     const Tag = `${level}`;
@@ -46,7 +47,7 @@ export default function Heading({
     }
 
     return (
-        <Tag className={`${textColor} ${classNames}`}>
+        <Tag className={`${textColor} ${classNames}`} id={id}>
             {children}
         </Tag>
     )

lib/staticHelpers.js

@@ -97,3 +97,109 @@ export function getEvents(events, size) {
 
   return meetingsWithDates;
 }
+
+export const generateCaseStudyContent = (data) => {
+  const { challenges, solution, usecase, architecture, testing, codegen, schemaStorage, registry, versioning, validation, asyncapiStorage, asyncapiEditing, asyncapiExtensions, asyncapiDocumentation, asyncapiBindings, asyncapiTools, additionalResources, casestudy } = data;
+  const languages= casestudy.technical.languages
+  const frameworks=casestudy.technical.frameworks
+  const protocols=casestudy.technical.protocols
+  const versions=casestudy.asyncapi.versions 
+
+  return [
+    {
+      title: "Challenges",
+      content: challenges,
+    },
+    {
+      title: "Solution",
+      content: solution,
+    },
+    {
+      title: "Use Case",
+      content: usecase,
+    },
+    {
+      title: "More Details",
+      items: [
+        `Languages: ${languages.join(", ")}`,
+        `Frameworks: ${frameworks.join(", ")}`,
+        `Protocols: ${protocols.join(", ")}`,
+      ],
+      children: [
+        {
+          title: "Testing strategy",
+          content: testing,
+        },
+        {
+          title: "Approach to code generation",
+          content: codegen,
+        },
+        {
+          title: "Architecture",
+          content: architecture,
+        },
+        {
+          title: "More Details about AsyncAPI",
+          items: [
+            `Version: ${versions.join(", ")}`,
+            `Who maintains documents: ${casestudy.asyncapi.maintainers}}`,
+            `Internal users: ${casestudy.asyncapi.audience.internal.toString()}`,
+            `External users: ${casestudy.asyncapi.audience.external.toString()}`,
+          ],
+          children: [
+            {
+              title: "How AsyncAPI documents are stored",
+              content: asyncapiStorage,
+            },
+            {
+              title: "Where maintainers edit AsyncAPI documents",
+              content: asyncapiEditing,
+            },
+            {
+              title: "What extensions are used",
+              content: asyncapiExtensions,
+            },
+            {
+              title: "How documentation is generated",
+              content: asyncapiDocumentation,
+            },
+            {
+              title: "What bindings are used",
+              content: asyncapiBindings,
+            },
+            {
+              title: "What tools are used",
+              content: asyncapiTools,
+            },
+          ],
+        },
+        {
+          title: "Schemas",
+          items: [`Spec: ${casestudy.schemas.description}`],
+          children: [
+            {
+              title: "Storage strategy",
+              content: schemaStorage,
+            },
+            {
+              title: "Schema Registry",
+              content: registry,
+            },
+            {
+              title: "Versioning of schemas",
+              content: versioning,
+            },
+            {
+              title: "Validation of message schemas",
+              content: validation,
+            },
+            {
+              title: "Additional Resources",
+              content: additionalResources,
+            },
+          ],
+        },
+      ],
+    },
+  ];
+}