initial getting started and sending messages pages

packages/docs/app/components/header-layout.tsx

@@ -14,12 +14,12 @@ export function HeaderLayout({
       <header
         className={clsx(
           isScrolled ? "bg-slate-700/30" : "bg-slate-800",
-          "shadow-md sticky top-0 py-3 backdrop-blur-sm transition z-10",
+          "shadow-md sticky top-0 py-3 backdrop-blur-sm transition z-10 h-16 flex",
         )}
       >
-        <div className="m-auto max-w-screen-lg px-6">{header}</div>
+        <div className="m-auto w-full max-w-screen-lg px-6">{header}</div>
       </header>
-      <div className="m-auto max-w-screen-lg px-6 mt-6">{body}</div>
+      <div className="m-auto max-w-screen-lg px-6 mt-8">{body}</div>
     </div>
   )
 }

packages/docs/app/components/side-nav.tsx

@@ -8,8 +8,8 @@ export function SideNav({
   children: ReactNode
 }) {
   return (
-    <nav className="w-64 sticky top-0">
+    <nav>
-      <h2 className="text-2xl mt-1">{heading}</h2>
+      <h2 className="text-2xl">{heading}</h2>
       <div className="mt-3 flex flex-col gap-2 items-start">{children}</div>
     </nav>
   )

packages/docs/app/components/sidebar-layout.tsx

@@ -1,5 +1,4 @@
 import type { ReactNode } from "react"
-import { useEffect, useRef, useState } from "react"
 
 export function SidebarLayout({
   sidebar,
@@ -8,19 +7,10 @@ export function SidebarLayout({
   sidebar: ReactNode
   body: ReactNode
 }) {
-  const [offsetTop, setOffsetTop] = useState(0)
-  const sidebarRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    setOffsetTop(sidebarRef.current?.offsetTop ?? 0)
-  }, [sidebarRef])
-
   return (
     <div className="flex items-start gap-6">
-      <div className="w-64 sticky" style={{ top: offsetTop }} ref={sidebarRef}>
+      <div className="w-64 sticky top-24">{sidebar}</div>
-        {sidebar}
+      <div className="flex-1 min-w-0">{body}</div>
-      </div>
-      <div className="flex-1">{body}</div>
     </div>
   )
 }

packages/docs/app/prism-theme.css

@@ -16,7 +16,7 @@ pre[class*="language-"] {
   word-spacing: normal;
   word-break: normal;
   word-wrap: normal;
-  line-height: 1.5;
+  line-height: 1.7;
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
@@ -124,3 +124,10 @@ pre[class*="language-"] {
 .token.entity {
   cursor: help;
 }
+
+.code-line.highlight-line {
+  background-color: rgba(255, 255, 255, 0.08);
+  padding: 0 1rem;
+  margin: 0 -1rem;
+  display: block;
+}

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
+**Note:** Ensure your project has support for running code with JSX. I recommend using [esno](https://npm.im/esno).
-- then do another thing
 
-## here's a code block
+## Install
 
-```tsx
+```bash
-import React from "react"
+# npm
+npm install reacord discord.js
 
-function Counter() {
+# yarn
-  const [count, setCount] = useState(0)
+yarn add reacord discord.js
-  return (
+
-    <>
+# pnpm
-      You clicked {count} times
+pnpm add reacord discord.js
-      <Button onClick={() => setCount(count + 1)}>Click me</Button>
-    </>
-  )
-}
 ```
 
-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,
+})
+```

packages/docs/app/styles.ts

@@ -13,6 +13,8 @@ export const docsProseClass = clsx`
   prose-h2:font-light
   prose-h3:font-light
   prose-p:my-4
-  prose-pre:text-[15px] prose-pre:font-monospace
+  prose-a:font-medium prose-a:text-emerald-400 hover:prose-a:no-underline
+  prose-strong:font-medium prose-strong:text-emerald-400
+  prose-pre:text-[15px] prose-pre:font-monospace prose-pre:overflow-x-auto
   max-w-none
 `

todo.md

@@ -34,8 +34,13 @@
 - docs
   - [x] core layout and styling
   - [ ] mobile nav: at a breakpoint, remove all desktop navigation and use a drawer w/ a floating menu button on the bottom right
+  - [ ] each page should have a link at the bottom to the previous and next pages
   - guides
-    - [ ] getting started
+    - [x] getting started / setup
+    - instances
+      - [x] sending channel messages
+      - [ ] sending command replies
+      - [x] cleaning up instances
     - [ ] embeds
     - [ ] buttons and links
     - [ ] select menus