Currently, there's no home for docs visiting https://docs.100ms.live/ would redirect to javascript docs

We should have a page that will have

• starter guide
• links to faq etc

Examples

• Railway's docs
• Vercel's docs
• Supabase's docs

DEEP's TODO

• fix order of content of android #148
• fix Android Release notes #148
• Mdx Components not working in Common Parts #147
• Fix Quickstart Apps Link in Basic Concepts in all Section #147
• show message for people using old docs links /v1 & /v2 #149
• add Android API reference up #152
• better table UI #153
• Tech Selector doesn't inherit the state from the /api-reference #153
• Lowercase Tech Names in Selector #153
• skip to section not working for token generation page (fix: add remark-slug plugin)
• Header new UI #153
• Search Modal being cramped #153
• Javascript Release Notes not working (links to old docs)
• Ask Praveen About this
• Report Transclusion Error to Hashicorp [POST MERGE]

many packages havent being updated + many of them being conflicted with others ...

lot of dependencies are lot of debts ...

iOS Simulator is a valid term but Vale Linter is marking it as a Repetition failure.

To help the Golang users, add sample code for token generation as we have for the other languages over here

based on the scroll the specific table of content is highlighted

Table of Content is implemented here.

Instead of repeating headers in each MDX file add them via DocLayout

repro scenarios in this video. i started from "server-side" section, navigated to android.

fields used in token generation need to be clarified. e.g, where do i get the user_id / room_id from?

https://www.100ms.live/docs/javascript/v2/foundation/security-and-tokens#app-token

on this page, the following section is taking me to the android sample app. can we update this to go to the Flutter app?

"Want to see how this works in a live project? Take a look at our advanced sample app."

https://github.com/100mslive/100ms-docs/blob/main/docs/javascript/v2/features/chat.mdx

Problem 1:
In React to get the broadcast messages, spelling mistake:
brodacast should be broadcast
(Search brodacast and you will get the error)

Problem 2:
Check the line above the "brodacast"
the parameter of selecting all messages - selectMessages should be selectHMSMessages

I wish to work on this and I am creating a PR soon.

Refer: https://tailwindcss.com/

Steps to reproduce:

Visit: https://docs.100ms.live/server-side/v2/features/room

Scroll horizontally the code snippet

After calling API to disable a room, response comes with success 200, but active field comes still as true.

and avoid the need for this additional <br/>

And for Deno(Supabase Edge Function) please. I try, but error Error: Failed to create room: Unauthorized

error Error: Failed to create room: Unauthorized
   at Object.handler (file:///home/deno/functions/create-room/index.ts:83:13)
   at eventLoopTick (ext:core/01_core.js:183:11)
   at async handleHttp (ext:sb_core_main_js/js/http.js:93:17)

import {
  create,
  getNumericDate,
  Header,
  Payload,
} from "https://deno.land/x/djwt/mod.ts";

const access_key = Deno.env.get("APP_ACCESS_KEY");
const app_secret = Deno.env.get("APP_SECRET");

const payload: Payload = {
  access_key: access_key,
  type: "management",
  version: 2,
  iat: getNumericDate(Math.floor(Date.now() / 1000)),
  nbf: getNumericDate(Math.floor(Date.now() / 1000)),
  exp: getNumericDate(60 * 60 * 24), // 24 hours from now
};

const header: Header = {
  alg: "HS256",
  typ: "JWT",
};


const cryptoKey = await crypto.subtle.importKey(
  "raw",
  new TextEncoder().encode(app_secret),
  { name: "HMAC", hash: { name: "SHA-256" } },
  false,
  ["sign"],
);

let token;
  try {
    if (!app_secret) {
      throw new Error("Secret not found");
    }
    token = await create(header, payload, cryptoKey);
  } catch (err) {
    console.error(err);
  }

To reproduce:

Visit: https://docs.100ms.live/javascript/v2/guides/react-quickstart#changing-ui-based-on-connection-state

Make the viewport small and scroll horizontally the code block as you can see the highlighting isn't covering the width

NOTE: all styles are present in theme.css

We don't have docs feedback, whether this was helpful (Upvote, Downvote) thing

Planning to add this in the docs in the future.

Would be using Prisma and Nextjs serverless

Currently, Blockquotes are mapped a Custom Note component

refer this :

Our current Note component looks like this:

Visit https://docs.100ms.live/javascript/v2/features/device-change check it live.

It looks very simple at the moment

Things that can make it better

• add an info icon
• have a background , border (shades of blue / yellow / red)
• more variants ( success , note , error )

Feel free to drop questions if you have

Switch to dark mode and try to copy some text. It's really annoying that selection is not visible.

Features:

• Make Tabs Accessible
• Cmd + C should copy the Code Block in scrollView (Vercel)
• Hover on some Specific Code words -> Tooltip (as Stripe Docs)
• Blur the Bottom if Scroll is present in Sidebar and Toc (as Stripe Docs)
• Scroll would control the Active States in Toc (Same as Gitbook)
• Support Anchor Scrolls for Other Browsers (Radix-UI)
• Copied To Clipboard Toastify (optional)
• Make Copied Pop to the Left instead of Bottom (to avoid hidden in small snippets)
• Arrow Keys bind as Pagination

To reproduce:

Visit https://docs.100ms.live/javascript/v2/guides/react-quickstart

Click on Copy in one of the Code Snippets

You can see that the "Copied" popup is at the bottom

If you're planning to fix this just remove the popup and replace the copy icon with Check icon

Refer to this implementation here