Docs changes

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
 

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<string, ExtensionWebpackModule> = {
+  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<string, ExtensionWebpackModule> = {
+  element: {
+    dependencies: [
+      {
+        id: "react"
+      }
+    ]
+  }
+};
+```
+
+```ts name="webpackModules/element.ts"
+import React from "@moonlight-mod/wp/react";
+
+export default function MyElement() {
+  return <span>Hello, world!</span>;
+}
+```

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
 ---

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
 ---

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:

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
 ---

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
 ---

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
 ---

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).

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
 ---

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.