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.
 
+<div id="video-calling-tutorial-mnemonic">
+
 :::info
-The `default` type can be used in apps that use regular video calling. Follow [this tutorial](../../tutorials/video-calling) to learn more.
+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.
 
+<div id="audio-room-tutorial-mnemonic">
+
 :::info
-You can find a guide on how to handle this and build an application with this [here](../../tutorials/audio-room).
+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.
 
+<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

shared/video/_withExternalLinks.jsx

@@ -9,14 +9,19 @@ 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 mapping = this.props.mapping || {}
     const links = document.querySelectorAll("article a")
     links.forEach(link => {
       const href = link.getAttribute("href")
@@ -33,6 +38,14 @@ export default class WithExternalLinks extends React.Component {
         }
       }
     })
+
+    const selectorsToRemove = this.props.selectorsToRemove || []
+    selectorsToRemove.forEach(selector => {
+      const elements = document.querySelectorAll(selector)
+      elements.forEach(element => {
+        element.remove()
+      })
+    })
   }
 
   render() {