release v0.3.0

it would probably be better to add an actual check and error for this, but meh

README.md

@@ -1,9 +1,7 @@
-<center>
+# reacord
-  <img src="./packages/website/app/assets/banner.png" alt="Reacord: Create interactive Discord messages using React">
+Create interactive Discord messages using React!
-</center>
-
-## Installation ∙ [![npm](https://img.shields.io/npm/v/reacord?color=blue&style=flat-square)](https://www.npmjs.com/package/reacord)
 
+## Installation
 ```console
 # npm
 npm install reacord react discord.js
@@ -17,11 +15,9 @@ pnpm add reacord react discord.js
 ```
 
 ## Get Started
-
 [Visit the docs to get started.](https://reacord.fly.dev/guides/getting-started)
 
 ## Example
-
 <!-- prettier-ignore -->
 ```tsx
 import * as React from "react"

packages/reacord/.gitignore

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

packages/reacord/library/core/components/action-row.tsx

@@ -21,9 +21,9 @@ export type ActionRowProps = {
  * ```tsx
  * // put buttons on two separate rows
  * <ActionRow>
- *   <Button label="First" onClick={handleFirst} />
+ *   <Button onClick={handleFirst}>First</Button>
  * </ActionRow>
- * <Button label="Second" onClick={handleSecond} />
+ * <Button onClick={handleSecond}>Second</Button>
  * ```
  *
  * @category Action Row

packages/reacord/package.json

@@ -2,27 +2,10 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.3.4",
+  "version": "0.3.0",
   "types": "./dist/main.d.ts",
-  "homepage": "https://reacord.fly.dev",
-  "repository": "https://github.com/itsMapleLeaf/reacord.git",
-  "changelog": "https://github.com/itsMapleLeaf/reacord/releases",
-  "license": "MIT",
-  "keywords": [
-    "discord",
-    "discord-js",
-    "react",
-    "react-js",
-    "react-renderer",
-    "interaction",
-    "message",
-    "embed",
-    "reacord"
-  ],
   "files": [
-    "dist",
+    "dist"
-    "README.md",
-    "LICENSE"
   ],
   "exports": {
     ".": {
@@ -41,7 +24,7 @@
     "test-dev": "vitest",
     "typecheck": "tsc --noEmit",
     "playground": "nodemon --exec esmo --ext ts,tsx --inspect=5858 --enable-source-maps ./playground/main.tsx",
-    "release": "bash scripts/release.sh"
+    "release": "release-it"
   },
   "dependencies": {
     "@types/node": "*",

packages/reacord/scripts/release.sh

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

packages/website/.gitignore

@@ -4,10 +4,6 @@ node_modules
 /build
 /public/build
 .env
+/public/api
 cypress/videos
 cypress/screenshots
-*.out.css
-
-# typedoc output
-/public/api
-/app/assets/api.json

packages/website/app/assets/dots-background.svg

@@ -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>

packages/website/app/modules/api/api-data.server.ts

@@ -1,8 +0,0 @@
-import type { JSONOutput } from "typedoc"
-import apiData from "~/assets/api.json"
-
-export type ApiData = JSONOutput.ContainerReflection
-
-export function getApiData(): ApiData {
-  return apiData as ApiData
-}

packages/website/app/modules/app/app-footer.tsx

@@ -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">
-        &copy; {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>
-  )
-}

packages/website/app/modules/dom/external-link.tsx

@@ -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>
-  )
-}

packages/website/app/modules/dom/portal.tsx

@@ -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}</>
-  )
-}

packages/website/app/modules/helpers/promise-all-object.ts

@@ -1,13 +0,0 @@
-export async function promiseAllObject<Input extends object>(
-  input: Input,
-): Promise<{
-  [K in keyof Input]: Awaited<Input[K]>
-}> {
-  const result: any = {}
-  await Promise.all(
-    Object.entries(input).map(async ([key, promise]) => {
-      result[key] = await promise
-    }),
-  )
-  return result
-}

packages/website/app/modules/landing/landing-animation.tsx

@@ -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>
-  )
-}

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

@@ -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()}
-      />
-    </>
-  )
-}
-```

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

@@ -0,0 +1,19 @@
+{/* prettier-ignore */}
+```tsx
+import * as React from "react"
+import { Embed, Button } from "reacord"
+
+function Counter() {
+  const [count, setCount] = React.useState(0)
+  return (
+    <>
+      <Embed title="Counter">
+        This button has been clicked {count} times.
+      </Embed>
+      <Button onClick={() => setCount(count + 1)}>
+        +1
+      </Button>
+    </>
+  )
+}
+```

packages/website/app/modules/markdown/render-markdown.server.ts

@@ -1,23 +0,0 @@
-export async function renderMarkdown(
-  markdown: string,
-): Promise<{ __html: string }> {
-  const rehypePrism = import("rehype-prism-plus").then(
-    (module) => module.default,
-  )
-  const rehypeStringify = import("rehype-stringify").then(
-    (module) => module.default,
-  )
-  const remarkParse = import("remark-parse").then((module) => module.default)
-  const remarkRehype = import("remark-rehype").then((module) => module.default)
-  const { unified } = await import("unified")
-
-  const processor = unified()
-    .use(await remarkParse)
-    .use(await remarkRehype)
-    .use(await rehypeStringify)
-    .use(await rehypePrism)
-
-  const result = await processor.process(markdown)
-
-  return { __html: result.toString() }
-}

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

@@ -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 })}</>
-}

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

@@ -1,6 +1,5 @@
 import type { ComponentPropsWithoutRef } from "react"
 import { Link } from "remix"
-import { ExternalLink } from "~/modules/dom/external-link"
 
 export type AppLinkProps = ComponentPropsWithoutRef<"a"> & {
   type: "internal" | "external" | "router"
@@ -18,9 +17,9 @@ export function AppLink({ type, to, children, ...props }: AppLinkProps) {
 
   if (type === "external") {
     return (
-      <ExternalLink href={to} {...props}>
+      <a href={to} target="_blank" rel="noopener noreferrer" {...props}>
         {children}
-      </ExternalLink>
+      </a>
     )
   }
 

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

@@ -18,7 +18,7 @@ export const mainLinks: AppLinkProps[] = [
   },
   {
     type: "internal",
-    to: "/api/",
+    to: "/api",
     children: (
       <>
         <CodeIcon className={inlineIconClass} /> API Reference

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

@@ -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`,
-  )

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

@@ -1,22 +1,41 @@
-import { AppLogo } from "~/modules/app/app-logo"
+import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
 import { linkClass } from "../ui/components"
+import { PopoverMenu } from "../ui/popover-menu"
 import { AppLink } from "./app-link"
 import { mainLinks } from "./main-links"
-import { MainNavigationMenu } from "./main-navigation-menu"
 
 export function MainNavigation() {
+  const guideLinks = useGuideLinksContext()
   return (
     <nav className="flex justify-between items-center h-16">
       <a href="/">
-        <AppLogo className="w-32" />
+        <h1 className="text-3xl font-light">reacord</h1>
       </a>
       <div className="hidden md:flex gap-4">
         {mainLinks.map((link) => (
-          <AppLink {...link} key={link.to} className={linkClass()} />
+          <AppLink {...link} key={link.to} className={linkClass} />
         ))}
       </div>
       <div className="md:hidden">
-        <MainNavigationMenu />
+        <PopoverMenu>
+          {mainLinks.map((link) => (
+            <AppLink
+              {...link}
+              role="menuitem"
+              key={link.to}
+              className={PopoverMenu.itemClass}
+            />
+          ))}
+          <hr className="border-0 h-[2px] bg-black/50" />
+          {guideLinks.map(({ link }) => (
+            <AppLink
+              {...link}
+              role="menuitem"
+              key={link.to}
+              className={PopoverMenu.itemClass}
+            />
+          ))}
+        </PopoverMenu>
       </div>
     </nav>
   )

packages/website/app/modules/ui/components.ts

@@ -4,41 +4,21 @@ 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 } = {}) =>
+export const linkClass = clsx`
-  clsx(
+  font-medium inline-block relative
-    clsx`font-medium inline-block relative`,
+  opacity-60 hover:opacity-100 transition-opacity
-    clsx`opacity-60 hover:opacity-100 transition-opacity`,
+  after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition
-    clsx`after:absolute after:block after:w-full after:h-px after:bg-white/50 after:translate-y-[3px] after:opacity-0 after:transition`,
+  hover:after:translate-y-[-1px] hover:after:opacity-100
-    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-p:my-4
   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`,
-  )
-}

packages/website/app/modules/ui/modal.tsx

@@ -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 ControlledModal({
-  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>
-    </>
-  )
-}

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

@@ -0,0 +1,32 @@
+import { MenuAlt4Icon } from "@heroicons/react/outline"
+import clsx from "clsx"
+import React from "react"
+import { linkClass } from "./components"
+
+export function PopoverMenu({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="relative" x-data="{ open: false }">
+      <button title="Menu" className={linkClass} x-on:click="open = !open">
+        <MenuAlt4Icon className="w-6" />
+      </button>
+      <div
+        role="menu"
+        className={`
+          w-48 max-h-[calc(100vh-4rem)]
+          absolute right-0 top-[calc(100%+8px)]
+          bg-slate-800 shadow rounded-lg
+          overflow-hidden overflow-y-auto 
+          transition-all
+        `}
+        x-bind:class="open ? 'visible opacity-100' : 'invisible opacity-0 translate-y-3'"
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+PopoverMenu.itemClass = clsx`
+  px-3 py-2 transition text-left font-medium block
+  opacity-50 hover:opacity-100 hover:bg-black/30
+`

packages/website/app/modules/ui/popper.tsx

@@ -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
-}

packages/website/app/root.tsx

@@ -5,41 +5,20 @@ import {
   LiveReload,
   Meta,
   Outlet,
-  Scripts,
   ScrollRestoration,
   useLoaderData,
 } from "remix"
-import bannerUrl from "~/assets/banner.png"
-import faviconUrl from "~/assets/favicon.png"
 import { GuideLinksProvider } from "~/modules/navigation/guide-links-context"
 import type { GuideLink } from "~/modules/navigation/load-guide-links.server"
 import { loadGuideLinks } from "~/modules/navigation/load-guide-links.server"
 import prismThemeCss from "~/modules/ui/prism-theme.css"
-import tailwindCss from "~/modules/ui/tailwind.out.css"
 
 export const meta: MetaFunction = () => ({
-  "title": "Reacord",
+  title: "Reacord",
-  "description": packageJson.description,
+  description: packageJson.description,
-  "theme-color": "#21754b",
-
-  "og:url": "https://reacord.fly.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.fly.dev",
-  "twitter:url": "https://reacord.fly.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",
@@ -51,6 +30,8 @@ export const links: LinksFunction = () => [
     as: "style",
     href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Rubik:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap",
   },
+  { rel: "stylesheet", href: "/tailwind.css" },
+  { rel: "stylesheet", href: prismThemeCss },
 ]
 
 type LoaderData = {
@@ -73,20 +54,13 @@ export default function App() {
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
-        {process.env.NODE_ENV === "production" && (
+        <script defer src="https://unpkg.com/alpinejs@3.7.1/dist/cdn.min.js" />
-          <script
-            async
-            data-website-id="49c69ade-5593-4853-9686-c9ca9d519a18"
-            src="https://maple-umami.fly.dev/umami.js"
-          />
-        )}
       </head>
       <body>
         <GuideLinksProvider value={data.guideLinks}>
           <Outlet />
         </GuideLinksProvider>
         <ScrollRestoration />
-        <Scripts />
         {process.env.NODE_ENV === "development" && <LiveReload />}
       </body>
     </html>

packages/website/app/routes/api.tsx

@@ -1,78 +0,0 @@
-import clsx from "clsx"
-import { Fragment } from "react"
-import type { LoaderFunction } from "remix"
-import { Outlet, useLoaderData } from "remix"
-import { getApiData } from "~/modules/api/api-data.server"
-import { ActiveLink } from "~/modules/navigation/active-link"
-import type { AppLinkProps } from "~/modules/navigation/app-link"
-import { AppLink } from "~/modules/navigation/app-link"
-import { MainNavigation } from "~/modules/navigation/main-navigation"
-import { linkClass, maxWidthContainer } from "~/modules/ui/components"
-
-type LoaderData = {
-  categorySections: Array<{
-    title: string
-    links: AppLinkProps[]
-  }>
-  // [key: string]: unknown
-}
-
-export const loader: LoaderFunction = async () => {
-  const apiData = getApiData()
-
-  const childrenById = Object.fromEntries(
-    apiData.children.map((child) => [child.id, { name: child.name }]),
-  )
-
-  const data: LoaderData = {
-    categorySections: apiData.categories.map((category) => ({
-      title: category.title,
-      links: category.children
-        .map((childId) => childrenById[childId])
-        .flatMap<AppLinkProps>((child) =>
-          child
-            ? { to: `/api/${child.name}`, type: "router", children: child.name }
-            : [],
-        ),
-    })),
-  }
-  return data
-}
-
-export default function ApiReferencePage() {
-  const data = useLoaderData<LoaderData>()
-  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>
-
-      <div className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
-        <nav className="w-48 sticky top-24 hidden md:block">
-          {data.categorySections.map((category) => (
-            <Fragment key={category.title}>
-              <h2 className="text-2xl">{category.title}</h2>
-              <ul className="mt-3 mb-6 flex flex-col gap-2 items-start">
-                {category.links.map((link) => (
-                  <li key={link.to}>
-                    <ActiveLink to={link.to}>
-                      {({ active }) => (
-                        <AppLink {...link} className={linkClass({ active })} />
-                      )}
-                    </ActiveLink>
-                  </li>
-                ))}
-              </ul>
-            </Fragment>
-          ))}
-        </nav>
-
-        <main className="pb-8 flex-1 min-w-0">
-          <Outlet />
-        </main>
-      </div>
-    </div>
-  )
-}

packages/website/app/routes/api/$name.tsx

@@ -1,92 +0,0 @@
-import type { LoaderFunction } from "remix"
-import { useLoaderData } from "remix"
-import { getApiData } from "~/modules/api/api-data.server"
-import { renderMarkdown } from "~/modules/markdown/render-markdown.server"
-import { docsProseClass } from "~/modules/ui/components"
-
-type LoaderData = {
-  title: string
-  description?: { __html: string }
-  [key: string]: unknown
-}
-
-export const loader: LoaderFunction = async ({ params }) => {
-  const apiData = getApiData()
-
-  const entityName = params.name!
-
-  const info = apiData.children?.find((child) => child.name === entityName)
-
-  const description = [
-    info?.comment?.shortText,
-    info?.comment?.text,
-    info?.signatures?.[0]?.comment?.shortText,
-    info?.signatures?.[0]?.comment?.text,
-  ]
-    .filter(Boolean)
-    .join("\n\n")
-
-  const data: LoaderData = {
-    title: entityName,
-    description: description ? await renderMarkdown(description) : undefined,
-    sig: await renderMarkdown(`
-\`\`\`tsx
-function ActionRow(props: ActionRowProps): ReactElement
-\`\`\`
-`),
-  }
-  return data
-}
-
-export default function ApiDetailPage() {
-  const data = useLoaderData<LoaderData>()
-
-  return (
-    <>
-      <h1 className="text-3xl font-light">{data.title}</h1>
-      <p className="text-sm font-bold opacity-50 uppercase mt-1">Component</p>
-      <section
-        className={docsProseClass}
-        dangerouslySetInnerHTML={data.description}
-      />
-      <section className={docsProseClass}>
-        <ul>
-          <li>
-            <p>
-              <code>children?: ReactNode</code>
-            </p>
-            <p>
-              This should be a list of <code>{`<Option />`}</code> components.
-            </p>
-            <ul>
-              <li>
-                <p>
-                  <code>disabled?: boolean</code>
-                </p>
-                <p>
-                  When true, the select will be slightly faded, and cannot be
-                  interacted with.
-                </p>
-              </li>
-            </ul>
-          </li>
-          <li>
-            <p>
-              <code>minValues?: number</code>
-            </p>
-            <p>
-              With <code>multiple</code>, the minimum number of values that can
-              be selected. When <code>multiple</code> is false or not defined,
-              this is always 1.
-            </p>
-            <p>
-              This only limits the number of values that can be received by the
-              user. This does not limit the number of values that can be
-              displayed by you.
-            </p>
-          </li>
-        </ul>
-      </section>
-    </>
-  )
-}

packages/website/app/routes/guides.tsx

@@ -1,6 +1,5 @@
 import clsx from "clsx"
 import { Outlet } from "remix"
-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"
@@ -13,7 +12,7 @@ import {
 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 />
@@ -25,11 +24,7 @@ export default function GuidePage() {
           <ul className="mt-3 flex flex-col gap-2 items-start">
             {guideLinks.map(({ link }) => (
               <li key={link.to}>
-                <ActiveLink to={link.to}>
+                <AppLink {...link} className={linkClass} />
-                  {({ active }) => (
-                    <AppLink {...link} className={linkClass({ active })} />
-                  )}
-                </ActiveLink>
               </li>
             ))}
           </ul>
@@ -38,6 +33,6 @@ export default function GuidePage() {
           <Outlet />
         </section>
       </main>
-    </div>
+    </>
   )
 }

packages/website/app/routes/index.tsx

@@ -1,63 +1,29 @@
-import dotsBackgroundUrl from "~/assets/dots-background.svg"
+import packageJson from "reacord/package.json"
-import { AppFooter } from "~/modules/app/app-footer"
+import LandingExample from "~/modules/landing/landing-example.mdx"
-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 { maxWidthContainer } from "~/modules/ui/components"
-import { LandingAnimation } from "../modules/landing/landing-animation"
-import { ControlledModal } from "../modules/ui/modal"
 
 export default function Landing() {
   return (
-    <>
+    <div className="flex flex-col min-w-0 min-h-screen text-center">
-      <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">
+      <div className="px-4 pb-8 flex flex-1">
-          <AppLogo className="w-full max-w-lg mx-auto" />
+        <main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
-
+          <h1 className="text-6xl font-light">reacord</h1>
-          <div className="max-w-md w-full mx-auto">
+          <section className="mx-auto text-sm sm:text-base">
-            <LandingAnimation />
+            <LandingExample />
-          </div>
+          </section>
-
+          <p className="text-2xl font-light">{packageJson.description}</p>
-          <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" })}
+            className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
           >
             Get Started
           </a>
-
+        </main>
-            <ControlledModal
-              button={(button) => (
-                <button
-                  {...button}
-                  className={buttonClass({ variant: "semiblack" })}
-                >
-                  Show Code
-                </button>
-              )}
-            >
-              <div className="text-sm sm:text-base">
-                <LandingCode />
-              </div>
-            </ControlledModal>
       </div>
     </div>
-
-        <div className="text-center">
-          <AppFooter />
-        </div>
-      </div>
-    </>
   )
 }

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

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

packages/website/package.json

@@ -3,36 +3,29 @@
   "name": "website",
   "scripts": {
     "prepare": "remix setup node",
-    "dev": "NODE_OPTIONS=--enable-source-maps concurrently 'typedoc --watch' 'pnpm tailwind -- --watch' 'remix dev'",
+    "dev": "concurrently 'typedoc --watch' 'remix dev'",
     "test": "node ./scripts/test.js",
     "test-dev": "pnpm dev & wait-on http-get://localhost:3000 && cypress open",
-    "build": "typedoc && pnpm tailwind -- --minify && remix build",
+    "build": "typedoc && remix build",
     "start": "remix-serve build",
-    "tailwind": "tailwindcss --config tailwind.config.cjs --input app/modules/ui/tailwind.css --output app/modules/ui/tailwind.out.css",
     "typecheck": "tsc --noEmit && tsc --project cypress/tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@headlessui/react": "^1.4.2",
     "@heroicons/react": "^1.0.5",
-    "@reach/rect": "^0.16.0",
     "@remix-run/react": "^1.1.1",
     "@remix-run/serve": "^1.1.1",
     "@tailwindcss/typography": "^0.5.0",
+    "autoprefixer": "^10.4.2",
     "clsx": "^1.1.1",
     "fast-glob": "^3.2.10",
     "gray-matter": "^4.0.3",
+    "postcss": "^8.4.5",
     "reacord": "workspace:*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-focus-on": "^3.5.4",
-    "react-router": "^6.2.1",
-    "react-router-dom": "^6.2.1",
-    "rehype-stringify": "^9.0.2",
-    "remark-parse": "^10.0.1",
-    "rehype-prism-plus": "^1.3.1",
-    "remark-rehype": "^10.1.0",
     "remix": "^1.1.1",
-    "unified": "^10.1.1"
+    "remix-tailwind": "^0.2.1",
+    "tailwindcss": "^3.0.13"
   },
   "devDependencies": {
     "@remix-run/dev": "^1.1.1",
@@ -43,12 +36,10 @@
     "@types/react-dom": "^17.0.11",
     "@types/tailwindcss": "^3.0.2",
     "@types/wait-on": "^5.3.1",
-    "autoprefixer": "^10.4.2",
     "concurrently": "^7.0.0",
     "cypress": "^9.2.1",
     "execa": "^6.0.0",
-    "postcss": "^8.4.5",
+    "rehype-prism-plus": "^1.3.1",
-    "tailwindcss": "^3.0.13",
     "typedoc": "^0.22.10",
     "typescript": "^4.5.4",
     "wait-on": "^6.0.0"

packages/website/scripts/test.js

@@ -6,4 +6,5 @@ await execa("pnpm", ["build"], { stdio: "inherit" })
 const app = execa("pnpm", ["start"], { stdio: "inherit" })
 await waitOn({ resources: ["http-get://localhost:3000"] })
 await cypress.run()
+console.log("cypress run done")
 app.kill()

packages/website/typedoc.json

@@ -1,8 +1,7 @@
 {
-  "$schema": "https://typedoc.org/schema.json",
   "entryPoints": ["../reacord/library/main.ts"],
+  "out": ["public/api"],
   "tsconfig": "../reacord/tsconfig.json",
-  "json": "./app/assets/api.json",
   "excludeInternal": true,
   "excludePrivate": true,
   "excludeProtected": true,