kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use new docs

Browse Source
This commit is contained in:
MapleLeaf
2022-01-02 22:02:10 -06:00
committed by Darius
parent 381f933fd1
commit ca520db701
70 changed files with 186 additions and 2964 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/docs/app/routes/docs.tsx
View File

@@ -1,56 +0,0 @@
import clsx from "clsx"
import type { LoaderFunction } from "remix"
import { Link, Outlet, useLoaderData } from "remix"
import { MainNavigation } from "~/components/main-navigation"
import type { ContentIndexEntry } from "~/helpers/create-index.server"
import { createContentIndex } from "~/helpers/create-index.server"
import { useScrolled } from "~/hooks/dom/use-scrolled"
import { docsProseClass, linkClass, maxWidthContainer } from "~/styles"
type LoaderData = ContentIndexEntry[]
export const loader: LoaderFunction = async () => {
const data: LoaderData = await createContentIndex("app/routes/docs/guides")
return data
}
export default function Docs() {
const data: LoaderData = useLoaderData()
return (
<>
<HeaderPanel>
<div className={maxWidthContainer}>
<MainNavigation guideRoutes={data} />
</div>
</HeaderPanel>
<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">
{data.map(({ title, route }) => (
<li key={route}>
<Link className={linkClass} to={route}>
{title}
</Link>
</li>
))}
</ul>
</nav>
<section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
<Outlet />
</section>
</main>
</>
)
}
function HeaderPanel({ children }: { children: React.ReactNode }) {
const isScrolled = useScrolled()
const className = clsx(
isScrolled ? "bg-slate-700/30" : "bg-slate-800",
"shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
)
return <header className={className}>{children}</header>
}

10
packages/docs/app/routes/docs/guides/buttons.md
View File

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

10
packages/docs/app/routes/docs/guides/embeds.md
View File

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

44
packages/docs/app/routes/docs/guides/getting-started.md
View File

@@ -1,44 +0,0 @@
---
order: 0
meta:
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)
```

9
packages/docs/app/routes/docs/guides/select-menu.md
View File

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

88
packages/docs/app/routes/docs/guides/sending-messages.md
View File

@@ -1,88 +0,0 @@
---
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 [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 className="opacity-75 italic">
This section also applies to other kinds of application commands, such as context menu commands.
</aside>
todo

41
packages/docs/app/routes/index.tsx
View File

@@ -1,41 +0,0 @@
import packageJson from "reacord/package.json"
import type { LoaderFunction } from "remix"
import { Link, useLoaderData } from "remix"
import LandingExample from "~/components/landing-example.mdx"
import { MainNavigation } from "~/components/main-navigation"
import type { ContentIndexEntry } from "~/helpers/create-index.server"
import { createContentIndex } from "~/helpers/create-index.server"
import { maxWidthContainer } from "~/styles"
type LoaderData = ContentIndexEntry[]
export const loader: LoaderFunction = async () => {
const data: LoaderData = await createContentIndex("app/routes/docs/guides")
return data
}
export default function Landing() {
const data: LoaderData = useLoaderData()
return (
<div className="flex flex-col min-w-0 min-h-screen text-center">
<header className={maxWidthContainer}>
<MainNavigation guideRoutes={data} />
</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>
<Link
to="/docs/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
</Link>
</main>
</div>
</div>
)
}

4
packages/docs/app/routes/tailwind[.]css.tsx
View File

@@ -1,4 +0,0 @@
import type { LoaderFunction } from "remix"
import { serveTailwindCss } from "remix-tailwind"
export const loader: LoaderFunction = () => serveTailwindCss()