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",
|
"name": "website",
|
||||||
"version": "0.4.3",
|
"version": "0.4.3",
|
||||||
"private": true,
|
"private": true,
|
||||||
@@ -19,44 +20,23 @@
|
|||||||
"@astrojs/react": "^2.1.0",
|
"@astrojs/react": "^2.1.0",
|
||||||
"@fontsource/jetbrains-mono": "^4.5.12",
|
"@fontsource/jetbrains-mono": "^4.5.12",
|
||||||
"@fontsource/rubik": "^4.5.14",
|
"@fontsource/rubik": "^4.5.14",
|
||||||
"@headlessui/react": "^1.6.6",
|
|
||||||
"@heroicons/react": "^2.0.16",
|
"@heroicons/react": "^2.0.16",
|
||||||
"@reach/rect": "^0.17.0",
|
"@tailwindcss/typography": "^0.5.9",
|
||||||
"@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",
|
|
||||||
"astro": "^2.1.2",
|
"astro": "^2.1.2",
|
||||||
"clsx": "^1.2.1",
|
"clsx": "^1.2.1",
|
||||||
"fast-glob": "^3.2.11",
|
|
||||||
"gray-matter": "^4.0.3",
|
|
||||||
"reacord": "workspace:*",
|
"reacord": "workspace:*",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^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"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@astrojs/tailwind": "^3.1.0",
|
"@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/node": "*",
|
||||||
"@types/react": "^18.0.15",
|
"@types/react": "^18.0.28",
|
||||||
"@types/react-dom": "^18.0.6",
|
"@types/react-dom": "^18.0.11",
|
||||||
"@types/wait-on": "^5.3.1",
|
|
||||||
"autoprefixer": "^10.4.7",
|
|
||||||
"cypress": "^10.3.1",
|
|
||||||
"execa": "^6.1.0",
|
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"postcss": "^8.4.14",
|
|
||||||
"rehype-prism-plus": "^1.4.2",
|
|
||||||
"tailwindcss": "^3.2.7",
|
"tailwindcss": "^3.2.7",
|
||||||
"typedoc": "^0.23.8",
|
"typedoc": "^0.23.26",
|
||||||
"typescript": "^4.7.4",
|
"typescript": "^4.9.5",
|
||||||
"wait-on": "^6.0.1"
|
"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/**",
|
"**/.cache/**",
|
||||||
"**/api/_build/**",
|
"**/api/_build/**",
|
||||||
"**/public/**",
|
"**/public/**",
|
||||||
"**/cypress/**",
|
|
||||||
"app"
|
"app"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
5277
pnpm-lock.yaml
generated
5277
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user