upgrade to docusaurus 3 (#9820)

* update packages

* add plugin to strip autolinks in code blocks

* fix all the documentation for MDXv3

* remove check-docusaurus-versions

in docusaurus 3 this is now a hard error, not just a warning

* port upstream change to Curl component

fixes performing the 'execute' action when pressing enter

frontend/docusaurus.config.cjs

@@ -1,5 +1,6 @@
 const lightCodeTheme = require('prism-react-renderer').themes.github
 const darkCodeTheme = require('prism-react-renderer').themes.dracula
+const stripCodeBlockLinks = require('./src/plugins/strip-code-block-links')
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -24,6 +25,14 @@ const config = {
     ],
   ],
 
+  markdown: {
+    mdx1Compat: {
+      comments: true,
+      admonitions: true,
+      headingIds: true,
+    },
+  },
+
   presets: [
     [
       'docusaurus-preset-openapi',
@@ -43,6 +52,7 @@ const config = {
         api: {
           path: 'categories',
           routeBasePath: 'badges',
+          rehypePlugins: [stripCodeBlockLinks],
         },
       }),
     ],

frontend/src/pages/community.md

@@ -8,14 +8,10 @@ Shields.io is possible thanks to the people and companies who donate money, serv
 
 <ul>
     <li>
-        <a href="https://nodeping.com/">
-        NodePing
-        </a>
+        <a href="https://nodeping.com/">NodePing</a>
     </li>
     <li>
-        <a href="https://sentry.io/">
-        Sentry
-        </a>
+        <a href="https://sentry.io/">Sentry</a>
     </li>
 </ul>
 
@@ -24,7 +20,7 @@ Shields.io is possible thanks to the people and companies who donate money, serv
 <p>
     <object
         data="https://opencollective.com/shields/tiers/sponsor.svg?avatarHeight=80&width=600"
-        class="opencollective-image"
+        className="opencollective-image"
     ></object>
 </p>
 
@@ -35,7 +31,7 @@ Shields.io is possible thanks to the people and companies who donate money, serv
 <p>
     <object
         data="https://opencollective.com/shields/tiers/backer.svg?width=600"
-        class="opencollective-image">
+        className="opencollective-image">
     </object>
 </p>
 
@@ -46,7 +42,7 @@ Shields.io is possible thanks to the people and companies who donate money, serv
 <p>
     <object
         data="https://opencollective.com/shields/contributors.svg?width=600"
-        class="opencollective-image"
+        className="opencollective-image"
     ></object>
 </p>
 

frontend/src/plugins/strip-code-block-links.js

@@ -0,0 +1,30 @@
+const { visit } = require('unist-util-visit')
+
+function stripCodeBlockLinks() {
+  /*
+  Docusaurus 3 uses [remark-gfm](https://github.com/remarkjs/remark-gfm)
+  One of the "features" of remark-gfm is that it automatically looks for URLs
+  and email addresses, and automatically wraps them in <a> tags.
+
+  This happens even if the URL is inside a <code> block.
+  This behaviour is
+  a) mostly unhelpful and
+  b) non-configurable
+
+  This plugin removes <a> tags which appear inside a <code> block.
+  */
+  return tree => {
+    visit(tree, ['mdxJsxTextElement', 'mdxJsxFlowElement', 'element'], node => {
+      if (node.name === 'code' || node.tagName === 'code') {
+        const links = node.children.filter(child => child.tagName === 'a')
+        links.forEach(link => {
+          const linkText = link.children.map(child => child.value).join('')
+          const linkIndex = node.children.indexOf(link)
+          node.children.splice(linkIndex, 1, { type: 'text', value: linkText })
+        })
+      }
+    })
+  }
+}
+
+module.exports = stripCodeBlockLinks

frontend/src/theme/ApiDemoPanel/Curl/index.js

@@ -234,6 +234,7 @@ function Curl({ postman, codeSamples }) {
             )}
             key={lang.tabName || lang.label}
             onClick={() => setLanguage(lang)}
+            type="button"
           >
             {lang.tabName || lang.label}
           </button>