chore: upgrade with updated build command

docusaurus.config.js

@@ -143,36 +143,12 @@ const defaultPlugins = SDK_FOLDERS.map(SDK => {
     id: strippedSDK,
     path: `${STREAM_SDK_DOCUSAURUS_PATH}/docs/${SDK}`,
     routeBasePath: strippedSDK,
+    breadcrumbs: false,
     ...(fs.existsSync(sidebarPath)
       ? {
           sidebarPath: require.resolve(sidebarPath),
         }
       : {}),
-    admonitions: {
-      infima: true,
-      customTypes: {
-        note: {
-          ifmClass: "note",
-          svg: Icons.note,
-        },
-        tip: {
-          ifmClass: "tip",
-          svg: Icons.tip,
-        },
-        info: {
-          ifmClass: "info",
-          svg: Icons.info,
-        },
-        caution: {
-          ifmClass: "warning",
-          svg: Icons.caution,
-        },
-        danger: {
-          ifmClass: "danger",
-          svg: Icons.danger,
-        },
-      },
-    },
   }
 
   /**
@@ -297,6 +273,9 @@ module.exports = {
   plugins,
   projectName: `stream-${PRODUCT}`,
   tagline: `Stream ${productTitle} Component SDKs`,
+  markdown: {
+    mermaid: true,
+  },
   themeConfig: {
     // Docusaurus forces us to pass these values even if they are not internally used.
     // Theyre only used to show/hide the search bar in our case.
@@ -308,6 +287,11 @@ module.exports = {
     colorMode: {
       disableSwitch: true,
     },
+    docs: {
+      sidebar: {
+        hideable: true,
+      },
+    },
     liveCodeBlock: {
       playgroundPosition: "bottom",
     },
@@ -320,7 +304,6 @@ module.exports = {
       title: navbarTitle,
     },
     metadata: [{ name: "twitter:card", content: "summary_large_image" }],
-    hideableSidebar: true,
   },
   themes: [
     [
@@ -334,6 +317,7 @@ module.exports = {
     ],
     "@docusaurus/theme-live-codeblock",
     "@docusaurus/theme-search-algolia",
+    "@docusaurus/theme-mermaid",
   ],
   title: `Stream ${productTitle} - Component SDK Docs`,
   url: URLS.website.root,

package.json

@@ -32,28 +32,30 @@
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.14",
-    "@docusaurus/plugin-content-docs": "^2.0.0-beta.14",
-    "@docusaurus/plugin-content-pages": "^2.0.0-beta.14",
-    "@docusaurus/plugin-google-gtag": "^2.0.0-beta.14",
-    "@docusaurus/theme-classic": "^2.0.0-beta.14",
-    "@docusaurus/theme-live-codeblock": "^2.0.0-beta.14",
-    "@docusaurus/theme-search-algolia": "^2.0.0-beta.14",
+    "@docusaurus/core": "2.4.1",
+    "@docusaurus/plugin-content-docs": "2.4.1",
+    "@docusaurus/plugin-content-pages": "2.4.1",
+    "@docusaurus/plugin-google-gtag": "2.4.1",
+    "@docusaurus/theme-classic": "2.4.1",
+    "@docusaurus/theme-live-codeblock": "2.4.1",
+    "@docusaurus/theme-search-algolia": "2.4.1",
+    "@docusaurus/theme-mermaid": "2.4.1",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "1.6.22",
-    "algoliasearch": "^4.9.1",
-    "clsx": "1.1.1",
-    "docusaurus-plugin-sass": "^0.2.0",
+    "algoliasearch": "4.18.0",
+    "clsx": "1.2.1",
+    "docusaurus-plugin-sass": "0.2.3",
     "dompurify": "^2.3.0",
     "dotenv": "^10.0.0",
     "html-react-parser": "1.2.6",
     "lodash.debounce": "^4.0.8",
-    "mdast-util-to-string": "^3.1.0",
+    "mdast-util-to-string": "3.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-toastify": "^7.0.4",
     "remark-admonitions": "^1.2.1",
-    "sass": "^1.34.0",
+    "sass": "1.63.6",
+    "url": "^0.11.1",
     "viz.js": "1.8.0"
   },
   "devDependencies": {

src/contexts/DocusaurusContext.js

@@ -6,7 +6,7 @@
  */
 import React, { useMemo } from "react"
 
-import { Context as DocusaurusContext } from "@docusaurus/docusaurusContext"
+import { Context as DocusaurusContext } from "@docusaurus/core/lib/client/docusaurusContext"
 import { useLocation } from "@docusaurus/router"
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
 

src/css/components/menu.scss

@@ -21,7 +21,7 @@ html[data-theme="dark"] {
   @include mixins.remove-external-icon;
 }
 
-[class^="docSidebarContainer"] {
+[class*="docSidebarContainer_"] {
   .menu {
     padding: 1.125rem 4px 0 0;
     font-size: 0.875rem;

src/hooks/useFeedbackFormData.js

@@ -50,33 +50,6 @@ export const useFeedbackFormData = lastHeaderTitle => {
     isPageHeader: true,
   })
 
-  useEffect(() => {
-    const pageHeader = document.querySelector("h1")
-    const headersAnchors = Array.from(document.querySelectorAll("h2.heading"))
-    const headers = headersAnchors.map(item => ({
-      value: extractTitle(item),
-      isPageHeader: false,
-    }))
-    if (pageHeader) {
-      headers.unshift({
-        value: extractTitle(pageHeader),
-        isPageHeader: true,
-      })
-    }
-
-    const lastHeaderTitleString = extractTitle(lastHeaderTitle)
-
-    const headerIndex = headers.findIndex(
-      item => item.value === lastHeaderTitleString
-    )
-    const prevHeader = lastHeaderTitle
-      ? headers[headerIndex - 1]
-      : headers[headers.length - 1]
-
-    setHeaders(headers)
-    setCurrentHeader(prevHeader)
-  }, [])
-
   const header = useMemo(() => {
     return headers.find(item => item.value === clickedButtonHeader)
   }, [headers, clickedButtonHeader])

src/theme/Heading/index.js

@@ -1,11 +1,3 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
 import React, { useEffect, useRef, useState } from "react"
 
 import clsx from "clsx"
@@ -16,72 +8,56 @@ import { translate } from "@docusaurus/Translate"
 import { FeedbackFormButton } from "../../components/FeedbackFormButton"
 import "./styles.scss"
 
-export const MainHeading = function MainHeading({ ...props }) {
-  return (
-    <header>
-      <h1
-        {...props}
-        id={undefined} // h1 headings do not need an id because they don't appear in the TOC
-      >
-        {props.children}
-      </h1>
-    </header>
-  )
-}
-
-export const Heading = Tag =>
-  function TargetComponent({ id, ...props }) {
-    const copyLink = e => {
-      navigator?.clipboard?.writeText(e.target.href)
-    }
-
-    const [title, setTitle] = useState()
-    const headingRef = useRef(null)
+export default function Heading({ as: As, id, ...props }) {
+  const {
+    navbar: { hideOnScroll },
+  } = useThemeConfig()
+  const [title, setTitle] = useState()
+  const headingRef = useRef(null)
 
-    useEffect(() => {
-      if (Tag === "h2") {
-        setTitle(headingRef.current)
-      }
-    }, [])
-
-    const {
-      navbar: { hideOnScroll },
-    } = useThemeConfig()
+  const copyLink = e => {
+    navigator?.clipboard?.writeText(e.target.href)
+  }
 
-    if (!id) {
-      return <Tag {...props} />
+  useEffect(() => {
+    if (As === "h2") {
+      setTitle(headingRef.current)
     }
+  }, [])
 
-    return (
-      <>
-        {Tag === "h2" && title && (
-          <FeedbackFormButton lastHeaderTitle={title} />
-        )}
-        <Tag className="heading" ref={headingRef} {...props}>
-          <a
-            aria-hidden="true"
-            tabIndex={-1}
-            className={clsx("anchor", {
-              enhancedAnchor: !hideOnScroll,
-            })}
-            id={id}
-          />
-          {props.children}
-          <a
-            className="hash-link"
-            href={`#${id}`}
-            onClick={copyLink}
-            title={translate({
-              id: "theme.common.headingLinkTitle",
-              message: "Direct link to heading",
-              description: "Title for link to heading",
-            })}
-          >
-            #
-          </a>
-        </Tag>
-      </>
-    )
+  // H1 headings do not need an id because they don't appear in the TOC.
+  if (As === "h1" || !id) {
+    return <As {...props} id={undefined} />
   }
 
-export default Heading
+  return (
+    <>
+      {As === "h2" && title && <FeedbackFormButton lastHeaderTitle={title} />}
+      <As
+        {...props}
+        ref={headingRef}
+        className={clsx(
+          "anchor",
+          hideOnScroll
+            ? "anchorWithHideOnScrollNavbar"
+            : "anchorWithStickyNavbar"
+        )}
+        id={id}
+      >
+        {props.children}
+        <a
+          className="hash-link"
+          href={`#${id}`}
+          onClick={copyLink}
+          title={translate({
+            id: "theme.common.headingLinkTitle",
+            message: "Direct link to heading",
+            description: "Title for link to heading",
+          })}
+        >
+          &#8203;
+        </a>
+      </As>
+    </>
+  )
+}

src/theme/Heading/styles.scss

@@ -1,50 +1,28 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
+/*
+When the navbar is sticky, ensure that on anchor click,
+the browser does not scroll that anchor behind the navbar
+See https://twitter.com/JoshWComeau/status/1332015868725891076
  */
-
-// overwriting docusaurus theme classic styles
-h1[class^="docTitle"] {
-  font-size: var(--ifm-h1-font-size);
-}
-
-.heading {
-  position: relative;
-}
-
-.anchor {
-  display: block;
-  position: relative;
-  top: -0.5rem;
+.anchorWithStickyNavbar {
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
 }
 
-.hash-link:focus,
-*:hover > .hash-link {
-  opacity: 0.7;
+.anchorWithHideOnScrollNavbar {
+  scroll-margin-top: 0.5rem;
 }
 
-.hash-link {
+:global(.hash-link) {
   opacity: 0;
-  transition: opacity var(--ifm-transition-fast);
-  font-weight: 300;
   padding-left: 0.5rem;
-
-  &:hover {
-    opacity: 1;
-    text-decoration: none;
-  }
+  transition: opacity var(--ifm-transition-fast);
+  user-select: none;
 }
 
-.enhancedAnchor {
-  top: calc(var(--ifm-navbar-height) * -1 - 0.5rem);
+:global(.hash-link::before) {
+  content: "#";
 }
 
-@media (min-width: 1600px) {
-  .hash-link {
-    padding-left: 0;
-    left: -1.5rem;
-    position: absolute;
-  }
+:global(.hash-link:focus),
+:global(*:hover > .hash-link) {
+  opacity: 1;
 }

src/theme/Navbar/index.js

@@ -2,12 +2,12 @@ import React, { useMemo } from "react"
 
 import clsx from "clsx"
 
-import { Link, useLocation } from "@docusaurus/router"
+import Link from "@docusaurus/Link"
+import { useLocation } from "@docusaurus/router"
 import OriginalNavbar from "@theme-original/Navbar"
 
 import { folderMapping } from "../../../constants"
-import { docs, website } from "../../../urls"
-import URLS from "../../../urls"
+import URLS, { docs, website } from "../../../urls"
 import { useBreadcrumbsContext } from "../../hooks/useBreadcrumbsContext"
 import productVariables from "../../product-variables"
 import "./styles.scss"