chore: backport withExternalLinks to staging (#127)

* feat: add WithExternalLinks component (#124)
* chore(call-types): use info mnemonic (#125)
* chore(call-types): support mnemonic removal (#126)

shared/video/_call-types.md → shared/video/_call-types.mdx

@@ -1,5 +1,5 @@
-import CallCapabilities from './\_call-capabilities.md';
-import CallTypeSettings from './\_call-type-settings.md';
+import CallCapabilities from "./_call-capabilities.md"
+import CallTypeSettings from "./_call-type-settings.md"
 
 The Video SDK uses a set of pre-defined call types that come with different default permissions and feature configurations.
 Depending on your use case you can also extend those and use custom types that suit your needs.
@@ -46,26 +46,39 @@ For these call types, backstage is not enabled, therefore you don't have to expl
 
 The `default` call type can be used for different video-calling apps, such as 1-1 calls, group calls, or meetings with multiple people. Both video and audio are enabled, and backstage is disabled. It has permissions settings in place, where admins and hosts have elevated permissions over other types of users.
 
-:::tip
-The `default` type can be used in apps that use regular video calling. Follow [this tutorial](../../tutorials/video-calling) to learn more.
+<div id="video-calling-tutorial-mnemonic">
+
+:::info
+The `default` type can be used in apps that use regular video calling.
+To learn more try our tutorial on [building a video calling app](../../tutorials/video-calling) to learn more.
 :::
 
+</div>
+
 ### Audio Room
 
 The `audio_room` call type is suitable for apps like Clubhouse or Twitter Spaces. It has a pre-configured workflow around requesting permissions to speak for regular listeners. Backstage is enabled, and new calls are going into backstage mode when created. You will need to explicitly call the `goLive` method to make the call active for all participants.
 
-:::tip
-You can find a guide on how to handle this and build an application with this [here](../../tutorials/audio-room).
+<div id="audio-room-tutorial-mnemonic">
+
+:::info
+You can find out how to handle this and build an application with our [Audio Room tutorial](../../tutorials/audio-room).
 :::
 
+</div>
+
 ### Livestream
 
 The `livestream` call type is configured to be used for live streaming apps. Access to calls is granted to all authenticated users, and backstage is enabled by default.
 
-:::tip
+<div id="livestream-tutorial-mnemonic">
+
+:::info
 To build an example application for this you can take a look at our [live streaming tutorial](../../tutorials/livestream).
 :::
 
+</div>
+
 ---
 
 ## Call type settings
@@ -141,7 +154,7 @@ You can change these default capabilities in the dashboard. It is also possible
 That means that if a user has permission to assign new capabilities they can assign them to other users.
 This is our approach to an effective permission system.
 
-:::tip
+:::info
 If you want to learn more about doing this, head over to the [Permissions and Capabilities](../../guides/permissions-and-moderation) chapter.
 :::
 

shared/video/_withExternalLinks.jsx

@@ -0,0 +1,54 @@
+import React from "react"
+
+/**
+ * Until we upgrade to Docusaurus 3 that support props in MDX,
+ * we need to use this workaround to update the tutorial links.
+ */
+export default class WithExternalLinks extends React.Component {
+  /**
+   * Replace all the links in the page with the new links.
+   *
+   * Format:
+   * mapping: {
+   *   '/tutorials/video-calling/':'https://getstream.io/video/sdk/react/tutorial/video-calling/',
+   *   '/tutorials/audio-room/': 'https://getstream.io/video/sdk/react/tutorial/audio-room/',
+   *   '/tutorials/livestream/': 'https://getstream.io/video/sdk/react/tutorial/livestreaming/',
+   * },
+   *
+   * selectorsToRemove: [
+   *   'div[class^="video-calling-tutorial"]',
+   *   'div[class^="livestream-tutorial"]',
+   * ],
+   */
+  componentDidMount() {
+    const mapping = this.props.mapping || {}
+    const links = document.querySelectorAll("article a")
+    links.forEach(link => {
+      const href = link.getAttribute("href")
+      for (const key in mapping) {
+        if (href.endsWith(key)) {
+          link.setAttribute("target", "_blank")
+          link.setAttribute("href", mapping[key])
+          // docusaurus ignores target="_blank" so we need to add this
+          // most likely, docusaurus does something similar internally as well.
+          link.addEventListener("click", e => {
+            e.preventDefault()
+            window.open(mapping[key], "_blank")
+          })
+        }
+      }
+    })
+
+    const selectorsToRemove = this.props.selectorsToRemove || []
+    selectorsToRemove.forEach(selector => {
+      const elements = document.querySelectorAll(selector)
+      elements.forEach(element => {
+        element.remove()
+      })
+    })
+  }
+
+  render() {
+    return null
+  }
+}