website cleanup
This commit is contained in:
itsMapleLeaf
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="53" height="35" viewBox="0 0 53 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="3" cy="3" r="1" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 146 B |
Binary file not shown.
|
Before Width: | Height: | Size: 658 B |
@@ -1,4 +0,0 @@
|
||||
import { hydrate } from "react-dom"
|
||||
import { RemixBrowser } from "@remix-run/react"
|
||||
|
||||
hydrate(<RemixBrowser />, document)
|
||||
@@ -1,21 +0,0 @@
|
||||
import { renderToString } from "react-dom/server"
|
||||
import type { EntryContext } from "@remix-run/node"
|
||||
import { RemixServer } from "@remix-run/react"
|
||||
|
||||
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,
|
||||
})
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { HeartIcon } from "@heroicons/react/solid"
|
||||
import clsx from "clsx"
|
||||
import { ExternalLink } from "~/modules/dom/external-link"
|
||||
import { linkClass, maxWidthContainer } from "~/modules/ui/components"
|
||||
|
||||
export function AppFooter() {
|
||||
return (
|
||||
<footer className={clsx(maxWidthContainer, "text-xs opacity-75")}>
|
||||
<address className="not-italic">
|
||||
© {new Date().getFullYear()} itsMapleLeaf
|
||||
</address>
|
||||
<p>
|
||||
Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}
|
||||
<ExternalLink className={linkClass()} href="https://remix.run">
|
||||
Remix
|
||||
</ExternalLink>
|
||||
</p>
|
||||
<p>
|
||||
Uses{" "}
|
||||
<ExternalLink className={linkClass()} href="https://umami.is/">
|
||||
umami
|
||||
</ExternalLink>{" "}
|
||||
for simple, non-identifying analytics.
|
||||
</p>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -1,12 +0,0 @@
|
||||
import type { ComponentPropsWithoutRef } from "react"
|
||||
|
||||
export function ExternalLink({
|
||||
children,
|
||||
...props
|
||||
}: ComponentPropsWithoutRef<"a">) {
|
||||
return (
|
||||
<a target="_blank" rel="noopener noreferrer" {...props}>
|
||||
{children}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import type { ReactNode } from "react"
|
||||
import { useEffect, useRef } from "react"
|
||||
import { createPortal } from "react-dom"
|
||||
|
||||
export function Portal({ children }: { children: ReactNode }) {
|
||||
const containerRef = useRef<Element>()
|
||||
|
||||
if (!containerRef.current && typeof document !== "undefined") {
|
||||
containerRef.current = document.createElement("react-portal")
|
||||
document.body.append(containerRef.current)
|
||||
}
|
||||
|
||||
useEffect(() => () => containerRef.current!.remove(), [])
|
||||
|
||||
return containerRef.current ? (
|
||||
createPortal(children, containerRef.current)
|
||||
) : (
|
||||
<>{children}</>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export function raise(error: unknown): never {
|
||||
throw error instanceof Error ? error : new Error(String(error))
|
||||
}
|
||||
@@ -1,195 +0,0 @@
|
||||
import clsx from "clsx"
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import blobComfyUrl from "~/assets/blob-comfy.png"
|
||||
import cursorIbeamUrl from "~/assets/cursor-ibeam.png"
|
||||
import cursorUrl from "~/assets/cursor.png"
|
||||
|
||||
const defaultState = {
|
||||
chatInputText: "",
|
||||
chatInputCursorVisible: true,
|
||||
messageVisible: false,
|
||||
count: 0,
|
||||
cursorLeft: "25%",
|
||||
cursorBottom: "-15px",
|
||||
}
|
||||
|
||||
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
|
||||
|
||||
const animationFrame = () =>
|
||||
new Promise((resolve) => requestAnimationFrame(resolve))
|
||||
|
||||
export function LandingAnimation() {
|
||||
const [state, setState] = useState(defaultState)
|
||||
const chatInputRef = useRef<HTMLDivElement>(null)
|
||||
const addRef = useRef<HTMLDivElement>(null)
|
||||
const deleteRef = useRef<HTMLDivElement>(null)
|
||||
const cursorRef = useRef<HTMLImageElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const animateClick = (element: HTMLElement) =>
|
||||
element.animate(
|
||||
[{ transform: `translateY(2px)` }, { transform: `translateY(0px)` }],
|
||||
300,
|
||||
)
|
||||
|
||||
let running = true
|
||||
|
||||
void (async () => {
|
||||
while (running) {
|
||||
setState(defaultState)
|
||||
await delay(700)
|
||||
|
||||
for (const letter of "/counter") {
|
||||
setState((state) => ({
|
||||
...state,
|
||||
chatInputText: state.chatInputText + letter,
|
||||
}))
|
||||
await delay(100)
|
||||
}
|
||||
|
||||
await delay(1000)
|
||||
|
||||
setState((state) => ({
|
||||
...state,
|
||||
messageVisible: true,
|
||||
chatInputText: "",
|
||||
}))
|
||||
await delay(1000)
|
||||
|
||||
setState((state) => ({
|
||||
...state,
|
||||
cursorLeft: "70px",
|
||||
cursorBottom: "40px",
|
||||
}))
|
||||
await delay(1500)
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
setState((state) => ({
|
||||
...state,
|
||||
count: state.count + 1,
|
||||
chatInputCursorVisible: false,
|
||||
}))
|
||||
animateClick(addRef.current!)
|
||||
await delay(700)
|
||||
}
|
||||
|
||||
await delay(500)
|
||||
|
||||
setState((state) => ({
|
||||
...state,
|
||||
cursorLeft: "140px",
|
||||
}))
|
||||
await delay(1000)
|
||||
|
||||
animateClick(deleteRef.current!)
|
||||
setState((state) => ({ ...state, messageVisible: false }))
|
||||
await delay(1000)
|
||||
|
||||
setState(() => ({
|
||||
...defaultState,
|
||||
chatInputCursorVisible: false,
|
||||
}))
|
||||
await delay(500)
|
||||
}
|
||||
})()
|
||||
|
||||
return () => {
|
||||
running = false
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let running = true
|
||||
|
||||
void (async () => {
|
||||
while (running) {
|
||||
// check if the cursor is in the input
|
||||
const cursorRect = cursorRef.current!.getBoundingClientRect()
|
||||
const chatInputRect = chatInputRef.current!.getBoundingClientRect()
|
||||
|
||||
const isOverInput =
|
||||
cursorRef.current &&
|
||||
chatInputRef.current &&
|
||||
cursorRect.top + cursorRect.height / 2 > chatInputRect.top
|
||||
|
||||
cursorRef.current!.src = isOverInput ? cursorIbeamUrl : cursorUrl
|
||||
|
||||
await animationFrame()
|
||||
}
|
||||
})()
|
||||
|
||||
return () => {
|
||||
running = false
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div
|
||||
className="grid gap-2 relative pointer-events-none select-none"
|
||||
role="presentation"
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"bg-slate-800 p-4 rounded-lg shadow transition",
|
||||
state.messageVisible ? "opacity-100" : "opacity-0 -translate-y-2",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 p-2 rounded-full bg-no-repeat bg-contain bg-black/25">
|
||||
<img
|
||||
src={blobComfyUrl}
|
||||
alt=""
|
||||
className="object-contain scale-90 w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold">comfybot</p>
|
||||
<p>this button was clicked {state.count} times</p>
|
||||
<div className="mt-2 flex flex-row gap-3">
|
||||
<div
|
||||
ref={addRef}
|
||||
className="bg-emerald-700 text-white py-1.5 px-3 text-sm rounded"
|
||||
>
|
||||
+1
|
||||
</div>
|
||||
<div
|
||||
ref={deleteRef}
|
||||
className="bg-red-700 text-white py-1.5 px-3 text-sm rounded"
|
||||
>
|
||||
🗑 delete
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="bg-slate-700 pb-2 pt-1.5 px-4 rounded-lg shadow"
|
||||
ref={chatInputRef}
|
||||
>
|
||||
<span
|
||||
className={clsx(
|
||||
"text-sm after:content-[attr(data-after)] after:relative after:-top-px after:-left-[2px]",
|
||||
state.chatInputCursorVisible
|
||||
? "after:opacity-100"
|
||||
: "after:opacity-0",
|
||||
)}
|
||||
data-after="|"
|
||||
>
|
||||
{state.chatInputText || (
|
||||
<span className="opacity-50 block absolute translate-y-1">
|
||||
Message #showing-off-reacord
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src={cursorUrl}
|
||||
alt=""
|
||||
className="transition-all duration-500 absolute scale-75"
|
||||
style={{ left: state.cursorLeft, bottom: state.cursorBottom }}
|
||||
ref={cursorRef}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
{/* prettier-ignore */}
|
||||
```tsx
|
||||
import * as React from "react"
|
||||
import { Button, useInstance } from "reacord"
|
||||
|
||||
function Counter() {
|
||||
const [count, setCount] = React.useState(0)
|
||||
const instance = useInstance()
|
||||
return (
|
||||
<>
|
||||
this button was clicked {count} times
|
||||
<Button
|
||||
label="+1"
|
||||
style="success"
|
||||
onClick={() => setCount(count + 1)}
|
||||
/>
|
||||
<Button
|
||||
label="delete"
|
||||
emoji="🗑"
|
||||
style="danger"
|
||||
onClick={() => instance.destroy()}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
@@ -1,14 +0,0 @@
|
||||
import type { ReactNode } from "react"
|
||||
import type { PathPattern } from "react-router"
|
||||
import { useMatch } from "react-router"
|
||||
|
||||
export function ActiveLink({
|
||||
to,
|
||||
children,
|
||||
}: {
|
||||
to: string | PathPattern
|
||||
children: (props: { active: boolean }) => ReactNode
|
||||
}) {
|
||||
const match = useMatch(to)
|
||||
return <>{children({ active: match != undefined })}</>
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import type { ComponentPropsWithoutRef } from "react"
|
||||
import { Link } from "@remix-run/react"
|
||||
import { ExternalLink } from "~/modules/dom/external-link"
|
||||
|
||||
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 (
|
||||
<ExternalLink href={to} {...props}>
|
||||
{children}
|
||||
</ExternalLink>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Link to={to} {...props}>
|
||||
{children}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
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)
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
import glob from "fast-glob"
|
||||
import grayMatter from "gray-matter"
|
||||
import { readFile } from "node:fs/promises"
|
||||
import { join, parse } from "node:path"
|
||||
import { z } from "zod"
|
||||
|
||||
const guidesFolder = "app/routes/guides"
|
||||
|
||||
const frontmatterSchema = z.object({
|
||||
meta: z.object({
|
||||
title: z.string(),
|
||||
description: z.string(),
|
||||
}),
|
||||
order: z.number().optional(),
|
||||
})
|
||||
|
||||
export type GuideLink = Awaited<ReturnType<typeof loadGuideLinks>>[0]
|
||||
|
||||
export async function loadGuideLinks() {
|
||||
const guideFiles = await glob(`**/*.md`, { cwd: guidesFolder })
|
||||
|
||||
const links = await Promise.all(
|
||||
guideFiles.map(async (file) => {
|
||||
const result = grayMatter(await readFile(join(guidesFolder, file)))
|
||||
const data = frontmatterSchema.parse(result.data)
|
||||
return {
|
||||
title: data.meta.title,
|
||||
order: data.order ?? Number.POSITIVE_INFINITY,
|
||||
link: {
|
||||
type: "router" as const,
|
||||
to: `/guides/${parse(file).name}`,
|
||||
children: data.meta.title,
|
||||
},
|
||||
}
|
||||
}),
|
||||
)
|
||||
|
||||
return links.sort((a, b) => a.order - b.order)
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
import {
|
||||
CodeIcon,
|
||||
DocumentTextIcon,
|
||||
ExternalLinkIcon,
|
||||
} from "@heroicons/react/solid"
|
||||
import type { AppLinkProps } from "~/modules/navigation/app-link"
|
||||
import { inlineIconClass } from "../ui/components"
|
||||
|
||||
export const mainLinks: AppLinkProps[] = [
|
||||
{
|
||||
type: "internal",
|
||||
to: "/guides/getting-started",
|
||||
children: (
|
||||
<>
|
||||
<DocumentTextIcon className={inlineIconClass} /> Guides
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
type: "internal",
|
||||
to: "/api/",
|
||||
children: (
|
||||
<>
|
||||
<CodeIcon className={inlineIconClass} /> API Reference
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
type: "external",
|
||||
to: "https://github.com/itsMapleLeaf/reacord",
|
||||
children: (
|
||||
<>
|
||||
<ExternalLinkIcon className={inlineIconClass} /> GitHub
|
||||
</>
|
||||
),
|
||||
},
|
||||
]
|
||||
@@ -1,69 +0,0 @@
|
||||
import { Menu, Transition } from "@headlessui/react"
|
||||
import { MenuAlt4Icon } from "@heroicons/react/outline"
|
||||
import clsx from "clsx"
|
||||
import { ActiveLink } from "~/modules/navigation/active-link"
|
||||
import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
|
||||
import { Popper } from "~/modules/ui/popper"
|
||||
import { AppLink } from "./app-link"
|
||||
import { mainLinks } from "./main-links"
|
||||
|
||||
export function MainNavigationMenu() {
|
||||
const guideLinks = useGuideLinksContext()
|
||||
return (
|
||||
<Menu>
|
||||
<Popper
|
||||
renderReference={(reference) => (
|
||||
<Menu.Button {...reference}>
|
||||
<MenuAlt4Icon className="w-6" />
|
||||
<span className="sr-only">Menu</span>
|
||||
</Menu.Button>
|
||||
)}
|
||||
renderPopover={() => (
|
||||
<Transition
|
||||
enter="transition"
|
||||
enterFrom="translate-y-4 opacity-0"
|
||||
enterTo="translate-y-0 opacity-100"
|
||||
leave="transition"
|
||||
leaveFrom="translate-y-0 opacity-100"
|
||||
leaveTo="translate-y-4 opacity-0"
|
||||
>
|
||||
<Menu.Items className="w-48 max-h-[calc(100vh-5rem)] bg-slate-800 shadow rounded-lg overflow-hidden overflow-y-auto focus:outline-none">
|
||||
{mainLinks.map((link) => (
|
||||
<Menu.Item key={link.to}>
|
||||
{({ active }) => (
|
||||
<AppLink {...link} className={menuItemClass({ active })} />
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
<Menu.Item disabled>
|
||||
<hr className="border-0 h-[2px] bg-black/50" />
|
||||
</Menu.Item>
|
||||
{guideLinks.map(({ link }) => (
|
||||
<Menu.Item key={link.to}>
|
||||
{(menuItem) => (
|
||||
<ActiveLink to={link.to}>
|
||||
{(activeLink) => (
|
||||
<AppLink
|
||||
{...link}
|
||||
className={menuItemClass({
|
||||
active: activeLink.active || menuItem.active,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
</ActiveLink>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
)}
|
||||
/>
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
const menuItemClass = ({ active = false }) =>
|
||||
clsx(
|
||||
clsx`px-3 py-2 transition text-left font-medium block opacity-50`,
|
||||
active && clsx`opacity-100 bg-black/75 text-emerald-400`,
|
||||
)
|
||||
@@ -1,24 +0,0 @@
|
||||
import { AppLogo } from "~/modules/app/app-logo"
|
||||
import { linkClass } from "../ui/components"
|
||||
import { AppLink } from "./app-link"
|
||||
import { mainLinks } from "./main-links"
|
||||
import { MainNavigationMenu } from "./main-navigation-menu"
|
||||
|
||||
export function MainNavigation() {
|
||||
return (
|
||||
<nav className="flex justify-between items-center h-16">
|
||||
<a href="/">
|
||||
<AppLogo className="w-32" />
|
||||
<span className="sr-only">Home</span>
|
||||
</a>
|
||||
<div className="hidden md:flex gap-4">
|
||||
{mainLinks.map((link) => (
|
||||
<AppLink {...link} key={link.to} className={linkClass()} />
|
||||
))}
|
||||
</div>
|
||||
<div className="md:hidden">
|
||||
<MainNavigationMenu />
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import clsx from "clsx"
|
||||
|
||||
export const maxWidthContainer = clsx`mx-auto w-full max-w-screen-lg px-4`
|
||||
|
||||
export const inlineIconClass = clsx`inline w-5 align-sub`
|
||||
|
||||
export const linkClass = ({ active = false } = {}) =>
|
||||
clsx(
|
||||
clsx`font-medium inline-block relative`,
|
||||
clsx`opacity-60 hover:opacity-100 transition-opacity`,
|
||||
clsx`after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition`,
|
||||
clsx`hover:after:translate-y-[-1px] hover:after:opacity-100`,
|
||||
active
|
||||
? clsx`text-emerald-500 after:bg-emerald-500`
|
||||
: clsx`after:bg-white/50`,
|
||||
)
|
||||
|
||||
export const docsProseClass = clsx`
|
||||
prose prose-invert
|
||||
prose-h1:font-light prose-h1:mb-4 prose-h1:text-3xl lg:prose-h1:text-4xl
|
||||
prose-h2:font-light
|
||||
prose-h3:font-light
|
||||
prose-p:my-3
|
||||
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:font-monospace prose-pre:overflow-x-auto
|
||||
prose-code:before:hidden prose-code:after:hidden prose-code:text-slate-400
|
||||
prose-li:mb-5
|
||||
max-w-none
|
||||
`
|
||||
|
||||
export const buttonClass = ({
|
||||
variant,
|
||||
}: {
|
||||
variant: "solid" | "semiblack"
|
||||
}) => {
|
||||
return clsx(
|
||||
clsx`inline-block mt-4 px-4 py-2.5 text-xl transition rounded-lg`,
|
||||
clsx`hover:translate-y-[-2px] hover:shadow`,
|
||||
clsx`active:translate-y-[0px] active:transition-none`, // using translate-y-[0px] instead of just -0 so it takes priority
|
||||
variant === "solid" && clsx`bg-emerald-700 hover:bg-emerald-800`,
|
||||
variant === "semiblack" && clsx`bg-black/25 hover:bg-black/40`,
|
||||
)
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
import { XIcon } from "@heroicons/react/outline"
|
||||
import clsx from "clsx"
|
||||
import type { ReactNode } from "react"
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { FocusOn } from "react-focus-on"
|
||||
import { Portal } from "~/modules/dom/portal"
|
||||
|
||||
export function Modal({
|
||||
children,
|
||||
visible,
|
||||
onClose,
|
||||
}: {
|
||||
children: ReactNode
|
||||
visible: boolean
|
||||
onClose: () => void
|
||||
}) {
|
||||
const closeButtonRef = useRef<HTMLButtonElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
// trying to immediately focus doesn't work for whatever reason
|
||||
// neither did requestAnimationFrame
|
||||
setTimeout(() => {
|
||||
closeButtonRef.current?.focus()
|
||||
}, 50)
|
||||
}
|
||||
}, [visible])
|
||||
|
||||
return (
|
||||
<Portal>
|
||||
<div
|
||||
className={clsx(
|
||||
"bg-black/70 fixed inset-0 transition-all flex flex-col p-4",
|
||||
visible ? "opacity-100 visible" : "opacity-0 invisible",
|
||||
)}
|
||||
>
|
||||
<FocusOn
|
||||
className={clsx(
|
||||
"m-auto flex flex-col gap-2 w-full max-h-full max-w-screen-sm overflow-y-auto transition",
|
||||
visible ? "translate-y-0" : "translate-y-3",
|
||||
)}
|
||||
enabled={visible}
|
||||
onClickOutside={onClose}
|
||||
onEscapeKey={onClose}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="self-end"
|
||||
onClick={onClose}
|
||||
ref={closeButtonRef}
|
||||
>
|
||||
<span className="sr-only">Close</span>
|
||||
<XIcon aria-hidden className="w-6 text-white" />
|
||||
</button>
|
||||
<div className={clsx("bg-slate-700 rounded-md shadow p-4")}>
|
||||
{children}
|
||||
</div>
|
||||
</FocusOn>
|
||||
</div>
|
||||
</Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export function UncontrolledModal({
|
||||
children,
|
||||
button,
|
||||
}: {
|
||||
children: ReactNode
|
||||
button: (buttonProps: { onClick: () => void }) => void
|
||||
}) {
|
||||
const [visible, setVisible] = useState(false)
|
||||
return (
|
||||
<>
|
||||
{button({ onClick: () => setVisible(true) })}
|
||||
<Modal visible={visible} onClose={() => setVisible(false)}>
|
||||
{children}
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
import { useRect } from "@reach/rect"
|
||||
import * as React from "react"
|
||||
import { Portal } from "~/modules/dom/portal"
|
||||
|
||||
export function Popper({
|
||||
renderReference,
|
||||
renderPopover,
|
||||
}: {
|
||||
renderReference: (referenceProps: {
|
||||
ref: (element: HTMLElement | null | undefined) => void
|
||||
}) => React.ReactNode
|
||||
renderPopover: () => React.ReactNode
|
||||
}) {
|
||||
const [reference, referenceRef] = React.useState<HTMLElement | null>()
|
||||
const referenceRect = useRect(useValueAsRefObject(reference))
|
||||
|
||||
return (
|
||||
<>
|
||||
{renderReference({ ref: referenceRef })}
|
||||
<Portal>
|
||||
{referenceRect && (
|
||||
<div
|
||||
className="fixed -translate-x-full"
|
||||
style={{
|
||||
left: referenceRect.right,
|
||||
top: referenceRect.bottom + 16,
|
||||
}}
|
||||
>
|
||||
{renderPopover()}
|
||||
</div>
|
||||
)}
|
||||
</Portal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function useValueAsRefObject<Value>(value: Value): { readonly current: Value } {
|
||||
const ref = React.useRef<Value>(value)
|
||||
ref.current = value
|
||||
return ref
|
||||
}
|
||||
@@ -1,133 +0,0 @@
|
||||
/**
|
||||
* Nord Theme Originally by Arctic Ice Studio
|
||||
* https://nordtheme.com
|
||||
*
|
||||
* Ported for PrismJS by Zane Hitchcoxc (@zwhitchcox) and Gabriel Ramos (@gabrieluizramos)
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
/* font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
|
||||
monospace; */
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.7;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
/* background: #2e3440; */
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #636f88;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: #b48ead;
|
||||
}
|
||||
|
||||
.token.boolean {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #a3be8c;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #88c0d0;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #81a1c1;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #ebcb8b;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.code-line.highlight-line {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
padding: 0 1rem;
|
||||
margin: 0 -1rem;
|
||||
display: block;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer utilities {
|
||||
.prose aside {
|
||||
@apply opacity-75 italic border-l-4 pl-3 border-white/50;
|
||||
}
|
||||
}
|
||||
4
packages/website/app/react.d.ts
vendored
4
packages/website/app/react.d.ts
vendored
@@ -1,4 +0,0 @@
|
||||
import "react"
|
||||
declare module "react" {
|
||||
export function createContext<Value>(): Context<Value | undefined>
|
||||
}
|
||||
2
packages/website/app/remix.env.d.ts
vendored
2
packages/website/app/remix.env.d.ts
vendored
@@ -1,2 +0,0 @@
|
||||
/// <reference types="@remix-run/dev" />
|
||||
/// <reference types="@remix-run/node/globals" />
|
||||
@@ -1,94 +0,0 @@
|
||||
import type { LinksFunction, MetaFunction } from "@remix-run/node"
|
||||
import {
|
||||
Links,
|
||||
LiveReload,
|
||||
Meta,
|
||||
Outlet,
|
||||
Scripts,
|
||||
ScrollRestoration,
|
||||
useLoaderData,
|
||||
} from "@remix-run/react"
|
||||
import packageJson from "reacord/package.json"
|
||||
import bannerUrl from "~/assets/banner.png"
|
||||
import faviconUrl from "~/assets/favicon.png"
|
||||
import { GuideLinksProvider } from "~/modules/navigation/guide-links-context"
|
||||
import { loadGuideLinks } from "~/modules/navigation/load-guide-links.server"
|
||||
import prismThemeCss from "~/modules/ui/prism-theme.css"
|
||||
import tailwindCss from "~/modules/ui/tailwind.out.css"
|
||||
|
||||
export const meta: MetaFunction = () => ({
|
||||
"title": "Reacord",
|
||||
"description": packageJson.description,
|
||||
"theme-color": "#21754b",
|
||||
|
||||
"og:url": "https://reacord.mapleleaf.dev/",
|
||||
"og:type": "website",
|
||||
"og:title": "Reacord",
|
||||
"og:description": "Create interactive Discord messages using React",
|
||||
"og:image": bannerUrl,
|
||||
|
||||
"twitter:card": "summary_large_image",
|
||||
"twitter:domain": "reacord.mapleleaf.dev",
|
||||
"twitter:url": "https://reacord.mapleleaf.dev/",
|
||||
"twitter:title": "Reacord",
|
||||
"twitter:description": "Create interactive Discord messages using React",
|
||||
"twitter:image": bannerUrl,
|
||||
})
|
||||
|
||||
export const links: LinksFunction = () => [
|
||||
{ rel: "icon", type: "image/png", href: faviconUrl },
|
||||
{ rel: "stylesheet", href: tailwindCss },
|
||||
{ rel: "stylesheet", href: prismThemeCss },
|
||||
{ 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: "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",
|
||||
},
|
||||
]
|
||||
|
||||
export async function loader() {
|
||||
return {
|
||||
guideLinks: await loadGuideLinks(),
|
||||
}
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const data = useLoaderData<typeof loader>()
|
||||
return (
|
||||
<html lang="en" className="bg-slate-900 text-slate-100">
|
||||
<head>
|
||||
{/* eslint-disable-next-line unicorn/text-encoding-identifier-case */}
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<Meta />
|
||||
<Links />
|
||||
{process.env.NODE_ENV === "production" && (
|
||||
<script
|
||||
async
|
||||
defer
|
||||
data-website-id="e3ce3a50-720e-4489-be37-cc091c1b7029"
|
||||
src="https://umami-production-72bc.up.railway.app/umami.js"
|
||||
></script>
|
||||
)}
|
||||
</head>
|
||||
<body>
|
||||
<GuideLinksProvider value={data.guideLinks}>
|
||||
<Outlet />
|
||||
</GuideLinksProvider>
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
{process.env.NODE_ENV === "development" && <LiveReload />}
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
import clsx from "clsx"
|
||||
import { Outlet } from "@remix-run/react"
|
||||
import { ActiveLink } from "~/modules/navigation/active-link"
|
||||
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 (
|
||||
<div className="isolate">
|
||||
<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}>
|
||||
<ActiveLink to={link.to}>
|
||||
{({ active }) => (
|
||||
<AppLink {...link} className={linkClass({ active })} />
|
||||
)}
|
||||
</ActiveLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
<section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
|
||||
<Outlet />
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
---
|
||||
order: 3
|
||||
meta:
|
||||
title: Buttons
|
||||
description: Using button components
|
||||
---
|
||||
|
||||
# Buttons
|
||||
|
||||
Use the `<Button />` component to create a message with a button, and use the `onClick` callback to respond to button clicks.
|
||||
|
||||
```jsx
|
||||
import { Button } from "reacord"
|
||||
|
||||
function Counter() {
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
return (
|
||||
<>
|
||||
You've clicked the button {count} times.
|
||||
<Button label="+1" onClick={() => setCount(count + 1)} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
The `onClick` callback receives an `event` object. It includes some information, such as the user who clicked the button, and functions for creating new replies in response. These functions return message instances.
|
||||
|
||||
```jsx
|
||||
import { Button } from "reacord"
|
||||
|
||||
function TheButton() {
|
||||
function handleClick(event) {
|
||||
const name = event.guild.member.displayName || event.user.username
|
||||
|
||||
const publicReply = event.reply(`${name} clicked the button. wow`)
|
||||
setTimeout(() => publicReply.destroy(), 3000)
|
||||
|
||||
const privateReply = event.ephemeralReply("good job, you clicked it")
|
||||
privateReply.deactivate() // we don't need to listen to updates on this
|
||||
}
|
||||
|
||||
return <Button label="click me i dare you" onClick={handleClick} />
|
||||
}
|
||||
```
|
||||
|
||||
See the [API reference](/api/index.html#ButtonProps) for more information.
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
meta:
|
||||
title: Using Reacord with other libraries
|
||||
description: Adapting Reacord to another Discord library
|
||||
---
|
||||
|
||||
# Using Reacord with other libraries
|
||||
|
||||
Reacord's core is built to be library agnostic, and can be adapted to libraries other than Discord.js. However, Discord.js is the only built-in adapter at the moment, and the adapter API is still a work in progress.
|
||||
|
||||
If you're interested in creating a custom adapter, [see the code for the Discord.js adapter as an example](https://github.com/itsMapleLeaf/reacord/blob/main/packages/reacord/library/core/reacord-discord-js.ts). Feel free to [create an issue on GitHub](https://github.com/itsMapleLeaf/reacord/issues/new) if you run into issues.
|
||||
@@ -1,64 +0,0 @@
|
||||
---
|
||||
order: 2
|
||||
meta:
|
||||
title: Embeds
|
||||
description: Using embed components
|
||||
---
|
||||
|
||||
# Embeds
|
||||
|
||||
Reacord comes with an `<Embed />` component for sending rich embeds.
|
||||
|
||||
```jsx
|
||||
import { Embed } from "reacord"
|
||||
|
||||
function FancyMessage({ title, description }) {
|
||||
return (
|
||||
<Embed
|
||||
title={title}
|
||||
description={description}
|
||||
color={0x00ff00}
|
||||
timestamp={Date.now()}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
reacord.send(channelId, <FancyMessage title="Hello" description="World" />)
|
||||
```
|
||||
|
||||
Reacord also comes with multiple embed components, for defining embeds on a piece-by-piece basis. This enables composition:
|
||||
|
||||
```jsx
|
||||
import { Embed, EmbedTitle } from "reacord"
|
||||
|
||||
function FancyDetails({ title, description }) {
|
||||
return (
|
||||
<>
|
||||
<EmbedTitle>{title}</EmbedTitle>
|
||||
{/* embed descriptions are just text */}
|
||||
{description}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function FancyMessage({ children }) {
|
||||
return (
|
||||
<Embed color={0x00ff00} timestamp={Date.now()}>
|
||||
{children}
|
||||
</Embed>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
reacord.send(
|
||||
channelId,
|
||||
<FancyMessage>
|
||||
<FancyDetails title="Hello" description="World" />
|
||||
</FancyMessage>,
|
||||
)
|
||||
```
|
||||
|
||||
See the [API Reference](/api/index.html#EmbedAuthorProps) for the full list of embed components.
|
||||
@@ -1,53 +0,0 @@
|
||||
---
|
||||
order: 0
|
||||
meta:
|
||||
title: Getting Started
|
||||
description: Learn how to get started with Reacord.
|
||||
---
|
||||
|
||||
# Getting Started
|
||||
|
||||
These guides assume 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.
|
||||
|
||||
## Setup from template
|
||||
|
||||
[Use this starter template](https://github.com/itsMapleLeaf/reacord-starter) to get off the ground quickly.
|
||||
|
||||
## Adding to an existing project
|
||||
|
||||
Install Reacord and dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install reacord react discord.js
|
||||
|
||||
# yarn
|
||||
yarn add reacord react discord.js
|
||||
|
||||
# pnpm
|
||||
pnpm add reacord react discord.js
|
||||
```
|
||||
|
||||
Create a Discord.js client and a Reacord instance:
|
||||
|
||||
```js
|
||||
// main.jsx
|
||||
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)
|
||||
```
|
||||
|
||||
To use JSX in your code, run it with [tsx](https://npm.im/tsx):
|
||||
|
||||
```bash
|
||||
npm install tsx
|
||||
tsx main.tsx
|
||||
```
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
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.
|
||||
@@ -1,71 +0,0 @@
|
||||
---
|
||||
order: 4
|
||||
meta:
|
||||
title: Select Menus
|
||||
description: Using select menu components
|
||||
---
|
||||
|
||||
# Select Menus
|
||||
|
||||
To create a select menu, use the `Select` component, and pass a list of `Option` components as children. Use the `value` prop to set a currently selected value. You can respond to changes in the value via `onChangeValue`.
|
||||
|
||||
```jsx
|
||||
export function FruitSelect({ onConfirm }) {
|
||||
const [value, setValue] = useState()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select
|
||||
placeholder="choose a fruit"
|
||||
value={value}
|
||||
onChangeValue={setValue}
|
||||
>
|
||||
<Option value="🍎" />
|
||||
<Option value="🍌" />
|
||||
<Option value="🍒" />
|
||||
</Select>
|
||||
<Button
|
||||
label="confirm"
|
||||
disabled={value == undefined}
|
||||
onClick={() => {
|
||||
if (value) onConfirm(value)
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
const instance = reacord.send(
|
||||
channelId,
|
||||
<FruitSelect
|
||||
onConfirm={(value) => {
|
||||
instance.render(`you chose ${value}`)
|
||||
instance.deactivate()
|
||||
}}
|
||||
/>,
|
||||
)
|
||||
```
|
||||
|
||||
For a multi-select, use the `multiple` prop, then you can use `values` and `onChangeMultiple` to handle multiple values.
|
||||
|
||||
```tsx
|
||||
export function FruitSelect({ onConfirm }) {
|
||||
const [values, setValues] = useState([])
|
||||
|
||||
return (
|
||||
<Select
|
||||
placeholder="choose a fruit"
|
||||
values={values}
|
||||
onChangeMultiple={setValues}
|
||||
>
|
||||
<Option value="🍎" />
|
||||
<Option value="🍌" />
|
||||
<Option value="🍒" />
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
The Select component accepts a variety of props beyond what's shown here. See the [API reference](/api/index.html#SelectChangeEvent) for more information.
|
||||
@@ -1,167 +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.
|
||||
|
||||
```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(() => {
|
||||
setCurrentTime(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>
|
||||
This section also applies to other kinds of application commands, such as context menu commands.
|
||||
</aside>
|
||||
|
||||
To reply to a command interaction, use the `.reply()` function. This function returns an instance that works the same way as the one from `.send()`. Here's an example:
|
||||
|
||||
```jsx
|
||||
import { Client } from "discord.js"
|
||||
import * as React from "react"
|
||||
import { Button, ReacordDiscordJs } from "reacord"
|
||||
|
||||
const client = new Client({ intents: [] })
|
||||
const reacord = new ReacordDiscordJs(client)
|
||||
|
||||
client.on("ready", () => {
|
||||
client.application?.commands.create({
|
||||
name: "ping",
|
||||
description: "pong!",
|
||||
})
|
||||
})
|
||||
|
||||
client.on("interactionCreate", (interaction) => {
|
||||
if (interaction.isCommand() && interaction.commandName === "ping") {
|
||||
// Use the reply() function instead of send
|
||||
reacord.reply(interaction, <>pong!</>)
|
||||
}
|
||||
})
|
||||
|
||||
client.login(process.env.DISCORD_TOKEN)
|
||||
```
|
||||
|
||||
<aside>
|
||||
This example uses <a href="https://discord.com/developers/docs/interactions/application-commands#registering-a-command">global commands</a>, so the command might take a while to show up 😅
|
||||
</aside>
|
||||
|
||||
However, the process of creating commands can get really repetitive and error-prone. A command framework could help with this, or you could make a small helper:
|
||||
|
||||
```jsx
|
||||
function handleCommands(client, commands) {
|
||||
client.on("ready", () => {
|
||||
for (const { name, description } of commands) {
|
||||
client.application?.commands.create({ name, description })
|
||||
}
|
||||
})
|
||||
|
||||
client.on("interactionCreate", (interaction) => {
|
||||
if (interaction.isCommand()) {
|
||||
for (const command of commands) {
|
||||
if (interaction.commandName === command.name) {
|
||||
command.run(interaction)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
handleCommands(client, [
|
||||
{
|
||||
name: "ping",
|
||||
description: "pong!",
|
||||
run: (interaction) => {
|
||||
reacord.reply(interaction, <>pong!</>)
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "hi",
|
||||
description: "say hi",
|
||||
run: (interaction) => {
|
||||
reacord.reply(interaction, <>hi</>)
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
## Ephemeral Command Replies
|
||||
|
||||
Ephemeral replies are replies that only appear for one user. To create them, use the `.ephemeralReply()` function.
|
||||
|
||||
```tsx
|
||||
handleCommands(client, [
|
||||
{
|
||||
name: "pong",
|
||||
description: "pong, but in secret",
|
||||
run: (interaction) => {
|
||||
reacord.ephemeralReply(interaction, <>(pong)</>)
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
The `ephemeralReply` function also returns an instance, but ephemeral replies cannot be updated via `instance.render()`. You can `.deactivate()` them, but `.destroy()` will not delete the message; only the user can hide it from view.
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
order: 5
|
||||
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 />)
|
||||
```
|
||||
@@ -1,63 +0,0 @@
|
||||
import dotsBackgroundUrl from "~/assets/dots-background.svg"
|
||||
import { AppFooter } from "~/modules/app/app-footer"
|
||||
import { AppLogo } from "~/modules/app/app-logo"
|
||||
import LandingCode from "~/modules/landing/landing-code.mdx"
|
||||
import { MainNavigation } from "~/modules/navigation/main-navigation"
|
||||
import { buttonClass, maxWidthContainer } from "~/modules/ui/components"
|
||||
import { LandingAnimation } from "../modules/landing/landing-animation"
|
||||
import { UncontrolledModal } from "../modules/ui/modal"
|
||||
|
||||
export default function Landing() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 rotate-6 scale-125 opacity-20"
|
||||
style={{ backgroundImage: `url(${dotsBackgroundUrl})` }}
|
||||
/>
|
||||
<div className="flex flex-col relative min-w-0 min-h-screen pb-4 gap-4">
|
||||
<header className={maxWidthContainer}>
|
||||
<MainNavigation />
|
||||
</header>
|
||||
<div className="flex flex-col gap-4 my-auto px-4">
|
||||
<AppLogo className="w-full max-w-lg mx-auto" />
|
||||
|
||||
<div className="max-w-md w-full mx-auto">
|
||||
<LandingAnimation />
|
||||
</div>
|
||||
|
||||
<p className="text-center text-lg font-light -mb-1">
|
||||
Create interactive Discord messages with React.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-4 self-center">
|
||||
<a
|
||||
href="/guides/getting-started"
|
||||
className={buttonClass({ variant: "solid" })}
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
|
||||
<UncontrolledModal
|
||||
button={(button) => (
|
||||
<button
|
||||
{...button}
|
||||
className={buttonClass({ variant: "semiblack" })}
|
||||
>
|
||||
Show Code
|
||||
</button>
|
||||
)}
|
||||
>
|
||||
<div className="text-sm sm:text-base">
|
||||
<LandingCode />
|
||||
</div>
|
||||
</UncontrolledModal>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<AppFooter />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import { defineConfig } from "cypress"
|
||||
|
||||
export default defineConfig({
|
||||
e2e: {
|
||||
setupNodeEvents(on, config) {},
|
||||
baseUrl: "http://localhost:3000/",
|
||||
},
|
||||
})
|
||||
@@ -1,12 +0,0 @@
|
||||
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")
|
||||
})
|
||||
})
|
||||
@@ -1 +0,0 @@
|
||||
import "@testing-library/cypress/add-commands"
|
||||
@@ -1 +0,0 @@
|
||||
import "./commands"
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"types": ["cypress", "@testing-library/cypress"]
|
||||
},
|
||||
"include": ["."],
|
||||
"exclude": []
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
{
|
||||
"type": "module",
|
||||
"name": "website",
|
||||
"version": "0.4.3",
|
||||
"private": true,
|
||||
@@ -19,44 +20,23 @@
|
||||
"@astrojs/react": "^2.1.0",
|
||||
"@fontsource/jetbrains-mono": "^4.5.12",
|
||||
"@fontsource/rubik": "^4.5.14",
|
||||
"@headlessui/react": "^1.6.6",
|
||||
"@heroicons/react": "^2.0.16",
|
||||
"@reach/rect": "^0.17.0",
|
||||
"@remix-run/node": "^1.6.5",
|
||||
"@remix-run/react": "^1.6.5",
|
||||
"@remix-run/vercel": "^1.7.2",
|
||||
"@tailwindcss/typography": "^0.5.4",
|
||||
"@vercel/node": "^2.5.21",
|
||||
"@tailwindcss/typography": "^0.5.9",
|
||||
"astro": "^2.1.2",
|
||||
"clsx": "^1.2.1",
|
||||
"fast-glob": "^3.2.11",
|
||||
"gray-matter": "^4.0.3",
|
||||
"reacord": "workspace:*",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-focus-on": "^3.6.0",
|
||||
"react-router": "^6.3.0",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"zod": "^3.17.10"
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/tailwind": "^3.1.0",
|
||||
"@remix-run/dev": "^1.6.5",
|
||||
"@remix-run/serve": "^1.6.5",
|
||||
"@testing-library/cypress": "^8.0.3",
|
||||
"@types/node": "*",
|
||||
"@types/react": "^18.0.15",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"@types/wait-on": "^5.3.1",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"cypress": "^10.3.1",
|
||||
"execa": "^6.1.0",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.14",
|
||||
"rehype-prism-plus": "^1.4.2",
|
||||
"tailwindcss": "^3.2.7",
|
||||
"typedoc": "^0.23.8",
|
||||
"typescript": "^4.7.4",
|
||||
"wait-on": "^6.0.1"
|
||||
"typedoc": "^0.23.26",
|
||||
"typescript": "^4.9.5",
|
||||
"wait-on": "^7.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"type": "module"
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import cypress from "cypress"
|
||||
import { execa } from "execa"
|
||||
import waitOn from "wait-on"
|
||||
|
||||
await execa("pnpm", ["build"], { stdio: "inherit" })
|
||||
const app = execa("pnpm", ["start"], { stdio: "inherit" })
|
||||
await waitOn({ resources: ["http-get://localhost:3000"] })
|
||||
await cypress.run()
|
||||
app.kill()
|
||||
@@ -17,7 +17,6 @@
|
||||
"**/.cache/**",
|
||||
"**/api/_build/**",
|
||||
"**/public/**",
|
||||
"**/cypress/**",
|
||||
"app"
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user