feat: aliasing common parts

common/foundation.md

@@ -0,0 +1,40 @@
+## Architecture
+
+100ms is a cloud platform that allows developers to add video and audio conferencing to Web, Android and iOS applications.
+
+The platform provides REST APIs, SDKs, and a dashboard that make it simple to capture, distribute, record, and render live interactive audio, video.
+
+Any application built using 100ms' SDK has 2 components.
+
+-   **Client:** Use 100ms android, iOS, Web SDKs to manage connections, room states, render audio/video. This is where most of the heavy lifting happens
+
+-   **Server:** Use 100ms' APIs or dashboard to generate tokens, create rooms, setup room templates, trigger recording RTMP out, access events. This is usually a quick, short setup.
+
+![Architecture](/docs/v2/arch.png)
+
+## Basic Concepts
+
+-   `Room` A room is the basic object that 100ms SDKs return on successful connection. This contains references to peers, tracks and everything you need to render a live a/v app
+-   `Peer` A peer is the object returned by 100ms SDKs that contains all information about a user - name, role, video track etc.
+-   `Track` A track represents either the audio or video that a peer is publishing
+-   `Role` A role defines who can a peer see/hear, the quality at which they publish their video, whether they have permissions to publish video/screenshare, mute someone, change someone's role.
+    eg. b-owner in the following screenshot can publish video at 720p, screenshare at 1080p and subscribes to b-guest and b-owner
+
+![Roles](/docs/v2/roles.png)
+
+-   `Template` A template is a collection of roles, room settings, recording and RTMP settings (if used), that is used by the SDK to decide which geography to connect to, which tracks to return to the client, whether to turn on recording when a room is created etc. Each room is associated with a template. eg. small_classroom_template
+
+![Templates](/docs/v2/templates.png)
+
+## What are the steps to build a live app with 100ms?
+
+1. **Create a template:** Create a template and define roles, room settings - You can do this using the dashboard or by using our APIs
+2. **Create a room using the above template:** You can do this using the dashboard or our API
+3. **Integrate client SDK and join the above room:** You'll need to generate a token for each peer that connects to a room. You can generate it using the endpoint we make for you or you can deploy your own server
+4. **[Optional] Receive events:** Create a webhook endpoint to receive server-side notifications about room usage (peer joining/leaving) or recording, RTMP out starting/ending
+
+## Where should I start?
+
+### Quickstart
+
+If you just want to see 100ms' SDKs in action in under 5 minutes, run one our quickstart [app](./guides/quickstart)

components/Common.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-cycle */
+/* eslint-disable global-require */
+/* eslint-disable react/no-danger */
+import React from 'react';
+import renderToString from 'next-mdx-remote/render-to-string';
+import mdxPrism from 'mdx-prism';
+import components from '@/components/MDXComponents';
+import Foundation from '../common/foundation.md';
+
+const Common = () => {
+    const [content, setContent] = React.useState('');
+    React.useEffect(() => {
+        const temp = async () => {
+            const mdxSource = await renderToString(Foundation, {
+                components,
+                // Optionally pass remark/rehype plugins
+                mdxOptions: {
+                    remarkPlugins: [require('@/lib/remark-code-header')],
+                    rehypePlugins: [mdxPrism]
+                }
+            });
+            setContent(mdxSource.renderedOutput);
+        };
+        temp();
+    }, []);
+    return <div dangerouslySetInnerHTML={{ __html: content }} />;
+};
+
+export default Common;

components/MDXComponents.tsx

@@ -10,6 +10,7 @@ import Response from './Response';
 import Codesandbox from './Codesandbox';
 import Text from './Text';
 import View from './View';
+import Common from './Common';
 
 const CodeCustom = (props: any) => <Code>{props.children}</Code>;
 
@@ -54,7 +55,8 @@ const MDXComponents = {
     Codesandbox,
     Text,
     View,
-    a: LinkCustom
+    a: LinkCustom,
+    Common
 };
 
 export default MDXComponents;

docs/android/v2/foundation/Basics.mdx

@@ -3,43 +3,4 @@ title: Basics
 nav: 2
 ---
 
-## Architecture
-
-100ms is a cloud platform that allows developers to add video and audio conferencing to Web, Android and iOS applications.
-
-The platform provides REST APIs, SDKs, and a dashboard that make it simple to capture, distribute, record, and render live interactive audio, video.
-
-Any application built using 100ms' SDK has 2 components. 
-
-- **Client:** Use 100ms android, iOS, Web SDKs to manage connections, room states, render audio/video. This is where most of the heavy lifting happens
-
-- **Server:** Use 100ms' APIs or dashboard to generate tokens, create rooms, setup room templates, trigger recording RTMP out, access events. This is usually a quick, short setup.
-
-![Architecture](/docs/v2/arch.png)
-
-## Basic Concepts
-
-- `Room` A room is the basic object that 100ms SDKs return on successful connection. This contains references to peers, tracks and everything you need to render a live a/v app
-- `Peer` A peer is the object returned by 100ms SDKs that contains all information about a user - name, role, video track etc.
-- `Track` A track represents either the audio or video that a peer is publishing
-- `Role` A role defines who can a peer see/hear, the quality at which they publish their video, whether they have permissions to publish video/screenshare, mute someone, change someone's role.
-eg. b-owner in the following screenshot can publish video at 720p, screenshare at 1080p and subscribes to b-guest and b-owner
-
-![Roles](/docs/v2/roles.png)
-
-- `Template` A template is a collection of roles, room settings, recording and RTMP settings (if used), that is used by the SDK to decide which geography to connect to, which tracks to return to the client, whether to turn on recording when a room is created etc. Each room is associated with a template. eg. small_classroom_template
-
-![Templates](/docs/v2/templates.png)
-
-
-## What are the steps to build a live app with 100ms?
-
-1. **Create a template:** Create a template and define roles, room settings - You can do this using the dashboard or by using our APIs 
-2. **Create a room using the above template:** You can do this using the dashboard or our API
-3. **Integrate client SDK and join the above room:** You'll need to generate a token for each peer that connects to a room. You can generate it using the endpoint we make for you or you can deploy your own server
-4. **[Optional] Receive events:** Create a webhook endpoint to receive server-side notifications about room usage (peer joining/leaving) or recording, RTMP out starting/ending
-
-## Where should I start?
-
-### Quickstart
-If you just want to see 100ms' SDKs in action in under 5 minutes, run one our quickstart [app](./guides/quickstart)
+<Common />

docs/ios/v2/foundation/Basics.mdx

@@ -3,43 +3,4 @@ title: Basics
 nav: 2
 ---
 
-## Architecture
-
-100ms is a cloud platform that allows developers to add video and audio conferencing to Web, Android and iOS applications.
-
-The platform provides REST APIs, SDKs, and a dashboard that make it simple to capture, distribute, record, and render live interactive audio, video.
-
-Any application built using 100ms' SDK has 2 components. 
-
-- **Client:** Use 100ms android, iOS, Web SDKs to manage connections, room states, render audio/video. This is where most of the heavy lifting happens
-
-- **Server:** Use 100ms' APIs or dashboard to generate tokens, create rooms, setup room templates, trigger recording RTMP out, access events. This is usually a quick, short setup.
-
-![Architecture](/docs/v2/arch.png)
-
-## Basic Concepts
-
-- `Room` A room is the basic object that 100ms SDKs return on successful connection. This contains references to peers, tracks and everything you need to render a live a/v app
-- `Peer` A peer is the object returned by 100ms SDKs that contains all information about a user - name, role, video track etc.
-- `Track` A track represents either the audio or video that a peer is publishing
-- `Role` A role defines who can a peer see/hear, the quality at which they publish their video, whether they have permissions to publish video/screenshare, mute someone, change someone's role.
-eg. b-owner in the following screenshot can publish video at 720p, screenshare at 1080p and subscribes to b-guest and b-owner
-
-![Roles](/docs/v2/roles.png)
-
-- `Template` A template is a collection of roles, room settings, recording and RTMP settings (if used), that is used by the SDK to decide which geography to connect to, which tracks to return to the client, whether to turn on recording when a room is created etc. Each room is associated with a template. eg. small_classroom_template
-
-![Templates](/docs/v2/templates.png)
-
-
-## What are the steps to build a live app with 100ms?
-
-1. **Create a template:** Create a template and define roles, room settings - You can do this using the dashboard or by using our APIs 
-2. **Create a room using the above template:** You can do this using the dashboard or our API
-3. **Integrate client SDK and join the above room:** You'll need to generate a token for each peer that connects to a room. You can generate it using the endpoint we make for you or you can deploy your own server
-4. **[Optional] Receive events:** Create a webhook endpoint to receive server-side notifications about room usage (peer joining/leaving) or recording, RTMP out starting/ending
-
-## Where should I start?
-
-### Quickstart
-If you just want to see 100ms' SDKs in action in under 5 minutes, run one our quickstart [app](./guides/quickstart)
+<Common />

docs/javascript/v2/foundation/Basics.mdx

@@ -3,4 +3,4 @@ title: Basic Concepts
 nav: 2.1
 ---
 
-# TODO
+<Common />

docs/react/v2/foundation/Basics.mdx

@@ -3,43 +3,4 @@ title: Basics
 nav: 2.1
 ---
 
-## Architecture
-
-100ms is a cloud platform that allows developers to add video and audio conferencing to Web, Android and iOS applications.
-
-The platform provides REST APIs, SDKs, and a dashboard that make it simple to capture, distribute, record, and render live interactive audio, video.
-
-Any application built using 100ms' SDK has 2 components.
-
--   **Client:** Use 100ms android, iOS, Web SDKs to manage connections, room states, render audio/video. This is where most of the heavy lifting happens
-
--   **Server:** Use 100ms' APIs or dashboard to generate tokens, create rooms, setup room templates, trigger recording RTMP out, access events. This is usually a quick, short setup.
-
-![Architecture](/docs/v2/arch.png)
-
-## Basic Concepts
-
--   `Room` A room is the basic object that 100ms SDKs return on successful connection. This contains references to peers, tracks and everything you need to render a live a/v app
--   `Peer` A peer is the object returned by 100ms SDKs that contains all information about a user - name, role, video track etc.
--   `Track` A track represents either the audio or video that a peer is publishing
--   `Role` A role defines who can a peer see/hear, the quality at which they publish their video, whether they have permissions to publish video/screenshare, mute someone, change someone's role.
-    eg. b-owner in the following screenshot can publish video at 720p, screenshare at 1080p and subscribes to b-guest and b-owner
-
-![Roles](/docs/v2/roles.png)
-
--   `Template` A template is a collection of roles, room settings, recording and RTMP settings (if used), that is used by the SDK to decide which geography to connect to, which tracks to return to the client, whether to turn on recording when a room is created etc. Each room is associated with a template. eg. small_classroom_template
-
-![Templates](/docs/v2/templates.png)
-
-## What are the steps to build a live app with 100ms?
-
-1. **Create a template:** Create a template and define roles, room settings - You can do this using the dashboard or by using our APIs
-2. **Create a room using the above template:** You can do this using the dashboard or our API
-3. **Integrate client SDK and join the above room:** You'll need to generate a token for each peer that connects to a room. You can generate it using the endpoint we make for you or you can deploy your own server
-4. **[Optional] Receive events:** Create a webhook endpoint to receive server-side notifications about room usage (peer joining/leaving) or recording, RTMP out starting/ending
-
-## Where should I start?
-
-### Quickstart
-
-If you just want to see 100ms' SDKs in action in under 5 minutes, run one our quickstart [app](./guides/quickstart)
+<Common />

docs/server-side/v2/foundation/Basics.mdx

@@ -3,4 +3,4 @@ title: Basic Concepts
 nav: 2.1
 ---
 
-# TODO
+<Common />

next.config.js

@@ -15,14 +15,10 @@ module.exports = {
             };
         }
 
-        // Replace React with Preact only in client production build
-        if (!dev && !isServer) {
-            Object.assign(config.resolve.alias, {
-                react: 'preact/compat',
-                'react-dom/test-utils': 'preact/test-utils',
-                'react-dom': 'preact/compat'
-            });
-        }
+        config.module.rules.push({
+            test: /\.md$/,
+            use: 'raw-loader'
+        });
 
         return config;
     }

package.json

@@ -84,6 +84,7 @@
         "next-seo": "^4.23.0",
         "next-sitemap": "^1.6.140",
         "preact": "^10.5.13",
+        "raw-loader": "^4.0.2",
         "react": "^17.0.1",
         "react-lazyload": "^3.2.0",
         "react-live": "^2.2.3",

typings/image.d.ts

@@ -1,2 +1,3 @@
 declare module "*.svg"
-declare module "*.png"
+declare module "*.png"
+declare module "*.md"