finished landing

packages/website/src/components/app-footer.astro

@@ -0,0 +1,14 @@
+---
+import { HeartIcon } from "@heroicons/react/solid"
+import ExternalLink from "./external-link.astro"
+---
+
+<footer class="container text-xs opacity-75">
+  <address class="not-italic">
+    &copy; {new Date().getFullYear()} itsMapleLeaf
+  </address>
+  <p>
+    Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}
+    <ExternalLink class="link" href="https://astro.build">Astro</ExternalLink>
+  </p>
+</footer>

packages/website/src/components/external-link.astro

@@ -0,0 +1,7 @@
+---
+export type Props = astroHTML.JSX.AnchorHTMLProps
+---
+
+<a rel="noopener noreferrer" target="_blank" {...Astro.props}>
+  <slot />
+</a>

packages/website/src/components/landing-animation.tsx

@@ -0,0 +1,195 @@
+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 bg-transparent"
+        style={{ left: state.cursorLeft, bottom: state.cursorBottom }}
+        ref={cursorRef}
+      />
+    </div>
+  )
+}

packages/website/src/components/main-navigation.astro

@@ -0,0 +1,69 @@
+---
+import { MenuIcon } from "@heroicons/react/outline"
+import {
+  CodeIcon,
+  DocumentTextIcon,
+  ExternalLinkIcon,
+} from "@heroicons/react/solid"
+import AppLogo from "./app-logo.astro"
+import ExternalLink from "./external-link.astro"
+import MenuItem from "./menu-item.astro"
+import Menu from "./menu.astro"
+
+const links = [
+  {
+    href: "/guides/getting-started",
+    label: "Guides",
+    icon: DocumentTextIcon,
+    component: "a",
+  },
+  {
+    href: "/api/",
+    label: "API Reference",
+    icon: CodeIcon,
+    component: "a",
+  },
+  {
+    href: "https://github.com/itsMapleLeaf/reacord",
+    label: "GitHub",
+    icon: ExternalLinkIcon,
+    component: ExternalLink,
+  },
+]
+---
+
+<nav class="flex justify-between items-center h-16">
+  <a href="/">
+    <AppLogo class="w-32" />
+    <span class="sr-only">Home</span>
+  </a>
+  <div class="hidden md:flex gap-4">
+    {
+      links.map((link) => (
+        <link.component
+          href={link.href}
+          class="link inline-flex gap-1 items-center"
+        >
+          <link.icon className="inline-icon" />
+          {link.label}
+        </link.component>
+      ))
+    }
+  </div>
+
+  <Menu>
+    <Fragment slot="button">
+      <MenuIcon className="w-6" />
+      <span class="sr-only">Menu</span>
+    </Fragment>
+    {
+      links.map((link) => (
+        <link.component href={link.href}>
+          <MenuItem icon={link.icon} label={link.label} />
+        </link.component>
+      ))
+    }
+    <hr class="border-black/25" />
+    <!-- TODO: guide links -->
+  </Menu>
+</nav>

packages/website/src/components/menu-item.astro

@@ -0,0 +1,13 @@
+---
+export type Props = {
+  icon: (props: { class?: string; className?: string }) => any
+  label: string
+}
+---
+
+<div
+  class="px-3 py-2 transition text-left font-medium block w-full opacity-50 inline-flex gap-1 items-center"
+>
+  <Astro.props.icon class="inline-icon" className="inline-icon" />
+  {Astro.props.label}
+</div>

packages/website/src/components/menu.astro

@@ -0,0 +1,28 @@
+<details class="md:hidden relative" data-menu>
+  <summary class="list-none p-2 -m-2">
+    <slot name="button" />
+  </summary>
+  <div
+    class="w-48 max-h-[calc(100vh-5rem)] bg-slate-800 shadow rounded-lg overflow-x-hidden overflow-y-auto top-[calc(100%+8px)] right-0 absolute"
+  >
+    <slot />
+  </div>
+</details>
+
+<script>
+  for (const menu of document.querySelectorAll<HTMLDetailsElement>(
+    "[data-menu]",
+  )) {
+    window.addEventListener("click", (event) => {
+      if (!menu.contains(event.target as Node)) {
+        menu.open = false
+      }
+    })
+    menu.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        menu.open = false
+        menu.querySelector("summary")!.focus()
+      }
+    })
+  }
+</script>