diff --git a/examples/ai-transport-message-per-response/javascript/README.md b/examples/ai-transport-message-per-response/javascript/README.md index ebb5760df6..c1c4ed32c0 100644 --- a/examples/ai-transport-message-per-response/javascript/README.md +++ b/examples/ai-transport-message-per-response/javascript/README.md @@ -24,35 +24,35 @@ Find out more about [AI Transport](/docs/ai-transport) and [message appending](/ 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run ai-transport-message-per-response-javascript - ``` + ```sh + yarn run ai-transport-message-per-response-javascript + ``` 7. Try it out by opening [http://localhost:5173/](http://localhost:5173/) with your browser and selecting a prompt to see realtime AI token streaming. diff --git a/examples/ai-transport-message-per-response/react/README.md b/examples/ai-transport-message-per-response/react/README.md index b0b5e85be2..ee02ed209a 100644 --- a/examples/ai-transport-message-per-response/react/README.md +++ b/examples/ai-transport-message-per-response/react/README.md @@ -24,35 +24,35 @@ Find out more about [AI Transport](/docs/ai-transport) and [message-per-response 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run ai-transport-message-per-response-react - ``` + ```sh + yarn run ai-transport-message-per-response-react + ``` 7. Try it out by opening [http://localhost:5173/](http://localhost:5173/) with your browser and selecting a prompt to see realtime AI token streaming. diff --git a/examples/ai-transport-message-per-token/javascript/README.md b/examples/ai-transport-message-per-token/javascript/README.md index ffed30477a..268cf01712 100644 --- a/examples/ai-transport-message-per-token/javascript/README.md +++ b/examples/ai-transport-message-per-token/javascript/README.md @@ -23,35 +23,35 @@ Find out more about [AI Transport](/docs/ai-transport), [token streaming](/docs/ 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run ai-transport-message-per-token-javascript - ``` + ```sh + yarn run ai-transport-message-per-token-javascript + ``` 7. Try it out by opening [http://localhost:5173/](http://localhost:5173/) with your browser and selecting a prompt to see realtime AI token streaming. diff --git a/examples/ai-transport-message-per-token/react/README.md b/examples/ai-transport-message-per-token/react/README.md index d696ea421e..2297b2d19b 100644 --- a/examples/ai-transport-message-per-token/react/README.md +++ b/examples/ai-transport-message-per-token/react/README.md @@ -23,35 +23,35 @@ Find out more about [AI Transport](/docs/ai-transport) and [message history](/do 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run ai-transport-message-per-token-react - ``` + ```sh + yarn run ai-transport-message-per-token-react + ``` 7. Try it out by opening [http://localhost:5173/](http://localhost:5173/) with your browser and selecting a prompt to see realtime AI token streaming. diff --git a/examples/auth-generate-jwt/javascript/README.md b/examples/auth-generate-jwt/javascript/README.md index 914318663e..3bcdd11fbd 100644 --- a/examples/auth-generate-jwt/javascript/README.md +++ b/examples/auth-generate-jwt/javascript/README.md @@ -20,53 +20,53 @@ Find out more about [authentication](https://ably.com/docs/auth/token?lang=javas 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 4. Run the frontend client: - ```sh - yarn run auth-generate-jwt-javascript - ``` + ```sh + yarn run auth-generate-jwt-javascript + ``` 5. In a new tab, change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 6. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 7. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 8. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 9. Run the backend server: - ```sh - yarn run auth-generate-jwt-server - ``` + ```sh + yarn run auth-generate-jwt-server + ``` 10. Try it out by opening a tab to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/auth-generate-jwt/react/README.md b/examples/auth-generate-jwt/react/README.md index 42e635734f..c2a511545f 100644 --- a/examples/auth-generate-jwt/react/README.md +++ b/examples/auth-generate-jwt/react/README.md @@ -20,53 +20,53 @@ Find out more about [authentication](https://ably.com/docs/auth/token?lang=javas 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 4. Run the frontend client: - ```sh - yarn run auth-generate-jwt-react - ``` + ```sh + yarn run auth-generate-jwt-react + ``` 5. In a new tab, change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 6. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 7. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 8. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 9. Run the backend server: - ```sh - yarn run auth-generate-jwt-server - ``` + ```sh + yarn run auth-generate-jwt-server + ``` 10. Try it out by opening a tab to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/auth-request-token/javascript/README.md b/examples/auth-request-token/javascript/README.md index 6df9fe9f0e..6ab54c1e9e 100644 --- a/examples/auth-request-token/javascript/README.md +++ b/examples/auth-request-token/javascript/README.md @@ -27,53 +27,53 @@ Find out more about [authentication](/docs/auth). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 4. Run the frontend client: - ```sh - yarn run auth-request-token-javascript - ``` + ```sh + yarn run auth-request-token-javascript + ``` 5. In a new tab, change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 6. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 7. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 8. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 9. Run the backend server: - ```sh - yarn run auth-request-token-server - ``` + ```sh + yarn run auth-request-token-server + ``` 10. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/auth-request-token/react/README.md b/examples/auth-request-token/react/README.md index 2d8576e702..9c58b4486f 100644 --- a/examples/auth-request-token/react/README.md +++ b/examples/auth-request-token/react/README.md @@ -27,53 +27,53 @@ Find out more about [authentication](/docs/auth). . Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 4. Run the frontend client: - ```sh - yarn run auth-request-token-react - ``` + ```sh + yarn run auth-request-token-react + ``` 5. In a new tab, change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 6. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 7. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 8. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 9. Run the backend server: - ```sh - yarn run auth-request-token-server - ``` + ```sh + yarn run auth-request-token-server + ``` 10. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/chat-presence/javascript/README.md b/examples/chat-presence/javascript/README.md index 53c587d15f..f50b872f77 100644 --- a/examples/chat-presence/javascript/README.md +++ b/examples/chat-presence/javascript/README.md @@ -22,35 +22,35 @@ Find out more about [presence](/docs/chat/rooms/presence?lang=javascript). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-presence-javascript - ``` + ```sh + yarn run chat-presence-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/chat-presence/react/README.md b/examples/chat-presence/react/README.md index 52a24ce2a3..78360e3abd 100644 --- a/examples/chat-presence/react/README.md +++ b/examples/chat-presence/react/README.md @@ -24,35 +24,35 @@ Find out more about [presence](/docs/chat/rooms/presence?lang=react). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-presence-react - ``` + ```sh + yarn run chat-presence-react + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/chat-room-history/javascript/README.md b/examples/chat-room-history/javascript/README.md index 0ca97ddc52..9ac87a35d3 100644 --- a/examples/chat-room-history/javascript/README.md +++ b/examples/chat-room-history/javascript/README.md @@ -20,35 +20,35 @@ Find out more about [message history](/docs/chat/rooms/history?lang=javascript). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-room-history-javascript - ``` + ```sh + yarn run chat-room-history-javascript + ``` 7. Try it out by opening two tabs, one to [http://localhost:5173?loadChat=true](http://localhost:5173?loadChat=true) and one to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/chat-room-history/react/README.md b/examples/chat-room-history/react/README.md index edcb5502e8..4cefe38309 100644 --- a/examples/chat-room-history/react/README.md +++ b/examples/chat-room-history/react/README.md @@ -21,35 +21,35 @@ Find out more about [message history](/docs/chat/rooms/history?lang=react). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-room-history-react - ``` + ```sh + yarn run chat-room-history-react + ``` 7. Try it out by opening two tabs, one to [http://localhost:3000?loadChat=true](http://localhost:3000?loadChat=true) and one to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/chat-room-messages/javascript/README.md b/examples/chat-room-messages/javascript/README.md index 1862c2dc33..4959b9b7fc 100644 --- a/examples/chat-room-messages/javascript/README.md +++ b/examples/chat-room-messages/javascript/README.md @@ -22,35 +22,35 @@ Find out more about [rooms](/docs/chat/rooms?lang=javascript) and [messages](/do 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-room-messages-javascript - ``` + ```sh + yarn run chat-room-messages-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/chat-room-messages/react/README.md b/examples/chat-room-messages/react/README.md index 0201fbf5d5..e9fb09a618 100644 --- a/examples/chat-room-messages/react/README.md +++ b/examples/chat-room-messages/react/README.md @@ -23,35 +23,35 @@ Find out more about [rooms](/docs/chat/rooms?lang=react) and [messages](/docs/ch 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-room-messages-react - ``` + ```sh + yarn run chat-room-messages-react + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/chat-room-reactions/javascript/README.md b/examples/chat-room-reactions/javascript/README.md index c17da708b6..c7cc23bc86 100644 --- a/examples/chat-room-reactions/javascript/README.md +++ b/examples/chat-room-reactions/javascript/README.md @@ -22,35 +22,35 @@ Find out more about [room reactions](/docs/chat/rooms/reactions?lang=javascript) 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 1. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 2. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-room-reactions-javascript - ``` + ```sh + yarn run chat-room-reactions-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/chat-room-reactions/react/README.md b/examples/chat-room-reactions/react/README.md index e7250001cb..d91e74106b 100644 --- a/examples/chat-room-reactions/react/README.md +++ b/examples/chat-room-reactions/react/README.md @@ -23,35 +23,35 @@ Find out more about [room reactions](/docs/chat/rooms/reactions). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-room-reactions-react - ``` + ```sh + yarn run chat-room-reactions-react + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/chat-typing-indicator/javascript/README.md b/examples/chat-typing-indicator/javascript/README.md index a9f64605a6..6eb09588fc 100644 --- a/examples/chat-typing-indicator/javascript/README.md +++ b/examples/chat-typing-indicator/javascript/README.md @@ -23,35 +23,35 @@ Find out more about [typing indicators](/docs/chat/rooms/typing). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-typing-indicator-javascript - ``` + ```sh + yarn run chat-typing-indicator-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/chat-typing-indicator/react/README.md b/examples/chat-typing-indicator/react/README.md index 529085ea51..cd6f5f5dd2 100644 --- a/examples/chat-typing-indicator/react/README.md +++ b/examples/chat-typing-indicator/react/README.md @@ -23,35 +23,35 @@ Find out more about [typing indicators](/docs/chat/rooms/typing). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-typing-indicator-react - ``` + ```sh + yarn run chat-typing-indicator-react + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/chat-ui-app/react/README.md b/examples/chat-ui-app/react/README.md index 553be66ea3..5bd9b65fce 100644 --- a/examples/chat-ui-app/react/README.md +++ b/examples/chat-ui-app/react/README.md @@ -17,35 +17,35 @@ This example uses the `App` component from the Ably Chat UI React Kit, and is wr 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-ui-app - ``` + ```sh + yarn run chat-ui-app + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/chat-ui-chat-window/react/README.md b/examples/chat-ui-chat-window/react/README.md index 91e48db564..bcc5c32cfb 100644 --- a/examples/chat-ui-chat-window/react/README.md +++ b/examples/chat-ui-chat-window/react/README.md @@ -18,35 +18,35 @@ This example uses the `ChatWindow` component from the Ably Chat UI React Kit, an 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-ui-chat-window - ``` + ```sh + yarn run chat-ui-chat-window + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/chat-ui-sidebar/react/README.md b/examples/chat-ui-sidebar/react/README.md index 8ca8d40c89..a8138c5ef5 100644 --- a/examples/chat-ui-sidebar/react/README.md +++ b/examples/chat-ui-sidebar/react/README.md @@ -17,35 +17,35 @@ This example uses the `Sidebar` component from the Ably Chat UI React Kit, and i 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run chat-ui-sidebar - ``` + ```sh + yarn run chat-ui-sidebar + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/liveobjects-live-counter/javascript/README.md b/examples/liveobjects-live-counter/javascript/README.md index 98358b93c4..e96504ea4c 100644 --- a/examples/liveobjects-live-counter/javascript/README.md +++ b/examples/liveobjects-live-counter/javascript/README.md @@ -27,35 +27,35 @@ Find out more about [PathObject](/docs/liveobjects/concepts/path-object) and [Li 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run liveobjects-live-counter-javascript - ``` + ```sh + yarn run liveobjects-live-counter-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/liveobjects-live-map/javascript/README.md b/examples/liveobjects-live-map/javascript/README.md index ba94697adc..40828eb8b0 100644 --- a/examples/liveobjects-live-map/javascript/README.md +++ b/examples/liveobjects-live-map/javascript/README.md @@ -28,35 +28,35 @@ Find out more about [PathObject](/docs/liveobjects/concepts/path-object) and [Li 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run liveobjects-live-map-javascript - ``` + ```sh + yarn run liveobjects-live-map-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/pub-sub-channel-messages/javascript/README.md b/examples/pub-sub-channel-messages/javascript/README.md index 36389a76de..a3ac499645 100644 --- a/examples/pub-sub-channel-messages/javascript/README.md +++ b/examples/pub-sub-channel-messages/javascript/README.md @@ -22,35 +22,35 @@ Find out more about [channels](/docs/channels) and [messages](/docs/channels/mes 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-channel-messages-javascript - ``` + ```sh + yarn run pub-sub-channel-messages-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/pub-sub-channel-messages/react/README.md b/examples/pub-sub-channel-messages/react/README.md index 4ef1dd83ae..24a7a08e32 100644 --- a/examples/pub-sub-channel-messages/react/README.md +++ b/examples/pub-sub-channel-messages/react/README.md @@ -23,35 +23,35 @@ Find out more about [channels](/docs/channels) and [messages](/docs/channels/mes 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-channel-messages-react - ``` + ```sh + yarn run pub-sub-channel-messages-react + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/pub-sub-channel-state/javascript/README.md b/examples/pub-sub-channel-state/javascript/README.md index f6067adb27..cd311d68cb 100644 --- a/examples/pub-sub-channel-state/javascript/README.md +++ b/examples/pub-sub-channel-state/javascript/README.md @@ -19,35 +19,35 @@ Find out more about [channel states](/docs/channels/states). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-channel-state-javascript - ``` + ```sh + yarn run pub-sub-channel-state-javascript + ``` 7. Try it out by opening a tab to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/pub-sub-channel-state/react/README.md b/examples/pub-sub-channel-state/react/README.md index 32a6490735..2b20e3476b 100644 --- a/examples/pub-sub-channel-state/react/README.md +++ b/examples/pub-sub-channel-state/react/README.md @@ -20,35 +20,35 @@ Find out more about [channel states](/docs/channels/states). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-channel-state-react - ``` + ```sh + yarn run pub-sub-channel-state-react + ``` 7. Try it out by opening a tab to [http://localhost:3000](http://localhost:3000/) with your browser to see the result. diff --git a/examples/pub-sub-connection-state/javascript/README.md b/examples/pub-sub-connection-state/javascript/README.md index 13025acaf2..b8a6966e98 100644 --- a/examples/pub-sub-connection-state/javascript/README.md +++ b/examples/pub-sub-connection-state/javascript/README.md @@ -18,35 +18,35 @@ Find out more about [connection states](/docs/connect/states). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-connection-state-javascript - ``` + ```sh + yarn run pub-sub-connection-state-javascript + ``` 7. Try it out by opening a tab to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/pub-sub-connection-state/react/README.md b/examples/pub-sub-connection-state/react/README.md index ea02da1d56..65cc807b27 100644 --- a/examples/pub-sub-connection-state/react/README.md +++ b/examples/pub-sub-connection-state/react/README.md @@ -18,35 +18,35 @@ Find out more about [connection states](/docs/connect/states). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-connection-state-react - ``` + ```sh + yarn run pub-sub-connection-state-react + ``` 7. opening one tab to [http://localhost:3000](http://localhost:3000/) with your browser to see the result. diff --git a/examples/pub-sub-history/javascript/README.md b/examples/pub-sub-history/javascript/README.md index 5985b453a5..3b003e4056 100644 --- a/examples/pub-sub-history/javascript/README.md +++ b/examples/pub-sub-history/javascript/README.md @@ -22,35 +22,35 @@ Find out more about [history](/docs/storage-history/history). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-history-javascript - ``` + ```sh + yarn run pub-sub-history-javascript + ``` 7. Try it out by opening a tab to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/pub-sub-history/react/README.md b/examples/pub-sub-history/react/README.md index e005803161..73c0392054 100644 --- a/examples/pub-sub-history/react/README.md +++ b/examples/pub-sub-history/react/README.md @@ -23,35 +23,35 @@ Find out more about [history](/docs/storage-history/history). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-history-react - ``` + ```sh + yarn run pub-sub-history-react + ``` 7. Try it out by opening a tab to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/pub-sub-live-voting/javascript/README.md b/examples/pub-sub-live-voting/javascript/README.md index c5d5535c68..bbaa9fe79a 100644 --- a/examples/pub-sub-live-voting/javascript/README.md +++ b/examples/pub-sub-live-voting/javascript/README.md @@ -40,38 +40,38 @@ The app has three roles. 1. The admin starts a poll by publishing a message: - ```javascript - await channel.publish('poll', { pollId, question, type, options }); - ``` + ```javascript + await channel.publish('poll', { pollId, question, type, options }); + ``` 2. A voter attaches a `vote:unique.v1` annotation to that message's `serial`, naming the chosen option: - ```javascript - await channel.annotations.publish(pollSerial, { - type: 'vote:unique.v1', - name: optionId, - }); - ``` + ```javascript + await channel.annotations.publish(pollSerial, { + type: 'vote:unique.v1', + name: optionId, + }); + ``` 3. Ably aggregates the votes and delivers a summary on the poll message. Voters read it to render live percentages: - ```javascript - channel.subscribe((message) => { - const summary = message.annotations?.summary?.['vote:unique.v1']; - // summary[optionId].total === votes for that option - }); - ``` + ```javascript + channel.subscribe((message) => { + const summary = message.annotations?.summary?.['vote:unique.v1']; + // summary[optionId].total === votes for that option + }); + ``` 4. The presenter additionally subscribes to the individual events for its vote and suggestion bubbles: - ```javascript - channel.annotations.subscribe('vote:unique.v1', (annotation) => { - // one event per vote — annotation.name is the option, annotation.clientId the voter - }); - ``` + ```javascript + channel.annotations.subscribe('vote:unique.v1', (annotation) => { + // one event per vote — annotation.name is the option, annotation.clientId the voter + }); + ``` That annotation type string, `vote:unique.v1`, follows the `namespace:summarization.version` convention; `unique` is one of [five aggregation types](/docs/messages/annotations#aggregation) (`unique`, `distinct`, `multiple`, `total`, `flag`), each rolling up the same raw annotations a different way. diff --git a/examples/pub-sub-message-annotations/javascript/README.md b/examples/pub-sub-message-annotations/javascript/README.md index 18773b9ad1..0593c43a06 100644 --- a/examples/pub-sub-message-annotations/javascript/README.md +++ b/examples/pub-sub-message-annotations/javascript/README.md @@ -43,37 +43,37 @@ This example demonstrates: 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Enable the "Annotations, updates, deletes, and appends" channel rule that matches the channel name you'll be using (by default we use a channel name of `annotation:pub-sub-message-annotations`, so if using this, [create this rule](https://ably.com/docs/channels#rules) for the "annotation" channel namespace). 7. Run the server: - ```sh - yarn run pub-sub-message-annotations-javascript - ``` + ```sh + yarn run pub-sub-message-annotations-javascript + ``` 8. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. Specify different client IDs in the URL (e.g., `?clientId=user1` and `?clientId=user2`) to see how annotations from different clients are handled and summarized diff --git a/examples/pub-sub-message-encryption/javascript/README.md b/examples/pub-sub-message-encryption/javascript/README.md index b2f9c9fb9e..391277ed3e 100644 --- a/examples/pub-sub-message-encryption/javascript/README.md +++ b/examples/pub-sub-message-encryption/javascript/README.md @@ -22,35 +22,35 @@ Find out more about [channels](/docs/channels), [messages](/docs/channels/messag 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-message-encryption-javascript - ``` + ```sh + yarn run pub-sub-message-encryption-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/?encrypted=true](http://localhost:5173/?encrypted=true) and [http://localhost:5173/?encrypted=false](http://localhost:5173/?encrypted=false) with your browser to see the result. diff --git a/examples/pub-sub-message-encryption/react/README.md b/examples/pub-sub-message-encryption/react/README.md index 18b2106347..4518ea4112 100644 --- a/examples/pub-sub-message-encryption/react/README.md +++ b/examples/pub-sub-message-encryption/react/README.md @@ -23,35 +23,35 @@ Find out more about [channels](/docs/channels), [messages](/docs/channels/messag 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-message-encryption-react - ``` + ```sh + yarn run pub-sub-message-encryption-react + ``` 7. Try it out by opening two tabs to [http://localhost:3000/?encrypted=true](http://localhost:3000/?encrypted=true) and [http://localhost:3000/?encrypted=false](http://localhost:3000/?encrypted=false) with your browser to see the result. diff --git a/examples/pub-sub-occupancy/javascript/README.md b/examples/pub-sub-occupancy/javascript/README.md index 7bfb2fe37d..985d6e76ab 100644 --- a/examples/pub-sub-occupancy/javascript/README.md +++ b/examples/pub-sub-occupancy/javascript/README.md @@ -19,35 +19,35 @@ Find out more about [occupancy](/docs/presence-occupancy/occupancy). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-occupancy-javascript - ``` + ```sh + yarn run pub-sub-occupancy-javascript + ``` 7. Try it out by opening a tab to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/pub-sub-occupancy/react/README.md b/examples/pub-sub-occupancy/react/README.md index 508f5ae3d7..de0fdd61b2 100644 --- a/examples/pub-sub-occupancy/react/README.md +++ b/examples/pub-sub-occupancy/react/README.md @@ -20,35 +20,35 @@ Find out more about [occupancy](/docs/presence-occupancy/occupancy). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-occupancy-react - ``` + ```sh + yarn run pub-sub-occupancy-react + ``` 7. Try it out by opening a tab to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/pub-sub-presence/javascript/README.md b/examples/pub-sub-presence/javascript/README.md index f8d1ebfd5f..e789e64448 100644 --- a/examples/pub-sub-presence/javascript/README.md +++ b/examples/pub-sub-presence/javascript/README.md @@ -23,35 +23,35 @@ Find out more about [presence](/docs/presence-occupancy/presence). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-presence-javascript - ``` + ```sh + yarn run pub-sub-presence-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/pub-sub-presence/react/README.md b/examples/pub-sub-presence/react/README.md index 8a418639f7..02de7bcaac 100644 --- a/examples/pub-sub-presence/react/README.md +++ b/examples/pub-sub-presence/react/README.md @@ -23,35 +23,35 @@ Find out more about [presence](/docs/presence-occupancy/presence). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-presence-react - ``` + ```sh + yarn run pub-sub-presence-react + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/pub-sub-rewind/javascript/README.md b/examples/pub-sub-rewind/javascript/README.md index 51175ef3af..a990def42e 100644 --- a/examples/pub-sub-rewind/javascript/README.md +++ b/examples/pub-sub-rewind/javascript/README.md @@ -21,35 +21,35 @@ Find out more about [rewind](https://ably.com/docs/channels/options/rewind). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-rewind-javascript - ``` + ```sh + yarn run pub-sub-rewind-javascript + ``` 7. Try it out by opening a tab to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/pub-sub-rewind/react/README.md b/examples/pub-sub-rewind/react/README.md index b91135183e..aff1b19aed 100644 --- a/examples/pub-sub-rewind/react/README.md +++ b/examples/pub-sub-rewind/react/README.md @@ -22,35 +22,35 @@ Find out more about [rewind](https://ably.com/docs/channels/options/rewind). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run pub-sub-rewind-react - ``` + ```sh + yarn run pub-sub-rewind-react + ``` 7. Try it out by opening a tab to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/spaces-avatar-stack/javascript/README.md b/examples/spaces-avatar-stack/javascript/README.md index c6b870baa3..644da5a9b2 100644 --- a/examples/spaces-avatar-stack/javascript/README.md +++ b/examples/spaces-avatar-stack/javascript/README.md @@ -23,35 +23,35 @@ Find out more about [avatar stack](/docs/spaces/avatar). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run spaces-avatar-stack-javascript - ``` + ```sh + yarn run spaces-avatar-stack-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/spaces-avatar-stack/react/README.md b/examples/spaces-avatar-stack/react/README.md index e60e8dc5e2..9b5e8d8409 100644 --- a/examples/spaces-avatar-stack/react/README.md +++ b/examples/spaces-avatar-stack/react/README.md @@ -23,35 +23,35 @@ Find out more about [avatar stack](/docs/spaces/avatar). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run spaces-avatar-stack-react - ``` + ```sh + yarn run spaces-avatar-stack-react + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/spaces-component-locking/javascript/README.md b/examples/spaces-component-locking/javascript/README.md index ddefffcf22..e65c1540e8 100644 --- a/examples/spaces-component-locking/javascript/README.md +++ b/examples/spaces-component-locking/javascript/README.md @@ -25,35 +25,35 @@ Find out more about [component locking](/docs/spaces/locking). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run spaces-component-locking-javascript - ``` + ```sh + yarn run spaces-component-locking-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/spaces-component-locking/react/README.md b/examples/spaces-component-locking/react/README.md index 7e839ee478..a203bf5f54 100644 --- a/examples/spaces-component-locking/react/README.md +++ b/examples/spaces-component-locking/react/README.md @@ -26,35 +26,35 @@ Find out more about [component locking](/docs/spaces/locking). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run spaces-component-locking-react - ``` + ```sh + yarn run spaces-component-locking-react + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/spaces-live-cursors/javascript/README.md b/examples/spaces-live-cursors/javascript/README.md index 5301acccd8..bdacc23ead 100644 --- a/examples/spaces-live-cursors/javascript/README.md +++ b/examples/spaces-live-cursors/javascript/README.md @@ -23,35 +23,35 @@ Find out more about [live-cursors](/docs/spaces/cursors). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run spaces-live-cursors-javascript - ``` + ```sh + yarn run spaces-live-cursors-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/spaces-live-cursors/react/README.md b/examples/spaces-live-cursors/react/README.md index 570614c837..b5d8dff7b1 100644 --- a/examples/spaces-live-cursors/react/README.md +++ b/examples/spaces-live-cursors/react/README.md @@ -24,35 +24,35 @@ Find out more about [live cursors](/docs/spaces/cursors). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run spaces-live-cursors-react - ``` + ```sh + yarn run spaces-live-cursors-react + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/examples/spaces-member-location/javascript/README.md b/examples/spaces-member-location/javascript/README.md index 437a962398..b420da70bf 100644 --- a/examples/spaces-member-location/javascript/README.md +++ b/examples/spaces-member-location/javascript/README.md @@ -22,35 +22,35 @@ Find out more about [member location](/docs/spaces/locations). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run spaces-member-location-javascript - ``` + ```sh + yarn run spaces-member-location-javascript + ``` 7. Try it out by opening two tabs to [http://localhost:5173/](http://localhost:5173/) with your browser to see the result. diff --git a/examples/spaces-member-location/react/README.md b/examples/spaces-member-location/react/README.md index b9c4ec72e3..e66fdb40ef 100644 --- a/examples/spaces-member-location/react/README.md +++ b/examples/spaces-member-location/react/README.md @@ -22,35 +22,35 @@ Find out more about [member location](/docs/spaces/locations). 1. Clone the [Ably docs](https://github.com/ably/docs) repository where this example can be found: - ```sh - git clone git@github.com:ably/docs.git - ``` + ```sh + git clone git@github.com:ably/docs.git + ``` 2. Change directory: - ```sh - cd examples/ - ``` + ```sh + cd examples/ + ``` 3. Rename the environment file: - ```sh - mv .env.example .env.local - ``` + ```sh + mv .env.example .env.local + ``` 4. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key. 5. Install dependencies: - ```sh - yarn install - ``` + ```sh + yarn install + ``` 6. Run the server: - ```sh - yarn run spaces-member-location-react - ``` + ```sh + yarn run spaces-member-location-react + ``` 7. Try it out by opening two tabs to [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. diff --git a/src/components/Icon/glyphs/icon-gui-prod-ai-transport-outline.tsx b/src/components/Icon/glyphs/icon-gui-prod-ai-transport-outline.tsx index c2903799fb..b324504ce0 100644 --- a/src/components/Icon/glyphs/icon-gui-prod-ai-transport-outline.tsx +++ b/src/components/Icon/glyphs/icon-gui-prod-ai-transport-outline.tsx @@ -9,6 +9,6 @@ const IconGuiProdAiTransportOutline = ({ title, titleId, ...props -}: SVGProps & SVGRProps, ref: Ref) => {title ? {title} : null}; +}: SVGProps & SVGRProps, ref: Ref) => {title ? {title} : null}; const ForwardRef = forwardRef(IconGuiProdAiTransportOutline); -export default ForwardRef; \ No newline at end of file +export default ForwardRef; diff --git a/src/components/Icon/glyphs/icon-gui-prod-ai-transport-solid.tsx b/src/components/Icon/glyphs/icon-gui-prod-ai-transport-solid.tsx index 72e5f2a14f..7a013377df 100644 --- a/src/components/Icon/glyphs/icon-gui-prod-ai-transport-solid.tsx +++ b/src/components/Icon/glyphs/icon-gui-prod-ai-transport-solid.tsx @@ -9,6 +9,6 @@ const IconGuiProdAiTransportSolid = ({ title, titleId, ...props -}: SVGProps & SVGRProps, ref: Ref) => {title ? {title} : null}; +}: SVGProps & SVGRProps, ref: Ref) => {title ? {title} : null}; const ForwardRef = forwardRef(IconGuiProdAiTransportSolid); -export default ForwardRef; \ No newline at end of file +export default ForwardRef; diff --git a/src/components/Layout/MDXWrapper.tsx b/src/components/Layout/MDXWrapper.tsx index 55f1dee639..702256df7e 100644 --- a/src/components/Layout/MDXWrapper.tsx +++ b/src/components/Layout/MDXWrapper.tsx @@ -199,7 +199,7 @@ const WrappedCodeSnippet: React.FC<{ activePage: ActivePage } & CodeSnippetProps lang={languageOverride || activePage.language} sdk={detectedSdkType || sdk} onChange={handleLanguageChange} - className={cn(props.className, 'mb-5')} + className={cn(props.className, 'my-6')} languageOrdering={ activePage.product && languageData[activePage.product] ? Object.keys(languageData[activePage.product]) : [] } diff --git a/src/components/Layout/mdx/Admonition.tsx b/src/components/Layout/mdx/Admonition.tsx index 7864666a0a..c832f22344 100644 --- a/src/components/Layout/mdx/Admonition.tsx +++ b/src/components/Layout/mdx/Admonition.tsx @@ -66,13 +66,13 @@ const Admonition: React.FC = ({ 'data-type': dataType = 'note', {...rest} data-type={dataType} className={cn( - 'border-l px-6 py-3.5 my-4 rounded-r-lg text-neutral-1000 dark:text-neutral-300', + 'border-l px-6 py-3 my-6 rounded-r-lg text-neutral-1000 dark:text-neutral-300', borderColor, backgroundColor, className, )} > -
+
{children}
@@ -84,14 +84,14 @@ const Admonition: React.FC = ({ 'data-type': dataType = 'note', {...rest} data-type={dataType} className={cn( - 'border-l px-6 py-4 my-4 rounded-r-lg text-neutral-1000 dark:text-neutral-300', + 'border-l px-6 py-4 my-6 rounded-r-lg text-neutral-1000 dark:text-neutral-300', borderColor, backgroundColor, className, )} > -
- {title}: +
+ {title}: {children}
diff --git a/src/components/Layout/mdx/PageHeader.tsx b/src/components/Layout/mdx/PageHeader.tsx index bd0151605a..c5dc534501 100644 --- a/src/components/Layout/mdx/PageHeader.tsx +++ b/src/components/Layout/mdx/PageHeader.tsx @@ -12,11 +12,7 @@ export const PageHeader: React.FC = ({ title, intro, subtitle }

{title}

{subtitle &&
{subtitle}
} - {intro && ( -

- {intro} -

- )} + {intro &&

{intro}

}
); }; diff --git a/src/components/Layout/mdx/Table.tsx b/src/components/Layout/mdx/Table.tsx index 8bda2d6abe..cd35631a65 100644 --- a/src/components/Layout/mdx/Table.tsx +++ b/src/components/Layout/mdx/Table.tsx @@ -8,8 +8,8 @@ export interface TableRootProps extends React.HTMLAttributes { const TableRoot: React.FC = ({ children, className, ...props }) => { return ( -
- {children}
+
+ {children}
); }; diff --git a/src/components/Markdown/MarkdownProvider.tsx b/src/components/Markdown/MarkdownProvider.tsx index 82b0a9e8ae..210bd18fca 100644 --- a/src/components/Markdown/MarkdownProvider.tsx +++ b/src/components/Markdown/MarkdownProvider.tsx @@ -7,37 +7,37 @@ import { CodeBlock } from './CodeBlock'; import { checkLinkIsInternal } from 'src/utilities/link-checks'; const H1: FC = ({ children, ...props }) => ( -

+

{children}

); const H2: FC = ({ children, ...props }) => ( -

+

{children}

); const H3: FC = ({ children, ...props }) => ( -

+

{children}

); const H4: FC = ({ children, ...props }) => ( -

+

{children}

); const H5: FC = ({ children, ...props }) => ( -
+
{children}
); const Paragraph: FC = ({ children, ...props }) => ( -

+

{children}

); @@ -113,7 +113,7 @@ const Ul: FC = ({ children, ...props }) => ( ); const Li: FC = ({ children, ...props }) => ( -
  • +
  • {children}
    • ); @@ -128,7 +128,7 @@ const Pre: FC = ({ children }) => { const lang = (children as React.ReactElement)?.props?.className?.replace('language-', ''); return ( -
    +
    {children}
    ); diff --git a/src/components/ui/CodeSnippet/CollapsibleCode.tsx b/src/components/ui/CodeSnippet/CollapsibleCode.tsx index d7e676378b..3bcda9f26e 100644 --- a/src/components/ui/CodeSnippet/CollapsibleCode.tsx +++ b/src/components/ui/CodeSnippet/CollapsibleCode.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; import cn from 'src/utilities/cn'; -import { ChevronDownIcon } from '@heroicons/react/24/outline'; +import { ChevronDownIcon } from '@heroicons/react/24/solid'; /** * Number of lines shown before a code block collapses behind a "Show more" toggle. @@ -83,14 +83,14 @@ const CollapsibleCode: React.FC = ({ onClick={() => setExpanded((value) => !value)} aria-expanded={expanded} className={cn( - 'pointer-events-auto inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium shadow-sm transition-colors', + 'pointer-events-auto inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-semibold shadow-sm transition-colors', 'border border-neutral-300 dark:border-neutral-1000', 'bg-neutral-000 dark:bg-neutral-1300 text-neutral-800 dark:text-neutral-400', 'hover:bg-neutral-100 dark:hover:bg-neutral-1100 focus-base', )} > {expanded ? 'Show less' : 'Show more'} - + ); @@ -116,7 +116,9 @@ const CollapsibleCode: React.FC = ({ {expanded && ( // Seamless extension of the code block (same background, no border) so the pill sits // below the content without introducing a divider that competes with rows beneath it. -
    {toggle}
    + // The pill sits in its own band (no negative margin) so it never overlaps the code + // content above, which would otherwise paint over — and clip — the pill's top edge. +
    {toggle}
    )} ); diff --git a/src/components/ui/CodeSnippet/PlainCodeView.tsx b/src/components/ui/CodeSnippet/PlainCodeView.tsx index 1a49ca4733..c3eea7732b 100644 --- a/src/components/ui/CodeSnippet/PlainCodeView.tsx +++ b/src/components/ui/CodeSnippet/PlainCodeView.tsx @@ -32,7 +32,7 @@ const PlainCodeView: React.FC = ({ content, className, langu ref={codeRef} > {icon && ( -
    +
    diff --git a/src/pages/docs/ai-transport/concepts/authentication.mdx b/src/pages/docs/ai-transport/concepts/authentication.mdx index c574549b6a..05503dad5a 100644 --- a/src/pages/docs/ai-transport/concepts/authentication.mdx +++ b/src/pages/docs/ai-transport/concepts/authentication.mdx @@ -63,11 +63,11 @@ Scope tokens to the smallest channel set the user needs. A user's token granting - With `authCallback` or `authUrl`, token refresh is automatic. The SDK fetches a new token before the current one expires. - To change a user's capabilities mid-session, issue a new token from your auth server and re-authenticate the client: - -```javascript -await realtimeClient.auth.authorize(); -``` - + + ```javascript + await realtimeClient.auth.authorize(); + ``` + - To immediately remove access, [revoke issued tokens](/docs/auth/revocation). - If your capability JSON is too large for a JWT claim, or must remain confidential, use native [Ably Tokens](/docs/auth/token/ably-tokens) instead. diff --git a/src/pages/docs/api/rest-api.mdx b/src/pages/docs/api/rest-api.mdx index 5f90d91be0..f071814896 100644 --- a/src/pages/docs/api/rest-api.mdx +++ b/src/pages/docs/api/rest-api.mdx @@ -149,20 +149,20 @@ When we make backwards-incompatible API changes to the API, we release new versi 1. Include the `X-Ably-Version` header. Example: - -```shell -curl https://main.realtime.ably.net/time \ - -H "X-Ably-Version: 1.2" -``` - + + ```shell + curl https://main.realtime.ably.net/time \ + -H "X-Ably-Version: 1.2" + ``` + 2. Include the version query string param `v`. Example: - -```shell -curl https://main.realtime.ably.net/time?v=1.2 -``` - + + ```shell + curl https://main.realtime.ably.net/time?v=1.2 + ``` + ### Pagination @@ -425,29 +425,29 @@ If your client makes a typo, or needs to update their original message then they 2. Add the edited state variable: - -```android -var edited: Message? by remember { mutableStateOf(null) } -``` - + + ```android + var edited: Message? by remember { mutableStateOf(null) } + ``` + 3. Update the message subscription to handle edited messages: - -```android -LaunchedEffect(room) { - room?.messages?.asFlow()?.collect { event -> - when (event.type) { - MessageEventType.Created -> messages.add(0, event.message) - MessageEventType.Updated -> messages.replaceFirstWith(event.message) { - it.serial == event.message.serial + + ```android + LaunchedEffect(room) { + room?.messages?.asFlow()?.collect { event -> + when (event.type) { + MessageEventType.Created -> messages.add(0, event.message) + MessageEventType.Updated -> messages.replaceFirstWith(event.message) { + it.serial == event.message.serial + } + else -> Unit } - else -> Unit } } -} -``` - + ``` + 4. Let's enhance the message display. To add an edit button to each message, we'll first need to locate the `Column` composable function within your layout inside the `items(messages.size, key = { messages[it].serial }) {` declarative loop. This is the component responsible for rendering @@ -493,36 +493,36 @@ Row( 5. Update the send button to handle both new messages and edits: - -```android -Button( - onClick = { - sending = true - if (textInput.text.isNotBlank()) { - scope.launch { - try { - edited?.let { - room?.messages?.update(it.copy(text = textInput.text)) - } ?: room?.messages?.send(textInput.text) - } catch (e: Exception) { - Log.e("APP", e.message, e) + + ```android + Button( + onClick = { + sending = true + if (textInput.text.isNotBlank()) { + scope.launch { + try { + edited?.let { + room?.messages?.update(it.copy(text = textInput.text)) + } ?: room?.messages?.send(textInput.text) + } catch (e: Exception) { + Log.e("APP", e.message, e) + } + edited = null + textInput = TextFieldValue("") + sending = false } - edited = null - textInput = TextFieldValue("") - sending = false } - } - }, - enabled = textInput.text.isNotBlank() && !sending -) { - Icon( - imageVector = if (edited != null) Icons.Filled.Edit - else Icons.AutoMirrored.Filled.Send, - contentDescription = if (edited != null) "Edit" else "Send" - ) -} -``` - + }, + enabled = textInput.text.isNotBlank() && !sending + ) { + Icon( + imageVector = if (edited != null) Icons.Filled.Edit + else Icons.AutoMirrored.Filled.Send, + contentDescription = if (edited != null) "Edit" else "Send" + ) + } + ``` + When you click on the edit button in the UI, you can modify the text and it will send the updated message contents to the room. diff --git a/src/pages/docs/chat/getting-started/javascript.mdx b/src/pages/docs/chat/getting-started/javascript.mdx index 189682de4b..391d419cfe 100644 --- a/src/pages/docs/chat/getting-started/javascript.mdx +++ b/src/pages/docs/chat/getting-started/javascript.mdx @@ -20,43 +20,43 @@ Using an AI coding assistant? [Teach it Ably](/docs/platform/ai-llms#agent-skill 3. Install any current LTS version of [Node.js](https://nodejs.org/en) and create a new project: - -```shell -npm init -y && npm pkg set type=module -``` - + + ```shell + npm init -y && npm pkg set type=module + ``` + 4. Install [@ably/chat](https://github.com/ably/ably-chat-js), [typescript](https://www.npmjs.com/package/typescript) to compile TypeScript files and make Ably Chat connections. - -```shell -npm install @ably/chat typescript -D @types/node -``` - + + ```shell + npm install @ably/chat typescript -D @types/node + ``` + 5. Create a default TypeScript configuration in your project - -```shell -npx tsc --init -``` - + + ```shell + npx tsc --init + ``` + 6. Update `tsconfig.json` to have `types` containing `node`: - -```json - "types": ["node"], -``` - + + ```json + "types": ["node"], + ``` + 7. Create a `.env` file in your project root and add your API key: - -```shell -echo "ABLY_API_KEY={{API_KEY}}" > .env -``` - + + ```shell + echo "ABLY_API_KEY={{API_KEY}}" > .env + ``` + ### (Optional) Install Ably CLI diff --git a/src/pages/docs/chat/getting-started/jvm.mdx b/src/pages/docs/chat/getting-started/jvm.mdx index d4c26af74d..8b0f20f85c 100644 --- a/src/pages/docs/chat/getting-started/jvm.mdx +++ b/src/pages/docs/chat/getting-started/jvm.mdx @@ -26,34 +26,34 @@ Create a new JVM project using Gradle or Maven. We'll use Gradle with Kotlin DSL 1. Create a new directory for your project: - -```shell -mkdir chat-jvm-example -cd chat-jvm-example -``` - + + ```shell + mkdir chat-jvm-example + cd chat-jvm-example + ``` + 2. Initialize a new Gradle project: - -```shell -gradle init --type kotlin-application -``` - + + ```shell + gradle init --type kotlin-application + ``` + 3. Update your `build.gradle.kts` file to include the Ably dependencies: - -```kotlin -implementation("com.ably.chat:chat:1.2.0") + + ```kotlin + implementation("com.ably.chat:chat:1.2.0") -// We will need Kotlin coroutines for this demo -implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.9.0") + // We will need Kotlin coroutines for this demo + implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.9.0") -// Required so that slf4j has an implementation to log to -implementation("org.slf4j:slf4j-nop:2.0.17") -``` - + // Required so that slf4j has an implementation to log to + implementation("org.slf4j:slf4j-nop:2.0.17") + ``` + ### (Optional) Install Ably CLI diff --git a/src/pages/docs/chat/getting-started/react-native.mdx b/src/pages/docs/chat/getting-started/react-native.mdx index 492e94dbcc..300e0f9648 100644 --- a/src/pages/docs/chat/getting-started/react-native.mdx +++ b/src/pages/docs/chat/getting-started/react-native.mdx @@ -26,28 +26,28 @@ Using an AI coding assistant? [Teach it Ably](/docs/platform/ai-llms#agent-skill 1. Create a new React Native project using the React Native CLI. For detailed instructions, refer to the [React Native documentation](https://reactnative.dev/docs/environment-setup). - -```shell -npx rn-new@latest my-chat-react-native-app --nativewind -cd my-chat-react-native-app -``` - + + ```shell + npx rn-new@latest my-chat-react-native-app --nativewind + cd my-chat-react-native-app + ``` + 2. Install the Ably Chat SDK and its dependencies: - -```shell -npm install @ably/chat ably -``` - + + ```shell + npm install @ably/chat ably + ``` + 3. For iOS, install the native dependencies: - -```shell -cd ios && pod install && cd .. -``` - + + ```shell + cd ios && pod install && cd .. + ``` + ### (Optional) Install Ably CLI diff --git a/src/pages/docs/chat/getting-started/react-ui-kit.mdx b/src/pages/docs/chat/getting-started/react-ui-kit.mdx index a924d1ac86..d0c6c26465 100644 --- a/src/pages/docs/chat/getting-started/react-ui-kit.mdx +++ b/src/pages/docs/chat/getting-started/react-ui-kit.mdx @@ -24,42 +24,42 @@ Using an AI coding assistant? [Teach it Ably](/docs/platform/ai-llms#agent-skill 1. Scaffold a **React + TypeScript** project with Vite: - - ```shell - npm create vite@latest my-chat-ui-app -- --template react-ts - cd my-chat-ui-app - ``` - + + ```shell + npm create vite@latest my-chat-ui-app -- --template react-ts + cd my-chat-ui-app + ``` + 2. (Optional) Add Tailwind CSS if you want utility classes elsewhere in your app. The UI Kit itself ships pre-compiled CSS, so Tailwind isn't required: - - ```shell - npm install -D tailwindcss postcss autoprefixer - npx tailwindcss init -p - ``` - + + ```shell + npm install -D tailwindcss postcss autoprefixer + npx tailwindcss init -p + ``` + Follow the Tailwind Vite guide to configure the generated files. 3. Install the Chat UI Kit and its peers: - - ```shell - npm install ably @ably/chat @ably/chat-react-ui-kit + + ```shell + npm install ably @ably/chat @ably/chat-react-ui-kit - # Ensure React 19 is present (Vite template already has these) - npm install react react-dom - ``` - + # Ensure React 19 is present (Vite template already has these) + npm install react react-dom + ``` + 4. Create a `.env` file in your project root and add your API key: - -```shell -echo "ABLY_API_KEY={{API_KEY}}" > .env -``` - + + ```shell + echo "ABLY_API_KEY={{API_KEY}}" > .env + ``` + That's all the setup you need—the kit's CSS is automatically bundled by Vite alongside the rest of your styles. diff --git a/src/pages/docs/chat/getting-started/react.mdx b/src/pages/docs/chat/getting-started/react.mdx index a02d5ce63e..f9b58832d5 100644 --- a/src/pages/docs/chat/getting-started/react.mdx +++ b/src/pages/docs/chat/getting-started/react.mdx @@ -26,35 +26,35 @@ Using an AI coding assistant? [Teach it Ably](/docs/platform/ai-llms#agent-skill 1. Create a new React + TypeScript project using Vite. For detailed instructions, refer to the [Vite documentation](https://vitejs.dev/guide/#scaffolding-your-first-vite-project). - -```shell -npm create vite@latest my-chat-react-app -- --template react-ts -``` - + + ```shell + npm create vite@latest my-chat-react-app -- --template react-ts + ``` + 2. Setup Tailwind CSS for styling the application. Ensure you import tailwind in your local `App.CSS` file and add it to your `vite.config.ts` file. For installation instructions, see the [Tailwind CSS documentation for Vite](https://tailwindcss.com/docs/guides/vite). - -```shell -npm install tailwindcss @tailwindcss/vite -``` - + + ```shell + npm install tailwindcss @tailwindcss/vite + ``` + 3. Install the Ably Chat SDK, this will also install the Ably Pub/Sub SDK as a dependency: - -```shell -npm install @ably/chat ably -``` - + + ```shell + npm install @ably/chat ably + ``` + 4. Create a `.env` file in your project root and add your API key: - -```shell -echo "VITE_ABLY_API_KEY={{API_KEY}}" > .env -``` - + + ```shell + echo "VITE_ABLY_API_KEY={{API_KEY}}" > .env + ``` + ### (Optional) Install Ably CLI diff --git a/src/pages/docs/chat/react-ui-kit/components.mdx b/src/pages/docs/chat/react-ui-kit/components.mdx index 7d74520d5c..7bb684eb58 100644 --- a/src/pages/docs/chat/react-ui-kit/components.mdx +++ b/src/pages/docs/chat/react-ui-kit/components.mdx @@ -75,26 +75,26 @@ Currently, there are two main ways to customize the appearance of components: 1. **Using the `className` prop**: Most components accept a `className` prop that allows you to add custom CSS classes: - -```react - -``` - + + ```react + + ``` + 2. **Component-specific style props**: Some components have specific props for styling, such as the `Avatar` component's `color` prop: - -```react - -``` - + + ```react + + ``` + ### Future Styling Improvements diff --git a/src/pages/docs/getting-started/dotnet.mdx b/src/pages/docs/getting-started/dotnet.mdx index 56a5a3cb78..c3fecb2578 100644 --- a/src/pages/docs/getting-started/dotnet.mdx +++ b/src/pages/docs/getting-started/dotnet.mdx @@ -22,20 +22,20 @@ Using an AI coding assistant? [Teach it Ably](/docs/platform/ai-llms#agent-skill 4. Install [.NET SDK](https://dotnet.microsoft.com/download) (version 6.0 or later). 5. Create a new C# console application: - -```shell -dotnet new console -n AblyGettingStarted -cd AblyGettingStarted -``` - + + ```shell + dotnet new console -n AblyGettingStarted + cd AblyGettingStarted + ``` + 6. Add the Ably [Pub/Sub .NET SDK](https://github.com/ably/ably-dotnet) package: - -```shell -dotnet add package ably.io -``` - + + ```shell + dotnet add package ably.io + ``` + ### (Optional) Install Ably CLI diff --git a/src/pages/docs/getting-started/flutter.mdx b/src/pages/docs/getting-started/flutter.mdx index 9d9ec20e13..c2e4f13a60 100644 --- a/src/pages/docs/getting-started/flutter.mdx +++ b/src/pages/docs/getting-started/flutter.mdx @@ -701,24 +701,24 @@ Test this feature with the following steps: 1. Publish several messages using your application UI, or send messages from another client using the Ably CLI: - -```shell -ably channels publish --count 5 my-first-channel "Message number {{.Count}}" -``` - + + ```shell + ably channels publish --count 5 my-first-channel "Message number {{.Count}}" + ``` + 2. Hot reload the app or restart it. This will cause the `Messages` widget to reinitialize and call the `_loadMessageHistory()` method. 3. You should see the last 5 messages displayed in your UI, ordered from oldest to newest at the bottom: - -```json -Message number 1 -Message number 2 -Message number 3 -Message number 4 -Message number 5 -``` - + + ```json + Message number 1 + Message number 2 + Message number 3 + Message number 4 + Message number 5 + ``` + ## Next steps diff --git a/src/pages/docs/getting-started/go.mdx b/src/pages/docs/getting-started/go.mdx index 99b1c8b28e..a41f2d115c 100644 --- a/src/pages/docs/getting-started/go.mdx +++ b/src/pages/docs/getting-started/go.mdx @@ -20,15 +20,15 @@ Using an AI coding assistant? [Teach it Ably](/docs/platform/ai-llms#agent-skill 4. Install [Go](https://go.dev/dl/) version 1.18 or greater. 5. Create a new project in your IDE and install the Ably Pub/Sub Go SDK: - -```shell -mkdir ably-go-quickstart -cd ably-go-quickstart -go mod init ably-go-quickstart - -go get -u github.com/ably/ably-go/ably -``` - + + ```shell + mkdir ably-go-quickstart + cd ably-go-quickstart + go mod init ably-go-quickstart + + go get -u github.com/ably/ably-go/ably + ``` + ### (Optional) Install Ably CLI diff --git a/src/pages/docs/getting-started/kotlin.mdx b/src/pages/docs/getting-started/kotlin.mdx index 32b0515a14..859c522bfd 100644 --- a/src/pages/docs/getting-started/kotlin.mdx +++ b/src/pages/docs/getting-started/kotlin.mdx @@ -21,11 +21,11 @@ Using an AI coding assistant? [Teach it Ably](/docs/platform/ai-llms#agent-skill 5. Install [Android Studio](https://developer.android.com/studio) or [IntelliJ IDEA](https://www.jetbrains.com/idea/download) 6. Create a new project in your IDE and install the Ably Pub/Sub Kotlin SDK. If using Gradle: - -```kotlin -implementation("io.ably:ably-java:") -``` - + + ```kotlin + implementation("io.ably:ably-java:") + ``` + ### (Optional) Install Ably CLI diff --git a/src/pages/docs/getting-started/laravel.mdx b/src/pages/docs/getting-started/laravel.mdx index f7e56ddc27..26b2862de4 100644 --- a/src/pages/docs/getting-started/laravel.mdx +++ b/src/pages/docs/getting-started/laravel.mdx @@ -22,29 +22,29 @@ Using an AI coding assistant? [Teach it Ably](/docs/platform/ai-llms#agent-skill 4. Install [PHP](https://www.php.net/downloads.php) version 8.2 or greater and [Laravel](https://laravel.com/docs) version 12.0 or greater. 5. Create a new Laravel project and install the Ably Broadcaster for Laravel: - -```shell -# Create a new Laravel project -composer create-project laravel/laravel ably-laravel-quickstart -cd ably-laravel-quickstart + + ```shell + # Create a new Laravel project + composer create-project laravel/laravel ably-laravel-quickstart + cd ably-laravel-quickstart -# Install the Ably Broadcaster for Laravel -composer require ably/laravel-broadcaster + # Install the Ably Broadcaster for Laravel + composer require ably/laravel-broadcaster -# Setup API route -php artisan install:api -``` - + # Setup API route + php artisan install:api + ``` + 6. Now run the two dev servers (PHP and Vite) in separate Terminal windows: - -```shell -php artisan serve # http://localhost:8000 -npm install -npm run dev -``` - + + ```shell + php artisan serve # http://localhost:8000 + npm install + npm run dev + ``` + ### (Optional) Install Ably CLI diff --git a/src/pages/docs/getting-started/node.mdx b/src/pages/docs/getting-started/node.mdx index 5280642e3c..b6048d7f2e 100644 --- a/src/pages/docs/getting-started/node.mdx +++ b/src/pages/docs/getting-started/node.mdx @@ -24,21 +24,21 @@ Using an AI coding assistant? [Teach it Ably](/docs/platform/ai-llms#agent-skill 5. Create a new project in your IDE and install the Ably Pub/Sub JavaScript SDK: - -```shell -npm init -y && npm pkg set type=module + + ```shell + npm init -y && npm pkg set type=module -npm install ably -``` - + npm install ably + ``` + 6. Create a `.env` file in your project root and add your API key: - -```shell -echo "ABLY_API_KEY={{API_KEY}}" > .env -``` - + + ```shell + echo "ABLY_API_KEY={{API_KEY}}" > .env + ``` + ### (Optional) Install Ably CLI diff --git a/src/pages/docs/getting-started/php.mdx b/src/pages/docs/getting-started/php.mdx index 576a4a6bbc..241dd5ca70 100644 --- a/src/pages/docs/getting-started/php.mdx +++ b/src/pages/docs/getting-started/php.mdx @@ -26,19 +26,19 @@ Using an AI coding assistant? [Teach it Ably](/docs/platform/ai-llms#agent-skill 4. Install [PHP](https://www.php.net/downloads.php) version 7.2 or greater. 5. Create a new project and install the Ably Pub/Sub PHP SDK: - -```shell -# Create a new directory for your project -mkdir ably-php-quickstart -cd ably-php-quickstart - -# Initialize Composer (if you don't have a composer.json yet) -composer init - -# Install the Ably PHP SDK -composer require ably/ably-php -``` - + + ```shell + # Create a new directory for your project + mkdir ably-php-quickstart + cd ably-php-quickstart + + # Initialize Composer (if you don't have a composer.json yet) + composer init + + # Install the Ably PHP SDK + composer require ably/ably-php + ``` + ### (Optional) Install Ably CLI diff --git a/src/pages/docs/getting-started/python.mdx b/src/pages/docs/getting-started/python.mdx index 724c4f426d..965d5c36bb 100644 --- a/src/pages/docs/getting-started/python.mdx +++ b/src/pages/docs/getting-started/python.mdx @@ -22,20 +22,20 @@ Using an AI coding assistant? [Teach it Ably](/docs/platform/ai-llms#agent-skill 4. Install [Python](https://www.python.org/downloads/) version 3.8 or greater. 5. Create a new project and install the Ably Pub/Sub Python SDK: - -```shell -# Create a new directory for your project -mkdir ably-python-quickstart -cd ably-python-quickstart - -# Create a virtual environment (recommended) -python -m venv venv -source venv/bin/activate # On Windows use: venv\Scripts\activate - -# Install the Ably SDK -pip install ably -``` - + + ```shell + # Create a new directory for your project + mkdir ably-python-quickstart + cd ably-python-quickstart + + # Create a virtual environment (recommended) + python -m venv venv + source venv/bin/activate # On Windows use: venv\Scripts\activate + + # Install the Ably SDK + pip install ably + ``` + ### (Optional) Install Ably CLI diff --git a/src/pages/docs/getting-started/react-native.mdx b/src/pages/docs/getting-started/react-native.mdx index 6f16785f9e..a11cd22803 100644 --- a/src/pages/docs/getting-started/react-native.mdx +++ b/src/pages/docs/getting-started/react-native.mdx @@ -655,24 +655,24 @@ Test this feature with the following steps: 1. Publish several messages using your application UI, or send messages from another client using the Ably CLI: - -```shell -ably channels publish --count 5 my-first-channel "Message number {{.Count}}" -``` - + + ```shell + ably channels publish --count 5 my-first-channel "Message number {{.Count}}" + ``` + 2. Refresh the app. This will cause the `Messages` component to mount again and call the `channel.history()` method. 3. You should see the last 5 messages displayed in your UI, ordered from oldest to newest at the bottom: - -```json -Message number 1 -Message number 2 -Message number 3 -Message number 4 -Message number 5 -``` - + + ```json + Message number 1 + Message number 2 + Message number 3 + Message number 4 + Message number 5 + ``` + ## Next steps diff --git a/src/pages/docs/getting-started/react.mdx b/src/pages/docs/getting-started/react.mdx index bf5e9e7b48..9c99323a9c 100644 --- a/src/pages/docs/getting-started/react.mdx +++ b/src/pages/docs/getting-started/react.mdx @@ -600,24 +600,24 @@ Test this feature with the following steps: 1. Publish several messages using your application UI, or send messages from another client using the Ably CLI: - -```shell -ably channels publish --count 5 my-first-channel "Message number {{.Count}}" -``` - + + ```shell + ably channels publish --count 5 my-first-channel "Message number {{.Count}}" + ``` + 2. Refresh the page. This will cause the `Messages` component to mount again and call the `channel.history()` method. 3. You should see the last 5 messages displayed in your UI, ordered from oldest to newest at the bottom: - -```json -Message number 1 -Message number 2 -Message number 3 -Message number 4 -Message number 5 -``` - + + ```json + Message number 1 + Message number 2 + Message number 3 + Message number 4 + Message number 5 + ``` + ## Next steps diff --git a/src/pages/docs/platform/integrations/streaming/kinesis.mdx b/src/pages/docs/platform/integrations/streaming/kinesis.mdx index c8d9fb15b9..8f8b9f5bcc 100644 --- a/src/pages/docs/platform/integrations/streaming/kinesis.mdx +++ b/src/pages/docs/platform/integrations/streaming/kinesis.mdx @@ -88,37 +88,37 @@ The following steps show you how to create a policy for AWS Kinesis. 2. Click **Create Policy**. 3. Click the JSON tab and enter the following JSON to configure the policy: - -```json -{ - "Version": "2012-10-17", - "Statement": [ + + ```json { - "Sid": "ReadWriteToSingleStream", - "Effect": "Allow", - "Action": [ - "kinesis:DescribeLimits", - "kinesis:DescribeStream", - "kinesis:GetShardIterator", - "kinesis:GetRecords", - "kinesis:ListTagsForStream", - "kinesis:MergeShards", - "kinesis:PutRecord", - "kinesis:PutRecords", - "kinesis:UpdateShardCount" - ], - "Resource": [ - "arn:aws:kinesis:::stream/" + "Version": "2012-10-17", + "Statement": [ + { + "Sid": "ReadWriteToSingleStream", + "Effect": "Allow", + "Action": [ + "kinesis:DescribeLimits", + "kinesis:DescribeStream", + "kinesis:GetShardIterator", + "kinesis:GetRecords", + "kinesis:ListTagsForStream", + "kinesis:MergeShards", + "kinesis:PutRecord", + "kinesis:PutRecords", + "kinesis:UpdateShardCount" + ], + "Resource": [ + "arn:aws:kinesis:::stream/" + ] + } ] } - ] -} -``` - + ``` + - + 4. Click **Next: Tags**. You don't need to add any tags. 5. Click **Next: Review**. diff --git a/src/pages/docs/platform/integrations/streaming/sqs.mdx b/src/pages/docs/platform/integrations/streaming/sqs.mdx index a4bb6ac360..bdb7b42cea 100644 --- a/src/pages/docs/platform/integrations/streaming/sqs.mdx +++ b/src/pages/docs/platform/integrations/streaming/sqs.mdx @@ -87,39 +87,39 @@ The following steps show you how to create a policy for AWS SQS. 2. Click **Create Policy**. 3. Click the JSON tab and enter the following JSON to configure the policy: - -```json -{ - "Version": "2012-10-17", - "Statement": [ + + ```json { - "Sid": "AllowReadWriteSQS", - "Effect": "Allow", - "Action": [ - "sqs:DeleteMessage", - "sqs:TagQueue", - "sqs:GetQueueUrl", - "sqs:ChangeMessageVisibility", - "sqs:DeleteMessageBatch", - "sqs:SendMessageBatch", - "sqs:UntagQueue", - "sqs:ReceiveMessage", - "sqs:SendMessage", - "sqs:ListQueueTags", - "sqs:ChangeMessageVisibilityBatch" - ], - "Resource": [ - "arn:aws:sqs:::" + "Version": "2012-10-17", + "Statement": [ + { + "Sid": "AllowReadWriteSQS", + "Effect": "Allow", + "Action": [ + "sqs:DeleteMessage", + "sqs:TagQueue", + "sqs:GetQueueUrl", + "sqs:ChangeMessageVisibility", + "sqs:DeleteMessageBatch", + "sqs:SendMessageBatch", + "sqs:UntagQueue", + "sqs:ReceiveMessage", + "sqs:SendMessage", + "sqs:ListQueueTags", + "sqs:ChangeMessageVisibilityBatch" + ], + "Resource": [ + "arn:aws:sqs:::" + ] + } ] } - ] -} -``` - + ``` + - + 4. Click **Next: Tags**. You don't need to add any tags. 5. Click **Next: Review**. diff --git a/src/pages/docs/platform/integrations/webhooks/lambda.mdx b/src/pages/docs/platform/integrations/webhooks/lambda.mdx index 3bceba8c80..7cd196c2c1 100644 --- a/src/pages/docs/platform/integrations/webhooks/lambda.mdx +++ b/src/pages/docs/platform/integrations/webhooks/lambda.mdx @@ -87,30 +87,30 @@ The following steps show you how to create a policy for an AWS Lambda. 2. Click **Create Policy**. 3. Click the JSON tab and enter the following JSON to configure the policy: - -```json -{ - "Version": "2012-10-17", - "Statement": [ + + ```json { - "Sid": "AllowInvokeLambdaFunction", - "Effect": "Allow", - "Action": [ - "lambda:InvokeAsync", - "lambda:InvokeFunction" - ], - "Resource": [ - "arn:aws:lambda:::function:" + "Version": "2012-10-17", + "Statement": [ + { + "Sid": "AllowInvokeLambdaFunction", + "Effect": "Allow", + "Action": [ + "lambda:InvokeAsync", + "lambda:InvokeFunction" + ], + "Resource": [ + "arn:aws:lambda:::function:" + ] + } ] } - ] -} -``` - + ``` + - + 4. Click **Next: Tags**. You don't need to add any tags. 5. Click **Next: Review**. diff --git a/src/pages/docs/push/configure/device.mdx b/src/pages/docs/push/configure/device.mdx index 199e06c03c..24b57597a8 100644 --- a/src/pages/docs/push/configure/device.mdx +++ b/src/pages/docs/push/configure/device.mdx @@ -564,57 +564,57 @@ To manually register a device using FCM with iOS: 2. Create a `DeviceDetails` object with the appropriate platform and transport configuration. 3. Register the device using the Push Admin API. - -```swift -// Get FCM token from Firebase iOS SDK first -// Then create DeviceDetails object manually - -let deviceDetails = ARTDeviceDetails(id: ULID().ulidString) -deviceDetails.secret = generateSecret() -deviceDetails.platform = "ios" // or "android" -deviceDetails.formFactor = "phone" // or "tablet", "tv", "watch", "desktop", "car" -deviceDetails.clientId = "clientA" -deviceDetails.metadata = NSMutableDictionary() -deviceDetails.push.recipient = [ - "transportType": "fcm", // Use FCM instead of APNs - "registrationToken": "your-fcm-registration-token" -] - -// Register the device using Push Admin API -rest.push.admin.deviceRegistrations.save(deviceDetails) { error in - if let error = error { - print("Registration failed: \(error)") - } else { - print("Device registered successfully") + + ```swift + // Get FCM token from Firebase iOS SDK first + // Then create DeviceDetails object manually + + let deviceDetails = ARTDeviceDetails(id: ULID().ulidString) + deviceDetails.secret = generateSecret() + deviceDetails.platform = "ios" // or "android" + deviceDetails.formFactor = "phone" // or "tablet", "tv", "watch", "desktop", "car" + deviceDetails.clientId = "clientA" + deviceDetails.metadata = NSMutableDictionary() + deviceDetails.push.recipient = [ + "transportType": "fcm", // Use FCM instead of APNs + "registrationToken": "your-fcm-registration-token" + ] + + // Register the device using Push Admin API + rest.push.admin.deviceRegistrations.save(deviceDetails) { error in + if let error = error { + print("Registration failed: \(error)") + } else { + print("Device registered successfully") + } } -} -``` + ``` + + ```objc + // Get FCM token from Firebase iOS SDK first + // Then create DeviceDetails object manually + + ARTDeviceDetails *deviceDetails = [[ARTDeviceDetails alloc] initWithId:[[NSUUID UUID] UUIDString]]; + deviceDetails.secret = [self generateSecret]; + deviceDetails.platform = @"ios"; // or @"android" + deviceDetails.formFactor = @"phone"; // or @"tablet", @"tv", @"watch", @"desktop", @"car" + deviceDetails.clientId = @"clientA"; + deviceDetails.metadata = [[NSMutableDictionary alloc] init]; + deviceDetails.push.recipient = @{ + @"transportType": @"fcm", // Use FCM instead of APNs + @"registrationToken": @"your-fcm-registration-token" + }; -```objc -// Get FCM token from Firebase iOS SDK first -// Then create DeviceDetails object manually - -ARTDeviceDetails *deviceDetails = [[ARTDeviceDetails alloc] initWithId:[[NSUUID UUID] UUIDString]]; -deviceDetails.secret = [self generateSecret]; -deviceDetails.platform = @"ios"; // or @"android" -deviceDetails.formFactor = @"phone"; // or @"tablet", @"tv", @"watch", @"desktop", @"car" -deviceDetails.clientId = @"clientA"; -deviceDetails.metadata = [[NSMutableDictionary alloc] init]; -deviceDetails.push.recipient = @{ - @"transportType": @"fcm", // Use FCM instead of APNs - @"registrationToken": @"your-fcm-registration-token" -}; - -// Register the device using Push Admin API -[rest.push.admin.deviceRegistrations save:deviceDetails callback:^(ARTErrorInfo *error) { - if (error) { - NSLog(@"Registration failed: %@", error); - } else { - NSLog(@"Device registered successfully"); - } -}]; -``` - + // Register the device using Push Admin API + [rest.push.admin.deviceRegistrations save:deviceDetails callback:^(ARTErrorInfo *error) { + if (error) { + NSLog(@"Registration failed: %@", error); + } else { + NSLog(@"Device registered successfully"); + } + }]; + ``` + This approach allows: - Using FCM for both Android and iOS devices for unified push messaging. diff --git a/src/pages/docs/push/publish.mdx b/src/pages/docs/push/publish.mdx index 795774e4c9..193424d8b9 100644 --- a/src/pages/docs/push/publish.mdx +++ b/src/pages/docs/push/publish.mdx @@ -1982,36 +1982,36 @@ Specify a `click_action` in the push notification payload and handle it with int 1. Add `click_action` to the notification payload when publishing via Ably: - -```json -{ - "push": { - "notification": { - "title": "New Message", - "body": "You have a new message", - "click_action": "OPEN_CHAT_SCREEN" - }, - "data": { - "chat_id": "12345", - "user_id": "67890" + + ```json + { + "push": { + "notification": { + "title": "New Message", + "body": "You have a new message", + "click_action": "OPEN_CHAT_SCREEN" + }, + "data": { + "chat_id": "12345", + "user_id": "67890" + } + } } - } -} -``` - + ``` + 2. Configure intent filters in `AndroidManifest.xml`: - -```xml - - - - - - -``` - + + ```xml + + + + + + + ``` + diff --git a/src/pages/docs/spaces/authentication.mdx b/src/pages/docs/spaces/authentication.mdx index b6d78d0911..c8eae3f5d3 100644 --- a/src/pages/docs/spaces/authentication.mdx +++ b/src/pages/docs/spaces/authentication.mdx @@ -255,12 +255,12 @@ You can scope capabilities to specific spaces or all spaces: - With `authCallback` or `authUrl`, token refresh is automatic and handled by the SDK. - To change a user's capabilities during an active session, issue a new token from your auth server and re-authenticate: - -```javascript -// Re-authenticate to pick up updated capabilities -await realtimeClient.auth.authorize(); -``` - + + ```javascript + // Re-authenticate to pick up updated capabilities + await realtimeClient.auth.authorize(); + ``` + - To immediately remove access, [revoke issued tokens](/docs/auth/revocation). - If your capability JSON is too large for JWT or must remain confidential, use native [Ably Tokens](/docs/auth/token/ably-tokens). diff --git a/src/styles/global.css b/src/styles/global.css index 8708ddf05b..85726e6dd8 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -126,3 +126,26 @@ * optimo.ch */ } + +/* MDX content images (gatsby-remark-images) join the object vertical rhythm + with 24px above and below. Kept outside @layer so it is not purged — the + wrapper class is injected at build time and never appears in scanned source. + The wrapper is display:block inside its paragraph, so the margins collapse + through to sit 24px from the surrounding content. */ +article .gatsby-resp-image-wrapper { + margin-top: var(--spacing-24); + margin-bottom: var(--spacing-24); +} + +/* A paragraph immediately followed by a heading drops its bottom margin, so the + gap is exactly the heading's own top margin (h2 48px, h3 32px, h4 28px, h5 + 24px) rather than the paragraph's bottom margin stacking on top of it. + Scoped to `p.ui-text-p1` (not bare `p`) so the selector outranks Tailwind's + `.mb-3` utility — Tailwind v3 flattens its layers, so this is decided purely + on specificity, and a lone class beats any element-only selector. */ +article p.ui-text-p1:has(+ h2), +article p.ui-text-p1:has(+ h3), +article p.ui-text-p1:has(+ h4), +article p.ui-text-p1:has(+ h5) { + margin-bottom: 0; +} diff --git a/src/styles/ui/core/styles/properties.css b/src/styles/ui/core/styles/properties.css index b462ff9599..009e207b3b 100644 --- a/src/styles/ui/core/styles/properties.css +++ b/src/styles/ui/core/styles/properties.css @@ -172,16 +172,16 @@ --fs-title: 2.75rem; --fs-title-xs: 2.5rem; --fs-h1-xl: 2.5rem; - --fs-h1: 2.25rem; + --fs-h1: 2rem; /* 32px — docs content heading scale */ --fs-h1-xs: 2rem; --fs-h2-xl: 2.125rem; - --fs-h2: 2rem; + --fs-h2: 1.5rem; /* 24px */ --fs-h2-xs: 1.75rem; - --fs-h3: 1.5rem; - --fs-h4: 1.25rem; - --fs-h5: 1rem; + --fs-h3: 1.25rem; /* 20px */ + --fs-h4: 1.125rem; /* 18px */ + --fs-h5: 1rem; /* 16px */ --fs-p1: 1rem; --fs-p2: 0.938rem; diff --git a/src/styles/ui/core/styles/text.css b/src/styles/ui/core/styles/text.css index 278e76de2c..414e89d75d 100644 --- a/src/styles/ui/core/styles/text.css +++ b/src/styles/ui/core/styles/text.css @@ -7,48 +7,48 @@ .ui-text-h1 { @apply font-sans font-bold text-cool-black; - @apply text-h1-xs xs:text-h1 xl:text-h1-xl; - @apply tracking-[-0.0125em] xs:tracking-[-0.015em]; + @apply text-h1; + @apply tracking-[-0.0064em]; } .ui-text-h2 { @apply font-sans font-bold text-cool-black; - @apply text-h2-xs xs:text-h2 xl:text-h2-xl; - @apply tracking-[-0.015em] xs:tracking-[-0.01em]; + @apply text-h2; + @apply tracking-[-0.0048em]; } .ui-text-h3 { @apply font-sans font-bold text-cool-black; @apply text-h3; - @apply tracking-[-0.005em]; + @apply tracking-[-0.015em]; } .ui-text-h4 { @apply font-sans font-bold text-cool-black; @apply text-h4; - @apply tracking-[-0.0015em]; + @apply tracking-[-0.0125em]; } .ui-text-h5 { @apply font-sans font-bold text-cool-black; @apply text-h5; - @apply tracking-[-0.0025em]; + @apply tracking-[-0.01em]; } .ui-text-p1 { - @apply font-sans font-medium text-charcoal-grey text-p1; + @apply font-sans font-medium text-charcoal-grey text-p1 tracking-[-0.01em]; } .ui-text-p2 { - @apply font-sans font-medium text-charcoal-grey text-p2; + @apply font-sans font-medium text-charcoal-grey text-p2 tracking-[-0.0075em]; } .ui-text-p3 { - @apply font-sans font-medium text-charcoal-grey text-p3; + @apply font-sans font-medium text-charcoal-grey text-p3 tracking-[-0.005em]; } .ui-text-p4 { - @apply font-sans font-medium text-charcoal-grey text-p4; + @apply font-sans font-medium text-charcoal-grey text-p4 tracking-[-0.0025em]; } .ui-text-standfirst { @@ -68,6 +68,12 @@ @apply text-sub-header-xs xs:text-sub-header leading-normal; } + /* Decorative serif sub-head (docs page intro / standfirst). Figma: text-sub-head */ + .ui-text-sub-head { + @apply font-serif font-normal italic text-neutral-800 dark:text-neutral-500; + @apply text-sub-header leading-relaxed tracking-[-0.0125em]; + } + .ui-text-overline1 { @apply font-mono font-medium text-active-orange uppercase; @apply text-overline1 leading-normal; @@ -123,15 +129,15 @@ } .ui-text-code { - @apply font-mono font-normal text-code; + @apply font-mono font-medium text-code; } .ui-text-code2 { - @apply font-mono font-normal text-code2; + @apply font-mono font-medium text-code2; } .ui-text-code-inline { - @apply inline-flex font-mono px-[0.1875rem] py-1 text-code text-neutral-1000 font-medium bg-neutral-200 border border-neutral-400 rounded-md; + @apply inline-flex items-center font-mono px-1 py-0.5 text-code text-neutral-1000 font-medium bg-neutral-100 border-[0.5px] border-neutral-500 rounded-[4px]; } .ui-theme-dark :where(.ui-text-code-inline) { @@ -152,7 +158,15 @@ .ui-ordered-list li, .ui-unordered-list li { - @apply mb-2; + @apply mb-1; + } + + /* Loose lists (items containing code blocks) wrap their text in the global +

    , which carries mb-3 (12px). Normalise it to the 4px list-item rhythm so + loose lists match tight lists, whose text sits directly in the

  • . */ + .ui-ordered-list li > p, + .ui-unordered-list li > p { + margin-bottom: 0.25rem; } .ui-unordered-list li > *:last-of-type:not(ul):not(ol), diff --git a/src/templates/examples.tsx b/src/templates/examples.tsx index bcb678c929..4422cce883 100644 --- a/src/templates/examples.tsx +++ b/src/templates/examples.tsx @@ -1,8 +1,9 @@ -import React, { PropsWithChildren, useContext, useEffect, useRef } from 'react'; +import React, { PropsWithChildren, isValidElement, useContext, useEffect, useRef } from 'react'; import Markdown from 'markdown-to-jsx/react'; import { Link } from 'gatsby'; import LinkButton from 'src/components/ui/LinkButton'; import Icon from 'src/components/Icon'; +import PlainCodeView from 'src/components/ui/CodeSnippet/PlainCodeView'; import { UnstyledOpenInCodeSandboxButton } from '@codesandbox/sandpack-react'; import { Head } from '../components/Head'; @@ -13,38 +14,96 @@ import { getApiKey } from 'src/utilities/update-ably-connection-keys'; import ExamplesRenderer from 'src/components/Examples/ExamplesRenderer'; import { LanguageKey } from 'src/data/languages/types'; import { ChevronLeftIcon } from '@heroicons/react/16/solid'; -import { CodeBracketIcon } from '@heroicons/react/24/outline'; +import { CodeBracketIcon, CommandLineIcon } from '@heroicons/react/24/outline'; const MarkdownOverrides = { + // Headings map to the docs type scale + vertical rhythm. Elements are shifted down + // one level (h1->h2, h2->h3, ...) because the example name is already the page

    . h1: { - component: ({ children }: PropsWithChildren) =>

    {children}

    , + component: ({ children }: PropsWithChildren) =>

    {children}

    , }, h2: { - component: ({ children }: PropsWithChildren) =>

    {children}

    , + component: ({ children }: PropsWithChildren) =>

    {children}

    , }, h3: { - component: ({ children }: PropsWithChildren) =>

    {children}

    , + component: ({ children }: PropsWithChildren) =>

    {children}

    , + }, + h4: { + component: ({ children }: PropsWithChildren) =>
    {children}
    , }, p: { - component: ({ children }: PropsWithChildren) =>

    {children}

    , + component: ({ children }: PropsWithChildren) =>

    {children}

    , }, ul: { - component: ({ children }: PropsWithChildren) =>
      {children}
    , + component: ({ children }: PropsWithChildren) =>
      {children}
    , }, ol: { - component: ({ children }: PropsWithChildren) => ( -
      {children}
    + // markdown-to-jsx splits the list into one
      per step when code fences sit + // between items (README fences are indented 4 spaces). It sets `start` on each
        to keep numbering continuous, so forward it. + component: ({ children, ...props }: PropsWithChildren<{ start?: number }>) => ( +
          + {children} +
        ), }, + li: { + component: ({ children }: PropsWithChildren) =>
      1. {children}
        2. , + }, pre: { + // Shell/terminal commands render through the shared terminal component (PlainCodeView), + // matching the docs. Anything else falls back to a plain styled 
        .
+    component: ({ children }: PropsWithChildren) => {
+      const codeEl = children as React.ReactElement<{ className?: string; children?: React.ReactNode }>;
+      const language = isValidElement(codeEl)
+        ? (codeEl.props.className?.match(/lang(?:uage)?-([\w-]+)/)?.[1] ?? '')
+        : '';
+      const kids = isValidElement(codeEl) ? codeEl.props.children : undefined;
+      const content =
+        typeof kids === 'string'
+          ? kids
+          : Array.isArray(kids)
+            ? kids.filter((c): c is string => typeof c === 'string').join('')
+            : '';
+      const isTerminal = ['sh', 'bash', 'zsh', 'shell', 'text'].includes(language);
+
+      // `!mb-6` is important because when a code block is the last child of a list
+      // item, `.ui-ordered-list li > *:last-of-type` (specificity 0,2,3) zeroes its
+      // bottom margin. We want code to keep a full 24px top and bottom like elsewhere.
+      if (content && isTerminal) {
+        return (
+          }
+            className="mt-6 !mb-6"
+          />
+        );
+      }
+
+      return (
+        
        +          {children}
+        
        
+      );
+    },
+  },
+  code: {
+    // Fenced (block) code carries a language className and inherits the 
         styling;
+    // inline code (no className) gets the docs inline-code chip.
+    component: ({ children, className }: PropsWithChildren<{ className?: string }>) =>
+      className ? (
+        {children}
+      ) : (
+        {children}
+      ),
+  },
+  blockquote: {
     component: ({ children }: PropsWithChildren) => (
-      
        -        {children}
-      
        
+      
        {children}
        
     ),
   },
-  code: {
-    component: ({ children }: PropsWithChildren) => {children},
+  hr: {
+    component: () => 
        ,
   },
   a: {
     component: ({ children, href }: PropsWithChildren<{ href: string }>) => (
@@ -55,7 +114,7 @@ const MarkdownOverrides = {
   },
   table: {
     component: ({ children }: PropsWithChildren) => (
-      
        
+      
        
         {children}
        
       
        
     ),
@@ -148,8 +207,8 @@ const Examples = ({ pageContext }: { pageContext: { example: ExampleWithContent
           
           All examples
         
-        
        {example.name}
        
-        
        {example.description}
        
+        
        {example.name}
        
+        
        {example.description}
        
       
        
       {apiKey ? (
         
           
        
             {content ? (
-              
        
+              
        
                 
                   {content}
                 
-              
        
+              
             ) : null}