docs: improved glossary feature (#4819)

www/docs/src/components/Glossary/index.tsx

@@ -0,0 +1,50 @@
+import React, { useMemo } from "react"
+import Heading from "@theme/Heading"
+import { GlossaryType, getGlossary } from "../../utils/glossary"
+import Link from "@docusaurus/Link"
+
+type GlossaryProps = React.HTMLAttributes<HTMLDivElement>
+
+type GroupedGlossary = {
+  [letter: string]: GlossaryType[]
+}
+
+const Glossary: React.FC<GlossaryProps> = (props) => {
+  const groupedGlossary: GroupedGlossary = useMemo(() => {
+    const glossary = getGlossary()
+    glossary.sort((a, b) => {
+      return a.title.localeCompare(b.title)
+    })
+    const grouped: GroupedGlossary = {}
+    glossary.forEach((glossaryItem) => {
+      const firstChar = glossaryItem.title.charAt(0).toLowerCase()
+      grouped[firstChar] = [...(grouped[firstChar] || []), glossaryItem]
+    })
+
+    return grouped
+  }, [])
+
+  return (
+    <div {...props}>
+      {Object.entries(groupedGlossary).map(([letter, glossary], index) => (
+        <React.Fragment key={index}>
+          <Heading id={letter.toLowerCase()} as="h2">
+            {letter.toUpperCase()}
+          </Heading>
+          <ul>
+            {glossary.map((glossaryItem, index) => (
+              <li key={index}>
+                <Link to={glossaryItem.referenceLink}>
+                  {glossaryItem.title}
+                </Link>
+                : {glossaryItem.content}
+              </li>
+            ))}
+          </ul>
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}
+
+export default Glossary

www/docs/src/components/LearningPath/index.tsx

@@ -1,5 +1,5 @@
 import { useLearningPath } from "@site/src/providers/LearningPath"
-import { useNotifications } from "@site/src/providers/NotificationProvider"
+import { useNotifications } from "@site/src/providers/Notification"
 import { getLearningPath } from "@site/src/utils/learning-paths"
 import clsx from "clsx"
 import React from "react"

www/docs/src/components/Notification/Container/index.tsx

@@ -1,7 +1,7 @@
 import {
   NotificationItemType,
   useNotifications,
-} from "@site/src/providers/NotificationProvider"
+} from "@site/src/providers/Notification"
 import React from "react"
 import NotificationItem from "../Item"
 import { CSSTransition, TransitionGroup } from "react-transition-group"