release v0.3.3

to properly kill the process

.eslintrc.json

@@ -5,7 +5,8 @@
     "**/.cache/**",
     "**/build/**",
     "**/dist/**",
-    "**/coverage/**"
+    "**/coverage/**",
+    "**/public/**"
   ],
   "parserOptions": {
     "project": "./tsconfig.base.json"
@@ -13,5 +14,13 @@
   "rules": {
     "import/no-unused-modules": "off",
     "unicorn/prevent-abbreviations": "off"
+  },
+  "overrides": [
+    {
+      "files": ["packages/website/cypress/**"],
+      "parserOptions": {
+        "project": "./packages/website/cypress/tsconfig.json"
       }
+    }
+  ]
 }

.github/workflows/deploy-website.yml

@@ -1,9 +1,10 @@
-name: deploy docs
+name: deploy website
 on:
   push:
     branches: [main]
-    paths: [packages/docs/**, reacord/library/**/*.ts]
+    paths:
-
+      - "packages/website/**"
+      - "reacord/library/**/*.{ts,tsx}"
 jobs:
   deploy:
     runs-on: ubuntu-latest

.github/workflows/main.yml

@@ -11,20 +11,24 @@ env:
   TEST_GUILD_ID: ${{ secrets.TEST_GUILD_ID }}
 
 jobs:
-  run-scripts:
+  run-commands:
     strategy:
-      matrix:
-        scripts:
-          - name: test
-            script: coverage
-          - name: lint
-            script: lint
-          - name: typecheck
-            script: typecheck
-          - name: build
-            script: build
       fail-fast: false
-    name: ${{ matrix.scripts.name }}
+      matrix:
+        command:
+          # if these run in the same process, it dies,
+          # so we test them separate
+          - name: test reacord
+            run: pnpm test -C packages/reacord
+          - name: test website
+            run: pnpm test -C packages/website
+          - name: build
+            run: pnpm build --recursive
+          - name: lint
+            run: pnpm lint
+          - name: typecheck
+            run: pnpm typecheck --parallel
+    name: ${{ matrix.command.name }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -34,4 +38,4 @@ jobs:
           node-version: "16"
       - run: npm i -g pnpm
       - run: pnpm install --frozen-lockfile
-      - run: pnpm run --recursive ${{ matrix.scripts.script }}
+      - run: ${{ matrix.command.run }}

Dockerfile

@@ -1,5 +1,7 @@
 FROM node:lts-slim
 
+ENV CYPRESS_INSTALL_BINARY=0
+
 WORKDIR /app
 
 COPY / ./
@@ -7,7 +9,7 @@ RUN ls -R
 
 RUN npm install -g pnpm
 RUN pnpm install --unsafe-perm --frozen-lockfile
-RUN pnpm build -C packages/docs
+RUN pnpm run build -C packages/website
-RUN pnpm install --prod --unsafe-perm --frozen-lockfile
 
-CMD [ "pnpm", "start", "-C", "packages/docs" ]
+ENV NODE_ENV=production
+CMD [ "pnpm", "-C", "packages/website", "start" ]

README.md

@@ -1,7 +1,23 @@
 # reacord
+Create interactive Discord messages using React!
 
-Create interactive Discord messages using React! [Visit the docs to get started.](https://reacord.fly.dev/guides/getting-started)
+## Installation
+```console
+# npm
+npm install reacord react discord.js
 
+# yarn
+yarn add reacord react discord.js
+
+# pnpm
+pnpm add reacord react discord.js
+
+```
+
+## Get Started
+[Visit the docs to get started.](https://reacord.fly.dev/guides/getting-started)
+
+## Example
 <!-- prettier-ignore -->
 ```tsx
 import * as React from "react"
@@ -21,3 +37,5 @@ function Counter() {
   )
 }
 ```
+
+![Counter demo](./reacord-counter-demo.gif)

package.json

@@ -9,16 +9,16 @@
     "@itsmapleleaf/configs": "^1.1.2"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.8.1",
+    "@typescript-eslint/eslint-plugin": "^5.9.1",
-    "@typescript-eslint/parser": "^5.8.1",
+    "@typescript-eslint/parser": "^5.9.1",
-    "eslint": "^8.5.0",
+    "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-unicorn": "^39.0.0",
+    "eslint-plugin-unicorn": "^40.0.0",
     "prettier": "^2.5.1",
     "typescript": "^4.5.4"
   },

packages/docs/.gitignore

@@ -1,3 +0,0 @@
-.asset-cache
-node_modules
-/api

packages/docs/package.json

@@ -1,65 +0,0 @@
-{
-  "name": "reacord-docs-new",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "prepare": "node ./scripts/fix-heroicons.js",
-    "serve": "esmo --experimental-import-meta-resolve --experimental-json-modules --no-warnings --enable-source-maps src/main.tsx | pino-colada",
-    "dev": "npm-run-all --parallel --print-label --race dev-*",
-    "dev-server": "nodemon --inspect --exec \"pnpm serve\" --watch src --ext ts,tsx,md,css",
-    "dev-docs": "typedoc --watch",
-    "build": "typedoc",
-    "start": "cross-env NODE_ENV=production pnpm serve",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@heroicons/react": "^1.0.5",
-    "@tailwindcss/typography": "^0.5.0",
-    "alpinejs": "^3.7.1",
-    "autoprefixer": "^10.4.1",
-    "clsx": "^1.1.1",
-    "compression": "^1.7.4",
-    "cross-env": "^7.0.3",
-    "cssnano": "^5.0.15",
-    "esbuild": "^0.14.10",
-    "esno": "^0.13.0",
-    "express": "^4.17.2",
-    "express-promise-router": "^4.1.1",
-    "fast-glob": "^3.2.7",
-    "gray-matter": "^4.0.3",
-    "http-terminator": "^3.0.4",
-    "markdown-it": "^12.3.0",
-    "markdown-it-prism": "^2.2.1",
-    "pino": "^7.6.2",
-    "pino-colada": "^2.2.2",
-    "pino-http": "^6.5.0",
-    "postcss": "^8.4.5",
-    "reacord": "workspace:*",
-    "react": "^18.0.0-rc.0",
-    "react-dom": "^18.0.0-rc.0",
-    "react-ssr-prepass": "^1.5.0",
-    "tailwindcss": "^3.0.8"
-  },
-  "devDependencies": {
-    "@types/browser-sync": "^2.26.3",
-    "@types/compression": "^1.7.2",
-    "@types/cssnano": "^5.0.0",
-    "@types/express": "^4.17.13",
-    "@types/markdown-it": "^12.2.3",
-    "@types/node": "*",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.9",
-    "@types/tailwindcss": "^3.0.0",
-    "@types/wait-on": "^5.3.1",
-    "browser-sync": "^2.27.7",
-    "execa": "^6.0.0",
-    "nodemon": "^2.0.15",
-    "npm-run-all": "^4.1.5",
-    "rxjs": "^7.5.1",
-    "tsup": "^5.11.10",
-    "type-fest": "^2.8.0",
-    "typedoc": "^0.22.10",
-    "typescript": "^4.5.4",
-    "wait-on": "^6.0.0"
-  }
-}

packages/docs/postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

packages/docs/scripts/fix-heroicons.js

@@ -1,15 +0,0 @@
-// heroicons doesn't have "sideEffects": false in it's package json,
-// which causes esbuild to bundle in 460+ imports of react for some reason,
-// which causes memory issues
-import glob from "fast-glob"
-import { readFile, writeFile } from "node:fs/promises"
-
-const files = await glob("node_modules/@heroicons/react/**/*.json", {
-  absolute: true,
-})
-
-for (const file of files) {
-  const data = JSON.parse(await readFile(file, "utf8"))
-  data.sideEffects = false
-  await writeFile(file, JSON.stringify(data, undefined, 2))
-}

packages/docs/src/asset-builder/asset-builder-context.tsx

@@ -1,10 +0,0 @@
-import { createContext, useContext } from "react"
-import type { AssetBuilder } from "../asset-builder/asset-builder.js"
-import { raise } from "../helpers/raise.js"
-
-const Context = createContext<AssetBuilder>()
-
-export const AssetBuilderProvider = Context.Provider
-
-export const useAssetBuilder = () =>
-  useContext(Context) ?? raise("AssetBuilderProvider not found")

packages/docs/src/asset-builder/asset-builder.tsx

@@ -1,96 +0,0 @@
-import type { RequestHandler } from "express"
-import express from "express"
-import { createHash } from "node:crypto"
-import { mkdir, rm } from "node:fs/promises"
-import { join, parse } from "node:path"
-import React from "react"
-import { renderToStaticMarkup } from "react-dom/server"
-import ssrPrepass from "react-ssr-prepass"
-import type { Promisable } from "type-fest"
-import { ensureWrite, normalizeAsFilePath } from "../helpers/filesystem.js"
-import { AssetBuilderProvider } from "./asset-builder-context.js"
-
-export type AssetTransformer<Asset> = {
-  transform: (context: AssetTransformContext) => Promise<Asset>
-}
-
-export class AssetBuilder {
-  private constructor(private cacheFolder: string) {}
-
-  static async create(cacheFolder: string) {
-    if (process.env.NODE_ENV !== "production") {
-      await rm(cacheFolder, { recursive: true }).catch(() => {})
-    }
-    await mkdir(cacheFolder, { recursive: true })
-    return new AssetBuilder(cacheFolder)
-  }
-
-  async build<Asset>(
-    input: Promisable<string | URL>,
-    transformer: AssetTransformer<Asset>,
-    alias?: string,
-  ): Promise<Asset> {
-    const inputFile = normalizeAsFilePath(await input)
-    // TODO: cache assets by inputFile in production
-
-    return transformer.transform(
-      new AssetTransformContext({
-        inputFile,
-        cacheFolder: this.cacheFolder,
-        alias: alias || parse(inputFile).name,
-      }),
-    )
-  }
-
-  async render(element: React.ReactElement) {
-    element = (
-      <AssetBuilderProvider value={this}>
-        <React.Suspense fallback={<></>}>{element}</React.Suspense>
-      </AssetBuilderProvider>
-    )
-    await ssrPrepass(element)
-    return `<!DOCTYPE html>\n${renderToStaticMarkup(element)}`
-  }
-
-  middleware(): RequestHandler {
-    return express.static(this.cacheFolder, {
-      immutable: true,
-      maxAge: "1y",
-    })
-  }
-}
-
-export type AssetTransformOptions = {
-  inputFile: string
-  cacheFolder: string
-  alias: string
-}
-
-export class AssetTransformContext {
-  constructor(private options: AssetTransformOptions) {}
-
-  get inputFile() {
-    return this.options.inputFile
-  }
-
-  get cacheFolder() {
-    return this.options.cacheFolder
-  }
-
-  get alias() {
-    return this.options.alias
-  }
-
-  getOutputFileName(content: string) {
-    const { ext } = parse(this.inputFile)
-    const hash = createHash("sha256").update(content).digest("hex").slice(0, 8)
-    return `${this.alias}.${hash}${ext}`
-  }
-
-  async writeOutputFile(content: string) {
-    const outputFileName = this.getOutputFileName(content)
-    const outputFile = join(this.cacheFolder, outputFileName)
-    await ensureWrite(outputFile, content)
-    return { outputFileName, outputFile }
-  }
-}

packages/docs/src/asset-builder/asset.tsx

@@ -1,75 +0,0 @@
-import type { ReactNode } from "react";
-import React from "react"
-import { normalizeAsFilePath } from "../helpers/filesystem.js"
-import { useAssetBuilder } from "./asset-builder-context.js"
-import type { AssetBuilder, AssetTransformer } from "./asset-builder.js"
-
-type AssetState =
-  | { status: "building"; promise: Promise<unknown> }
-  | { status: "built"; asset: unknown }
-
-const cache = new Map<string, AssetState>()
-
-function useAssetBuild<Asset>(
-  cacheKey: string,
-  build: (builder: AssetBuilder) => Promise<Asset>,
-) {
-  const builder = useAssetBuilder()
-
-  const state = cache.get(cacheKey)
-  if (!state) {
-    const promise = build(builder).then((asset) => {
-      cache.set(cacheKey, { status: "built", asset })
-    })
-
-    cache.set(cacheKey, { status: "building", promise })
-    throw promise
-  }
-
-  if (state.status === "building") {
-    throw state.promise
-  }
-
-  return state.asset as Asset
-}
-
-export function LocalFileAsset<Asset>({
-  from,
-  using: transformer,
-  as: alias,
-  children,
-}: {
-  from: string | URL
-  using: AssetTransformer<Asset>
-  as?: string
-  children: (url: Asset) => ReactNode
-}) {
-  const inputFile = normalizeAsFilePath(from)
-
-  const asset = useAssetBuild(inputFile, (builder) => {
-    return builder.build(inputFile, transformer, alias)
-  })
-
-  return <>{children(asset)}</>
-}
-
-export function ModuleAsset<Asset>({
-  from,
-  using: transformer,
-  as: name,
-  children,
-}: {
-  from: string
-  using: AssetTransformer<Asset>
-  as?: string
-  children: (url: Asset) => ReactNode
-}) {
-  const cacheKey = `node:${from}`
-
-  const asset = useAssetBuild(cacheKey, async (builder) => {
-    const inputFile = await import.meta.resolve!(from)
-    return await builder.build(inputFile, transformer, name)
-  })
-
-  return <>{children(asset)}</>
-}

packages/docs/src/asset-builder/markdown-transformer.ts

@@ -1,29 +0,0 @@
-import grayMatter from "gray-matter"
-import MarkdownIt from "markdown-it"
-import prism from "markdown-it-prism"
-import { readFile } from "node:fs/promises"
-import type { AssetTransformer } from "./asset-builder.jsx"
-
-const renderer = new MarkdownIt({
-  html: true,
-  linkify: true,
-}).use(prism)
-
-export type MarkdownAsset = {
-  content: { __html: string }
-  data: Record<string, any>
-}
-
-export const markdownTransformer: AssetTransformer<MarkdownAsset> = {
-  async transform(context) {
-    const { data, content } = grayMatter(
-      await readFile(context.inputFile, "utf8"),
-    )
-    const html = renderer.render(content)
-
-    return {
-      content: { __html: html },
-      data,
-    }
-  },
-}

packages/docs/src/asset-builder/script-transformer.ts

@@ -1,26 +0,0 @@
-import { build } from "esbuild"
-import type { AssetTransformer } from "./asset-builder.jsx"
-
-type ScriptAsset = {
-  url: string
-}
-
-export const scriptTransformer: AssetTransformer<ScriptAsset> = {
-  async transform(context) {
-    const scriptBuild = await build({
-      entryPoints: [context.inputFile],
-      bundle: true,
-      target: ["chrome89", "firefox89"],
-      format: "esm",
-      write: false,
-      minify: process.env.NODE_ENV === "production",
-    })
-
-    const content = scriptBuild.outputFiles[0]!.text
-    const { outputFileName } = await context.writeOutputFile(content)
-
-    return {
-      url: "/" + outputFileName,
-    }
-  },
-}

packages/docs/src/asset-builder/stylesheet-transformer.ts

@@ -1,26 +0,0 @@
-import autoprefixer from "autoprefixer"
-import cssnano from "cssnano"
-import { readFile } from "node:fs/promises"
-import type { AcceptedPlugin } from "postcss"
-import postcss from "postcss"
-import tailwindcss from "tailwindcss"
-import type { AssetTransformer } from "./asset-builder.jsx"
-
-export type StylesheetAsset = { url: string }
-
-export const stylesheetTransformer: AssetTransformer<StylesheetAsset> = {
-  async transform(context) {
-    const plugins: AcceptedPlugin[] = [tailwindcss, autoprefixer]
-    if (process.env.NODE_ENV === "production") {
-      plugins.push(cssnano)
-    }
-
-    const result = await postcss(plugins).process(
-      await readFile(context.inputFile),
-      { from: context.inputFile },
-    )
-
-    const { outputFileName } = await context.writeOutputFile(result.css)
-    return { url: "/" + outputFileName }
-  },
-}

packages/docs/src/constants.ts

@@ -1,7 +0,0 @@
-import { join } from "node:path"
-
-const projectRoot = new URL("../", import.meta.url).pathname
-
-export function fromProjectRoot(...subPaths: string[]) {
-  return join(projectRoot, ...subPaths)
-}

packages/docs/src/dom/external-link.tsx

@@ -1,10 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react"
-import React from "react"
-
-export function ExternalLink(props: ComponentPropsWithoutRef<"a">) {
-  return (
-    <a target="_blank" rel="noopener noreferrer" {...props}>
-      {props.children}
-    </a>
-  )
-}

packages/docs/src/guides/guide-page.tsx

@@ -1,56 +0,0 @@
-import clsx from "clsx"
-import React from "react"
-import { LocalFileAsset } from "../asset-builder/asset.js"
-import { markdownTransformer } from "../asset-builder/markdown-transformer.js"
-import { Html } from "../html.js"
-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 function GuidePage({ url }: { url: string }) {
-  return (
-    <LocalFileAsset
-      from={new URL(`${url}.md`, import.meta.url)}
-      using={markdownTransformer}
-    >
-      {(asset) => (
-        <Html title={asset.data.title} description={asset.data.description}>
-          <Header />
-          <Body content={asset.content} />
-        </Html>
-      )}
-    </LocalFileAsset>
-  )
-}
-
-function Header() {
-  return (
-    <header className="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex">
-      <div className={maxWidthContainer}>
-        <MainNavigation />
-      </div>
-    </header>
-  )
-}
-
-function Body({ content }: { content: { __html: string } }) {
-  return (
-    <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={content}
-      />
-    </main>
-  )
-}

packages/docs/src/helpers/filesystem.ts

@@ -1,11 +0,0 @@
-import { mkdir, writeFile } from "node:fs/promises"
-import { dirname } from "node:path"
-
-export async function ensureWrite(file: string, content: string) {
-  await mkdir(dirname(file), { recursive: true })
-  await writeFile(file, content)
-}
-
-export function normalizeAsFilePath(file: string | URL) {
-  return new URL(file, "file:").pathname
-}

packages/docs/src/helpers/markdown.ts

@@ -1,15 +0,0 @@
-import grayMatter from "gray-matter"
-import MarkdownIt from "markdown-it"
-import prism from "markdown-it-prism"
-import { readFile } from "node:fs/promises"
-
-const renderer = new MarkdownIt({
-  html: true,
-  linkify: true,
-}).use(prism)
-
-export async function renderMarkdownFile(filePath: string) {
-  const { data, content } = grayMatter(await readFile(filePath, "utf8"))
-  const html = renderer.render(content)
-  return { html, data }
-}

packages/docs/src/html.tsx

@@ -1,70 +0,0 @@
-import packageJson from "reacord/package.json"
-import type { ReactNode } from "react"
-import React from "react"
-import { LocalFileAsset, ModuleAsset } from "./asset-builder/asset.js"
-import { scriptTransformer } from "./asset-builder/script-transformer.js"
-import { stylesheetTransformer } from "./asset-builder/stylesheet-transformer.js"
-
-export function Html({
-  title: titleProp,
-  description = packageJson.description,
-  children,
-}: {
-  title?: string
-  description?: string
-  children: ReactNode
-}) {
-  const title = [titleProp, "Reacord"].filter(Boolean).join(" | ")
-  return (
-    <html lang="en" className="bg-slate-900 text-slate-100">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <meta name="description" content={description} />
-
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin=""
-        />
-        <link
-          rel="preload"
-          as="style"
-          href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
-        />
-
-        <ModuleAsset
-          from="tailwindcss/tailwind.css"
-          using={stylesheetTransformer}
-        >
-          {(asset) => <link rel="stylesheet" href={asset.url} />}
-        </ModuleAsset>
-
-        <LocalFileAsset
-          from={new URL("ui/prism-theme.css", import.meta.url)}
-          using={stylesheetTransformer}
-        >
-          {(asset) => <link rel="stylesheet" href={asset.url} />}
-        </LocalFileAsset>
-        <LocalFileAsset
-          from={new URL("ui/markdown.css", import.meta.url)}
-          using={stylesheetTransformer}
-        >
-          {(asset) => <link rel="stylesheet" href={asset.url} />}
-        </LocalFileAsset>
-
-        <title>{title}</title>
-
-        <ModuleAsset
-          from="alpinejs/dist/cdn.js"
-          as="alpine"
-          using={scriptTransformer}
-        >
-          {(asset) => <script defer src={asset.url} />}
-        </ModuleAsset>
-      </head>
-      <body>{children}</body>
-    </html>
-  )
-}

packages/docs/src/landing/landing.tsx

@@ -1,42 +0,0 @@
-import packageJson from "reacord/package.json"
-import React from "react"
-import { LocalFileAsset } from "../asset-builder/asset.js"
-import { markdownTransformer } from "../asset-builder/markdown-transformer.js"
-import { Html } from "../html.js"
-import { MainNavigation } from "../navigation/main-navigation"
-import { maxWidthContainer } from "../ui/components"
-
-export function Landing() {
-  return (
-    <Html>
-      <div className="flex flex-col min-w-0 min-h-screen text-center">
-        <header className={maxWidthContainer}>
-          <MainNavigation />
-        </header>
-        <div className="px-4 pb-8 flex flex-1">
-          <main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
-            <h1 className="text-6xl font-light">reacord</h1>
-            <LocalFileAsset
-              from={new URL("landing-example.md", import.meta.url)}
-              using={markdownTransformer}
-            >
-              {(asset) => (
-                <section
-                  className="mx-auto text-sm sm:text-base"
-                  dangerouslySetInnerHTML={asset.content}
-                />
-              )}
-            </LocalFileAsset>
-            <p className="text-2xl font-light">{packageJson.description}</p>
-            <a
-              href="/guides/getting-started"
-              className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
-            >
-              Get Started
-            </a>
-          </main>
-        </div>
-      </div>
-    </Html>
-  )
-}

packages/docs/src/main.tsx

@@ -1,61 +0,0 @@
-import compression from "compression"
-import type { ErrorRequestHandler, Request } from "express"
-import express from "express"
-import PromiseRouter from "express-promise-router"
-import httpTerminator from "http-terminator"
-import pino from "pino"
-import pinoHttp from "pino-http"
-import * as React from "react"
-import { AssetBuilder } from "./asset-builder/asset-builder.js"
-import { fromProjectRoot } from "./constants"
-import { GuidePage } from "./guides/guide-page"
-import { Landing } from "./landing/landing"
-
-const port = process.env.PORT || 3000
-const builder = await AssetBuilder.create(fromProjectRoot(".asset-cache"))
-const logger = pino()
-
-const errorHandler: ErrorRequestHandler = (error, request, response, next) => {
-  response.status(500).send(error.message)
-  logger.error(error)
-}
-
-const router = PromiseRouter()
-  .use(pinoHttp({ logger }))
-  .use(compression())
-  .use(builder.middleware())
-  .use("/api", express.static("dist/api"))
-
-  .get("/guides/*", async (req: Request<{ 0: string }>, res) => {
-    res
-      .type("html")
-      .send(await builder.render(<GuidePage url={req.params[0]} />))
-  })
-
-  .get("/", async (req, res) => {
-    res.type("html").send(await builder.render(<Landing />))
-  })
-
-  .use(errorHandler)
-
-const server = express()
-  .use(router)
-  .listen(port, () => {
-    logger.info(`Server is running on http://localhost:${port}`)
-  })
-
-const terminator = httpTerminator.createHttpTerminator({ server })
-
-process.on("SIGINT", () => {
-  terminator
-    .terminate()
-    .then(() => {
-      logger.info("Server terminated")
-    })
-    .catch((error) => {
-      logger.error(error)
-    })
-    .finally(() => {
-      process.exit()
-    })
-})

packages/docs/src/navigation/app-link.tsx

@@ -1,27 +0,0 @@
-import React from "react"
-import { ExternalLink } from "../dom/external-link"
-
-export type AppLinkProps = {
-  type: "internal" | "external"
-  label: React.ReactNode
-  to: string
-  className?: string
-}
-
-export function AppLink(props: AppLinkProps) {
-  switch (props.type) {
-    case "internal":
-      return (
-        <a className={props.className} href={props.to}>
-          {props.label}
-        </a>
-      )
-
-    case "external":
-      return (
-        <ExternalLink className={props.className} href={props.to}>
-          {props.label}
-        </ExternalLink>
-      )
-  }
-}

packages/docs/src/navigation/guide-links.tsx

@@ -1,34 +0,0 @@
-import glob from "fast-glob"
-import grayMatter from "gray-matter"
-import { readFile } from "node:fs/promises"
-import { join } from "node:path"
-import type { AppLinkProps } from "./app-link"
-
-const docsFolder = new URL("../guides", import.meta.url).pathname
-const guideFiles = await glob("**/*.md", { cwd: docsFolder })
-
-const entries = await Promise.all(
-  guideFiles.map(async (file) => {
-    const content = await readFile(join(docsFolder, file), "utf-8")
-    const { data } = grayMatter(content)
-
-    let order = Number(data.order)
-    if (!Number.isFinite(order)) {
-      order = Number.POSITIVE_INFINITY
-    }
-
-    return {
-      route: `/guides/${file.replace(/\.mdx?$/, "")}`,
-      title: String(data.title || ""),
-      order,
-    }
-  }),
-)
-
-export const guideLinks: AppLinkProps[] = entries
-  .sort((a, b) => a.order - b.order)
-  .map((item) => ({
-    type: "internal",
-    label: item.title,
-    to: item.route,
-  }))

packages/docs/src/react.d.ts

@@ -1,10 +0,0 @@
-import "react"
-declare module "react" {
-  export function createContext<Value>(): Context<Value | undefined>
-}
-
-declare module "react-dom" {
-  export function createRoot(element: Element): {
-    render(element: React.ReactNode): void
-  }
-}

packages/docs/src/ui/markdown.css

@@ -1,3 +0,0 @@
-.prose aside {
-  @apply opacity-75 italic border-l-4 pl-3 border-white/50;
-}

packages/docs/src/ui/popover-menu.client.tsx

@@ -1,38 +0,0 @@
-import clsx from "clsx"
-
-const menus = document.querySelectorAll("[data-popover]")
-
-for (const menu of menus) {
-  const button = menu.querySelector<HTMLButtonElement>("[data-popover-button]")!
-
-  const panel = menu.querySelector<HTMLDivElement>("[data-popover-panel]")!
-  const panelClasses = clsx`${panel.className} transition-all`
-
-  const visibleClass = clsx`${panelClasses} visible opacity-100 translate-y-0`
-  const hiddenClass = clsx`${panelClasses} invisible opacity-0 translate-y-2`
-
-  let visible = false
-
-  const setVisible = (newVisible: boolean) => {
-    visible = newVisible
-    panel.className = visible ? visibleClass : hiddenClass
-
-    if (!visible) return
-
-    requestAnimationFrame(() => {
-      const handleClose = (event: MouseEvent) => {
-        if (panel.contains(event.target as Node)) return
-        setVisible(false)
-        window.removeEventListener("click", handleClose)
-      }
-      window.addEventListener("click", handleClose)
-    })
-  }
-
-  const toggleVisible = () => setVisible(!visible)
-
-  button.addEventListener("click", toggleVisible)
-
-  setVisible(false)
-  panel.hidden = false
-}

packages/docs/tsconfig.json

@@ -1,3 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json"
-}

packages/reacord/.gitignore

@@ -0,0 +1,2 @@
+/README.md
+/LICENSE

packages/reacord/helpers/convert-object-property-case.test.ts

@@ -2,6 +2,7 @@ import type {
   CamelCasedPropertiesDeep,
   SnakeCasedPropertiesDeep,
 } from "type-fest"
+import { expect, test } from "vitest"
 import { camelCaseDeep, snakeCaseDeep } from "./convert-object-property-case"
 
 test("camelCaseDeep", () => {
@@ -12,12 +13,14 @@ test("camelCaseDeep", () => {
     someOtherProp: "someOtherValue",
   }
 
-  expect(camelCaseDeep(input)).toEqual<CamelCasedPropertiesDeep<typeof input>>({
+  const expected: CamelCasedPropertiesDeep<typeof input> = {
     someProp: {
       someDeepProp: "some_deep_value",
     },
     someOtherProp: "someOtherValue",
-  })
+  }
+
+  expect(camelCaseDeep(input)).toEqual(expected)
 })
 
 test("snakeCaseDeep", () => {
@@ -28,10 +31,12 @@ test("snakeCaseDeep", () => {
     some_other_prop: "someOtherValue",
   }
 
-  expect(snakeCaseDeep(input)).toEqual<SnakeCasedPropertiesDeep<typeof input>>({
+  const expected: SnakeCasedPropertiesDeep<typeof input> = {
     some_prop: {
       some_deep_prop: "someDeepValue",
     },
     some_other_prop: "someOtherValue",
-  })
+  }
+
+  expect(snakeCaseDeep(input)).toEqual(expected)
 })

packages/reacord/helpers/is-object.ts

@@ -0,0 +1,7 @@
+export function isObject<T>(
+  value: T,
+): value is Exclude<T, Primitive | AnyFunction> {
+  return typeof value === "object" && value !== null
+}
+type Primitive = string | number | boolean | undefined | null
+type AnyFunction = (...args: any[]) => any

packages/reacord/helpers/prune-null-values.ts

@@ -1,15 +0,0 @@
-export function pruneNullishValues<T extends object>(
-  object: T,
-): PruneNullishValues<T> {
-  const result: any = {}
-  for (const [key, value] of Object.entries(object)) {
-    if (value != undefined) {
-      result[key] = value
-    }
-  }
-  return result
-}
-
-type PruneNullishValues<T> = {
-  [Key in keyof T]: NonNullable<T[Key]>
-}

packages/reacord/helpers/prune-nullish-values.ts

@@ -0,0 +1,27 @@
+import { isObject } from "./is-object"
+
+export function pruneNullishValues<T>(input: T): PruneNullishValues<T> {
+  if (Array.isArray(input)) {
+    return input.filter(Boolean).map((item) => pruneNullishValues(item)) as any
+  }
+
+  if (!isObject(input)) {
+    return input as any
+  }
+
+  const result: any = {}
+  for (const [key, value] of Object.entries(input)) {
+    if (value != undefined) {
+      result[key] = pruneNullishValues(value)
+    }
+  }
+  return result
+}
+
+type PruneNullishValues<Input> = Input extends ReadonlyArray<infer Value>
+  ? ReadonlyArray<NonNullable<Value>>
+  : Input extends object
+  ? {
+      [Key in keyof Input]: NonNullable<Input[Key]>
+    }
+  : Input

packages/reacord/helpers/reject-after.ts

@@ -6,5 +6,5 @@ export async function rejectAfter(
   error: unknown = `rejected after ${timeMs}ms`,
 ): Promise<never> {
   await setTimeout(timeMs)
-  return Promise.reject(toError(error))
+  throw toError(error)
 }

packages/reacord/jest.config.js

@@ -1,15 +0,0 @@
-/** @type {import('@jest/types').Config.InitialOptions} */
-const config = {
-  transform: {
-    "^.+\\.[jt]sx?$": ["esbuild-jest", { format: "esm", sourcemap: true }],
-  },
-  extensionsToTreatAsEsm: [".ts", ".tsx"],
-  moduleNameMapper: {
-    "^(\\.\\.?/.+)\\.jsx?$": "$1",
-  },
-  verbose: true,
-  cache: false,
-  coverageReporters: ["text", "text-summary", "html"],
-  coveragePathIgnorePatterns: ["discord-js-adapter", "test/setup-testing"],
-}
-export default config

packages/reacord/library/core/component-event.ts

@@ -5,11 +5,41 @@ import type { ReacordInstance } from "./instance"
  * @category Component Event
  */
 export type ComponentEvent = {
+  /**
+   * The message associated with this event.
+   * For example: with a button click,
+   * this is the message that the button is on.
+   * @see https://discord.com/developers/docs/resources/channel#message-object
+   */
   message: MessageInfo
+
+  /**
+   * The channel that this event occurred in.
+   * @see https://discord.com/developers/docs/resources/channel#channel-object
+   */
   channel: ChannelInfo
+
+  /**
+   * The user that triggered this event.
+   * @see https://discord.com/developers/docs/resources/user#user-object
+   */
   user: UserInfo
+
+  /**
+   * The guild that this event occurred in.
+   * @see https://discord.com/developers/docs/resources/guild#guild-object
+   */
   guild?: GuildInfo
+
+  /**
+   * Create a new reply to this event.
+   */
   reply(content?: ReactNode): ReacordInstance
+
+  /**
+   * Create an ephemeral reply to this event,
+   * shown only to the user who triggered it.
+   */
   ephemeralReply(content?: ReactNode): ReacordInstance
 }
 

packages/reacord/library/core/components/button-shared-props.ts

@@ -0,0 +1,22 @@
+/**
+ * Common props between button-like components
+ * @category Button
+ */
+export type ButtonSharedProps = {
+  /** The text on the button. Rich formatting (markdown) is not supported here. */
+  label?: string
+
+  /** When true, the button will be slightly faded, and cannot be clicked. */
+  disabled?: boolean
+
+  /**
+   * Renders an emoji to the left of the text.
+   * Has to be a literal emoji character (e.g. 🍍),
+   * or an emoji code, like `<:plus_one:778531744860602388>`.
+   *
+   * To get an emoji code, type your emoji in Discord chat
+   * with a backslash `\` in front.
+   * The bot has to be in the emoji's guild to use it.
+   */
+  emoji?: string
+}

packages/reacord/library/core/components/button.tsx

@@ -6,17 +6,24 @@ import type { MessageOptions } from "../../internal/message"
 import { getNextActionRow } from "../../internal/message"
 import { Node } from "../../internal/node.js"
 import type { ComponentEvent } from "../component-event"
+import type { ButtonSharedProps } from "./button-shared-props"
 
 /**
  * @category Button
  */
-export type ButtonProps = {
+export type ButtonProps = ButtonSharedProps & {
-  label?: string
+  /**
+   * The style determines the color of the button and signals intent.
+   * @see https://discord.com/developers/docs/interactions/message-components#button-object-button-styles
+   */
   style?: "primary" | "secondary" | "success" | "danger"
-  disabled?: boolean
+
-  emoji?: string
+  /**
+   * Happens when a user clicks the button.
+   */
   onClick: (event: ButtonClickEvent) => void
 }
+
 /**
  * @category Button
  */

packages/reacord/library/core/components/embed.tsx

@@ -10,6 +10,7 @@ import type { EmbedOptions } from "./embed-options"
 
 /**
  * @category Embed
+ * @see https://discord.com/developers/docs/resources/channel#embed-object
  */
 export type EmbedProps = {
   title?: string
@@ -28,6 +29,7 @@ export type EmbedProps = {
 
 /**
  * @category Embed
+ * @see https://discord.com/developers/docs/resources/channel#embed-object
  */
 export function Embed(props: EmbedProps) {
   return (

packages/reacord/library/core/components/link.tsx

@@ -3,16 +3,16 @@ import { ReacordElement } from "../../internal/element.js"
 import type { MessageOptions } from "../../internal/message"
 import { getNextActionRow } from "../../internal/message"
 import { Node } from "../../internal/node.js"
+import type { ButtonSharedProps } from "./button-shared-props"
 
 /**
  * @category Link
  */
-export type LinkProps = {
+export type LinkProps = ButtonSharedProps & {
-  label?: string
+  /** The URL the link should lead to */
-  children?: string
-  emoji?: string
-  disabled?: boolean
   url: string
+  /** The link text */
+  children?: string
 }
 
 /**

packages/reacord/library/core/components/option.tsx

@@ -6,10 +6,25 @@ import { OptionNode } from "./option-node"
  * @category Select
  */
 export type OptionProps = {
-  label?: string
+  /** The internal value of this option */
-  children?: string
   value: string
+  /** The text shown to the user. This takes priority over `children` */
+  label?: string
+  /** The text shown to the user */
+  children?: string
+  /** Description for the option, shown to the user */
   description?: string
+
+  /**
+   * Renders an emoji to the left of the text.
+   *
+   * Has to be a literal emoji character (e.g. 🍍),
+   * or an emoji code, like `<:plus_one:778531744860602388>`.
+   *
+   * To get an emoji code, type your emoji in Discord chat
+   * with a backslash `\` in front.
+   * The bot has to be in the emoji's guild to use it.
+   */
   emoji?: string
 }
 

packages/reacord/library/core/components/select.tsx

@@ -4,7 +4,11 @@ import React from "react"
 import { isInstanceOf } from "../../../helpers/is-instance-of"
 import { ReacordElement } from "../../internal/element.js"
 import type { ComponentInteraction } from "../../internal/interaction"
-import type { ActionRow, MessageOptions } from "../../internal/message"
+import type {
+  ActionRow,
+  ActionRowItem,
+  MessageOptions,
+} from "../../internal/message"
 import { Node } from "../../internal/node.js"
 import type { ComponentEvent } from "../component-event"
 import { OptionNode } from "./option-node"
@@ -14,15 +18,54 @@ import { OptionNode } from "./option-node"
  */
 export type SelectProps = {
   children?: ReactNode
+  /** Sets the currently selected value */
   value?: string
+
+  /** Sets the currently selected values, for use with `multiple` */
   values?: string[]
+
+  /** The text shown when no value is selected */
   placeholder?: string
+
+  /** Set to true to allow multiple selected values */
   multiple?: boolean
+
+  /**
+   * With `multiple`, the minimum number of values that can be selected.
+   * When `multiple` is false or not defined, this is always 1.
+   *
+   * This only limits the number of values that can be received by the user.
+   * This does not limit the number of values that can be displayed by you.
+   */
   minValues?: number
+
+  /**
+   * With `multiple`, the maximum number of values that can be selected.
+   * When `multiple` is false or not defined, this is always 1.
+   *
+   * This only limits the number of values that can be received by the user.
+   * This does not limit the number of values that can be displayed by you.
+   */
   maxValues?: number
+
+  /** When true, the select will be slightly faded, and cannot be interacted with. */
   disabled?: boolean
+
+  /**
+   * Called when the user inputs a selection.
+   * Receives the entire select change event,
+   * which can be used to create new replies, etc.
+   */
   onChange?: (event: SelectChangeEvent) => void
+
+  /**
+   * Convenience shorthand for `onChange`, which receives the first selected value.
+   */
   onChangeValue?: (value: string, event: SelectChangeEvent) => void
+
+  /**
+   * Convenience shorthand for `onChange`, which receives all selected values.
+   */
   onChangeMultiple?: (values: string[], event: SelectChangeEvent) => void
 }
 
@@ -34,6 +77,7 @@ export type SelectChangeEvent = ComponentEvent & {
 }
 
 /**
+ * See [the select menu guide](/guides/select-menu) for a usage example.
  * @category Select
  */
 export function Select(props: SelectProps) {
@@ -68,15 +112,25 @@ class SelectNode extends Node<SelectProps> {
       ...props
     } = this.props
 
-    actionRow.push({
+    const item: ActionRowItem = {
       ...props,
       type: "select",
       customId: this.customId,
       options,
-      values: [...(values || []), ...(value ? [value] : [])],
+      values: [],
-      minValues: multiple ? minValues : undefined,
+    }
-      maxValues: multiple ? Math.max(minValues, maxValues) : undefined,
+
-    })
+    if (multiple) {
+      item.minValues = minValues
+      item.maxValues = maxValues
+      if (values) item.values = values
+    }
+
+    if (!multiple && value != undefined) {
+      item.values = [value]
+    }
+
+    actionRow.push(item)
   }
 
   override handleComponentInteraction(

packages/reacord/library/core/instance-context.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { raise } from "../../helpers/raise"
+import type { ReacordInstance } from "./instance"
+
+const Context = React.createContext<ReacordInstance | undefined>(undefined)
+
+export const InstanceProvider = Context.Provider
+
+/**
+ * Get the associated instance for the current component.
+ *
+ * @category Core
+ * @see https://reacord.fly.dev/guides/use-instance
+ */
+export function useInstance(): ReacordInstance {
+  return (
+    React.useContext(Context) ??
+    raise("Could not find instance, was this component rendered via Reacord?")
+  )
+}

packages/reacord/library/core/instance.ts

@@ -1,10 +1,19 @@
 import type { ReactNode } from "react"
 
 /**
+ * Represents an interactive message, which can later be replaced or deleted.
  * @category Core
  */
 export type ReacordInstance = {
+  /** Render some JSX to this instance (edits the message) */
   render: (content: ReactNode) => void
-  deactivate: () => void
+
+  /** Remove this message */
   destroy: () => void
+
+  /**
+   * Same as destroy, but keeps the message and disables the components on it.
+   * This prevents it from listening to user interactions.
+   */
+  deactivate: () => void
 }

packages/reacord/library/core/reacord-discord-js.ts

@@ -3,7 +3,7 @@ import * as Discord from "discord.js"
 import type { ReactNode } from "react"
 import type { Except } from "type-fest"
 import { pick } from "../../helpers/pick"
-import { pruneNullishValues } from "../../helpers/prune-null-values"
+import { pruneNullishValues } from "../../helpers/prune-nullish-values"
 import { raise } from "../../helpers/raise"
 import { toUpper } from "../../helpers/to-upper"
 import type { ComponentInteraction } from "../internal/interaction"
@@ -40,9 +40,7 @@ export class ReacordDiscordJs extends Reacord {
 
   /**
    * Sends a message to a channel.
-   * @param channelId The ID of the channel to create a message in.
+   * @see https://reacord.fly.dev/guides/sending-messages
-   * @param initialContent The initial content of the message.
-   * @returns A Record instance.
    */
   override send(
     channelId: string,
@@ -54,6 +52,10 @@ export class ReacordDiscordJs extends Reacord {
     )
   }
 
+  /**
+   * Sends a message as a reply to a command interaction.
+   * @see https://reacord.fly.dev/guides/sending-messages
+   */
   override reply(
     interaction: Discord.CommandInteraction,
     initialContent?: React.ReactNode,
@@ -64,6 +66,10 @@ export class ReacordDiscordJs extends Reacord {
     )
   }
 
+  /**
+   * Sends an ephemeral message as a reply to a command interaction.
+   * @see https://reacord.fly.dev/guides/sending-messages
+   */
   override ephemeralReply(
     interaction: Discord.CommandInteraction,
     initialContent?: React.ReactNode,
@@ -148,7 +154,8 @@ export class ReacordDiscordJs extends Reacord {
     // todo please dear god clean this up
     const channel: ChannelInfo = interaction.channel
       ? {
-          ...pick(pruneNullishValues(interaction.channel), [
+          ...pruneNullishValues(
+            pick(interaction.channel, [
               "topic",
               "nsfw",
               "lastMessageId",
@@ -156,6 +163,7 @@ export class ReacordDiscordJs extends Reacord {
               "parentId",
               "rateLimitPerUser",
             ]),
+          ),
           id: interaction.channelId,
         }
       : raise("Non-channel interactions are not supported")
@@ -184,7 +192,8 @@ export class ReacordDiscordJs extends Reacord {
     const member: GuildMemberInfo | undefined =
       interaction.member instanceof Discord.GuildMember
         ? {
-            ...pick(pruneNullishValues(interaction.member), [
+            ...pruneNullishValues(
+              pick(interaction.member, [
                 "id",
                 "nick",
                 "displayName",
@@ -193,6 +202,7 @@ export class ReacordDiscordJs extends Reacord {
                 "color",
                 "pending",
               ]),
+            ),
             displayName: interaction.member.displayName,
             roles: [...interaction.member.roles.cache.map((role) => role.id)],
             joinedAt: interaction.member.joinedAt?.toISOString(),
@@ -204,18 +214,15 @@ export class ReacordDiscordJs extends Reacord {
 
     const guild: GuildInfo | undefined = interaction.guild
       ? {
-          ...pick(pruneNullishValues(interaction.guild), ["id", "name"]),
+          ...pruneNullishValues(pick(interaction.guild, ["id", "name"])),
           member: member ?? raise("unexpected: member is undefined"),
         }
       : undefined
 
     const user: UserInfo = {
-      ...pick(pruneNullishValues(interaction.user), [
+      ...pruneNullishValues(
-        "id",
+        pick(interaction.user, ["id", "username", "discriminator", "tag"]),
-        "username",
+      ),
-        "discriminator",
-        "tag",
-      ]),
       avatarUrl: interaction.user.avatarURL()!,
       accentColor: interaction.user.accentColor ?? undefined,
     }

packages/reacord/library/core/reacord.tsx

@@ -1,8 +1,10 @@
 import type { ReactNode } from "react"
+import React from "react"
 import type { ComponentInteraction } from "../internal/interaction"
 import { reconciler } from "../internal/reconciler.js"
 import type { Renderer } from "../internal/renderers/renderer"
 import type { ReacordInstance } from "./instance"
+import { InstanceProvider } from "./instance-context"
 
 /**
  * @category Core
@@ -47,13 +49,12 @@ export abstract class Reacord {
 
     const container = reconciler.createContainer(renderer, 0, false, {})
 
-    if (initialContent !== undefined) {
+    const instance: ReacordInstance = {
-      reconciler.updateContainer(initialContent, container)
-    }
-
-    return {
       render: (content: ReactNode) => {
-        reconciler.updateContainer(content, container)
+        reconciler.updateContainer(
+          <InstanceProvider value={instance}>{content}</InstanceProvider>,
+          container,
+        )
       },
       deactivate: () => {
         this.deactivate(renderer)
@@ -63,6 +64,12 @@ export abstract class Reacord {
         renderer.destroy()
       },
     }
+
+    if (initialContent !== undefined) {
+      instance.render(initialContent)
+    }
+
+    return instance
   }
 
   private deactivate(renderer: Renderer) {

packages/reacord/library/internal/message.ts

@@ -9,9 +9,12 @@ export type MessageOptions = {
   actionRows: ActionRow[]
 }
 
-export type ActionRow = Array<
+export type ActionRow = ActionRowItem[]
-  MessageButtonOptions | MessageLinkOptions | MessageSelectOptions
+
->
+export type ActionRowItem =
+  | MessageButtonOptions
+  | MessageLinkOptions
+  | MessageSelectOptions
 
 export type MessageButtonOptions = {
   type: "button"

packages/reacord/library/main.ts

@@ -1,6 +1,7 @@
 export * from "./core/component-event"
 export * from "./core/components/action-row"
 export * from "./core/components/button"
+export * from "./core/components/button-shared-props"
 export * from "./core/components/embed"
 export * from "./core/components/embed-author"
 export * from "./core/components/embed-field"
@@ -12,6 +13,6 @@ export * from "./core/components/link"
 export * from "./core/components/option"
 export * from "./core/components/select"
 export * from "./core/instance"
+export { useInstance } from "./core/instance-context"
 export * from "./core/reacord"
 export * from "./core/reacord-discord-js"
-export * from "./core/reacord-tester"

packages/reacord/package.json

@@ -2,10 +2,12 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.1.0",
+  "version": "0.3.3",
   "types": "./dist/main.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "README.md",
+    "LICENSE"
   ],
   "exports": {
     ".": {
@@ -20,20 +22,19 @@
   "scripts": {
     "build": "tsup-node library/main.ts --target node16 --format cjs,esm --dts --sourcemap",
     "build-watch": "pnpm build -- --watch",
-    "test": "node --experimental-vm-modules --no-warnings ./node_modules/jest/bin/jest.js --colors",
+    "test": "vitest --coverage --no-watch",
-    "test-watch": "pnpm test -- --watch",
+    "test-dev": "vitest",
-    "coverage": "pnpm test -- --coverage",
     "typecheck": "tsc --noEmit",
-    "playground": "nodemon --exec esmo --ext ts,tsx ./playground/main.tsx",
+    "playground": "nodemon --exec esmo --ext ts,tsx --inspect=5858 --enable-source-maps ./playground/main.tsx",
-    "release": "release-it"
+    "release": "bash scripts/release.sh"
   },
   "dependencies": {
     "@types/node": "*",
     "@types/react": "*",
     "@types/react-reconciler": "^0.26.4",
-    "nanoid": "^3.1.30",
+    "nanoid": "^3.1.31",
     "react-reconciler": "^0.26.2",
-    "rxjs": "^7.5.1"
+    "rxjs": "^7.5.2"
   },
   "peerDependencies": {
     "discord.js": "^13.3",
@@ -45,28 +46,35 @@
     }
   },
   "devDependencies": {
-    "@jest/globals": "^27.4.4",
-    "@types/jest": "^27.0.3",
     "@types/lodash-es": "^4.17.5",
-    "c8": "^7.10.0",
+    "c8": "^7.11.0",
-    "discord.js": "^13.4.0",
+    "discord.js": "^13.5.1",
-    "dotenv": "^10.0.0",
+    "dotenv": "^11.0.0",
     "esbuild": "latest",
     "esbuild-jest": "^0.5.0",
     "esmo": "^0.13.0",
-    "jest": "^27.4.5",
     "lodash-es": "^4.17.21",
     "nodemon": "^2.0.15",
     "prettier": "^2.5.1",
     "pretty-ms": "^7.0.1",
     "react": "^17.0.2",
-    "release-it": "^14.12.0",
+    "release-it": "^14.12.1",
-    "tsup": "^5.11.9",
+    "tsup": "^5.11.11",
-    "type-fest": "^2.8.0",
+    "type-fest": "^2.9.0",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "vite": "^2.7.10",
+    "vitest": "^0.0.141"
   },
   "resolutions": {
     "esbuild": "latest"
   },
-  "prettier": "@itsmapleleaf/configs/prettier"
+  "release-it": {
+    "git": {
+      "commitMessage": "release v${version}"
+    },
+    "github": {
+      "release": true,
+      "web": true
+    }
+  }
 }

packages/reacord/playground/counter.tsx

@@ -23,6 +23,7 @@ export function Counter(props: { onDeactivate: () => void }) {
       )}
       <Button
         style="primary"
+        emoji="<:plus_one:778531744860602388>"
         label="clicc"
         onClick={() => setCount(count + 1)}
       />

packages/reacord/playground/main.tsx

@@ -1,7 +1,7 @@
 import { Client } from "discord.js"
 import "dotenv/config"
 import React from "react"
-import { Button, ReacordDiscordJs } from "../library/main"
+import { Button, ReacordDiscordJs, useInstance } from "../library/main"
 import { createCommandHandler } from "./command-handler"
 import { Counter } from "./counter"
 import { FruitSelect } from "./fruit-select"
@@ -93,6 +93,17 @@ createCommandHandler(client, [
       )
     },
   },
+  {
+    name: "delete-this",
+    description: "delete this",
+    run: (interaction) => {
+      function DeleteThis() {
+        const instance = useInstance()
+        return <Button label="delete this" onClick={() => instance.destroy()} />
+      }
+      reacord.reply(interaction, <DeleteThis />)
+    },
+  },
 ])
 
 await client.login(process.env.TEST_BOT_TOKEN)

packages/reacord/scripts/release.sh

@@ -0,0 +1,4 @@
+pnpm build
+cp ../../README.md .
+cp ../../LICENSE .
+pnpx release-it

packages/reacord/test/action-row.test.tsx

@@ -1,6 +1,7 @@
 import React from "react"
-import { ReacordTester } from "../library/core/reacord-tester"
+import { test } from "vitest"
 import { ActionRow, Button, Select } from "../library/main"
+import { ReacordTester } from "./test-adapter"
 
 const testing = new ReacordTester()
 

packages/reacord/test/channel-message-renderer.tsx

@@ -1,2 +1,3 @@
+import { test } from "vitest"
+
 test.todo("channel message renderer")
-export {}

packages/reacord/test/discord-js.test.tsx

@@ -1,2 +1,3 @@
+import { test } from "vitest"
+
 test.todo("discord js integration")
-export {}

packages/reacord/test/embed.test.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { ReacordTester } from "../library/core/reacord-tester"
+import { test } from "vitest"
 import {
   Embed,
   EmbedAuthor,
@@ -9,6 +9,7 @@ import {
   EmbedThumbnail,
   EmbedTitle,
 } from "../library/main"
+import { ReacordTester } from "./test-adapter"
 
 const testing = new ReacordTester()
 

packages/reacord/test/ephemeral-reply.test.ts

@@ -1,2 +1,2 @@
+import { test } from "vitest"
 test.todo("ephemeral reply")
-export {}

packages/reacord/test/event-callbacks.test.tsx

@@ -1,3 +1,4 @@
+import { test } from "vitest"
+
 test.todo("button onClick")
 test.todo("select onChange")
-export {}

packages/reacord/test/link.test.tsx

@@ -1,6 +1,7 @@
 import React from "react"
-import { ReacordTester } from "../library/core/reacord-tester"
+import { test } from "vitest"
 import { Link } from "../library/main"
+import { ReacordTester } from "./test-adapter"
 
 const tester = new ReacordTester()
 

packages/reacord/test/reacord.test.tsx

@@ -1,11 +1,7 @@
 import * as React from "react"
-import {
+import { test } from "vitest"
-  Button,
+import { Button, Embed, EmbedField, EmbedTitle } from "../library/main"
-  Embed,
+import { ReacordTester } from "./test-adapter"
-  EmbedField,
-  EmbedTitle,
-  ReacordTester,
-} from "../library/main"
 
 test("rendering behavior", async () => {
   const tester = new ReacordTester()

packages/reacord/test/renderer.test.ts

@@ -1,6 +1,6 @@
+import { test } from "vitest"
+
 // test that the interaction update is _eventually_ deferred if there's no component update,
 // and that update isn't called after the fact
 // ...somehow
 test.todo("defer update timeout")
-
-export {}

packages/reacord/test/select.test.tsx

@@ -1,10 +1,11 @@
-import { jest } from "@jest/globals"
 import React, { useState } from "react"
-import { Button, Option, ReacordTester, Select } from "../library/main"
+import { expect, fn, test } from "vitest"
+import { Button, Option, Select } from "../library/main"
+import { ReacordTester } from "./test-adapter"
 
 test("single select", async () => {
   const tester = new ReacordTester()
-  const onSelect = jest.fn()
+  const onSelect = fn()
 
   function TestSelect() {
     const [value, setValue] = useState<string>()
@@ -74,7 +75,7 @@ test("single select", async () => {
 
 test("multiple select", async () => {
   const tester = new ReacordTester()
-  const onSelect = jest.fn()
+  const onSelect = fn()
 
   function TestSelect() {
     const [values, setValues] = useState<string[]>([])
@@ -125,13 +126,13 @@ test("multiple select", async () => {
   expect(onSelect).toHaveBeenCalledTimes(0)
 
   tester.findSelectByPlaceholder("select").select("1", "3")
-  await assertSelect(expect.arrayContaining(["1", "3"]))
+  await assertSelect(expect.arrayContaining(["1", "3"]) as unknown as string[])
   expect(onSelect).toHaveBeenCalledWith(
     expect.objectContaining({ values: expect.arrayContaining(["1", "3"]) }),
   )
 
   tester.findSelectByPlaceholder("select").select("2")
-  await assertSelect(expect.arrayContaining(["2"]))
+  await assertSelect(expect.arrayContaining(["2"]) as unknown as string[])
   expect(onSelect).toHaveBeenCalledWith(
     expect.objectContaining({ values: expect.arrayContaining(["2"]) }),
   )

packages/reacord/test/test-adapter.ts

@@ -4,37 +4,41 @@ import { nanoid } from "nanoid"
 import { nextTick } from "node:process"
 import { promisify } from "node:util"
 import type { ReactNode } from "react"
-import { logPretty } from "../../helpers/log-pretty"
+import { expect } from "vitest"
-import { omit } from "../../helpers/omit"
+import { logPretty } from "../helpers/log-pretty"
-import { raise } from "../../helpers/raise"
+import { omit } from "../helpers/omit"
-import type { Channel } from "../internal/channel"
+import { pruneNullishValues } from "../helpers/prune-nullish-values"
-import { Container } from "../internal/container"
+import { raise } from "../helpers/raise"
-import type {
-  ButtonInteraction,
-  CommandInteraction,
-  SelectInteraction,
-} from "../internal/interaction"
-import type {
-  Message,
-  MessageButtonOptions,
-  MessageOptions,
-  MessageSelectOptions,
-} from "../internal/message"
-import { ChannelMessageRenderer } from "../internal/renderers/channel-message-renderer"
-import { InteractionReplyRenderer } from "../internal/renderers/interaction-reply-renderer"
 import type {
   ChannelInfo,
   GuildInfo,
   MessageInfo,
   UserInfo,
-} from "./component-event"
+} from "../library/core/component-event"
-import type { ButtonClickEvent } from "./components/button"
+import type { ButtonClickEvent } from "../library/core/components/button"
-import type { SelectChangeEvent } from "./components/select"
+import type { SelectChangeEvent } from "../library/core/components/select"
-import type { ReacordInstance } from "./instance"
+import type { ReacordInstance } from "../library/core/instance"
-import { Reacord } from "./reacord"
+import { Reacord } from "../library/core/reacord"
+import type { Channel } from "../library/internal/channel"
+import { Container } from "../library/internal/container"
+import type {
+  ButtonInteraction,
+  CommandInteraction,
+  SelectInteraction,
+} from "../library/internal/interaction"
+import type {
+  Message,
+  MessageButtonOptions,
+  MessageOptions,
+  MessageSelectOptions,
+} from "../library/internal/message"
+import { ChannelMessageRenderer } from "../library/internal/renderers/channel-message-renderer"
+import { InteractionReplyRenderer } from "../library/internal/renderers/interaction-reply-renderer"
 
 const nextTickPromise = promisify(nextTick)
 
+export type MessageSample = ReturnType<ReacordTester["sampleMessages"]>[0]
+
 /**
  * A Record adapter for automated tests. WIP
  */
@@ -49,33 +53,32 @@ export class ReacordTester extends Reacord {
     return [...this.messageContainer]
   }
 
-  override send(): ReacordInstance {
+  override send(initialContent?: ReactNode): ReacordInstance {
     return this.createInstance(
       new ChannelMessageRenderer(new TestChannel(this.messageContainer)),
+      initialContent,
     )
   }
 
-  override reply(): ReacordInstance {
+  override reply(initialContent?: ReactNode): ReacordInstance {
     return this.createInstance(
       new InteractionReplyRenderer(
         new TestCommandInteraction(this.messageContainer),
       ),
+      initialContent,
     )
   }
 
-  override ephemeralReply(): ReacordInstance {
+  override ephemeralReply(initialContent?: ReactNode): ReacordInstance {
-    return this.reply()
+    return this.reply(initialContent)
   }
 
-  async assertMessages(expected: ReturnType<this["sampleMessages"]>) {
+  async assertMessages(expected: MessageSample[]) {
     await nextTickPromise()
     expect(this.sampleMessages()).toEqual(expected)
   }
 
-  async assertRender(
+  async assertRender(content: ReactNode, expected: MessageSample[]) {
-    content: ReactNode,
-    expected: ReturnType<this["sampleMessages"]>,
-  ) {
     const instance = this.reply()
     instance.render(content)
     await this.assertMessages(expected)
@@ -87,14 +90,21 @@ export class ReacordTester extends Reacord {
   }
 
   sampleMessages() {
-    return this.messages.map((message) => ({
+    return pruneNullishValues(
+      this.messages.map((message) => ({
         ...message.options,
         actionRows: message.options.actionRows.map((row) =>
           row.map((component) =>
-          omit(component, ["customId", "onClick", "onSelect", "onSelectValue"]),
+            omit(component, [
+              "customId",
+              "onClick",
+              "onSelect",
+              "onSelectValue",
+            ]),
           ),
         ),
-    }))
+      })),
+    )
   }
 
   findButtonByLabel(label: string) {
@@ -265,11 +275,11 @@ class TestComponentEvent {
   guild: GuildInfo = {} as any // todo
 
   reply(content?: ReactNode): ReacordInstance {
-    return this.tester.reply()
+    return this.tester.reply(content)
   }
 
   ephemeralReply(content?: ReactNode): ReacordInstance {
-    return this.tester.ephemeralReply()
+    return this.tester.ephemeralReply(content)
   }
 }
 

packages/reacord/test/use-instance.test.tsx

@@ -0,0 +1,72 @@
+import React from "react"
+import { describe, expect, it } from "vitest"
+import type { ReacordInstance } from "../library/main"
+import { Button, useInstance } from "../library/main"
+import type { MessageSample } from "./test-adapter"
+import { ReacordTester } from "./test-adapter"
+
+describe("useInstance", () => {
+  it("returns the instance of itself", async () => {
+    let instanceFromHook: ReacordInstance | undefined
+
+    function TestComponent({ name }: { name: string }) {
+      const instance = useInstance()
+      instanceFromHook ??= instance
+      return (
+        <>
+          <Button
+            label={`create ${name}`}
+            onClick={(event) => {
+              event.reply(<TestComponent name="child" />)
+            }}
+          />
+          <Button
+            label={`destroy ${name}`}
+            onClick={() => instance.destroy()}
+          />
+        </>
+      )
+    }
+
+    function messageOutput(name: string): MessageSample {
+      return {
+        content: "",
+        embeds: [],
+        actionRows: [
+          [
+            {
+              type: "button",
+              label: `create ${name}`,
+              style: "secondary",
+            },
+            {
+              type: "button",
+              label: `destroy ${name}`,
+              style: "secondary",
+            },
+          ],
+        ],
+      }
+    }
+
+    const tester = new ReacordTester()
+    const instance = tester.send(<TestComponent name="parent" />)
+
+    await tester.assertMessages([messageOutput("parent")])
+    expect(instanceFromHook).toBe(instance)
+
+    tester.findButtonByLabel("create parent").click()
+    await tester.assertMessages([
+      messageOutput("parent"),
+      messageOutput("child"),
+    ])
+
+    // this test ensures that the only the child instance is destroyed,
+    // and not the parent instance
+    tester.findButtonByLabel("destroy child").click()
+    await tester.assertMessages([messageOutput("parent")])
+
+    tester.findButtonByLabel("destroy parent").click()
+    await tester.assertMessages([])
+  })
+})

packages/reacord/vitest.config.ts

@@ -0,0 +1,8 @@
+/// <reference types="vitest" />
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  build: {
+    sourcemap: true,
+  },
+})

packages/website/.gitignore

@@ -0,0 +1,9 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
+/public/api
+cypress/videos
+cypress/screenshots

packages/website/app/entry.client.tsx

@@ -0,0 +1,4 @@
+import { hydrate } from "react-dom";
+import { RemixBrowser } from "remix";
+
+hydrate(<RemixBrowser />, document);

packages/website/app/entry.server.tsx

@@ -0,0 +1,21 @@
+import { renderToString } from "react-dom/server";
+import { RemixServer } from "remix";
+import type { EntryContext } from "remix";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  const markup = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+
+  responseHeaders.set("Content-Type", "text/html");
+
+  return new Response("<!DOCTYPE html>" + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders
+  });
+}

packages/website/app/modules/landing/landing-example.mdx

@@ -1,4 +1,4 @@
-<!-- prettier-ignore -->
+{/* prettier-ignore */}
 ```tsx
 import * as React from "react"
 import { Embed, Button } from "reacord"

packages/website/app/modules/navigation/app-link.tsx

@@ -0,0 +1,31 @@
+import type { ComponentPropsWithoutRef } from "react"
+import { Link } from "remix"
+
+export type AppLinkProps = ComponentPropsWithoutRef<"a"> & {
+  type: "internal" | "external" | "router"
+  to: string
+}
+
+export function AppLink({ type, to, children, ...props }: AppLinkProps) {
+  if (type === "internal") {
+    return (
+      <a href={to} {...props}>
+        {children}
+      </a>
+    )
+  }
+
+  if (type === "external") {
+    return (
+      <a href={to} target="_blank" rel="noopener noreferrer" {...props}>
+        {children}
+      </a>
+    )
+  }
+
+  return (
+    <Link to={to} {...props}>
+      {children}
+    </Link>
+  )
+}

packages/website/app/modules/navigation/guide-links-context.tsx

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react"
+import type { GuideLink } from "~/modules/navigation/load-guide-links.server"
+
+const Context = createContext<GuideLink[]>([])
+
+export const GuideLinksProvider = Context.Provider
+
+export function useGuideLinksContext() {
+  return useContext(Context)
+}

packages/website/app/modules/navigation/load-guide-links.server.ts

@@ -0,0 +1,40 @@
+import glob from "fast-glob"
+import grayMatter from "gray-matter"
+import { readFile } from "node:fs/promises"
+import { join, parse } from "node:path"
+import type { AppLinkProps } from "~/modules/navigation/app-link"
+
+const guidesFolder = "app/routes/guides"
+
+export type GuideLink = {
+  title: string
+  order: number
+  link: AppLinkProps
+}
+
+export async function loadGuideLinks(): Promise<GuideLink[]> {
+  const guideFiles = await glob(`**/*.md`, { cwd: guidesFolder })
+
+  const links: GuideLink[] = await Promise.all(
+    guideFiles.map(async (file) => {
+      const { data } = grayMatter(await readFile(join(guidesFolder, file)))
+
+      let order = data.order
+      if (!Number.isFinite(order)) {
+        order = Number.POSITIVE_INFINITY
+      }
+
+      return {
+        title: data.meta?.title,
+        order,
+        link: {
+          type: "router",
+          to: `/guides/${parse(file).name}`,
+          children: data.meta?.title,
+        },
+      }
+    }),
+  )
+
+  return links.sort((a, b) => a.order - b.order)
+}

packages/website/app/modules/navigation/main-links.tsx

@@ -2,16 +2,15 @@ import {
   CodeIcon,
   DocumentTextIcon,
   ExternalLinkIcon,
-} from "@heroicons/react/solid/esm"
+} from "@heroicons/react/solid"
-import React from "react"
+import type { AppLinkProps } from "~/modules/navigation/app-link"
 import { inlineIconClass } from "../ui/components"
-import type { AppLinkProps } from "./app-link"
 
 export const mainLinks: AppLinkProps[] = [
   {
     type: "internal",
     to: "/guides/getting-started",
-    label: (
+    children: (
       <>
         <DocumentTextIcon className={inlineIconClass} /> Guides
       </>
@@ -20,7 +19,7 @@ export const mainLinks: AppLinkProps[] = [
   {
     type: "internal",
     to: "/api",
-    label: (
+    children: (
       <>
         <CodeIcon className={inlineIconClass} /> API Reference
       </>
@@ -29,7 +28,7 @@ export const mainLinks: AppLinkProps[] = [
   {
     type: "external",
     to: "https://github.com/itsMapleLeaf/reacord",
-    label: (
+    children: (
       <>
         <ExternalLinkIcon className={inlineIconClass} /> GitHub
       </>

packages/website/app/modules/navigation/main-navigation.tsx

@@ -1,11 +1,11 @@
-import React from "react"
+import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
 import { linkClass } from "../ui/components"
 import { PopoverMenu } from "../ui/popover-menu"
 import { AppLink } from "./app-link"
-import { guideLinks } from "./guide-links"
 import { mainLinks } from "./main-links"
 
 export function MainNavigation() {
+  const guideLinks = useGuideLinksContext()
   return (
     <nav className="flex justify-between items-center h-16">
       <a href="/">
@@ -16,19 +16,21 @@ export function MainNavigation() {
           <AppLink {...link} key={link.to} className={linkClass} />
         ))}
       </div>
-      <div className="md:hidden" id="main-navigation-popover">
+      <div className="md:hidden">
         <PopoverMenu>
           {mainLinks.map((link) => (
             <AppLink
               {...link}
+              role="menuitem"
               key={link.to}
               className={PopoverMenu.itemClass}
             />
           ))}
           <hr className="border-0 h-[2px] bg-black/50" />
-          {guideLinks.map((link) => (
+          {guideLinks.map(({ link }) => (
             <AppLink
               {...link}
+              role="menuitem"
               key={link.to}
               className={PopoverMenu.itemClass}
             />

packages/website/app/modules/ui/popover-menu.tsx

@@ -1,4 +1,4 @@
-import { MenuAlt4Icon } from "@heroicons/react/outline/esm"
+import { MenuAlt4Icon } from "@heroicons/react/outline"
 import clsx from "clsx"
 import React from "react"
 import { linkClass } from "./components"
@@ -10,6 +10,7 @@ export function PopoverMenu({ children }: { children: React.ReactNode }) {
         <MenuAlt4Icon className="w-6" />
       </button>
       <div
+        role="menu"
         className={`
           w-48 max-h-[calc(100vh-4rem)]
           absolute right-0 top-[calc(100%+8px)]

packages/website/app/modules/ui/tailwind.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .prose aside {
+    @apply opacity-75 italic border-l-4 pl-3 border-white/50;
+  }
+}

packages/website/app/react.d.ts

@@ -0,0 +1,4 @@
+import "react"
+declare module "react" {
+  export function createContext<Value>(): Context<Value | undefined>
+}

packages/website/app/remix.env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node/globals" />

packages/website/app/root.tsx

@@ -0,0 +1,68 @@
+import packageJson from "reacord/package.json"
+import type { LinksFunction, LoaderFunction, MetaFunction } from "remix"
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  ScrollRestoration,
+  useLoaderData,
+} from "remix"
+import { GuideLinksProvider } from "~/modules/navigation/guide-links-context"
+import type { GuideLink } from "~/modules/navigation/load-guide-links.server"
+import { loadGuideLinks } from "~/modules/navigation/load-guide-links.server"
+import prismThemeCss from "~/modules/ui/prism-theme.css"
+
+export const meta: MetaFunction = () => ({
+  title: "Reacord",
+  description: packageJson.description,
+})
+
+export const links: LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous",
+  },
+  {
+    rel: "preload",
+    as: "style",
+    href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap",
+  },
+  { rel: "stylesheet", href: "/tailwind.css" },
+  { rel: "stylesheet", href: prismThemeCss },
+]
+
+type LoaderData = {
+  guideLinks: GuideLink[]
+}
+
+export const loader: LoaderFunction = async () => {
+  const data: LoaderData = {
+    guideLinks: await loadGuideLinks(),
+  }
+  return data
+}
+
+export default function App() {
+  const data: LoaderData = useLoaderData()
+  return (
+    <html lang="en" className="bg-slate-900 text-slate-100">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+        <script defer src="https://unpkg.com/alpinejs@3.7.1/dist/cdn.min.js" />
+      </head>
+      <body>
+        <GuideLinksProvider value={data.guideLinks}>
+          <Outlet />
+        </GuideLinksProvider>
+        <ScrollRestoration />
+        {process.env.NODE_ENV === "development" && <LiveReload />}
+      </body>
+    </html>
+  )
+}

packages/website/app/routes/guides.tsx

@@ -0,0 +1,38 @@
+import clsx from "clsx"
+import { Outlet } from "remix"
+import { AppLink } from "~/modules/navigation/app-link"
+import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
+import { MainNavigation } from "~/modules/navigation/main-navigation"
+import {
+  docsProseClass,
+  linkClass,
+  maxWidthContainer,
+} from "~/modules/ui/components"
+
+export default function GuidePage() {
+  const guideLinks = useGuideLinksContext()
+  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")}>
+          <Outlet />
+        </section>
+      </main>
+    </>
+  )
+}

packages/website/app/routes/guides/buttons.md

@@ -1,7 +1,8 @@
 ---
 order: 3
-title: Buttons
+meta:
-description: Using button components
+  title: Buttons
+  description: Using button components
 ---
 
 # Buttons
@@ -43,4 +44,4 @@ function TheButton() {
 }
 ```
 
-See the [API reference](/api) for more information.
+See the [API reference](/api/index.html#ButtonProps) for more information.

packages/website/app/routes/guides/custom-adapters.md

@@ -1,6 +1,7 @@
 ---
-title: Using Reacord with other libraries
+meta:
-description: Adapting Reacord to another Discord library
+  title: Using Reacord with other libraries
+  description: Adapting Reacord to another Discord library
 ---
 
 # Using Reacord with other libraries

packages/website/app/routes/guides/embeds.md

@@ -1,7 +1,8 @@
 ---
 order: 2
-title: Embeds
+meta:
-description: Using embed components
+  title: Embeds
+  description: Using embed components
 ---
 
 # Embeds
@@ -60,4 +61,4 @@ reacord.send(
 )
 ```
 
-See the [API Reference](/api) for the full list of embed components.
+See the [API Reference](/api/index.html#EmbedAuthorProps) for the full list of embed components.

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

@@ -1,7 +1,8 @@
 ---
 order: 0
-title: Getting Started
+meta:
-description: Learn how to get started with Reacord.
+  title: Getting Started
+  description: Learn how to get started with Reacord.
 ---
 
 # Getting Started

packages/website/app/routes/guides/links.md

@@ -0,0 +1,25 @@
+---
+order: 3
+meta:
+  title: Links
+  description: Using link components
+---
+
+# Links
+
+In Discord, links are a type of button, and they work similarly. Clicking on it leads you to the given URL. They only have one style, and can't be listened to for clicks.
+
+```jsx
+import { Link } from "reacord"
+
+function AwesomeLinks() {
+  return (
+    <>
+      <Link label="look at this" url="https://google.com" />
+      <Link label="wow" url="https://youtube.com/watch?v=dQw4w9WgXcQ" />
+    </>
+  )
+}
+```
+
+See the [API reference](/api/index.html#Link) for more information.

packages/website/app/routes/guides/select-menu.md

@@ -1,7 +1,8 @@
 ---
 order: 4
-title: Select Menus
+meta:
-description: Using select menu components
+  title: Select Menus
+  description: Using select menu components
 ---
 
 # Select Menus
@@ -67,4 +68,4 @@ export function FruitSelect({ onConfirm }) {
 }
 ```
 
-The Select component accepts a variety of props beyond what's shown here. See the [API reference](/api) for more information.
+The Select component accepts a variety of props beyond what's shown here. See the [API reference](/api/index.html#SelectChangeEvent) for more information.

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

@@ -1,7 +1,8 @@
 ---
 order: 1
-title: Sending Messages
+meta:
-description: Sending messages by creating Reacord instances
+  title: Sending Messages
+  description: Sending messages by creating Reacord instances
 ---
 
 # Sending Messages with Instances

packages/website/app/routes/guides/use-instance.md

@@ -0,0 +1,26 @@
+---
+meta:
+  title: useInstance
+  description: Using useInstance to get the current instance within a component
+---
+
+# useInstance
+
+You can use `useInstance` to get the current [instance](/guides/sending-messages) within a component. This can be used to let a component destroy or deactivate itself.
+
+```jsx
+import { Button, useInstance } from "reacord"
+
+function SelfDestruct() {
+  const instance = useInstance()
+  return (
+    <Button
+      style="danger"
+      label="delete this"
+      onClick={() => instance.destroy()}
+    />
+  )
+}
+
+reacord.send(channelId, <SelfDestruct />)
+```

packages/website/app/routes/index.tsx

@@ -0,0 +1,29 @@
+import packageJson from "reacord/package.json"
+import LandingExample from "~/modules/landing/landing-example.mdx"
+import { MainNavigation } from "~/modules/navigation/main-navigation"
+import { maxWidthContainer } from "~/modules/ui/components"
+
+export default function Landing() {
+  return (
+    <div className="flex flex-col min-w-0 min-h-screen text-center">
+      <header className={maxWidthContainer}>
+        <MainNavigation />
+      </header>
+      <div className="px-4 pb-8 flex flex-1">
+        <main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
+          <h1 className="text-6xl font-light">reacord</h1>
+          <section className="mx-auto text-sm sm:text-base">
+            <LandingExample />
+          </section>
+          <p className="text-2xl font-light">{packageJson.description}</p>
+          <a
+            href="/guides/getting-started"
+            className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
+          >
+            Get Started
+          </a>
+        </main>
+      </div>
+    </div>
+  )
+}

packages/website/app/routes/tailwind[.]css.tsx

@@ -0,0 +1,5 @@
+import type { LoaderFunction } from "remix"
+import { serveTailwindCss } from "remix-tailwind"
+
+export const loader: LoaderFunction = () =>
+  serveTailwindCss("app/modules/ui/tailwind.css")

packages/website/cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:3000/"
+}

packages/website/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

packages/website/cypress/integration/mobile-popover-menu.test.ts

@@ -0,0 +1,12 @@
+export {}
+
+describe("main popover menu", () => {
+  it("should toggle on button click", () => {
+    cy.viewport(480, 720)
+    cy.visit("/")
+    cy.findByRole("button", { name: "Menu" }).click()
+    cy.findByRole("menu").should("be.visible")
+    cy.findByRole("button", { name: "Menu" }).click()
+    cy.findByRole("menu").should("not.exist")
+  })
+})

packages/website/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+export default function cypressConfig(on, config) {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

packages/website/cypress/support/commands.js

@@ -0,0 +1,26 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+import "@testing-library/cypress/add-commands"