Merge branch 'discord:main' into main

Author: FabienBounoir

.github/workflows/docs.yaml

@@ -15,10 +15,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Install Node v20
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: 20
           cache: npm

.github/workflows/test.yaml

@@ -14,8 +14,8 @@ jobs:
     name: Lint
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
         with:
           node-version: 20
           cache: npm
@@ -26,8 +26,8 @@ jobs:
     name: Check Links
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
         with:
           node-version: 20
           cache: npm
@@ -37,8 +37,8 @@ jobs:
     name: Validate mdx
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
         with:
           node-version: 20
           cache: npm

CONTRIBUTING.md

@@ -48,7 +48,7 @@ Something that requires warning here
 
 Currently the following types are available: `info`, `warn`, `danger` and `preview`
 
-![Available alert types](static/images/alerts.png)
+![Available alert types](static/images/alerts.webp)
 
 ### MDX Components
 
@@ -68,7 +68,7 @@ Available options for `icon`:
 
 ###### Example
 
-![Collapsible MDX Component with the list icon](static/images/mdx-collapsible.png)
+![Collapsible MDX Component with the list icon](static/images/mdx-collapsible.webp)
 
 ```markdown
 <Collapsible title="Title" description="Description text" icon="list">
@@ -82,10 +82,10 @@ Buttons are simply... clickable buttons. They take `href` and `color` as argumen
 
 ###### Example
 
-![Button MDX Component](static/images/mdx-button.png)
+![Button MDX Component](static/images/mdx-button.webp)
 
 ```markdown
-<LinkButton to="https://discord.com/developers/docs/getting-started" color="brand">click the button!</LinkButton>
+<LinkButton to="https://discord.com/developers/docs/getting-started" color="brand" text="click the button!" />
 ```
 
 #### Cards
@@ -94,7 +94,7 @@ Cards let you display links in a card format. They accept two arguments, `title`
 
 ###### Example
 
-![Card MDX Component](static/images/mdx-card.png)
+![Card MDX Component](static/images/mdx-card.webp)
 
 ```markdown
 <Card title="Card Title" link="https://discord.com/developers/docs/getting-started">

docs/activities/building-an-activity.mdx

@@ -16,7 +16,7 @@ It assumes an understanding of [JavaScript](https://developer.mozilla.org/en-US/
 
 <Collapsible title="What we'll be building" icon="view">
 
-![Building Your First Activity Tutorial](images/activities/tutorial-hero.png)
+![Building Your First Activity Tutorial](images/activities/tutorial-hero.webp)
 
 </Collapsible>
 
@@ -88,7 +88,7 @@ npm install
 npm run dev
 ```
 
-If you visit http://localhost:3000/ you should see a vanilla JS frontend template running with [Vite](https://vitejs.dev/).
+If you visit http://localhost:5173/ you should see a vanilla JS frontend template running with [Vite](https://vitejs.dev/).
 
 While it's not much at the moment, in the following steps we'll connect it to the backend services, make it runnable in Discord, and power it up by populating it with data we pull from Discord APIs.
 
@@ -107,7 +107,7 @@ By the end of Step 1, you should have:
 
 With our project set up, let's create our app and configure the Activity. Create a new app in the developer portal if you don't have one already:
 
-<LinkButton to="https://discord.com/developers/applications?new_application=true" color="brand">Create App</LinkButton>
+<LinkButton to="https://discord.com/developers/applications?new_application=true" color="brand" text="Create App" />
 
 Enter a name for your app, select a development team, then press **Create**.
 
@@ -145,7 +145,7 @@ You can learn more about the OAuth flow and redirect URIs in the [OAuth2 documen
 
 Click on **OAuth2** on the sidebar in your app's settings. Under **Redirects**, enter `https://127.0.0.1` as a placeholder value then click **Save Changes**.
 
-![Redirect URI in Activity Settings](images/activities/oauth2-redirect.png)
+![Redirect URI in Activity Settings](images/activities/oauth2-redirect.webp)
 
 ### Fetch Your OAuth2 Credentials
 
@@ -278,7 +278,7 @@ Your app should start and you should see output similar to the following:
 ```
 VITE v5.0.12  ready in 100 ms
 
-➜  Local:   http://localhost:3000/
+➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h + enter to show help
 ```
@@ -289,10 +289,10 @@ We'll use the Local URL as our publicly-accessible URL in the next step.
 
 Next, we'll need to set up the public endpoint that serves the Activity's frontend. To do that, we'll create a tunnel with a reverse proxy. While we'll be using [`cloudflared`](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/) in this guide, you can use [ngrok](https://ngrok.com/docs) or another reverse proxy solution if you prefer.
 
-While your app is still running, open another terminal window and start a network tunnel that listens to the port from the last step (in this case, port `3000`):
+While your app is still running, open another terminal window and start a network tunnel that listens to the port from the last step (in this case, port `5173`):
 
 ```
-cloudflared tunnel --url http://localhost:3000
+cloudflared tunnel --url http://localhost:5173
 ```
 
 When you run `cloudflared`, the tunnel will generate a public URL and you'll see output similar to the following:
@@ -310,7 +310,7 @@ Because Activities are in a sandbox enviornment and go through the Discord proxy
 
 Back in your app's settings, click on the **URL Mappings** page under **Activities** on the left-hand sidebar. Enter the URL you generated from `cloudflared` in the previous step.
 
-![Configuring your URL Mapping](images/activities/url-mapping-tutorial.png)
+![Configuring your URL Mapping](images/activities/url-mapping-tutorial.webp)
 
 | PREFIX | TARGET                                  |
 |--------|-----------------------------------------|
@@ -324,7 +324,7 @@ Next, we'll need to enable Activities for your app. On the left hand sidebar und
 
 Find the first checkbox, labeled `Enable Activities`. Turn it on 🎉
 
-![Enabling Activities in Settings](images/activities/enable-activities.png)
+![Enabling Activities in Settings](images/activities/enable-activities.webp)
 
 #### Default Entry Point Command
 
@@ -341,7 +341,7 @@ Navigate to your Discord test server and, in any voice and or text channel, open
 
 Clicking on your app will launch your locally running app from inside Discord!
 
-![Running your activity](images/activities/start-activity.png)
+![Running your activity](images/activities/start-activity.webp)
 
 :::info
 **Customizing your Activity**
@@ -457,10 +457,6 @@ We can now run our server and client-side apps in separate terminal windows. You
 
 Before we call your backend activity server, we need to be aware of the Discord proxy and understand how to avoid any Content Security Policy (CSP) issues.
 
-:::info
-For this tutorial, we are going to prefix the API call to `/api/token/` with `/.proxy`, but you can also use the SDK's `patchUrlMappings()` method to automatically prefix calls to your external resources for the proxy.
-:::
-
 Learn more about this topic in the guides for [Constructing a Full URL](/docs/activities/development-guides/networking#construct-a-full-url) and [Using External Resources](/docs/activities/development-guides/networking#using-external-resources).
 
 ### Calling your backend server from your client
@@ -513,10 +509,7 @@ async function setupDiscordSdk() {
   });
 
   // Retrieve an access_token from your activity's server
-  // Note: We need to prefix our backend `/api/token` route with `/.proxy` to stay compliant with the CSP.
-  // Read more about constructing a full URL and using external resources at
-  // https://discord.com/developers/docs/activities/development-guides/networking#construct-a-full-url
-  const response = await fetch("/.proxy/api/token", {
+  const response = await fetch("/api/token", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -548,7 +541,7 @@ document.querySelector('#app').innerHTML = `
 
 Now if we relaunch our app, we'll be prompted to authorize with Discord using the `identify`, `guilds`, and `applications.commands` scopes.
 
-![Prompt to authorize Activity](images/activities/tutorial-auth.png)
+![Prompt to authorize Activity](images/activities/tutorial-auth.webp)
 
 :::warn
 **Safe storage of tokens**
@@ -613,7 +606,7 @@ setupDiscordSdk().then(() => {
 
 If you close and rejoin the Activity, you should now see the name of the current channel.
 
-![Discord Activities](images/activities/tutorial-channel-name.png)
+![Discord Activities](images/activities/tutorial-channel-name.webp)
 
 <Collapsible title="Step 6 Checkpoint" icon="list" open>
 
@@ -687,7 +680,7 @@ setupDiscordSdk().then(() => {
 
 If we relaunch our Activity, we will see the current server's avatar render in our Activity.
 
-![Discord Activities](images/activities/tutorial-hero.png)
+![Discord Activities](images/activities/tutorial-hero.webp)
 
 <Collapsible title="Step 7 Checkpoint" icon="list" open>
 

docs/activities/design-patterns.mdx

@@ -49,7 +49,7 @@ When in an Activity with others, make the actions and presence of the others vis
     - If a user has customized their server nickname or avatar, use their server nickname or avatar in game.
     - Show when a user is speaking in the voice call, or whether they're active or inactive.
 
-![Speech bubbles in Bobble League](images/activities/bobble-bash.png)
+![Speech bubbles in Bobble League](images/activities/bobble-bash.webp)
 
 
 ### Respect user privacy
@@ -67,7 +67,7 @@ Make your app fast, easy to join, and maximize fun to launch a crowd favorite.
 - Surprise and delight is about caring about the small details of how a person experiences your work.
 - Put the right emotion in when they least expect it to deliver the magic.
 
-![Bobble League](images/activities/bobble-league.png)
+![Bobble League](images/activities/bobble-league.webp)
 
 ### Keep load times as low as possible
 - This allows for easier drop-in drop-out behavior for the large portion of mobile users on Discord.
@@ -80,7 +80,7 @@ Make your app fast, easy to join, and maximize fun to launch a crowd favorite.
 - Activities are frictionless to join and easy to discover, so you can expect that users will join mid-experience. Give those users something to do, even if it's just letting them spectate until they can join without being disruptive. In the same vein, users can leave without notice or become afk (away from keyboard). Handle these cases gracefully.
 - Create a case for users who have joined a call but have not yet started playing or engaging. Allow these users to "spectate" other users who are playing. This can also be helpful for Activities that have an ideal number in mind for play.
 
-![Support drop-in, drop-out behavior in your Activity](images/activities/eights.png)
+![Support drop-in, drop-out behavior in your Activity](images/activities/eights.webp)
 
 ### Make your app as available as possible
 
@@ -105,7 +105,7 @@ Discord is a social platform where users talk to each other. Sharing and invites
     - Share photos or GIFs that capture moments of fun and memorable, or something to brag about. Don't make things shareable just to feature the activity.
     - Sharing a high score alone may not be very engaging, but sharing a really good move made in a game, or a collaborative drawing that creates a memory is a conversation starter and may make others want to join in on the fun.
 
-![Shared Moment from Chess in the Park](images/activities/chess-victory.png)
+![Shared Moment from Chess in the Park](images/activities/chess-victory.webp)
 
 #### Activities in Text Channels
 - The Activity user interface, copy and user flows should not rely on people in voice to explain, organize, clarify, or instruct about how the activity works. 
@@ -141,8 +141,7 @@ Monetization in Activities will be available soon. Keep the following considerat
 
 ### Activities close when the last participant in the Activity leaves it
 - The next time the Activity is launched, even if it’s in the same DM or Voice Channel, it will be a different instance and could have different participants.
-- Note: This behavior will change in 2024, when we release persistent instances.
-        
+
 ### If a game is launched, what % of the time do users reach different phases of the game?
 - This includes launch → start, as there can be a large dropoff between these two (especially if you don’t support solo play or small group sizes).
 - This also includes various check points in the game, including what % of sessions that start a game reach the end of that game!
@@ -151,10 +150,10 @@ Monetization in Activities will be available soon. Keep the following considerat
 - If drop-off is really high at a certain point, see if you can figure out why or change flows.
 
 ### How many games are played in a session?
-- More games per session isn’t inherently better (you may have an Activity that is meant to be one long game), but is a good baseline to understand. 
+- More games per session isn’t inherently better (you may have an Activity that is meant to be one long game), but is a good baseline to understand.
 - If you expect to see a lot of repeat plays per session and don’t, it can be worth digging in to understand more.
 
-### How does the group size impact various key metrics? 
+### How does the group size impact various key metrics?
 - For example, are larger sessions more or less likely to reach the end of a game? To replay? Etc.
 - This can help you catch if your Activity has unexpected weak points in different group sizes — maybe the game drags on if there are too many people or isn’t compelling enough if there’s only two.
 - Not every Activity needs to be built for robust group sizes, but if you have the option to play with X # of players, it’s good practice to make sure that experience is enjoyable for all involved!

docs/activities/development-guides/growth-and-referrals.mdx

@@ -140,7 +140,7 @@ Deleting is irreversible and immediate. Ensure that your link isn't in active us
 
 #### User Experience
 
-![custom-link-embed](images/activities/custom-link-embed.png)
+![custom-link-embed](images/activities/custom-link-embed.webp)
 
 Users will see an embed with your information displayed. Clicking "Play" opens the activity and passes through the `custom_id` you've set. A `referrer_id` will be present for links shared on Discord.
 

docs/activities/development-guides/layout.mdx

@@ -34,7 +34,7 @@ discordSdk.commands.setOrientationLockState({
 
 It's also possible to configure an application with a default orientation lock state via the Developer Portal. Using this method, the Discord app will apply the orientation lock when launching the application before the SDK has been initialized. This can create a smoother application launch flow where the application starts in the correct orientation rather than switching to the correct orientation after some delay after the application requests an orientation lock via the SDK. The Developer Portal supports setting a different default orientation lock states for phones versus tablets.
 
-![default-orientation-lock-state](images/activities/default_orientation_lock_state.png)
+![default-orientation-lock-state](images/activities/default_orientation_lock_state.webp)
 
 #### Subscribing to Screen Orientation Updates
 

docs/activities/development-guides/local-development.mdx

@@ -41,7 +41,7 @@ https://funky-jogging-bunny.trycloudflare.com
 
 In the Discord Developer Portal, update the Application URL mapping for `/` url to `funky-jogging-bunny.trycloudflare.com` to match your network tunnel address and save your changes.
 
-![Configuring your URL Mapping](images/activities/url-mapping-tutorial.png)
+![Configuring your URL Mapping](images/activities/url-mapping-tutorial.webp)
 
 :::warn
 If you do not own the URL that you are using to host the application (i.e. ngrok's free tier), someone else could claim that domain and host a malicious site in its place. Please be aware of these risks, and if you have to use a domain you do not own, be sure to reset your URL mapping when you are done using the tunnel.
@@ -59,7 +59,7 @@ The flow for setting up your production application is very similar:
 4. Follow the instructions for [Launching your Application from the Discord Client](/docs/activities/development-guides/local-development#launch-your-application-from-the-discord-client). Application URL Override should not be enabled.
 
 This application now uses the same configuration it will use once it is fully published ✨.
-![application-test-mode-prod](images/activities/application-test-mode-prod.gif)
+![application-test-mode-prod](images/activities/application-test-mode-prod.webp)
 
 
 ---
@@ -96,7 +96,7 @@ Because your application is "sandboxed", it will be unable to make network reque
 
 To add or modify your application's URL mappings, click on `Activities -> URL Mappings` and set the prefix and target values for each mapping as needed.
 
-![Configuring your URL Mapping](images/activities/url-mapping-tutorial.png)
+![Configuring your URL Mapping](images/activities/url-mapping-tutorial.webp)
 
 #### Prefix/Target formatting rules
 
@@ -108,10 +108,10 @@ To add or modify your application's URL mappings, click on `Activities -> URL Ma
 - Targets must point to a directory; setting a target to a file (e.g. `example.com/index.html`) is unsupported and may lead to unexpected behavior.
 - Because of how URL globbing works, if you have multiple prefix urls with the same initial path, you must place the shortest of the prefix paths last in order for each url mapping to be reachable. For example, if you have `/foo` and `/foo/bar`, you must place the url `/foo/bar` before `/foo` or else the mapping for `/foo/bar` will never be reached.
 
-| ✅ DO                                                        | ❌ DON'T                                                         |
-|-------------------------------------------------------------|-----------------------------------------------------------------|
-| Requests mapped correctly                                   | Requests to /foo/bar will incorrectly be sent to `foo.com`      |
-| ![url-mapping-do.png](images/activities/url-mapping-do.png) | ![url-mapping-dont.png](images/activities/url-mapping-dont.png) |
+| ✅ DO                                                         | ❌ DON'T                                                          |
+|--------------------------------------------------------------|------------------------------------------------------------------|
+| Requests mapped correctly                                    | Requests to /foo/bar will incorrectly be sent to `foo.com`       |
+| ![url-mapping-do.png](images/activities/url-mapping-do.webp) | ![url-mapping-dont.png](images/activities/url-mapping-dont.webp) |
 
 #### Exceptions
 
@@ -161,7 +161,7 @@ The first section of Debug Logs are not your application logs but Discord specif
 
 When you scroll down the page, your application logs should be visible.
 
-![debug-logs-filtering](images/activities/debug-logs-filtering.gif)
+![debug-logs-filtering](images/activities/debug-logs-filtering.webp)
 
 #### Sharing Application Logs from Mobile
 

docs/activities/development-guides/mobile.mdx

@@ -15,7 +15,7 @@ By default, your Activity will be launchable on web/desktop. To enable or disabl
 - Select `Activities` -> `Settings` in the left-side of the developer portal, or visit `https://discord.com/developers/<your app id>/embedded/settings`
 - From check the appropriate checkboxes in the developer portal, and save your changes
 
-![supported-platforms](images/activities/supported-platforms.png)
+![supported-platforms](images/activities/supported-platforms.webp)
 
 ---