feat: new information architecture for documentation (#601)

components/Hero.js

@@ -25,7 +25,7 @@ export default function Hero({ className = ''}) {
           architecture. All powered by the AsyncAPI specification, the {" "}
           <strong>industry standard</strong> for defining asynchronous APIs.
         </Heading>
-        <Button className="block md:inline-block" text="Read the docs" href="/docs/getting-started" icon={<ArrowRight className="-mb-1 h-5 w-5" />} />
+        <Button className="block md:inline-block" text="Read the docs" href="/docs" icon={<ArrowRight className="-mb-1 h-5 w-5" />} />
         <OpenInStudioButton text='Open Studio' className="md:ml-2" />
         <Paragraph typeStyle="body-sm" className="mt-4" textColor="text-gray-500">
           Proud to be part of the {" "}

components/TOC.js

@@ -18,8 +18,8 @@ export default function TOC({
     //MDX takes these "a" tags and uses them to render the "id" for headers like a-namedefinitionsapplicationaapplication
     //slugWithATag contains transformed heading name that is later used for scroll spy identification
     slugWithATag: item.content.replace(/<|>|"|\\|\/|=/gi, '').replace(/\s/gi, '-').toLowerCase()
-}))
-  const [open, setOpen] = useState(false)
+  }));
+  const [open, setOpen] = useState(false);
 
   return (
     <div className={`${className} ${tocItems.length ? '' : 'hidden'} ${cssBreakingPoint}:block md:top-24 md:max-h-(screen-14) z-20`} onClick={() => setOpen(!open)}>

components/buttons/OpenInStudioButton.js

@@ -2,7 +2,7 @@ import Button from './Button'
 import IconRocket from '../icons/Rocket'
 
 export default function OpenInStudioButton({ text = 'Open in Studio', className = '' }) {
-  const sampleSpec = encodeURI('https://raw.githubusercontent.com/asyncapi/asyncapi/v2.2.0/examples/simple.yml')
+  const sampleSpec = encodeURI('https://raw.githubusercontent.com/asyncapi/asyncapi/v2.3.0/examples/simple.yml')
   return (
     <Button
       className={`text-center block mt-2 md:mt-0 md:inline-block border-secondary-500 border text-secondary-500 hover:text-white shadow-md group ${className}`}

components/docs/DocsCards.js

@@ -0,0 +1,77 @@
+import Link from 'next/link';
+import Heading from '../typography/Heading';
+import Paragraph from '../typography/Paragraph';
+
+import IconGettingStarted from '../icons/GettingStarted'
+import IconTutorials from '../icons/Tutorials'
+import IconUseCases from '../icons/UseCases'
+import IconSpec from '../icons/Spec'
+
+const cards = [
+  {
+    title: 'Concepts',
+    description: 'Our Concepts section defines the concepts of AsyncAPI features and capabilities.',
+    link: '/docs/concepts',
+    className: 'bg-secondary-200',
+    Icon: IconGettingStarted,
+  },
+  {
+    title: 'Tutorials',
+    description: 'Our Tutorials section teaches beginner processes with AsyncAPI by doing.',
+    link: '/docs/tutorials',
+    className: 'bg-pink-100',
+    Icon: IconTutorials,
+  },
+  {
+    title: 'Tools',
+    description: 'Our Tools section documents the AsyncAPI tools ecosystem.',
+    link: '/docs/tools',
+    className: 'bg-green-200',
+    Icon: IconUseCases,
+  },
+  {
+    title: 'Reference',
+    description: 'Our Reference section documents the AsyncAPI specification.',
+    link: '/docs/reference',
+    className: 'bg-yellow-200',
+    Icon: IconSpec,
+  }
+];
+
+export function DocsCards() {
+  return (
+    <div className='grid gap-4 grid-cols-1 sm:grid-cols-2'>
+      {cards.map(card => (
+        <Card key={card.title} {...card} />
+      ))}
+    </div>
+  );
+}
+
+function Card({ title, description, link, className, Icon }) {
+  return (
+    <Link href={link}>
+      <a href={link} className='cursor-pointer'>
+        <div className="h-full border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg p-6">
+          <div>
+            <Heading 
+              level="h3"
+              typeStyle="heading-sm-semibold"
+              className='pb-4 border-b border-gray-300'
+            >
+              <div className='flex flex-row items-center'>
+                <div className={`flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-lg ${className} text-gray-900 sm:h-12 sm:w-12`}>
+                  <Icon className="h-6 w-6" />
+                </div>
+                <span className='ml-4'>{title}</span>
+              </div>
+            </Heading>
+            <Paragraph typeStyle="body-sm" className="mt-5">
+              {description}
+            </Paragraph>
+          </div>
+        </div>
+      </a>
+    </Link>
+  );
+}

components/helpers/click-away.js

@@ -1,4 +1,15 @@
 export function registerClickAway(callback) {
+  function unregisterClickAway(event) {
+    document.removeEventListener("click", unregisterClickAway)
+    document.querySelectorAll('iframe').forEach(iframe => {
+      const src = iframe.attributes.src
+      if (src && src.value.startsWith('/') && !src.value.startsWith('//')) {
+        iframe.contentWindow.document.removeEventListener("click", unregisterClickAway)
+      }
+    })
+    callback(event)
+  }
+
   document.removeEventListener("click", unregisterClickAway)
   document.addEventListener("click", unregisterClickAway)
 
@@ -9,15 +20,4 @@ export function registerClickAway(callback) {
       iframe.contentWindow.document.addEventListener("click", unregisterClickAway)
     }
   })
-
-  function unregisterClickAway() {
-    document.removeEventListener("click", unregisterClickAway)
-    document.querySelectorAll('iframe').forEach(iframe => {
-      const src = iframe.attributes.src
-      if (src && src.value.startsWith('/') && !src.value.startsWith('//')) {
-        iframe.contentWindow.document.removeEventListener("click", unregisterClickAway)
-      }
-    })
-    callback()
-  }
 }

components/helpers/is-mobile.js

@@ -0,0 +1,8 @@
+let isMobile = undefined;
+export function isMobileDevice() {
+  if (typeof navigator === 'undefined') return false;
+  if (typeof isMobile === 'boolean') return isMobile;
+
+  let regexp = /android|iphone|kindle|ipad/i;
+  return isMobile = regexp.test(navigator.userAgent);
+}

components/helpers/use-outside-click.js

@@ -0,0 +1,21 @@
+import { useRef, useEffect } from "react";
+
+export function useOutsideClick(callback) {
+  const callbackRef = useRef();
+  const innerRef = useRef();
+
+  useEffect(() => { callbackRef.current = callback; });
+
+  useEffect(() => {
+    function handleClick(e) {
+      if (innerRef.current && callbackRef.current && 
+        !innerRef.current.contains(e.target)
+      ) callbackRef.current(e);
+    }
+
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+  }, []);
+
+  return innerRef;
+}

components/icons/Home.js

@@ -0,0 +1,7 @@
+export default function IconHome (props) {
+  return (
+    <svg fill="currentColor" viewBox="0 0 18 18" {...props}>
+      <path fillRule="evenodd" clipRule="evenodd" d="M9.40498 1.54126L16.56 8.06626L15.7612 8.86501L14.625 7.83451V15.1763L14.0625 15.7388H10.6875L10.125 15.1763V11.2388H7.87498V15.1763L7.31248 15.7388H3.93748L3.37498 15.1763V7.84351L2.24998 8.86501L1.45123 8.06626L8.59498 1.54126H9.40498ZM4.49998 6.82089V14.6138H6.74998V10.6763L7.31248 10.1138H10.6875L11.25 10.6763V14.6138H13.5V6.81414L8.99998 2.73376L4.49998 6.82089Z" fill="black"/>
+    </svg>
+  )
+}