diff --git a/src/content/docs/dev/setup.md b/src/content/docs/dev/setup.md index 23f0b69..b128ba8 100644 --- a/src/content/docs/dev/setup.md +++ b/src/content/docs/dev/setup.md @@ -31,6 +31,7 @@ moonlight is split into a [pnpm workspace](https://pnpm.io/workspaces). The proj - loads extensions and installs their Webpack modules and patches - `core-extensions`: built-in extensions that come with every moonlight install, mostly libraries - `types`: types for moonlight's core, core extensions, and extension manifests/exports +- `browser`: the entrypoint for the [browser extension](/using/install#browser) ## Build system diff --git a/src/content/docs/ext-dev/cookbook.md b/src/content/docs/ext-dev/cookbook.md new file mode 100644 index 0000000..afb402b --- /dev/null +++ b/src/content/docs/ext-dev/cookbook.md @@ -0,0 +1,62 @@ +--- +title: Cookbook +description: Common patterns when writing extensions +sidebar: + order: 10 +--- + +## Exporting styles + +```ts title="index.ts" +export const styles: string[] = [ + `.alert { + color: red; + }` +]; +``` + +## Using mappings + +In this case, the Flux dispatcher. Import types may be wrong in some scenarios (try `import * as Something` or `import { Something }` if you get errors, and let us know!). + +```ts title="index.ts" +export const webpackModules: Record = { + something: { + dependencies: [ + { + id: "discord/Dispatcher" + } + ] + } +}; +``` + +```ts title="webpackModules/something.ts" +import Dispatcher from "@moonlight-mod/wp/discord/Dispatcher"; + +Dispatcher.subscribe("MESSAGE_CREATE", (data) => { + console.log(data); +}); +``` + +## Custom React component + +```ts name="index.ts" +export const webpackModules: Record = { + element: { + dependencies: [ + { + id: "react" + } + ] + } +}; +``` + +```ts name="webpackModules/element.ts" +import React from "@moonlight-mod/wp/react"; + +export default function MyElement() { + return Hello, world!; +} +``` diff --git a/src/content/docs/ext-dev/devtools.md b/src/content/docs/ext-dev/devtools.md index a4647fe..80d3f6c 100644 --- a/src/content/docs/ext-dev/devtools.md +++ b/src/content/docs/ext-dev/devtools.md @@ -1,5 +1,6 @@ --- title: Using DevTools +description: The Chrome DevTools is a panel/window that offers several utilities for web development. Normally, it is intended for the creators of the target application, but it also serves as an excellent tool for client modders. sidebar: order: 8 --- diff --git a/src/content/docs/ext-dev/esm-webpack-modules.md b/src/content/docs/ext-dev/esm-webpack-modules.md index dd0e6fe..6fbee4f 100644 --- a/src/content/docs/ext-dev/esm-webpack-modules.md +++ b/src/content/docs/ext-dev/esm-webpack-modules.md @@ -1,5 +1,6 @@ --- title: ESM Webpack modules +description: Instead of embedding a Webpack module as a function in your extension, you can create a separate file that gets loaded by moonlight. sidebar: order: 4 --- diff --git a/src/content/docs/ext-dev/helpful-exts.md b/src/content/docs/ext-dev/helpful-exts.md index bd32cc7..d533c87 100644 --- a/src/content/docs/ext-dev/helpful-exts.md +++ b/src/content/docs/ext-dev/helpful-exts.md @@ -1,11 +1,10 @@ --- title: Helpful extensions +description: This is a list of helpful extensions that can be used to aid extension development. sidebar: order: 2 --- -This is a list of helpful extensions that can be used to aid extension development. - ## Config options These aren't extensions, but rather options in the moonlight config: diff --git a/src/content/docs/ext-dev/mappings.md b/src/content/docs/ext-dev/mappings.md index 66aa05b..cef7869 100644 --- a/src/content/docs/ext-dev/mappings.md +++ b/src/content/docs/ext-dev/mappings.md @@ -1,5 +1,6 @@ --- title: Mappings +description: moonlight uses mappings that automatically rename Webpack modules for you. sidebar: order: 7 --- diff --git a/src/content/docs/ext-dev/migrating-api-levels.md b/src/content/docs/ext-dev/migrating-api-levels.md index 040acf5..bf1fa68 100644 --- a/src/content/docs/ext-dev/migrating-api-levels.md +++ b/src/content/docs/ext-dev/migrating-api-levels.md @@ -1,5 +1,6 @@ --- title: Migrating API levels +description: When a moonlight API level increases, all extensions with a different API level will refuse to load. sidebar: order: 9 --- diff --git a/src/content/docs/ext-dev/official-repository.md b/src/content/docs/ext-dev/official-repository.md index 8ecfa96..4e3a2af 100644 --- a/src/content/docs/ext-dev/official-repository.md +++ b/src/content/docs/ext-dev/official-repository.md @@ -1,5 +1,6 @@ --- title: Submitting to the official repository +description: While moonlight allows you to use custom repositories from URLs, it comes with an official repository built in. sidebar: order: 3 --- diff --git a/src/content/docs/ext-dev/pitfalls.md b/src/content/docs/ext-dev/pitfalls.md index db52361..1e0a6aa 100644 --- a/src/content/docs/ext-dev/pitfalls.md +++ b/src/content/docs/ext-dev/pitfalls.md @@ -1,11 +1,10 @@ --- title: Pitfalls +description: There are some important pitfalls you may encounter when writing moonlight extensions. sidebar: order: 5 --- -There are some important pitfalls you may encounter when writing moonlight extensions. - ## Web vs Node.js Because of the Electron process model, extensions have two entrypoints: one on the web side (where the actual Discord app runs) and one on the Node.js side (where DiscordNative and such live). diff --git a/src/content/docs/ext-dev/webpack.md b/src/content/docs/ext-dev/webpack.md index 7feef40..75074c4 100644 --- a/src/content/docs/ext-dev/webpack.md +++ b/src/content/docs/ext-dev/webpack.md @@ -1,5 +1,6 @@ --- title: Webpack modules & patching +description: Information about the core of moonlight's mod system sidebar: order: 6 --- diff --git a/src/content/docs/using/install.md b/src/content/docs/using/install.md index f216e4c..9f85941 100644 --- a/src/content/docs/using/install.md +++ b/src/content/docs/using/install.md @@ -1,15 +1,25 @@ --- title: Installation +description: How to install, build, and use moonlight sidebar: order: 1 --- There are two ways to install moonlight: through an experimental GUI installer, or manually building it yourself. If you do not plan to develop on the moonlight codebase itself, it is suggested to use the installer. -## moonlight-installer +## moonlight installer The moonlight [installer](https://github.com/moonlight-mod/moonlight-installer) automates the installation process for you. To use it, [download](https://github.com/moonlight-mod/moonlight-installer/releases/latest) and run the installer, download moonlight through it, and then patch a Discord installation. Discord installations are autodetected on your machine. +## moonlight-cli + +A [command line installer](https://github.com/moonlight-mod/moonlight-installer/main/crates/moonlight-cli) can be compiled from source manually and used to patch moonlight: + +```shell +moonlight-cli install stable +moonlight-cli patch /path/to/discord/executable +``` + ## Manual installations - [Build moonlight](/dev/setup). @@ -49,3 +59,7 @@ moonlight optionally runs in the browser. To use it, [build moonlight](/dev/setu The output extension will be at `dist/browser`. Chrome users can check "Developer mode" and click "Load unpacked" in `chrome://extensions`, and Firefox users can click "Load Temporary Add-on" in `about:debugging`. Browser support is experimental and may be unreliable. Developing extensions or using custom repositories is not supported with the browser extension. + +## rocketship + +Linux users can install a custom Discord build with [rocketship](https://github.com/moonlight-mod/rocketship) and then install moonlight into it. Enable the rocketship extension after installation.