diff --git a/docs/api/bdapi.md b/docs/api/bdapi.md index 8589885..59c478e 100644 --- a/docs/api/bdapi.md +++ b/docs/api/bdapi.md @@ -143,7 +143,7 @@ id|string|ID uses for the style element ___ ### deleteData deprecated -Deletes a piece of stored data. This is different than saving `null` or `undefined`. +Deletes a piece of stored data. This is different from saving `null` or `undefined`. | Parameter | Type | Description | |:----------|:------:|:----------------------:| @@ -336,7 +336,7 @@ options.title|string|✅|*none*|Title for the titlebar options.message|string|✅|*none*|Message for the dialog options.showOverwriteConfirmation|boolean|✅|false|Whether the user should be prompted when overwriting a file options.showHiddenFiles|boolean|✅|false|Whether hidden files should be shown in the dialog -options.promptToCreate|boolean|✅|false|Whether the user should be prompted to create non-existant folders +options.promptToCreate|boolean|✅|false|Whether the user should be prompted to create non-existent folders options.openDirectory|boolean|✅|false|Whether the user should be able to select a directory as a target options.openFile|boolean|✅|true|Whether the user should be able to select a file as a target options.multiSelections|boolean|✅|false|Whether the user should be able to select multiple targets diff --git a/docs/api/logger.md b/docs/api/logger.md index 0f07edb..ec8358f 100644 --- a/docs/api/logger.md +++ b/docs/api/logger.md @@ -42,7 +42,7 @@ message|...any|Messages to have logged. ___ ### log -Logs used for basic loggin. +Logs used for basic logging. | Parameter | Type | Description | |:----------|:------:|:----------------------:| diff --git a/docs/api/ui.md b/docs/api/ui.md index 2761914..d7767b4 100644 --- a/docs/api/ui.md +++ b/docs/api/ui.md @@ -63,7 +63,7 @@ props|object|❌|*none*| props.settings|Array.<object>|❌|*none*|Array of settings to show props.onChange|CallableFunction|❌|*none*|Function called on every change props.onDrawerToggle|CallableFunction|✅|*none*|Optionally used to save drawer states -props.getDrawerState|CallableFunction|✅|*none*|Optionially used to recall drawer states +props.getDrawerState|CallableFunction|✅|*none*|Optionally used to recall drawer states **Returns:** `void` ___ @@ -109,7 +109,7 @@ ___ ### showChangelogModal Shows a changelog modal in a similar style to Discord's. Customizable with images, videos, colored sections and supports markdown. -The changes option is a array of objects that have this typing: +The changes option is an array of objects that have this typing: ```ts interface Changes { title: string; diff --git a/docs/developers/addons.md b/docs/developers/addons.md index afb3a4e..15c1533 100644 --- a/docs/developers/addons.md +++ b/docs/developers/addons.md @@ -51,7 +51,7 @@ Please see the table below for details on the fields. |Field|Required|Description| |-----|:------:|-----------| -|name|✅|The name of the addon. Typcially does not contain spaces, but is allowed.| +|name|✅|The name of the addon. Typically does not contain spaces, but is allowed.| |author|✅|The name of you the developer.| |description|✅|A basic description of the what the addon does.| |version|✅|Version representing the current update level. [Semantic versioning](https://semver.org/) recommended.| diff --git a/docs/developers/devtools.md b/docs/developers/devtools.md index 5bc82bd..241320a 100644 --- a/docs/developers/devtools.md +++ b/docs/developers/devtools.md @@ -11,7 +11,7 @@ These are tools that help with both general web development, and working with th If you have past web development experience you are probably already familiar with the Chrome/Chromium DevTools. If not, it might be a good idea to give [its documentation](https://developer.chrome.com/docs/devtools/) a once-over. -Working in this Discord (and BetterDiscord) environment, we have access to these DevTools. Discord has this disabled by default, but it is possible to reenable this functionality in the BetterDiscord settings. Go to the BetterDiscord Settings page and find the Developer Settings. Then check the option for DevTools. +Working in this Discord (and BetterDiscord) environment, we have access to these DevTools. Discord has this disabled by default, but it is possible to re-enable this functionality in the BetterDiscord settings. Go to the BetterDiscord Settings page and find the Developer Settings. Then check the option for DevTools. ![Developer Tools](./img/developer_settings.png) diff --git a/docs/developers/environment.md b/docs/developers/environment.md index e4fddf6..7cb9719 100644 --- a/docs/developers/environment.md +++ b/docs/developers/environment.md @@ -11,7 +11,7 @@ No not the one burning up, but the development environment for BetterDiscord plu ### Desktop Application -Discord Desktop is an [Electron](https://www.electronjs.org/) application which means it is _essentially_ a chromium web browser that only displays Discord. That is an oversimplification but it's a good high level understanding to have. What makes Electron more than just a browser, is that it bundles Node.js with it, giving every Electron application the ability to interact beyond the capabilities of a web browser and make use of the user's computer. +Discord Desktop is an [Electron](https://www.electronjs.org/) application which means it is _essentially_ a Chromium web browser that only displays Discord. That is an oversimplification, but it's a good high level understanding to have. What makes Electron more than just a browser, is that it bundles Node.js with it, giving every Electron application the ability to interact beyond the capabilities of a web browser and make use of the user's computer. To get a better sense of what this does, think of the limitations of making an application in a web browser. Actions like loading and saving local files, listening to keybinds globally, and controlling the user's clipboard are just not possible in the web browser. Most of these limitations are for security reasons, but with [Node.js](https://nodejs.org/), suddenly those are all very possible. diff --git a/docs/developers/index.md b/docs/developers/index.md index e9e8f11..ecb8386 100644 --- a/docs/developers/index.md +++ b/docs/developers/index.md @@ -15,7 +15,7 @@ Currently, BetterDiscord only supports two main types of addons: [Plugins](../pl ## Plugins -Plugins are a type of addon that focus on functionality by adding something new to the Discord client. This could be as simple as a button that says hello, or basic end-to-end ecryption. Plugins can also modify existing functionality in the client like altering exisiting buttons to perform different actions, or even remove functionality entirely. All of this is done using JavaScript with minimal requirements to allow for personal preference and style in programming. To read more about making them, check out the [plugin documentation](../plugins/) after finishing this section. +Plugins are a type of addon that focus on functionality by adding something new to the Discord client. This could be as simple as a button that says hello, or basic end-to-end encryption. Plugins can also modify existing functionality in the client like altering existing buttons to perform different actions, or even remove functionality entirely. All of this is done using JavaScript with minimal requirements to allow for personal preference and style in programming. To read more about making them, check out the [plugin documentation](../plugins/) after finishing this section. ## Themes diff --git a/docs/developers/submitting.md b/docs/developers/submitting.md index 895daaf..60f8dd9 100644 --- a/docs/developers/submitting.md +++ b/docs/developers/submitting.md @@ -39,7 +39,7 @@ Due to our small team size, we have no guarantees for how long a review can take ### Denial -1. You'll get a notification that your submission was denied along with a reason mesage. +1. You'll get a notification that your submission was denied along with a reason message. 2. Check your GitHub for any issues opened by the review team. 2. Make any necessary changes and resubmit. diff --git a/docs/plugins/advanced/patching.md b/docs/plugins/advanced/patching.md index b5a5774..604bc4a 100644 --- a/docs/plugins/advanced/patching.md +++ b/docs/plugins/advanced/patching.md @@ -14,7 +14,7 @@ A function patch an advanced technique for plugins that allow you to modify exis ### Why would I use one? -It's a great way to modify or extend Discord's functionality with your own while keeping integration mostly seemless. It can also act as a way to modify the way Discord works currently. Take the plugin [HideDisabledEmojis](https://betterdiscord.app/plugin/HideDisabledEmojis) for example, it uses function patching to modify the way Discord's internal functions work to stop trying to render emojis the user cannot use. Your possibilities for the plugins you can make increase exponentially, and the quality usually ends up being higher due to the tight integration with Discord. +It's a great way to modify or extend Discord's functionality with your own while keeping integration mostly seamless. It can also act as a way to modify the way Discord works currently. Take the plugin [HideDisabledEmojis](https://betterdiscord.app/plugin/HideDisabledEmojis) for example, it uses function patching to modify the way Discord's internal functions work to stop trying to render emojis the user cannot use. Your possibilities for the plugins you can make increase exponentially, and the quality usually ends up being higher due to the tight integration with Discord. ### How can I patch a function? @@ -76,7 +76,7 @@ BdApi.Patcher.instead("MyPlugin", someObject, "yourTarget", () => console.log("g targetUser(); // Now logs "green" ``` -This code has the some effect as before, causing `targetUser` to instead log `green`. But lets take a closer look at the highlighted line. We have a call to `BdApi.Patcher.instead` which indicates we want to create an `instead` patch. We pass it `"MyPlugin"` which is an identifier used later to help removed all your patches with `BdApi.Patcher.unpatchAll`. Then we give it the target object `someObject` and the key of our target inside that object `yourTarget` and our new function to override the original. BetterDiscord takes care of the rest and even allows other plugins to patch on top of yours. +This code has the same effect as before, causing `targetUser` to instead log `green`. But let's take a closer look at the highlighted line. We have a call to `BdApi.Patcher.instead` which indicates we want to create an `instead` patch. We pass it `"MyPlugin"` which is an identifier used later to help removed all your patches with `BdApi.Patcher.unpatchAll`. Then we give it the target object `someObject` and the key of our target inside that object `yourTarget` and our new function to override the original. BetterDiscord takes care of the rest and even allows other plugins to patch on top of yours. ## Examples @@ -155,7 +155,7 @@ someModule.method(1); // > Intercepted other someModule.method(1); // > undefined ``` -Take alook at the function we define in the `instead` patch. We have a new parameter `originalFunction` that BetterDiscord gives us to use as we see fit. In this example we use it for a specific value. If the value is `5` we let the original function run and return without modification. If the value is `1` we pass it to an external function and let that handle the arguments and the return. Otherwise, the function has no return value at all. This is a huge change to the function. It used to always return a value and now it only returns values for two cases. This is a good demonstration how much power function patching can have. +Take a look at the function we define in the `instead` patch. We have a new parameter `originalFunction` that BetterDiscord gives us to use as we see fit. In this example we use it for a specific value. If the value is `5` we let the original function run and return without modification. If the value is `1` we pass it to an external function and let that handle the arguments and the return. Otherwise, the function has no return value at all. This is a huge change to the function. It used to always return a value, and now it only returns values for two cases. This is a good demonstration how much power function patching can have. ### After diff --git a/docs/plugins/advanced/react.md b/docs/plugins/advanced/react.md index e641e33..2e5ce91 100644 --- a/docs/plugins/advanced/react.md +++ b/docs/plugins/advanced/react.md @@ -11,7 +11,7 @@ This guide involves [function patching](./patching.md). If you have not read tha ### What does it mean? -When we say React Injection, we're referring to adding/removing/alterting components in the React render tree used by Discord. In the [React](../intermediate/react.md) section of the guide, we went over rendering our own components using `ReactDOM` which created our own React trees rendering outside of Discord's tree. With injection we can either be part of Discord's tree with our own elements, or we can modify Discord's tree before a render finishes. +When we say React Injection, we're referring to adding/removing/altering components in the React render tree used by Discord. In the [React](../intermediate/react.md) section of the guide, we went over rendering our own components using `ReactDOM` which created our own React trees rendering outside of Discord's tree. With injection we can either be part of Discord's tree with our own elements, or we can modify Discord's tree before a render finishes. ### Why would I need it? @@ -59,7 +59,7 @@ Let's take a look at this component and see if it's exported like we did in the ![view_source](./img/view_source.png) -And of course also beautify the code with the button a the bottom left. You'll see a render function much like this. +And of course also beautify the code with the button at the bottom left. You'll see a render function much like this. ![react_render](./img/react_render.png) diff --git a/docs/plugins/advanced/webpack.md b/docs/plugins/advanced/webpack.md index cacceaa..adef0fd 100644 --- a/docs/plugins/advanced/webpack.md +++ b/docs/plugins/advanced/webpack.md @@ -51,7 +51,7 @@ Due to the nature of client modding, this section could be outdated by the time Now that we know what information we can search on, how do we even find a module we want to get? And once we find it, how do we know whether it's even accessible? Keep in mind that some modules in Discord are completely wrapped and cannot be accessed through this API or through reflection of any kind. -But to answer these questions, let's step through a very simple example. Let's say we want to open settings programmtically. We know that the settings button can do that, so we'll start there. Begin by selecting that element and printing it out in console with `$0`. You'll see in the autocomplete that it has some property that looks like `__reactFiber$2oq7t5kq3k5`. Go ahead and select that and print it out. This is the data React currently has about this node. Using this is a good way to understand how React works and a great way to start with reverse engineering in Discord. Through this you can walk the React tree and see all the elements React knows about. But we are more interested in the properties of this `button` because we want to essentially duplicate the `onClick` listener. +But to answer these questions, let's step through a very simple example. Let's say we want to open settings programmatically. We know that the settings button can do that, so we'll start there. Begin by selecting that element and printing it out in console with `$0`. You'll see in the autocomplete that it has some property that looks like `__reactFiber$2oq7t5kq3k5`. Go ahead and select that and print it out. This is the data React currently has about this node. Using this is a good way to understand how React works and a great way to start with reverse engineering in Discord. Through this you can walk the React tree and see all the elements React knows about. But we are more interested in the properties of this `button` because we want to essentially duplicate the `onClick` listener. Now let's print out the property that looks like `__reactProps$2oq7t5kq3k5` instead. You'll see in this object all the React props specific to this element including an `onClick` function. Let's dive into this either by right-clicking and selecting `Show Function Definition` or by expanding the function and clicking on the function location. @@ -111,7 +111,7 @@ And there it is, the object we wanted, with the function we wanted. You might ha ![default_export](./img/default_export.png) -Now the `Z` is back and BetterDisord returned the whole module, not just the default export. So let's stick with the first version since we just want to use the object directly. And let's take a look at the `open` function definition and figure out how it works so we can use it. +Now the `Z` is back and BetterDiscord returned the whole module, not just the default export. So let's stick with the first version since we just want to use the object directly. And let's take a look at the `open` function definition and figure out how it works so we can use it. ![open](./img/open.png) diff --git a/docs/plugins/basics/addons.md b/docs/plugins/basics/addons.md index 669795c..496e75c 100644 --- a/docs/plugins/basics/addons.md +++ b/docs/plugins/basics/addons.md @@ -9,7 +9,7 @@ Within BetterDiscord you can interact with different addons in two main ways. Ei ## AddonAPI -The addon api is available as part of `BdApi`. Theres two instances, one for plugins and one for themes at `BdApi.Plugins` and `BdApi.Themes` respectively. This api has a few helpful utilities for interacting with other plugins, and even has the current addon folder as a property. For a more exhaustive list of available methods and properties, take a look at the [api reference](/api/bdapi). +The addon api is available as part of `BdApi`. There's two instances, one for plugins and one for themes at `BdApi.Plugins` and `BdApi.Themes` respectively. This api has a few helpful utilities for interacting with other plugins, and even has the current addon folder as a property. For a more exhaustive list of available methods and properties, take a look at the [api reference](/api/bdapi). ## Getting Addons @@ -43,7 +43,7 @@ If you have the ID of the addon you'd like to toggle, this is pretty straightfor BdApi.Themes.toggle("Nox"); ``` -Of course you can have more granular control and specifically enable or disable when you need to. You can even combine all three. +Of course, you can have more granular control and specifically enable or disable when you need to. You can even combine all three. ```js BdApi.Themes.enable("Nox"); // Nox is now enabled diff --git a/docs/plugins/basics/creating-a-plugin.md b/docs/plugins/basics/creating-a-plugin.md index e7e9c64..5bee868 100644 --- a/docs/plugins/basics/creating-a-plugin.md +++ b/docs/plugins/basics/creating-a-plugin.md @@ -84,7 +84,7 @@ module.exports = meta => { ``` ::: -It's worth noting when deciding that each plugin is loaded similarly to a node module. This means that defining variables outside of the `module.exports` will not result in scope creep or variable bloat. +It's worth noting when deciding that each plugin is loaded similarly to a node module. This means that defining variables outside the `module.exports` will not result in scope creep or variable bloat. Once you've got that decided, go ahead and save your template in your [plugins folder](../introduction/quick-start#plugin-folder) as `ExamplePlugin.plugin.js` and change `ExamplePlugin` to the name of your choice. diff --git a/docs/plugins/basics/dom.md b/docs/plugins/basics/dom.md index e9b57ba..e12912d 100644 --- a/docs/plugins/basics/dom.md +++ b/docs/plugins/basics/dom.md @@ -45,9 +45,9 @@ First, we need to find the DOM subtree for the guild list, the easiest way to do ![Server List](./img/servers.png) -If yours looks like the one above, you've got the right element. Now we need to come up with a selector for the element. You can try to use the built in method by right clicking the element, then going to `Copy > Copy Selector`. But that usually yields unwieldly selectors like `#app-mount > div.appDevToolsWrapper-1QxdQf > div > div.app-3xd6d0 > div > div.layers-OrUESM.layers-1YQhyW > div > div.container-1eFtFS > nav > ul > div.scroller-3X7KbA.none-2-_0dP.scrollerBase-_bVAAt > div:nth-child(3)` in this case. +If yours looks like the one above, you've got the right element. Now we need to come up with a selector for the element. You can try to use the built-in method by right-clicking the element, then going to `Copy > Copy Selector`. But that usually yields unwieldy selectors like `#app-mount > div.appDevToolsWrapper-1QxdQf > div > div.app-3xd6d0 > div > div.layers-OrUESM.layers-1YQhyW > div > div.container-1eFtFS > nav > ul > div.scroller-3X7KbA.none-2-_0dP.scrollerBase-_bVAAt > div:nth-child(3)` in this case. -So lets do it manually. Since this element has no `id` or `class` but it does have an `aria-label` attribute, it seems obvious to use an attribute selector like `[aria-label="Servers"]`. This does have a big problem however. This value changes based on the language the user has Discord set to. So while this may work for you in English, it won't work for many many others. If you're unfamiliar with `aria-label` or accessible web browsing in general, once again [MDN has great documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) on this topic. +So let's do it manually. Since this element has no `id` or `class` but it does have an `aria-label` attribute, it seems obvious to use an attribute selector like `[aria-label="Servers"]`. This does have a big problem however. This value changes based on the language the user has Discord set to. So while this may work for you in English, it won't work for many many others. If you're unfamiliar with `aria-label` or accessible web browsing in general, once again [MDN has great documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) on this topic. Since that didn't work out, let's take another look. We can see there are a couple unique classes in the ancestor hierarchy like `tree-3agP2X` and `guilds-2JjMmN`. We can combine these with the fact the `aria-label` only exists on the element we are targeting to create a selector like `.tree-3agP2X > div > div[aria-label]`. Since this doesn't depend on the *value* of the `aria-label` attribute, it will still work regardless of language. Note: there are other selectors that work as well, this is just an example. diff --git a/docs/plugins/basics/settings.md b/docs/plugins/basics/settings.md index d0371e8..3d9ca3c 100644 --- a/docs/plugins/basics/settings.md +++ b/docs/plugins/basics/settings.md @@ -54,7 +54,7 @@ Where you store this object in your plugin is up to the individual developer. It ### Saving Settings -BetterDiscord gives you an easy way to save your settings in a JSON file using `BdApi.Data.save`. This function takes your plugin's name, the key you want to save and the corresponding data to save. This means you can save your entire settings object from above under a single key, or save each key invidually. See the examples below to help understand the difference. +BetterDiscord gives you an easy way to save your settings in a JSON file using `BdApi.Data.save`. This function takes your plugin's name, the key you want to save and the corresponding data to save. This means you can save your entire settings object from above under a single key, or save each key individually. See the examples below to help understand the difference. Saving the whole settings object under a single key: @@ -246,7 +246,7 @@ myButton.style.color = mySettings.accentColor; // "blue" ``` ::: -In this case, the button ends up blue instead of red. While not entirely desireable, it does not cause unexpected issues. This same concept can be applied to adding new settings that did not exist. +In this case, the button ends up blue instead of red. While not entirely desirable, it does not cause unexpected issues. This same concept can be applied to adding new settings that did not exist. The key here is the call to `Object.assign()`. This function extends objects using other objects, essentially combining and overriding the keys. [MDN has a great explanation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) of the details of how this works. In this case, the order is important. You want the loaded data to override any existing value in the default object, so the loaded data comes last in the list. You'll notice that the target object is an empty object `{}`. If you use the default settings object instead, that __object will be modified__ so when you go to use it again in the future the values may be overridden. Using `{}` means a new object will be created and returned. An equivalent and more verbose version is shown below: @@ -449,7 +449,7 @@ module.exports = class DemoPlugin { ### Classic HTML -Since we're using `getSettingsPanel()` we need to create an html element that not only represents our settings, but allows the user to change them. The best way to do this is to turn each setting into an input and display it to the user. Let's say for example we have this setting schema: +Since we're using `getSettingsPanel()` we need to create a html element that not only represents our settings, but allows the user to change them. The best way to do this is to turn each setting into an input and display it to the user. Let's say for example we have this setting schema: ```js:line-numbers { diff --git a/docs/plugins/basics/ui.md b/docs/plugins/basics/ui.md index 54656f6..7e7255d 100644 --- a/docs/plugins/basics/ui.md +++ b/docs/plugins/basics/ui.md @@ -131,7 +131,7 @@ Important to note for later that `alert` returns a unique modal ID used internal ### buildSettingItem & buildSettingsPanel -This are covered in the [previous guide](./settings.md) in the section going over how to build a settings menu! +These are covered in the [previous guide](./settings.md) in the section going over how to build a settings menu! ### createTooltip diff --git a/docs/plugins/intermediate/bundling.md b/docs/plugins/intermediate/bundling.md index 0fcc352..735611e 100644 --- a/docs/plugins/intermediate/bundling.md +++ b/docs/plugins/intermediate/bundling.md @@ -237,7 +237,7 @@ We'll be using those in our new plugin that we will write ourselves. Making a pl } ``` -But you can call `YourPluginName` anything, it's just used to differeniate between taps. Now we have to write some code that can actually copy the file. The way we'll be showing here is platform agnostic but verbose, so feel free to change it up to work only for your own system. +But you can call `YourPluginName` anything, it's just used to differentiate between taps. Now we have to write some code that can actually copy the file. The way we'll be showing here is platform agnostic but verbose, so feel free to change it up to work only for your own system. ```js:line-numbers const userConfig = (() => { diff --git a/docs/plugins/intermediate/react.md b/docs/plugins/intermediate/react.md index 7f91abb..48cc76c 100644 --- a/docs/plugins/intermediate/react.md +++ b/docs/plugins/intermediate/react.md @@ -65,7 +65,7 @@ If you think that repeating `BdApi.React` over and over is a bit tedious, many d ## React in BetterDiscord -Some of the [UI related functions](../../api/ui.md) of BetterDiscord accept React Components as options to be rendered. Some accept React Nodes/Elements which is just having already called `createElement`. One good example is the confirmation modal. It's already a very helpful utility, but adding in your own custom React component allows for some very powerful UI and UX for end users. Just as a quick example, take a look at how we can combine the our `MyComponent` from before with the confirmation modal. +Some of the [UI related functions](../../api/ui.md) of BetterDiscord accept React Components as options to be rendered. Some accept React Nodes/Elements which is just having already called `createElement`. One good example is the confirmation modal. It's already a very helpful utility, but adding in your own custom React component allows for some very powerful UI and UX for end users. Just as a quick example, take a look at how we can combine our `MyComponent` from before with the confirmation modal. ```js BdApi.showConfirmationModal("My Component Demo", BdApi.React.createElement(MyComponent)); @@ -137,6 +137,6 @@ BdApi.ReactDOM.unmountComponentAtNode(element); And your button will be gone! -One thing to keep in mind, because Discord is contantly changing elements around, if your element gets removed from the `document`, you should unmount your component. Otherwise, you'll end up with a memory leak. You'll also still be trying to use UI that isn't even visible to the user. You can combine the `unmountComponentAtNode` function with the `MutationObserver` from [Using the DOM](../basics/dom.md) to automatically unmount whenever your element is removed from the `document`. +One thing to keep in mind, because Discord is constantly changing elements around, if your element gets removed from the `document`, you should unmount your component. Otherwise, you'll end up with a memory leak. You'll also still be trying to use UI that isn't even visible to the user. You can combine the `unmountComponentAtNode` function with the `MutationObserver` from [Using the DOM](../basics/dom.md) to automatically unmount whenever your element is removed from the `document`. -Lastly, while this does render React inside of the Discord client, it doesn't actually render as part of Discord's React tree. This might seem inconsequential, but it can be the difference between things working and not. If you're re-using internal Discord components, especially components involving popouts and tooltips, they won't work outside of Discord's tree. If you're interested in rendering inside of Discord's React tree, you'll learn more in the [React Injection](../advanced/react.md) later on. +Lastly, while this does render React inside the Discord client, it doesn't actually render as part of Discord's React tree. This might seem inconsequential, but it can be the difference between things working and not. If you're re-using internal Discord components, especially components involving popouts and tooltips, they won't work outside of Discord's tree. If you're interested in rendering inside of Discord's React tree, you'll learn more in the [React Injection](../advanced/react.md) later on. diff --git a/docs/plugins/introduction/environment.md b/docs/plugins/introduction/environment.md index e444ed5..9e29c41 100644 --- a/docs/plugins/introduction/environment.md +++ b/docs/plugins/introduction/environment.md @@ -21,7 +21,7 @@ Currently, the list of polyfilled Node modules are: - Request - VM -These polyfills are not 100% exact replicas of these APIs but they are close enough that 99% of plugins had no issues when switching to this. In the future, BetterDiscord will introduce custom APIs with equivalent functionality, and deprecate the usage of these polyfills. +These polyfills are not 100% exact replicas of these APIs, but they are close enough that 99% of plugins had no issues when switching to this. In the future, BetterDiscord will introduce custom APIs with equivalent functionality, and deprecate the usage of these polyfills. However, for now feel free to use them. For instance, if you want to load a file in the current directory you can just use the `fs` module. ```js diff --git a/docs/plugins/introduction/guidelines.md b/docs/plugins/introduction/guidelines.md index 873edd1..2b5bdd5 100644 --- a/docs/plugins/introduction/guidelines.md +++ b/docs/plugins/introduction/guidelines.md @@ -34,7 +34,7 @@ These are guidelines that all plugins are expected to abide by. Any plugin that 1. Plugins must not make use of the `child_process` node module. - Existing plugins are exempt, but no new plugins shall use this. This is due in part to the security risk, and in part due to an impending Discord update that will break this module. 1. Plugins must not modify global variables, global objects, or existing `prototype`s. -1. Plugins must not access BetterDiscord globals ouside of the official API. +1. Plugins must not access BetterDiscord globals outside of the official API. 1. Plugins must not access webpack modules outside of the official API. 1. Plugins must not waste hardware resources. - e.g., repeated webpack searching without caching, storing unnecessary data in memory. @@ -50,6 +50,6 @@ These are guidelines that all plugins are expected to abide by. Any plugin that - This includes but is not limited to: hidden channels, deleted messages, invisible/offline status distinction. 1. Plugins must not use remote libraries. - Necessary dependencies should be either bundled or a separate plugin. -1. Plugins must not use closed source nor self-hosted binaries or libaries. +1. Plugins must not use closed source nor self-hosted binaries or libraries. 1. Plugins must not be obfuscated, minified, include sourcemaps, or be otherwise deceitful. 1. Plugins must not bypass the addon approval system by implementing their own update system. \ No newline at end of file diff --git a/docs/plugins/introduction/structure.md b/docs/plugins/introduction/structure.md index 358b50d..992e6c9 100644 --- a/docs/plugins/introduction/structure.md +++ b/docs/plugins/introduction/structure.md @@ -81,7 +81,7 @@ module.exports = () => { But whatever your preference, just pass those functions on up! -All of those examples are valid ways of getting those functions back to BetterDisord. The main idea is that when BetterDiscord calls `require("./yourplugin.plugin.js")`, the `exports` needs to either: +All of those examples are valid ways of getting those functions back to BetterDiscord. The main idea is that when BetterDiscord calls `require("./yourplugin.plugin.js")`, the `exports` needs to either: 1. have both a `start()` and `stop()` prototype function. 2. _be_ a function that returns an object containing both functions. diff --git a/docs/themes/advanced/performance.md b/docs/themes/advanced/performance.md index 3d082d5..a76e3e9 100644 --- a/docs/themes/advanced/performance.md +++ b/docs/themes/advanced/performance.md @@ -55,7 +55,7 @@ Here are a few tips for improving your attribute selectors. ### Animations & Transitions -There are a few different techniques that improve your animations and transitions. One of the first is understanding the rule of thumb: "Do not animate CSS properties that trigger layout or painting whenever possible." This includes properties like heigh and width that could cause other elements to move around as you animate. It is very difficult to produce smooth and performant animations in these cases. +There are a few different techniques that improve your animations and transitions. One of the first is understanding the rule of thumb: "Do not animate CSS properties that trigger layout or painting whenever possible." This includes properties like height and width that could cause other elements to move around as you animate. It is very difficult to produce smooth and performant animations in these cases. You can indicate to the browser before animations and transitions what properties will change which can help the browser optimize performance. Just add `will-change: property;` to the element in question. diff --git a/docs/themes/advanced/preprocessing.md b/docs/themes/advanced/preprocessing.md index 0c528e3..f0cea5b 100644 --- a/docs/themes/advanced/preprocessing.md +++ b/docs/themes/advanced/preprocessing.md @@ -4,7 +4,7 @@ order: 1 # Preprocessing & Minification -This section of the guide will walk you through the the concepts of preprocessing and minification with CSS and then do a small walkthrough. +This section of the guide will walk you through the concepts of preprocessing and minification with CSS and then do a small walkthrough. ## Background @@ -16,17 +16,17 @@ Minification is just transpiling your css to use as few characters as possible. ### Why would I want one? -These systems can enable you to make more complex themes that are easily maintainable. They can help cut down on reptition and reused code. They can also allow you to break your css out into multiple files and compile them together into one at the end. Whereas minification allows CSS loaded remotely to load faster because there is less data for a user to download. +These systems can enable you to make more complex themes that are easily maintainable. They can help cut down on repetition and reused code. They can also allow you to break your css out into multiple files and compile them together into one at the end. Whereas minification allows CSS loaded remotely to load faster because there is less data for a user to download. ## Preprocessor Options There are many options these days when it comes to CSS preprocessors. The most popular options are Sass/scss, Less, Stylus, and PostCSS*. You can read a brief introduction to each of them [here](https://www.bitdegree.org/tutorials/css-preprocessor/). Or for even more options take a look at [this article](https://www.sitepoint.com/6-current-options-css-preprocessors/). -*PostCSS is a bit of an exception because it is more of a postprocessor,, it can do all sorts of things with your CSS including handling the preprocessing through the other 3 mentioned preprocessors. Also unlike the others, PostCSS does not have all of the features out of the gate, it is a modular system so you only include what features you need. +*PostCSS is a bit of an exception because it is more of a postprocessor, it can do all sorts of things with your CSS including handling the preprocessing through the other 3 mentioned preprocessors. Also unlike the others, PostCSS does not have all of the features out of the gate, it is a modular system so you only include what features you need. ### Which is right for me? -We don't know. Only you can make that decision for you and your project. The big preprocessors all generally have the same features and capabilites so it often comes down to personal preference of syntax. By far the most popular is SCSS which is a syntax for Sass. The most free and open ended is Stylus since it allows you to include or omit as much syntax as you want. Then there's PostCSS, which by default just uses regular CSS syntax but can be expanded to do just about anything. Raygun gives a really good breakdown on all this different syntaxes with multiple examples in [their article](https://raygun.com/blog/css-preprocessors-examples/). We recommend giving it a look to help you decide. +We don't know. Only you can make that decision for you and your project. The big preprocessors all generally have the same features and capabilities so it often comes down to personal preference of syntax. By far the most popular is SCSS which is a syntax for Sass. The most free and open-ended is Stylus since it allows you to include or omit as much syntax as you want. Then there's PostCSS, which by default just uses regular CSS syntax but can be expanded to do just about anything. Raygun gives a really good breakdown on all this different syntaxes with multiple examples in [their article](https://raygun.com/blog/css-preprocessors-examples/). We recommend giving it a look to help you decide. ## Walkthrough @@ -90,7 +90,7 @@ As a quick explanation of what's going on here: `map: false` means we are not ma ### Code -With the set up out of the way, we're actually almost done. Let's just make our CSS files. +With the set-up out of the way, we're actually almost done. Let's just make our CSS files. ::: code-group @@ -117,7 +117,7 @@ With the set up out of the way, we're actually almost done. Let's just make our ``` ::: -Seems almost too easy, right? Well let's run `npm run build` anyways and see what happens. +Seems almost too easy, right? Well let's run `npm run build` anyway and see what happens. It seems to build just fine, and there's a new `dist` folder with an `import.css` inside. diff --git a/docs/themes/basics/creating.md b/docs/themes/basics/creating.md index a943bdb..ed2ccc5 100644 --- a/docs/themes/basics/creating.md +++ b/docs/themes/basics/creating.md @@ -59,7 +59,7 @@ Next, let's see if we can make the guild list even narrower. The bar in VSCode i } ``` -Save once again and you'll see that the guild list shrunk as expected! But, the guilds didn't shrink with it and they got cut off. This is where theming in BetterDiscord differentiates from typical web development, traversing the DOM tree to find out what else has to be overidden to actually do what you want. Let's do that together! Checking each node as we go, the first one we see that sets its own width has the selector `.listItem-3SmSlK` which sets it to `72px`. Let's go ahead and change that to `50px` as well. +Save once again and you'll see that the guild list shrunk as expected! But, the guilds didn't shrink with it and they got cut off. This is where theming in BetterDiscord differentiates from typical web development, traversing the DOM tree to find out what else has to be overridden to actually do what you want. Let's do that together! Checking each node as we go, the first one we see that sets its own width has the selector `.listItem-3SmSlK` which sets it to `72px`. Let's go ahead and change that to `50px` as well. ```css .guilds-2JjMmN, @@ -87,7 +87,7 @@ Well that didn't work. Let's check what went wrong. Immediately we see the next } ``` -Wow what a difference that makes! The guild list suddenly ooks and feels a lot different from where we started and we've barely done anything. There's still that issue with the expanded folder backgrounds, so lets select that element and see what's going on. +Wow what a difference that makes! The guild list suddenly looks and feels a lot different from where we started and we've barely done anything. There's still that issue with the expanded folder backgrounds, so let's select that element and see what's going on. Ah looks like another `48px`, we can easily change that to `33px` to match. But what about `left`? Since that's an alignment, we'll have to scale that too. `12px` is `16.6667%` of `72px` so that's `8.333px` for our size, and we'll round down again to `8px` and see if that's enough. diff --git a/docs/themes/basics/selectors.md b/docs/themes/basics/selectors.md index a40cd43..4de9f3d 100644 --- a/docs/themes/basics/selectors.md +++ b/docs/themes/basics/selectors.md @@ -19,7 +19,7 @@ We touched on this a bit in [The Creative Process](./process.md) section, but we ### What is specificity? -Specificity determines what styles take precedence in order to style elements. It's like a race condition in traditional programming but in this case, instead of racing against another function over time, you're racing against another style over how specifically you are targeting a given element. The style with the the *most* specific selector wins. Unless there is a tie, in which case the one that __appears later in the document__ wins. This is a specific wording, not to be confused with the idea that the one added latest-in-time to the page wins. But rather, the one appears last in the DOM tree of the `document`. +Specificity determines what styles take precedence in order to style elements. It's like a race condition in traditional programming but in this case, instead of racing against another function over time, you're racing against another style over how specifically you are targeting a given element. The style with the *most* specific selector wins. Unless there is a tie, in which case the one that __appears later in the document__ wins. This is a specific wording, not to be confused with the idea that the one added latest-in-time to the page wins. But rather, the one appears last in the DOM tree of the `document`. ### Why do I need to know it? @@ -31,7 +31,7 @@ Understanding the *how* of specificity is a very complex subject that browsers h ### Examples -Rather than worrying about exact specificty calculations, let's try out a few examples to see if we can understand it a bit more conceptually. +Rather than worrying about exact specificity calculations, let's try out a few examples to see if we can understand it a bit more conceptually. #### Setup diff --git a/docs/themes/intermediate/transparency.md b/docs/themes/intermediate/transparency.md index 09f01e5..ff0b4d2 100644 --- a/docs/themes/intermediate/transparency.md +++ b/docs/themes/intermediate/transparency.md @@ -10,7 +10,7 @@ Making the Discord client transparent enough to have a background can actually t ## Desktop -If you want your theme to be transparent or transluscent to the desktop of your computer, it's very easy to support that. First, enable that option in BetterDiscord settings and restart. Then go to your theme and add +If you want your theme to be transparent or translucent to the desktop of your computer, it's very easy to support that. First, enable that option in BetterDiscord settings and restart. Then go to your theme and add ```css :root { diff --git a/docs/themes/intermediate/user.md b/docs/themes/intermediate/user.md index b4f7da7..b8f5c9a 100644 --- a/docs/themes/intermediate/user.md +++ b/docs/themes/intermediate/user.md @@ -87,7 +87,7 @@ h1 { } ``` -Since `red` is not a valid border size, the whole `border` property value is considered invalid. This can lead to misstyled or broken looking elements. An easy way around this is to double define your style. +Since `red` is not a valid border size, the whole `border` property value is considered invalid. This can lead to miss styled or broken looking elements. An easy way around this is to double define your style. ```css :root { diff --git a/docs/themes/introduction/environment.md b/docs/themes/introduction/environment.md index 16537b6..cd8ef27 100644 --- a/docs/themes/introduction/environment.md +++ b/docs/themes/introduction/environment.md @@ -11,11 +11,11 @@ The theming environment is a pretty open one when it comes to BetterDiscord them ### Discord's Variables -Discord uses a large number of CSS variables that determine the styling of the client. Themes are free to (and often do) override these variables for their own purposes. The names of the variables don't follow a specific naming convention nor do they have a prefix. You can see the live up to date list at any time in DevTools by scrolling up to the `:root` selector. In most cases, that is enough to see all the variables and their values for the current theme (light/dark). There are some small cases where a variable is set with a more specific selector, they have to be handled or overridden on a case-by-case basis. +Discord uses a large number of CSS variables that determine the styling of the client. Themes are free to (and often do) override these variables for their own purposes. The names of the variables don't follow a specific naming convention nor do they have a prefix. You can view the live, up-to-date list at any time in DevTools by scrolling up to the `:root` selector. In most cases, that is enough to see all the variables and their values for the current theme (light/dark). There are some small cases where a variable is set with a more specific selector, they have to be handled or overridden on a case-by-case basis. ### Your Variables -If you use any variables in your theme—and you should for the user's sake—then you should know that there is no automatic scoping by BetterDiscord for a theme's variables. That means if you use overly generic variables like `--link-color` it might conflict with the variable of another theme or even Discord's variables. Now you might think that themes are generally mutually exclusive so we shouldn't worry about variable collision. But users also often use CSS snippets or littel pieces of other themes that include variables that can collide. It's generally recommended to prefix your CSS variables with something unique to your theme. For example the [Nox](https://betterdiscord.app/theme/Nox) theme prefixes their variables with `nox-` so they have variables like `--nox-accent`. It's a good rule of thumb to follow. +If you use any variables in your theme—and you should for the user's sake—then you should know that there is no automatic scoping by BetterDiscord for a theme's variables. That means if you use overly generic variables like `--link-color` it might conflict with the variable of another theme or even Discord's variables. Now you might think that themes are generally mutually exclusive so we shouldn't worry about variable collision. But users also often use CSS snippets or little pieces of other themes that include variables that can collide. It's generally recommended to prefix your CSS variables with something unique to your theme. For example the [Nox](https://betterdiscord.app/theme/Nox) theme prefixes their variables with `nox-` so they have variables like `--nox-accent`. It's a good rule of thumb to follow. ## Class Name Conventions @@ -35,4 +35,4 @@ You can detect if a user has this enabled using a media query. See [MDN](https:/ ## Operating System -This is another important thing to keep in mind when developing a theme. The client does not have the exact same design and layout on the three major platforms. The most obvious difference between them is the titlebar and control buttons. A lesser known but also important difference is the settings panel. Windows has an extra settings tab compares to MacOS or Linux so the number of tabs varies across operating systems. This can affect themes attempting to add icons to the settings tabs. +This is another important thing to keep in mind when developing a theme. The client does not have the exact same design and layout on the three major platforms. The most obvious difference between them is the titlebar and control buttons. A lesser known but also important difference is the settings panel. Windows has an extra settings tab compares to macOS or Linux so the number of tabs varies across operating systems. This can affect themes attempting to add icons to the settings tabs. diff --git a/docs/themes/introduction/guidelines.md b/docs/themes/introduction/guidelines.md index 6c102a4..bda7c3b 100644 --- a/docs/themes/introduction/guidelines.md +++ b/docs/themes/introduction/guidelines.md @@ -22,7 +22,7 @@ These are guidelines that all themes are expected to abide by. Any themes that v - e.g. hiding potentially important actions, unreadable text contrast, use of harmful animations, and flashing text. 1. Do not target a specific user or group of users in a negative way (do not attempt to "ban" people). 1. Do not encourage users to further violate Discord's [Terms of Service](https://discord.com/terms), or promote content from outside of the official repository. -1. Try to maintain support for Discord's accessability features. +1. Try to maintain support for Discord's accessibility features. 1. Maintain performance on modern hardware. - This can be done by limiting the use of intensive animations, filters and effects. diff --git a/docs/users/getting-started/faq.md b/docs/users/getting-started/faq.md index 18ff21f..67ebdc6 100644 --- a/docs/users/getting-started/faq.md +++ b/docs/users/getting-started/faq.md @@ -23,7 +23,7 @@ No, the mobile versions of Discord work completely differently and are not compa ### Can I have multiple installations of BetterDiscord? -Yes you can. There can be one BetterDiscord installation per Discord installation. It is common to see people install BetterDiscord to both Canary and Stable. Settings are not sync'd between. +Yes you can. There can be one BetterDiscord installation per Discord installation. It is common to see people install BetterDiscord to both Canary and Stable. Settings are not synced between. ### How do I uninstall BetterDiscord? diff --git a/docs/users/getting-started/troubleshooting.md b/docs/users/getting-started/troubleshooting.md index 65c1468..12ea0d8 100644 --- a/docs/users/getting-started/troubleshooting.md +++ b/docs/users/getting-started/troubleshooting.md @@ -94,19 +94,19 @@ Your installer is out of date, please go to the [BetterDiscord website](https:// ::: -::: details ❌ EACCES: permission denied, mkdir", or any error where at "shims" there is a "mkdir" error +::: details ❌ EACCES: permission denied, mkdir or any error where at "shims" there is a "mkdir" error The Discord installation has been corrupted. Try to reinstall Discord. If Discord fails to reinstall or you still run into this error then your best bet is [cleanly uninstalling Discord](https://discordtips.com/how-to-fully-uninstall-discord/) then installing it again. ::: -::: details ❌ Cannot read property "hasOwnProperty" of undefined" error +::: details ❌ Cannot read property "hasOwnProperty" of undefined error -Fully close Discord. Fully deactivate any VPNs or firewalls. Make sure your installer is up to date. Then try again. If that still doesn't work, see the previous entry about cleanly removing and resinstalling Discord. +Fully close Discord. Fully deactivate any VPNs or firewalls. Make sure your installer is up to date. Then try again. If that still doesn't work, see the previous entry about cleanly removing and reinstalling Discord. ::: -::: details ❌ getaddrinfo ENOTFOUND api.github.com" +::: details ❌ getaddrinfo ENOTFOUND api.github.com Disable your antivirus or swap your DNS servers. There is a good guide to do the latter found here: https://www.ionos.com/digitalguide/server/configuration/how-to-change-dns-server/ :::