Upgrade to docusaurus v2.2.0

.circleci/config.yml

@@ -15,7 +15,7 @@ orbs:
 references:
   base_container: &base_container
     docker:
-      - image: cimg/node:14.15
+      - image: cimg/node:16.14
 
   ######################################################################################################################
   # Build steps

docusaurus.config.js

@@ -243,11 +243,6 @@ const config = {
         defaultMode: "light",
         disableSwitch: false,
         respectPrefersColorScheme: false,
-        /* we clear these icons out and use CSS to swap in our own images instead */
-        switchConfig: {
-          darkIcon: " ",
-          lightIcon: " ",
-        },
       },
       prism: {
         theme: lightCodeTheme,

package.json

@@ -2,6 +2,9 @@
   "name": "docusaurus-test",
   "version": "0.0.0",
   "private": true,
+  "engines": {
+    "node": ">=16.14"
+  },
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start & onchange -i '_docs-sources/**/*(*.md|*.mdx|*.json)' -- yarn regenerate:local",
@@ -19,8 +22,9 @@
     "test": "jest"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.14",
-    "@docusaurus/preset-classic": "^2.0.0-beta.14",
+    "@docusaurus/core": "^2.2.0",
+    "@docusaurus/preset-classic": "^2.2.0",
+    "@docusaurus/theme-common": "^2.2.0",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "@types/jest": "^27.4.0",
@@ -39,7 +43,7 @@
     "url-loader": "^4.1.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.0.0-beta.14",
+    "@docusaurus/module-type-aliases": "^2.2.0",
     "@tsconfig/docusaurus": "^1.0.4",
     "jest": "^27.4.7",
     "onchange": "^7.1.0",

src/pages/index.tsx

@@ -76,7 +76,7 @@ export default function Home(): JSX.Element {
                 title="Create an Infra CI/CD Pipeline"
                 href="/guides/build-it-yourself/pipelines"
               >
-                Use your preferred CI tool to set up an end‑to‑end pipeline for
+                Use your preferred CI tool to set up an end-to-end pipeline for
                 your infrastructure code.
               </Card>
               <Card

src/theme/TOCItems/index.js

@@ -1,86 +1,29 @@
+import React from "react"
+import TOCItems from "@theme-original/TOCItems"
+
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * This is a wrapper component for the TOCItems components.
+ * Docusaurus supports wrapping a component when "swizzling" in order to reduce
+ * the amount of Docusaurus code that we copy and maintain. See https://docusaurus.io/docs/swizzling#wrapping
+ *
+ * `yarn swizzle @docusaurus/theme-classic TOCItems --wrap`
+ *
+ * We are swizzling the TOCItems component specifically to avoid displaying a
+ * table of content when there are fewer than 2 items hence the if block on
+ * lines 20-22. Docusaurus version at the time of swizzling was v2.2.0
  *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
+ * @export
+ * @param {*} props
+ * @return {*}
  */
-import React, { useMemo } from "react"
-import {
-  useThemeConfig,
-  useTOCFilter,
-  useTOCHighlight,
-} from "@docusaurus/theme-common" // Recursive component rendering the toc tree
-
-/* eslint-disable jsx-a11y/control-has-associated-label */
-
-function TOCItemList({ toc, className, linkClassName, isChild }) {
-  // Hide TOC if it contains fewer than 2 items
-  if (!toc.length || toc.length < 2) {
+export default function TOCItemsWrapper(props) {
+  if (!props.toc || props.toc.length < 2) {
     return null
   }
 
   return (
-    <ul className={isChild ? undefined : className}>
-      {toc.map((heading) => (
-        <li key={heading.id}>
-          <a
-            href={`#${heading.id}`}
-            className={linkClassName ?? undefined} // Developer provided the HTML, so assume it's safe.
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: heading.value,
-            }}
-          />
-          <TOCItemList
-            isChild
-            toc={heading.children}
-            className={className}
-            linkClassName={linkClassName}
-          />
-        </li>
-      ))}
-    </ul>
-  )
-}
-
-export default function TOCItems({
-  toc,
-  className = "table-of-contents table-of-contents__left-border",
-  linkClassName = "table-of-contents__link",
-  linkActiveClassName = undefined,
-  minHeadingLevel: minHeadingLevelOption,
-  maxHeadingLevel: maxHeadingLevelOption,
-  ...props
-}) {
-  const themeConfig = useThemeConfig()
-  const minHeadingLevel =
-    minHeadingLevelOption ?? themeConfig.tableOfContents.minHeadingLevel
-  const maxHeadingLevel =
-    maxHeadingLevelOption ?? themeConfig.tableOfContents.maxHeadingLevel
-  const tocFiltered = useTOCFilter({
-    toc,
-    minHeadingLevel,
-    maxHeadingLevel,
-  })
-  const tocHighlightConfig = useMemo(() => {
-    if (linkClassName && linkActiveClassName) {
-      return {
-        linkClassName,
-        linkActiveClassName,
-        minHeadingLevel,
-        maxHeadingLevel,
-      }
-    }
-
-    return undefined
-  }, [linkClassName, linkActiveClassName, minHeadingLevel, maxHeadingLevel])
-  useTOCHighlight(tocHighlightConfig)
-  return (
-    <TOCItemList
-      toc={tocFiltered}
-      className={className}
-      linkClassName={linkClassName}
-      {...props}
-    />
+    <>
+      <TOCItems {...props} />
+    </>
   )
 }