docs: improvements to API reference intro sections (#9397)

- Improve intro sections of API reference to utilize divided columns
- Improve the content of the intro sections
- Add a new Workflows section to explain the workflows badge and how to use it
- Fixes to headings and add anchor for copying the link to a section
- Fixes responsiveness of intro sections on mobile devices
- Other: fix loading not showing when a sidebar category is opened.

Closes DOCS-932, DOCS-934, DOCS-937

Preview: https://api-reference-v2-git-docs-api-ref-intro-fixes-medusajs.vercel.app/v2/api/store

www/apps/api-reference/layouts/Divided/index.tsx

@@ -1,12 +1,13 @@
 import clsx from "clsx"
 import { forwardRef } from "react"
 
-type DividedLayoutProps = {
+export type DividedLayoutProps = {
   mainContent: React.ReactNode
   codeContent: React.ReactNode
   className?: string
   mainContentClassName?: string
   codeContentClassName?: string
+  addYSpacing?: boolean
 }
 
 const DividedLayout = forwardRef<HTMLDivElement, DividedLayoutProps>(
@@ -17,6 +18,7 @@ const DividedLayout = forwardRef<HTMLDivElement, DividedLayoutProps>(
       className,
       mainContentClassName,
       codeContentClassName,
+      addYSpacing = false,
     },
     ref
   ) {
@@ -24,6 +26,7 @@ const DividedLayout = forwardRef<HTMLDivElement, DividedLayoutProps>(
       <div
         className={clsx(
           "flex w-full flex-col justify-between lg:flex-row lg:gap-4",
+          addYSpacing && "my-3",
           className
         )}
         ref={ref}
@@ -39,6 +42,7 @@ const DividedLayout = forwardRef<HTMLDivElement, DividedLayoutProps>(
         <div
           className={clsx(
             "w-full flex-shrink-0 flex-grow-0 lg:w-[calc(50%-32px)] lg:basis-[calc(50%-32px)] lg:pr-1.5",
+            "mt-2 lg:mt-0",
             codeContentClassName
           )}
         >

www/apps/api-reference/layouts/DividedMarkdown/Sections/index.tsx

@@ -0,0 +1,10 @@
+type DividedMarkdownSectionProps = {
+  children: React.ReactElement[]
+}
+
+const DividedMarkdownSection = ({ children }: DividedMarkdownSectionProps) => {
+  return <>{children}</>
+}
+
+export const DividedMarkdownContent = DividedMarkdownSection
+export const DividedMarkdownCode = DividedMarkdownSection

www/apps/api-reference/layouts/DividedMarkdown/index.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import DividedLayout, { DividedLayoutProps } from "../Divided"
+
+type DividedMarkdownLayoutProps = {
+  children: React.ReactNode
+} & Omit<DividedLayoutProps, "mainContent" | "codeContent">
+
+const DividedMarkdownLayout = ({
+  children,
+  ...props
+}: DividedMarkdownLayoutProps) => {
+  const childArr = React.isValidElement(children)
+    ? [children]
+    : Array.isArray(children)
+    ? children
+    : []
+
+  if (!childArr.length) {
+    return <></>
+  }
+
+  const contentElm = childArr[0]
+  const codeElm = childArr.length > 1 ? childArr[1] : <></>
+
+  return (
+    <DividedLayout mainContent={contentElm} codeContent={codeElm} {...props} />
+  )
+}
+
+export default DividedMarkdownLayout