docs: huge migration to runtime asset cache

packages/docs/src/guides/buttons.md

@@ -0,0 +1,9 @@
+---
+order: 3
+title: Buttons
+description: Using button components
+---
+
+# Buttons
+
+todo

packages/docs/src/guides/embeds.md

@@ -0,0 +1,9 @@
+---
+order: 2
+title: Embeds
+description: Using embed components
+---
+
+# Embeds
+
+todo

packages/docs/src/guides/getting-started.md

@@ -0,0 +1,43 @@
+---
+order: 0
+title: Getting Started
+description: Learn how to get started with Reacord.
+---
+
+# Getting Started
+
+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.
+
+**Note:** Ensure your project has support for running code with JSX. I recommend using [esno](https://npm.im/esno).
+
+## Install
+
+```bash
+# npm
+npm install reacord discord.js
+
+# yarn
+yarn add reacord discord.js
+
+# pnpm
+pnpm add reacord discord.js
+```
+
+## 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/src/guides/guide-page.tsx

@@ -0,0 +1,34 @@
+import clsx from "clsx"
+import React from "react"
+import { AppLink } from "../navigation/app-link"
+import { guideLinks } from "../navigation/guide-links"
+import { MainNavigation } from "../navigation/main-navigation"
+import { docsProseClass, linkClass, maxWidthContainer } from "../ui/components"
+
+export default function GuidePage({ html }: { html: string }) {
+  return (
+    <>
+      <header className="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex">
+        <div className={maxWidthContainer}>
+          <MainNavigation />
+        </div>
+      </header>
+      <main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
+        <nav className="w-48 sticky top-24 hidden md:block">
+          <h2 className="text-2xl">Guides</h2>
+          <ul className="mt-3 flex flex-col gap-2 items-start">
+            {guideLinks.map((link) => (
+              <li key={link.to}>
+                <AppLink {...link} className={linkClass} />
+              </li>
+            ))}
+          </ul>
+        </nav>
+        <section
+          className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </main>
+    </>
+  )
+}

packages/docs/src/guides/select-menu.md

@@ -0,0 +1,8 @@
+---
+title: Select Menus
+description: Using select menu components
+---
+
+# Select Menus
+
+todo

packages/docs/src/guides/sending-messages.md

@@ -0,0 +1,78 @@
+---
+order: 1
+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.
+
+```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 [startTime] = useState(Date.now())
+  const [currentTime, setCurrentTime] = useState(Date.now())
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      currentTime(Date.now())
+    }, 3000)
+    return () => clearInterval(interval)
+  }, [])
+
+  return <>this message has been shown for {currentTime - startTime}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,
+})
+```
+
+## Discord Slash Commands
+
+<aside class="opacity-75 italic border-l-4 pl-3 border-white/50">
+This section also applies to other kinds of application commands, such as context menu commands.
+</aside>
+
+todo