initial getting started and sending messages pages

packages/docs/app/routes/docs.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import type { LoaderFunction } from "remix"
 import { Link, Outlet, useLoaderData } from "remix"
 import { HeaderLayout } from "~/components/header-layout"
@@ -32,7 +33,7 @@ export default function Docs() {
             </SideNav>
           }
           body={
-            <section className={docsProseClass}>
+            <section className={clsx(docsProseClass, "pb-8")}>
               <Outlet />
             </section>
           }

packages/docs/app/routes/docs/guides/getting-started.md

@@ -7,25 +7,38 @@ meta:
 
 # Getting Started
 
-welcome
+This guide assumes some familiarity with JavaScript, [React](https://reactjs.org), [Discord.js](https://discord.js.org) and the [Discord API](https://discord.dev). Keep these pages as reference if you need it.
 
-- install it and do the thing
-- then do another thing
+**Note:** Ensure your project has support for running code with JSX. I recommend using [esno](https://npm.im/esno).
 
-## here's a code block
+## Install
 
-```tsx
-import React from "react"
+```bash
+# npm
+npm install reacord discord.js
 
-function Counter() {
-  const [count, setCount] = useState(0)
-  return (
-    <>
-      You clicked {count} times
-      <Button onClick={() => setCount(count + 1)}>Click me</Button>
-    </>
-  )
-}
+# yarn
+yarn add reacord discord.js
+
+# pnpm
+pnpm add reacord discord.js
 ```
 
-yeah
+## Setup
+
+Create a Discord.js client and a Reacord instance:
+
+```js
+// main.js
+import { Client } from "discord.js"
+import { ReacordDiscordJs } from "reacord"
+
+const client = new Client()
+const reacord = new ReacordDiscordJs(client)
+
+client.on("ready", () => {
+  console.log("Ready!")
+})
+
+await client.login(process.env.BOT_TOKEN)
+```

packages/docs/app/routes/docs/guides/sending-messages.md

@@ -0,0 +1,79 @@
+---
+order: 1
+meta:
+  title: Sending Messages
+  description: Sending messages by creating Reacord instances
+---
+
+# Sending Messages with Instances
+
+You can send messages via Reacord to a channel like so.
+
+<details>
+  <summary>In case you're unaware, click here to see how to get a channel ID.</summary>
+
+1. Enable "Developer Mode" in your Discord client settings.
+   ![Enabling developer mode](/images/developer-mode.png)
+1. Right click any channel, and select "Copy ID".
+![Copying the channel ID](/images/copy-channel-id.png)
+</details>
+
+```jsx
+const channelId = "abc123deadbeef"
+
+client.on("ready", () => {
+  reacord.send(channelId, "Hello, world!")
+})
+```
+
+The `.send()` function creates a **Reacord instance**. You can pass strings, numbers, or anything that can be rendered by React, such as JSX!
+
+Components rendered through this instance can include state and effects, and the message on Discord will update automatically.
+
+```jsx
+function Uptime() {
+  const [uptime, setUptime] = useState(0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setUptime(Date.now())
+    }, 3000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return <>this message has been shown for {uptime}ms</>
+}
+
+client.on("ready", () => {
+  reacord.send(channelId, <Uptime />)
+})
+```
+
+The instance can be rendered to multiple times, which will update the message each time.
+
+```jsx
+const Hello = ({ subject }) => <>Hello, {subject}!</>
+
+client.on("ready", () => {
+  const instance = reacord.send(channel)
+  instance.render(<Hello subject="World" />)
+  instance.render(<Hello subject="Moon" />)
+})
+```
+
+## Cleaning Up Instances
+
+If you no longer want to use the instance, you can clean it up in a few ways:
+
+- `instance.destroy()` - This will remove the message.
+- `instance.deactivate()` - This will keep the message, but it will disable the components on the message, and no longer listen to user interactions.
+
+By default, Reacord has a max limit on the number of active instances, and deactivates older instances to conserve memory. This can be configured through the Reacord options:
+
+```js
+const reacord = new ReacordDiscordJs(client, {
+  // after sending four messages,
+  // the first one will be deactivated
+  maxInstances: 3,
+})
+```