0.3.5

.github/workflows/deploy-website.yml

@@ -1,17 +0,0 @@
-name: deploy website
-on:
-  push:
-    branches: [main]
-    paths:
-      - "packages/website/**"
-      - "reacord/library/**/*.{ts,tsx}"
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: superfly/flyctl-actions@master
-        env:
-          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
-        with:
-          args: "deploy"

README.md

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

fly.toml

@@ -1,40 +0,0 @@
-# fly.toml file generated for reacord on 2021-12-29T14:06:41-06:00
-
-app = "reacord"
-
-kill_signal = "SIGINT"
-kill_timeout = 5
-processes = []
-
-[env]
-PORT = 8080
-
-[experimental]
-allowed_public_ports = []
-auto_rollback = true
-
-[[services]]
-http_checks = []
-internal_port = 8080
-processes = ["app"]
-protocol = "tcp"
-script_checks = []
-
-[services.concurrency]
-hard_limit = 25
-soft_limit = 20
-type = "connections"
-
-[[services.ports]]
-handlers = ["http"]
-port = 80
-
-[[services.ports]]
-handlers = ["tls", "http"]
-port = 443
-
-[[services.tcp_checks]]
-grace_period = "1s"
-interval = "15s"
-restart_limit = 0
-timeout = "2s"

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

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

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

@@ -10,7 +10,7 @@ export const InstanceProvider = Context.Provider
  * Get the associated instance for the current component.
  *
  * @category Core
- * @see https://reacord.fly.dev/guides/use-instance
+ * @see https://reacord.mapleleaf.dev/guides/use-instance
  */
 export function useInstance(): ReacordInstance {
   return (

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

@@ -40,7 +40,7 @@ export class ReacordDiscordJs extends Reacord {
 
   /**
    * Sends a message to a channel.
-   * @see https://reacord.fly.dev/guides/sending-messages
+   * @see https://reacord.mapleleaf.dev/guides/sending-messages
    */
   override send(
     channelId: string,
@@ -54,7 +54,7 @@ export class ReacordDiscordJs extends Reacord {
 
   /**
    * Sends a message as a reply to a command interaction.
-   * @see https://reacord.fly.dev/guides/sending-messages
+   * @see https://reacord.mapleleaf.dev/guides/sending-messages
    */
   override reply(
     interaction: Discord.CommandInteraction,
@@ -68,7 +68,7 @@ export class ReacordDiscordJs extends Reacord {
 
   /**
    * Sends an ephemeral message as a reply to a command interaction.
-   * @see https://reacord.fly.dev/guides/sending-messages
+   * @see https://reacord.mapleleaf.dev/guides/sending-messages
    */
   override ephemeralReply(
     interaction: Discord.CommandInteraction,

packages/reacord/package.json

@@ -2,9 +2,9 @@
   "name": "reacord",
   "type": "module",
   "description": "Create interactive Discord messages using React.",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "types": "./dist/main.d.ts",
-  "homepage": "https://reacord.fly.dev",
+  "homepage": "https://reacord.mapleleaf.dev",
   "repository": "https://github.com/itsMapleLeaf/reacord.git",
   "changelog": "https://github.com/itsMapleLeaf/reacord/releases",
   "license": "MIT",

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

@@ -11,13 +11,13 @@ export function AppFooter() {
       </address>
       <p>
         Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}
-        <ExternalLink className={linkClass} href="https://remix.run">
+        <ExternalLink className={linkClass()} href="https://remix.run">
           Remix
         </ExternalLink>
       </p>
       <p>
         Uses{" "}
-        <ExternalLink className={linkClass} href="https://umami.is/">
+        <ExternalLink className={linkClass()} href="https://umami.is/">
           umami
         </ExternalLink>{" "}
         for simple, non-identifying analytics.

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

@@ -0,0 +1,14 @@
+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/main-navigation-menu.tsx

@@ -1,6 +1,7 @@
 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"
@@ -39,8 +40,17 @@ export function MainNavigationMenu() {
               </Menu.Item>
               {guideLinks.map(({ link }) => (
                 <Menu.Item key={link.to}>
-                  {({ active }) => (
-                    <AppLink {...link} className={menuItemClass({ active })} />
+                  {(menuItem) => (
+                    <ActiveLink to={link.to}>
+                      {(activeLink) => (
+                        <AppLink
+                          {...link}
+                          className={menuItemClass({
+                            active: activeLink.active || menuItem.active,
+                          })}
+                        />
+                      )}
+                    </ActiveLink>
                   )}
                 </Menu.Item>
               ))}

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

@@ -9,10 +9,11 @@ export function MainNavigation() {
     <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} />
+          <AppLink {...link} key={link.to} className={linkClass()} />
         ))}
       </div>
       <div className="md:hidden">

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

@@ -4,22 +4,28 @@ 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 = clsx`
-  font-medium inline-block relative
-  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
-  hover:after:translate-y-[-1px] hover:after:opacity-100
-`
+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-4
+  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
 `
 

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

@@ -61,7 +61,7 @@ export function Modal({
   )
 }
 
-export function ControlledModal({
+export function UncontrolledModal({
   children,
   button,
 }: {

packages/website/app/root.tsx

@@ -22,15 +22,15 @@ export const meta: MetaFunction = () => ({
   "description": packageJson.description,
   "theme-color": "#21754b",
 
-  "og:url": "https://reacord.fly.dev/",
+  "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.fly.dev",
-  "twitter:url": "https://reacord.fly.dev/",
+  "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,
@@ -51,6 +51,10 @@ 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: "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",
+  },
 ]
 
 type LoaderData = {
@@ -77,7 +81,7 @@ export default function App() {
           <script
             async
             data-website-id="49c69ade-5593-4853-9686-c9ca9d519a18"
-            src="https://maple-umami.fly.dev/umami.js"
+            src="https://umami-production-265f.up.railway.app/umami.js"
           />
         )}
       </head>

packages/website/app/routes/guides.tsx

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

packages/website/app/routes/index.tsx

@@ -5,7 +5,7 @@ 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 { ControlledModal } from "../modules/ui/modal"
+import { UncontrolledModal } from "../modules/ui/modal"
 
 export default function Landing() {
   return (
@@ -37,7 +37,7 @@ export default function Landing() {
               Get Started
             </a>
 
-            <ControlledModal
+            <UncontrolledModal
               button={(button) => (
                 <button
                   {...button}
@@ -50,7 +50,7 @@ export default function Landing() {
               <div className="text-sm sm:text-base">
                 <LandingCode />
               </div>
-            </ControlledModal>
+            </UncontrolledModal>
           </div>
         </div>
 

packages/website/package.json

@@ -25,6 +25,8 @@
     "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",
     "remix": "^1.1.1"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -117,6 +117,8 @@ importers:
       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-prism-plus: ^1.3.1
       remix: ^1.1.1
       tailwindcss: ^3.0.13
@@ -137,6 +139,8 @@ importers:
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
       react-focus-on: 3.5.4_b08e3c15324cbe90a6ff8fcd416c932c
+      react-router: 6.2.1_react@17.0.2
+      react-router-dom: 6.2.1_react-dom@17.0.2+react@17.0.2
       remix: 1.1.1
     devDependencies:
       '@remix-run/dev': 1.1.1