DOCS-92 Replace concepts with get started, concepts reorg (#1478)

* replace concepts with get started

* update with reorg

* update condition for Get started tag

* update landing page

* update links

* Fix: Final reorg before merge

* update redirects

* fix docs, update redirects

* DOCS-94 Replace get started in platforms with quickstart, fix how--to (#1479)

replace how--to with how-to, replace get started in platforms with quickstart

* update files

* push

* remove api reference from get-started

* update meta title

* resolve duplicacy

* fix img path

* resolve conflicts

* add deleted files

---------

Co-authored-by: chrisb-100ms <[email protected]>

components/Header.tsx

@@ -92,10 +92,9 @@ const Header: React.FC<Props> = ({
         return routeLink;
     };
 
-    // const isApiRef = router.query.slug && router.query.slug[0] === 'api-reference';
     const isNonApiRef =
         router.query.slug &&
-        (router.query.slug.includes('server-side') || router.query.slug.includes('concepts'));
+        (router.query.slug.includes('server-side') || router.query.slug.includes('get-started'));
 
     return renderComponent ? (
         <Flex
@@ -312,7 +311,7 @@ const HeaderLink = ({
                         gap: '$2',
                         color: '$textMedEmp',
                         '&:hover': {
-                            opacity: 'initial',
+                            opacity: 'initial'
                         },
                         '&:not(.docs-link-active):hover': {
                             color: '$textHighEmp',

components/SearchModal.tsx

@@ -19,7 +19,7 @@ const searchClient = algoliasearch(
 const ALL_PLATFORMS = 'All Platforms';
 const ALL_TYPES = 'All Types';
 
-const TYPE_FILTERS = ['All Types', 'Guide', 'Concept', 'FAQ', 'API Reference'];
+const TYPE_FILTERS = ['All Types', 'Guide', 'Get started', 'FAQ', 'API Reference'];
 
 const searchInfoItems = [
     {

components/Sidebar.tsx

@@ -19,7 +19,7 @@ import {
     ReactIcon as ReactNative,
     JavascriptIcon as JavaScript,
     RocketIcon,
-    LayersIcon,
+    PlayIcon,
     SearchIcon
 } from '@100mslive/react-icons';
 import { Listbox } from '@headlessui/react';
@@ -128,7 +128,7 @@ const Sidebar: React.FC<Props> = ({
         }
     } else nav = false;
 
-    const showPlatformSelector = slug?.[0] !== 'concepts';
+    const showPlatformSelector = slug?.[0] !== 'get-started';
 
     let indexOf = menuItem.findIndex((e) => e.key === slug?.[0]);
     if (slug?.[0] === 'api-reference') indexOf = menuItem.findIndex((e) => e.key === slug?.[1]);
@@ -221,10 +221,9 @@ const Sidebar: React.FC<Props> = ({
                         }}
                         onClick={() => setShowBaseView(false)}>
                         <Text variant="sm" css={{ color: '$primaryLight' }}>
-                            Explore&nbsp;
-                            {slug?.[0] !== 'concepts'
-                                ? getUpdatedPlatformName(tech.name)
-                                : 'Concepts'}
+                            {showPlatformSelector
+                                ? `Explore ${getUpdatedPlatformName(tech.name)}`
+                                : 'Getting started'}
                         </Text>
                         <ChevronRightIcon height="16px" width="16px" />
                     </Flex>
@@ -238,11 +237,11 @@ const Sidebar: React.FC<Props> = ({
                     }}>
                     <DocsSearchBar setHelperState={setHelperState} />
                 </Box>
-                <Link passHref href="/concepts/v2/concepts/basics">
+                <Link passHref href="/get-started/v2/get-started/overview">
                     <Flex as="a" gap="2" align="center" css={{ color: '$primaryLight' }}>
-                        <LayersIcon style={{ color: 'inherit' }} />
+                        <PlayIcon style={{ color: 'inherit' }} />
                         <Text as="span" css={{ fontWeight: '$semiBold', color: '$textHighEmp' }}>
-                            Concepts
+                            Get started
                         </Text>
                     </Flex>
                 </Link>
@@ -490,4 +489,4 @@ export const menuItem = [
         icon: <ServerIcon style={{ ...iconStyle, fill: 'transparent' }} />,
         apiRef: '/server-side/v2/api-reference/Rooms/overview'
     }
-];
+];

docs/flutter/v2/how--to-guides/configure-your-device/camera/camera-controls.mdx → docs/flutter/v2/how-to-guides/configure-your-device/camera/camera-controls.mdx

@@ -7,7 +7,7 @@ To use the camera controls, we can use `HMSCameraControls` class to access it's
 
 ## Minimum Requirements
 
-- SDK version 1.5.0 or higher
+-   SDK version 1.5.0 or higher
 
 ## Capture at the highest resolution offered by the camera
 
@@ -24,7 +24,7 @@ parameter is `false`.
 dynamic filePath = await HMSCameraControls.captureImageAtMaxSupportedResolution(withFlash: true);
 
 if(filePath is HMSException) {
-    //Log the error here 
+    //Log the error here
     //Handle the error accordingly
 }
 else{
@@ -46,7 +46,7 @@ Checks if the current facing camera has a flash device.
 dynamic isFlashSupported = await HMSCameraControls.isFlashSupported();
 
 if(isFlashSupported is HMSException) {
-    //Log the error here 
+    //Log the error here
     //Handle the error accordingly
 }
 else{
@@ -59,7 +59,7 @@ else{
 
 This method is used to toggle flash, i.e. if its ON it turns it OFF and vice-versa.
 
-```dart 
+```dart
 HMSCameraControls.toggleFlash();
 ```
 

docs/get-started/v2/get-started/concepts/basics.mdx

@@ -0,0 +1,62 @@
+---
+title: Basics
+nav: 1.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 makes 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.
+
+-   **Server:** Use 100ms' APIs or dashboard to create rooms, setup room templates, trigger recording or RTMP streaming, access events.
+
+![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 or live streaming app.
+-   `Peer` A peer is the object returned by 100ms SDKs that contains all information about a user - name, role, video track etc.
+-   `Session` A session depicts activity in a room. A session is created when one or more peers join a room to communicate with each other. A single room can have multiple sessions; a unique ID will be assigned to each session. The maximum allowed duration for a session on the 100ms platform is 12 hours.
+-   `Track` A track is a segment of media (audio/video) captured from the peer's camera and microphone. Peers in a session publish local tracks and subscribe to remote tracks from other peers.
+-   `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.
+- `Room Code` A Room Code is a unique encrypted short code generated by 100ms for a given Role and Room. A Room Code represents a unique `role` and `room_id` combination.
+- `Room Link` A Room Link is a link that a `peer` can use to Join a Room. It is always associated to a specific Room and Role, allowing unique Room Links for each Role in a Room.
+-   `Template` A template is a collection of roles, room settings, recording and RTMP settings (if used), that are 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.
+-   `Destinations` Destinations is used to save audio/video calls for offline viewing. 100ms supports 2 kinds of recording - [SFU recording](/javascript/v2/foundation/recordings#sfu-recording-advanced) and [Browser recording](/javascript/v2/foundation/recordings#browser-recording-recommended). Also, `HLS enabled` configuration will allow you to live stream your room over HLS.
+-   `RTMP` RTMP streaming is used to live stream your video conferencing apps to platforms like YouTube, Twitch, Facebook, MUX, etc.
+-   `Webhooks` Webhook is an HTTP(S) endpoint used for pushing the notifications to your application. It will be invoked by 100ms servers to notify events of your room.
+-   `Workspace` A workspace is an isolated environment which contains account data like templates, rooms, room and session history, etc. You can use workspaces to represent environments like “Production” and “Development” and invite team members to a workspace.
+
+## What are the steps to build a live app with 100ms?
+1. Sign up on 100ms using the **Try For Free** button in the top navbar.
+
+![Signup for 100ms account](/docs/v2/signup.png)
+
+2. Once you're logged in to the dashboard, click on `Create Room`
+
+![Create Room](/docs/v2/Step-1_CreateRoom.png)
+
+3. **Hover and select** on one of the Template Presets.(We will use the **Video Conference Template** for this example)
+
+![Select Template](/docs/v2/Step2_SelectTemplate.png)
+
+4. You can either choose to configure your template by changing the auto suggested template name and subdomain URL or click on continue to move forward.
+
+![Configure Template](/docs/v2/Step3_ConfigureTemplate.png)
+
+5. Now you can **join your room** configured with the video conferencing template. You can join the room either via a 100ms demo link or by using the auth token in SDK or Sandbox.
+
+![Join Room](/docs/v2/Step4_JoinRoom.png)
+
+
+## Where should I start?
+
+
+### Quickstart
+
+If you want to see 100ms' SDKs in action in under 5 minutes, run one of our quickstart [apps](/android/v2/guides/quickstart)

docs/concepts/v2/concepts/templates-and-roles/overview.mdx → docs/get-started/v2/get-started/concepts/templates-and-roles.mdx

@@ -1,5 +1,5 @@
 ---
-title: Overview
+title: Templates and Roles
 nav: 1.2
 ---
 

docs/concepts/v2/concepts/templates-and-roles/breakout-rooms.mdx → docs/get-started/v2/get-started/features/interaction-and-controls/breakout-rooms.mdx

@@ -1,6 +1,6 @@
 ---
 title: Breakout Rooms
-nav: 1.23
+nav: 3.3
 ---
 
 import BreakoutRooms from '@/common/breakout-rooms.mdx';

docs/concepts/v2/concepts/templates-and-roles/waiting-room.mdx → docs/get-started/v2/get-started/features/interaction-and-controls/waiting-room.mdx

@@ -1,6 +1,6 @@
 ---
 title: Waiting Room
-nav: 1.22
+nav: 3.4
 ---
 
 import WaitingRoom from '@/common/waiting-room.mdx';

docs/concepts/v2/concepts/live-streaming.mdx → docs/get-started/v2/get-started/features/live-streaming.mdx

@@ -1,6 +1,6 @@
 ---
-title: Interactive Live Streaming
-nav: 1.5
+title: Live Streaming
+nav: 3.2
 ---
 
 import LiveStreaming from '@/common/live-streaming.mdx';

docs/concepts/v2/concepts/adaptive-bitrate.mdx → docs/get-started/v2/get-started/features/quality/adaptive-bitrate.mdx

@@ -1,6 +1,6 @@
 ---
 title: Adaptive Bitrate
-nav: 1.8
+nav: 3.5
 ---
 import AdaptiveBitrate from '@/common/adaptive-bitrate.md'
 

docs/concepts/v2/concepts/handling-audio-video-edge-cases.mdx → docs/get-started/v2/get-started/features/quality/handling-audio-video-edge-cases.mdx

@@ -1,6 +1,6 @@
 ---
 title: Handling audio-video edge cases
-nav: 1.4
+nav: 3.6
 ---
 
 import Network from '@/common/network.md';

docs/concepts/v2/concepts/recordings.mdx → docs/get-started/v2/get-started/features/recordings.mdx

@@ -1,6 +1,6 @@
 ---
-title: Recordings
-nav: 1.7
+title: Recording
+nav: 3.1
 ---
 
 import Recordings from '@/common/recordings.md';

docs/get-started/v2/get-started/overview.mdx

@@ -0,0 +1,71 @@
+---
+title: Overview
+nav: 1.0
+---
+
+100ms provides infrastructure and client-side SDKs for you to build real-time, audio-video interactive experiences in your app. 100ms combines the capabilities of video conferencing (built over WebRTC), live streaming (built over [HLS](https://en.wikipedia.org/wiki/HTTP_Live_Streaming)) and real-time databases. These capabilities can be used to build engaging live experiences—like virtual classrooms, live streams, tele-health consultations and multiplayer social gaming—in your web or mobile apps.
+
+## Understanding 100ms
+
+### Rooms and roles
+
+Everything in 100ms happens inside **rooms**. Your users can join a room, publish audio/video and interact with each other while they are in the room, and then leave the room.
+
+The room contains references to **peers** (users in the room) and **tracks** (audio, video, screen share) in the room. When the first peer joins a room, a new **session** is created. When the last peer leaves, the session ends. A room can have multiple sessions.
+
+Peers inside a room belong to a **role**, which defines what a peer can do in the room. For example, can they publish video, can they mute other peers, and so on. A peer can change roles while they are in the room.
+
+Learn about other [100ms primitives](/get-started/v2/get-started/concepts/basics).
+
+### Interactivity in the room
+
+The room can be used to enable different levels of interactivity.
+
+![Circles of interactivity](/docs/v2/concepts/circles-of-interactivity.png)
+
+#### Level 1: Full duplex audio/video in real-time
+
+Level 1 participants publish their audio/video, and interact with others in sub-second latency. This is real-time video conferencing, similar to Zoom or Google Meet.
+
+#### Level 2: Webinar-style audience in real-time
+
+    Level 2 participants consume audio/video from level 1 participants with sub-second latency, without publishing their own audio/video. Level 2 participants can engage with level 1 through messaging (chat, emojis, custom events). This is similar to a Zoom webinar.
+
+    Levels 1 and 2 are enabled using WebRTC.
+
+#### Level 3: Live stream audience consuming in near real-time
+
+    Level 3 participants consume a composite live stream in near real-time (\<10 secs of latency) without publishing their audio/video. They can interact with other participants via messaging. This is similar to viewers on Twitch or YouTube Live.
+
+#### Read more
+
+-   [Basic architecture](/get-started/v2/get-started/concepts/basics)
+-   [Primitives](/get-started/v2/get-started/concepts/basics)
+-   [Authentication](/get-started/v2/get-started/security-and-tokens)
+
+## Integration paths
+
+100ms can be used to make embedded, custom live video integrations that blend with the rest of your application. For some use-cases, it is faster to start with a "pre-built" web app. Pick an option that suits your use-case.
+
+<FlexContainer>
+
+<Callout icon="link" title="Pre-built">
+Generate room links or embed the 100ms web app as an iframe in your app
+
+[Integrate pre-built](/get-started/v2/get-started/prebuilt/prebuilt)
+
+</Callout>
+
+<Callout icon="shield" title="Custom UI">
+Build a custom UI with our headless client SDKs for web, Android, iOS, React Native and Flutter
+
+[Choose a client SDK to get started](/)
+
+</Callout>
+
+</FlexContainer>
+
+## Feature guides
+
+-   [Recordings](/get-started/v2/get-started/features/recordings)
+-   [Live streaming](/get-started/v2/get-started/features/live-streaming)

docs/concepts/v2/concepts/prebuilt.mdx → docs/get-started/v2/get-started/prebuilt/prebuilt.mdx

@@ -1,6 +1,6 @@
 ---
 title: Prebuilt Room Links
-nav: 1.9
+nav: 4.2
 ---
 Embed or share room links without building UI
 
@@ -11,7 +11,7 @@ Getting started with 100ms Prebuilt Room Links is the fastest way to test and go
 You can generate Prebuilt Room Links with a standard format : `https://<template-subdomain>/meeting/<room-code>`, where
 
     1. `template-subdomain` - is the subdomain that you’ve defined at the time of Template creation. 
-    2. `room-code` - is a Room Code and belongs to a unique `room_id` and `role` for which you're creating the Room Link. Read more on [Room Codes](/concepts/v2/concepts/rooms/room-codes/room-codes) and its usage.
+    2. `room-code` - is a Room Code and belongs to a unique `room_id` and `role` for which you're creating the Room Link. Read more on [Room Codes](/get-started/v2/get-started/prebuilt/room-codes/overview) and its usage.
 
 ## Pre-requisites
 

docs/concepts/v2/concepts/rooms/room-codes/room-codes.mdx → docs/get-started/v2/get-started/prebuilt/room-codes/overview.mdx

@@ -1,6 +1,6 @@
 ---
-title: Room Codes
-nav: 2.1
+title: Overview
+nav: 5.1
 ---
 
 A Room Code is a unique encrypted short code generated by 100ms for a given Role and Room. A Room Code represents a unique `role` and `room_id` combination.

docs/concepts/v2/concepts/rooms/room-codes/room-code-auth.mdx → docs/get-started/v2/get-started/prebuilt/room-codes/room-code-auth.mdx

@@ -1,6 +1,6 @@
 ---
 title: Room Code Authentication
-nav: 2.2
+nav: 5.3
 ---
 
 [Room Codes](/concepts/v2/concepts/rooms/room-codes/room-codes) are 100ms generated short codes, representing a Room and Role combination. In addition to generating [Room Links](/concepts/v2/concepts/rooms/room-links), Room Codes can also power authentication when a peer joins a Room.

docs/concepts/v2/concepts/rooms/room-links.mdx → docs/get-started/v2/get-started/prebuilt/room-codes/room-links.mdx

@@ -1,11 +1,11 @@
 ---
 title: Room Links
-nav: 2.2
+nav: 5.4
 ---
 
 A Room Link is a link that a `peer` can use to Join a Room. It is always associated to a specific Room and Role, allowing unique Room Links for each Role in a Room.
 
-In order to construct a Room Link for a Role, you need a Role specific Room Code. It is a unique encrypted code that depicts a unique room_id and role combination. Read more on [Room Codes](/concepts/v2/concepts/rooms/room-codes/room-codes). With 100ms, two types of Room Links formats are supported: Prebuilt and Custom Domain Room Links.
+In order to construct a Room Link for a Role, you need a Role specific Room Code. It is a unique encrypted code that depicts a unique room_id and role combination. Read more on [Room Codes](/get-started/v2/get-started/prebuilt/room-codes/overview). With 100ms, two types of Room Links formats are supported: Prebuilt and Custom Domain Room Links.
 
 ## Prebuilt Room Links
 

docs/concepts/v2/concepts/security-and-tokens.mdx → docs/get-started/v2/get-started/security-and-tokens.mdx

@@ -1,6 +1,6 @@
 ---
 title: Authentication and Tokens
-nav: 1.3
+nav: 5.2
 ---
 
 100ms uses two types of JWT tokens to authenticate requests coming from your client apps and backend server.
@@ -19,6 +19,7 @@ Both tokens can be decoded with JWT utilities, like [jwt.io](https://jwt.io).
 ### How to get auth tokens?
 
 - No-code to get started: Get temporary auth tokens from [the dashboard](/javascript/v2/guides/token#get-a-temporary-token-from-100ms-dashboard)
+- Use 100ms token server: Use the 100ms [token endpoint](/javascript/v2/guides/token-endpoint#get-a-token-using-100ms-token-endpoint) to generate auth tokens, just like our sample apps
 - [Set up your token server](#set-up-your-token-server): Recommended approach for production
 
 ### Set up your token server

docs/react-native/v2/how--to-guides/configure-your-device/camera/camera-controls.mdx → docs/react-native/v2/how-to-guides/configure-your-device/camera/camera-controls-mdx

@@ -82,4 +82,4 @@ try {
 
 > 🔑 Note: If flashlight is not supported on the device and `true` value is passed to the 
 `captureImageAtMaxSupportedResolution` method for `flash` parameter, then this method will
-throw and error
+throw and error