Use static directory for images (#7472)

Author: JustinBeckwith

CONTRIBUTING.md

@@ -45,7 +45,7 @@ For example:
 > Something that requires warning here
 ```
 
-![Alert options](images/alerts.png)
+![Alert options](static/images/alerts.png)
 
 ### MDX Components
 
@@ -56,6 +56,7 @@ There are a few reusable MDX components that can be used on pages with the `mdx`
 Collapsibles allow you to show/hide content on a page that may be secondary to the page's primary content. They have four fields that can be set: `title`, `description`, `icon`, and an `open` flag (which makes the collapsible element open by default).
 
 Available options for `icon`:
+
 - `"list"`
 - `"view"`
 - `"question"`
@@ -64,7 +65,7 @@ Available options for `icon`:
 
 ###### Example
 
-![Collapsible MDX Component with the list icon](images/mdx-collapsible.png)
+![Collapsible MDX Component with the list icon](static/images/mdx-collapsible.png)
 
 ```markdown
 <Collapsible title="Title" description="Description text" icon="list">
@@ -78,7 +79,7 @@ Buttons are simply... clickable buttons. They take `href` and `color` as argumen
 
 ###### Example
 
-![Button MDX Component](images/mdx-button.png)
+![Button MDX Component](static/images/mdx-button.png)
 
 ```markdown
 <LinkButton to="https://discord.com/developers/docs/getting-started" color="brand">click the button!</LinkButton>
@@ -90,7 +91,7 @@ Cards let you display links in a card format. They accept two arguments, `title`
 
 ###### Example
 
-![Card MDX Component](images/mdx-card.png)
+![Card MDX Component](static/images/mdx-card.png)
 
 ```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](activities/tutorial-hero.png)
+![Building Your First Activity Tutorial](images/activities/tutorial-hero.png)
 
 </Collapsible>
 
@@ -142,7 +142,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](activities/oauth2-redirect.png)
+![Redirect URI in Activity Settings](images/activities/oauth2-redirect.png)
 
 ### Fetch Your OAuth2 Credentials
 
@@ -297,7 +297,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](activities/url-mapping-tutorial.png)
+![Configuring your URL Mapping](images/activities/url-mapping-tutorial.png)
 
 | PREFIX | TARGET                                  |
 |--------|-----------------------------------------|
@@ -311,7 +311,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](activities/enable-activities.png)
+![Enabling Activities in Settings](images/activities/enable-activities.png)
 
 #### Default Entry Point Command
 
@@ -328,7 +328,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](activities/start-activity.png)
+![Running your activity](images/activities/start-activity.png)
 
 > info
 > **Customizing your Activity** <br/> If you'd like to set images for your Activity, you can learn how to do that [here](#DOCS_ACTIVITIES_DEVELOPMENT_GUIDES/setting-up-activity-metadata).
@@ -356,7 +356,7 @@ We will use `express` for this example, but any backend language or framework wi
 
 This diagram illustrates the common pattern for granting a user an OAuth2 access_token:
 
-![Flow diagram for Oauth2](activities/oauth-flow-diagram.svg)
+![Flow diagram for Oauth2](images/activities/oauth-flow-diagram.svg)
 
 We will be implementing this pattern in this tutorial, but more example implementations can also be found in this sample project:
 
@@ -529,7 +529,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](activities/tutorial-auth.png)
+![Prompt to authorize Activity](images/activities/tutorial-auth.png)
 
 > warn
 > **Safe storage of tokens**<br />
@@ -592,7 +592,7 @@ setupDiscordSdk().then(() => {
 
 If you close and rejoin the Activity, you should now see the name of the current channel.
 
-![Discord Activities](activities/tutorial-channel-name.png)
+![Discord Activities](images/activities/tutorial-channel-name.png)
 
 <Collapsible title="Step 6 Checkpoint" icon="list" open>
 
@@ -665,7 +665,7 @@ setupDiscordSdk().then(() => {
 
 If we relaunch our Activity, we will see the current server's avatar render in our Activity.
 
-![Discord Activities](activities/tutorial-hero.png)
+![Discord Activities](images/activities/tutorial-hero.png)
 
 <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](activities/bobble-bash.png)
+![Speech bubbles in Bobble League](images/activities/bobble-bash.png)
 
 
 ### 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](activities/bobble-league.png)
+![Bobble League](images/activities/bobble-league.png)
 
 ### 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](activities/eights.png)
+![Support drop-in, drop-out behavior in your Activity](images/activities/eights.png)
 
 ### 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](activities/chess-victory.png)
+![Shared Moment from Chess in the Park](images/activities/chess-victory.png)
 
 #### 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. 

docs/activities/development-guides.mdx

@@ -172,7 +172,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](activities/url-mapping-tutorial.png)
+![Configuring your URL Mapping](images/activities/url-mapping-tutorial.png)
 
 > 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.
@@ -189,7 +189,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/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](activities/application-test-mode-prod.gif)
+![application-test-mode-prod](images/activities/application-test-mode-prod.gif)
 
 
 ---
@@ -226,7 +226,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](activities/url-mapping-tutorial.png)
+![Configuring your URL Mapping](images/activities/url-mapping-tutorial.png)
 
 #### Prefix/Target formatting rules
 
@@ -238,10 +238,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](activities/url-mapping-do.png) | ![url-mapping-dont.png](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.png) | ![url-mapping-dont.png](images/activities/url-mapping-dont.png) |
 
 #### Exceptions
 
@@ -291,7 +291,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](activities/debug-logs-filtering.gif)
+![debug-logs-filtering](images/activities/debug-logs-filtering.gif)
 
 #### Sharing Application Logs from Mobile
 
@@ -346,7 +346,7 @@ discordSdk.commands.openExternalLink({
 
 #### User Experience
 
-![external-link-modal](activities/external-link-modal.png)
+![external-link-modal](images/activities/external-link-modal.png)
 
 Users will see a modal inside the Discord app notifying them whether or not they want to proceed. By clicking **_Trust this Domain_**, users will not see a modal for that specific domain again.
 
@@ -381,7 +381,7 @@ try {
 
 User Experience
 
-![Invite Dialog UI](activities/invite-dialog.png)
+![Invite Dialog UI](images/activities/invite-dialog.png)
 
 Users will see a modal inside the Discord app allowing them to send an invite to a channel, friend, or copy an invite link to share manually.
 
@@ -434,7 +434,7 @@ await discordSdk.commands.openShareMomentDialog({mediaUrl});
 
 User Experience
 
-![share-moment-dialog](activities/share-moment-dialog-example.png)
+![share-moment-dialog](images/activities/share-moment-dialog-example.png)
 
 ---
 
@@ -502,7 +502,7 @@ console.log(`Hardware Acceleration is ${enabled === true ? 'enabled' : 'disabled
 
 #### User Experience
 
-![encourage-hardware-acceleration-modal](activities/encourage-hardware-acceleration-modal.png)
+![encourage-hardware-acceleration-modal](images/activities/encourage-hardware-acceleration-modal.png)
 
 
 ---
@@ -516,7 +516,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](activities/supported-platforms.png)
+![supported-platforms](images/activities/supported-platforms.png)
 
 ---
 
@@ -621,7 +621,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](activities/default_orientation_lock_state.png)
+![default-orientation-lock-state](images/activities/default_orientation_lock_state.png)
 
 #### Subscribing to Screen Orientation Updates
 
@@ -772,7 +772,7 @@ Rest assured: other activities will not be able to make requests with your activ
 
 When a user clicks "Join Application", they expect to enter the same application that their friends are participating in. Whether the application is a shared drawing canvas, board game, collaborative playlist, or first-person shooter; the two users should have access to the same shared data. In this documentation, we refer to this shared data as an **application instance**.
 
-![join-application](activities/join-application.png)
+![join-application](images/activities/join-application.png)
 
 The Embedded App SDK allows your app to talk bidirectionally with the Discord Client. The `instanceId` is necessary for your application, as well as Discord, to understand which unique instance of an application it is talking to.
 
@@ -1027,7 +1027,7 @@ Once you're satisfied with your changes you can click on the copy icon on the ro
 
 #### User Experience
 
-![custom-link-embed](activities/custom-link-embed.png)
+![custom-link-embed](images/activities/custom-link-embed.png)
 
 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.
 
@@ -1091,7 +1091,7 @@ curl https://discord.com/api/applications/1215413995645968394/activity-instances
 With this API, the activity's backend can verify that a client is in fact in an instance of that activity before allowing the client to participate in any meaningful gameplay. How an activity implements "session verification" is left to the developer's discretion. The solution can be as granular as gating specific features or as binary as not returning the activity HTML except for valid sessions.
 
 In the below flow diagram, we show how the server can deliver the activity website, only for valid users in a valid activity instance:
-![application-test-mode-prod](activities/activity-instance-validation.jpg)
+![application-test-mode-prod](images/activities/activity-instance-validation.jpg)
 
 ---
 

docs/activities/how-activities-work.md

@@ -60,4 +60,4 @@ async function setup() {
 
 This diagram illustrates the communication flow between your application and Discord in the sample code above.
 
-![Diagram of how Activities communicate with Discord](activities/embedded-app-flow-diagram.svg)
+![Diagram of how Activities communicate with Discord](images/activities/embedded-app-flow-diagram.svg)

docs/activities/overview.mdx

@@ -4,7 +4,7 @@ sidebar_label: Overview
 
 # Overview of Activities
 
-![Building Discord Activities](activities/activities-hero.png)
+![Building Discord Activities](images/activities/activities-hero.png)
 
 **Activities** are multiplayer games and social experiences that can be launched in Discord. Activities can integrate with Discord features like user identity, voice and chat, profile data like Rich Presence, and native monetization.
 

docs/change-log/2022-11-17-upcoming-application-command-permission-changes.md

@@ -70,7 +70,7 @@ If a command-level configuration does not exist for the given context, the syste
 
 Below is a simplified flowchart that illustrates how permissions will be applied by the Discord client after the new changes take effect.
 
-![Flowchart with an overview of the new permissions configurations logic](new-permissions-flowchart.svg)
+![Flowchart with an overview of the new permissions configurations logic](images/new-permissions-flowchart.svg)
 
 #### 2. `APPLICATION_COMMAND_PERMISSIONS_V2` Guild Feature
 

docs/developer-tools/game-sdk.mdx

@@ -232,11 +232,11 @@ You're ready to go! Check out the rest of the documentation for more info on how
 In your project folder, you'll want to make something like a "discord-files" folder, for organization. In that folder, copy all the `.h` and `.cpp` files from the zip.
 You want to include all the header and source files respectively in your project
 
-![Correct Files](cpp-files-sdk.png)
+![Correct Files](images/cpp-files-sdk.png)
 
 In your project settings, you'll want to include the relevant library (e.g. `discord_game_sdk.dll.lib`) as an additional dependency.
 
-![Linked Library](lib-linked-sdk.png)
+![Linked Library](images/lib-linked-sdk.png)
 
 - From there, you should be able to `#include "discord-files/discord.h"`, or whatever the path to that header file is, and have access to the code.
 </Collapsible>
@@ -1274,7 +1274,7 @@ Opens the overlay widget for voice settings for the currently connected applicat
 
 <Collapsible title="Screenshot of the Voice Settings modal for an application" icon="view">
 
-![Screenshot of the Voice Settings modal for an application](game-overlay-sdk-voice-settings.png)
+![Screenshot of the Voice Settings modal for an application](images/game-overlay-sdk-voice-settings.png)
 </Collapsible>
 
 Returns a `Discord.Result` via callback.
@@ -1333,7 +1333,7 @@ overlayManager.OpenActivityInvite(ActivityActionType.Join, (result) =>
 
 And that invite modal looks like this!
 
-![Screenshot of an Invitation Modal in an application](game-overlay-sdk-invite.gif)
+![Screenshot of an Invitation Modal in an application](images/game-overlay-sdk-invite.gif)
 
 </Collapsible>