docs: added glossary functionality (#4805)

www/docs/src/theme/Admonition/index.tsx

@@ -174,7 +174,7 @@ export default function Admonition(props: Props): JSX.Element {
       className={clsx(
         "p-1 border border-solid border-medusa-border-base dark:border-medusa-border-base-dark rounded",
         "bg-medusa-bg-subtle dark:bg-medusa-bg-base-dark shadow-none",
-        "[&_a]:no-underline [&_a]:text-medusa-fg-base dark:[&_a]:text-medusa-fg-base-dark hover:[&_a]:text-medusa-fg-subtle dark:hover:[&_a]:text-medusa-fg-subtle-dark",
+        "[&_a]:no-underline [&_a]:text-medusa-fg-interactive dark:[&_a]:text-medusa-fg-interactive-dark hover:[&_a]:text-medusa-fg-interactive-hover dark:hover:[&_a]:text-medusa-fg-interactive-hover-dark",
         "mb-2 alert"
       )}
     >

www/docs/src/theme/MDXComponents/A.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import type { Props } from "@theme/MDXComponents/A"
+import { getGlossaryByPath } from "../../utils/glossary"
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
+import { MedusaDocusaurusContext } from "@medusajs/docs"
+import Tooltip from "../../components/Tooltip"
+import Link from "@docusaurus/Link"
+import clsx from "clsx"
+
+const MDXA = (props: Props) => {
+  const { href, children } = props
+  const {
+    siteConfig: { url },
+  } = useDocusaurusContext() as MedusaDocusaurusContext
+
+  // check if a glossary exists for href
+  const glossary =
+    (typeof children === "string" && href.startsWith("/")) || href.includes(url)
+      ? getGlossaryByPath(children as string)
+      : null
+
+  if (!glossary) {
+    return <Link {...props} />
+  }
+
+  return (
+    <Tooltip
+      tooltipChildren={
+        <span className="flex flex-col gap-0.25 max-w-[200px]">
+          <span className="text-compact-small-plus text-medusa-fg-base dark:text-medusa-fg-base-dark">
+            {glossary.title}
+          </span>
+          <span className="text-compact-small">{glossary.content}</span>
+        </span>
+      }
+      clickable={true}
+    >
+      <Link
+        {...props}
+        className={clsx(props.className, "border-0 border-b border-dashed")}
+      />
+    </Tooltip>
+  )
+}
+
+export default MDXA

www/docs/src/theme/MDXComponents/index.tsx

@@ -4,6 +4,7 @@ import MDXInlineCode from "@site/src/components/MDXComponents/InlineCode"
 import CloudinaryImage from "@site/src/components/CloudinaryImage"
 import MDXDetails from "./Details"
 import MDXSummary from "./Summary"
+import MDXA from "./A"
 
 export default {
   // Re-use the default mapping
@@ -12,4 +13,5 @@ export default {
   img: CloudinaryImage,
   details: MDXDetails,
   summary: MDXSummary,
+  a: MDXA,
 }