From 3969e6471f0c844facbe92091b8a3b4607364e58 Mon Sep 17 00:00:00 2001 From: itsMapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com> Date: Sun, 12 Mar 2023 14:43:23 -0500 Subject: [PATCH] finished landing --- .eslintrc.cjs | 2 + packages/website/astro.config.mjs | 2 +- .../website/src/components/app-footer.astro | 14 ++ .../website/src/components/app-logo.astro | 15 ++ .../src/components/external-link.astro | 7 + .../src/components/landing-animation.tsx | 195 ++++++++++++++++++ .../src/components/main-navigation.astro | 69 +++++++ .../website/src/components/menu-item.astro | 13 ++ packages/website/src/components/menu.astro | 28 +++ packages/website/src/layout.astro | 1 + packages/website/src/pages/index.astro | 51 ++++- packages/website/src/styles/tailwind.css | 42 ++++ packages/website/tailwind.config.cjs | 5 +- 13 files changed, 441 insertions(+), 3 deletions(-) create mode 100644 packages/website/src/components/app-footer.astro create mode 100644 packages/website/src/components/app-logo.astro create mode 100644 packages/website/src/components/external-link.astro create mode 100644 packages/website/src/components/landing-animation.tsx create mode 100644 packages/website/src/components/main-navigation.astro create mode 100644 packages/website/src/components/menu-item.astro create mode 100644 packages/website/src/components/menu.astro create mode 100644 packages/website/src/styles/tailwind.css diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 3cc360d..2814a8e 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -30,6 +30,8 @@ module.exports = { }, rules: { "react/no-unknown-property": "off", + "react/jsx-key": "off", + "react/jsx-no-undef": "off", }, }, ], diff --git a/packages/website/astro.config.mjs b/packages/website/astro.config.mjs index 9ede753..8882402 100644 --- a/packages/website/astro.config.mjs +++ b/packages/website/astro.config.mjs @@ -3,5 +3,5 @@ import tailwind from "@astrojs/tailwind" import { defineConfig } from "astro/config" export default defineConfig({ - integrations: [tailwind(), react()], + integrations: [tailwind({ config: { applyBaseStyles: false } }), react()], }) diff --git a/packages/website/src/components/app-footer.astro b/packages/website/src/components/app-footer.astro new file mode 100644 index 0000000..d322f9f --- /dev/null +++ b/packages/website/src/components/app-footer.astro @@ -0,0 +1,14 @@ +--- +import { HeartIcon } from "@heroicons/react/solid" +import ExternalLink from "./external-link.astro" +--- + + diff --git a/packages/website/src/components/app-logo.astro b/packages/website/src/components/app-logo.astro new file mode 100644 index 0000000..fca1996 --- /dev/null +++ b/packages/website/src/components/app-logo.astro @@ -0,0 +1,15 @@ +--- +export type Props = astroHTML.JSX.SVGAttributes +--- + + + + + + diff --git a/packages/website/src/components/external-link.astro b/packages/website/src/components/external-link.astro new file mode 100644 index 0000000..ddc1f2c --- /dev/null +++ b/packages/website/src/components/external-link.astro @@ -0,0 +1,7 @@ +--- +export type Props = astroHTML.JSX.AnchorHTMLProps +--- + + + + diff --git a/packages/website/src/components/landing-animation.tsx b/packages/website/src/components/landing-animation.tsx new file mode 100644 index 0000000..a929c30 --- /dev/null +++ b/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(null) + const addRef = useRef(null) + const deleteRef = useRef(null) + const cursorRef = useRef(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 ( +
+
+
+
+ +
+
+

comfybot

+

this button was clicked {state.count} times

+
+
+ +1 +
+
+ 🗑 delete +
+
+
+
+
+
+ + {state.chatInputText || ( + + Message #showing-off-reacord + + )} + +
+ + +
+ ) +} diff --git a/packages/website/src/components/main-navigation.astro b/packages/website/src/components/main-navigation.astro new file mode 100644 index 0000000..836ec0f --- /dev/null +++ b/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, + }, +] +--- + + diff --git a/packages/website/src/components/menu-item.astro b/packages/website/src/components/menu-item.astro new file mode 100644 index 0000000..40ed329 --- /dev/null +++ b/packages/website/src/components/menu-item.astro @@ -0,0 +1,13 @@ +--- +export type Props = { + icon: (props: { class?: string; className?: string }) => any + label: string +} +--- + +
+ + {Astro.props.label} +
diff --git a/packages/website/src/components/menu.astro b/packages/website/src/components/menu.astro new file mode 100644 index 0000000..0eb0024 --- /dev/null +++ b/packages/website/src/components/menu.astro @@ -0,0 +1,28 @@ +
+ + + +
+ +
+
+ + diff --git a/packages/website/src/layout.astro b/packages/website/src/layout.astro index 4566507..cece92a 100644 --- a/packages/website/src/layout.astro +++ b/packages/website/src/layout.astro @@ -5,6 +5,7 @@ import packageJson from "reacord/package.json" import bannerUrl from "~/assets/banner.png" import faviconUrl from "~/assets/favicon.png" import "~/styles/prism-theme.css" +import "~/styles/tailwind.css" --- diff --git a/packages/website/src/pages/index.astro b/packages/website/src/pages/index.astro index 558befa..9009060 100644 --- a/packages/website/src/pages/index.astro +++ b/packages/website/src/pages/index.astro @@ -1,5 +1,54 @@ --- +import dotsBackgroundUrl from "~/assets/dots-background.svg" +import AppFooter from "~/components/app-footer.astro" +import AppLogo from "~/components/app-logo.astro" +import { LandingAnimation } from "~/components/landing-animation" +import MainNavigation from "~/components/main-navigation.astro" import Layout from "~/layout.astro" --- -content! + +
+
+
+
+ +
+
+ + +
+ +
+ +

+ Create interactive Discord messages with React. +

+ +
+ + Get Started + + + +
+
+ +
+ +
+
+ diff --git a/packages/website/src/styles/tailwind.css b/packages/website/src/styles/tailwind.css new file mode 100644 index 0000000..1c39410 --- /dev/null +++ b/packages/website/src/styles/tailwind.css @@ -0,0 +1,42 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :focus { + @apply outline-none; + } + :focus-visible { + @apply ring-2 ring-emerald-500 ring-inset; + } +} + +@layer components { + .container { + @apply mx-auto w-full max-w-screen-lg px-4; + } + + .inline-icon { + @apply inline w-5 align-sub; + } + + .link { + @apply font-medium inline-block relative opacity-60 hover:opacity-100 transition-opacity; + } + .link::after { + @apply content-[''] absolute block w-full h-px bg-current translate-y-[3px] opacity-0 transition; + } + .link:hover::after { + @apply -translate-y-px opacity-50; + } + .link-active { + @apply text-emerald-500; + } + + .button { + @apply inline-block mt-4 px-4 py-2.5 text-xl transition rounded-lg bg-black/25 hover:bg-black/40 hover:-translate-y-0.5 hover:shadow active:translate-y-0 active:transition-none; + } + .button-solid { + @apply bg-emerald-700 hover:bg-emerald-800; + } +} diff --git a/packages/website/tailwind.config.cjs b/packages/website/tailwind.config.cjs index 900ca9b..39901c3 100644 --- a/packages/website/tailwind.config.cjs +++ b/packages/website/tailwind.config.cjs @@ -1,6 +1,6 @@ // @ts-nocheck module.exports = { - content: ["./app/**/*.{ts,tsx,md}"], + content: ["./src/**/*.{ts,tsx,md,astro}"], theme: { fontFamily: { sans: ["RubikVariable", "sans-serif"], @@ -11,5 +11,8 @@ module.exports = { }, extend: {}, }, + corePlugins: { + container: false, + }, plugins: [require("@tailwindcss/typography")], }