From 4e3e458ce5e3348afead0582977aec4c01b089ec Mon Sep 17 00:00:00 2001 From: JEM Date: Sat, 21 Oct 2023 01:54:19 -0500 Subject: [PATCH] feat: Add Dropdown for Installation Commands on Homepage (#1612) --- cli/README.md | 2 +- .../landingPage/ClipboardSelect.tsx | 121 ++++++++++++++++++ www/src/components/landingPage/banner.astro | 81 +----------- www/src/pages/ar/installation.mdx | 2 +- www/src/pages/en/installation.mdx | 2 +- www/src/pages/es/installation.mdx | 2 +- www/src/pages/fr/installation.mdx | 2 +- www/src/pages/ja/installation.mdx | 2 +- www/src/pages/no/installation.mdx | 2 +- www/src/pages/pl/installation.mdx | 2 +- www/src/pages/pt/installation.mdx | 2 +- www/src/pages/ru/installation.mdx | 2 +- www/src/pages/zh-hans/installation.mdx | 2 +- www/tailwind.config.ts | 8 ++ 14 files changed, 146 insertions(+), 86 deletions(-) create mode 100644 www/src/components/landingPage/ClipboardSelect.tsx diff --git a/cli/README.md b/cli/README.md index 8c758a25be..1402e751ce 100644 --- a/cli/README.md +++ b/cli/README.md @@ -102,7 +102,7 @@ pnpm create t3-app@latest ### bun ```bash -bunx create-t3-app@latest +bun create t3-app@latest ``` For more advanced usage, check out the [CLI docs](https://create.t3.gg/en/installation). diff --git a/www/src/components/landingPage/ClipboardSelect.tsx b/www/src/components/landingPage/ClipboardSelect.tsx new file mode 100644 index 0000000000..2a8b459a8a --- /dev/null +++ b/www/src/components/landingPage/ClipboardSelect.tsx @@ -0,0 +1,121 @@ +import { Menu, Transition } from "@headlessui/react"; +import clsx from "clsx"; +import { Fragment, useState } from "react"; + +const commands = [ + { + command: "create t3-app@latest", + manager: "npm", + }, + { + command: "create t3-app", + manager: "yarn", + }, + { + command: "create t3-app@latest", + manager: "pnpm", + }, + { + command: "create t3-app@latest", + manager: "bun", + }, +]; + +export default function ClipboardSelect() { + const [coolDown, setCoolDown] = useState(false); + + const handleCopyToClipboard = async (manager: string, command: string) => { + const nextClipboard = `${manager} ${command}`; + try { + await navigator.clipboard.writeText(nextClipboard); + } catch (err) { + console.error("Failed to copy text: ", err); + } + }; + + const checkStyles = { + strokeDasharray: 450, + strokeDashoffset: -30, + }; + + return ( +
+ +
+ + + + + + + + + + + + {commands.map(({ manager, command }) => ( + + {({ active }) => { + return ( + + ); + }} + + ))} + + +
+ +
+ ); +} diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro index 26b041f250..4c4fdb6d16 100644 --- a/www/src/components/landingPage/banner.astro +++ b/www/src/components/landingPage/banner.astro @@ -1,5 +1,6 @@ --- import Button from "./button.astro"; +import ClipboardSelect from "./ClipboardSelect"; ---
@@ -69,43 +70,12 @@ import Button from "./button.astro";
- + npx create t3-app@latest + +
@@ -113,44 +83,5 @@ import Button from "./button.astro"; - - - diff --git a/www/src/pages/ar/installation.mdx b/www/src/pages/ar/installation.mdx index 6899519735..fd7b4032e3 100644 --- a/www/src/pages/ar/installation.mdx +++ b/www/src/pages/ar/installation.mdx @@ -32,7 +32,7 @@ pnpm create t3-app@latest ### bun ```bash -bunx create-t3-app@latest +bun create t3-app@latest ``` بعد أن تَنتهي عَملية إنشاء التطبيق، اَلق نَظرة عَلي [الخطوات الأولى](/ar/usage/first-steps) للبدء في تطبيقك الجديد. diff --git a/www/src/pages/en/installation.mdx b/www/src/pages/en/installation.mdx index fe6e3b7d38..17df75d4e2 100644 --- a/www/src/pages/en/installation.mdx +++ b/www/src/pages/en/installation.mdx @@ -31,7 +31,7 @@ pnpm create t3-app@latest ### bun ```bash -bunx create-t3-app@latest +bun create t3-app@latest ``` After your app has been scaffolded, check out the [first steps](/en/usage/first-steps) to get started on your new application. diff --git a/www/src/pages/es/installation.mdx b/www/src/pages/es/installation.mdx index b56f06a5cd..d562718dc8 100644 --- a/www/src/pages/es/installation.mdx +++ b/www/src/pages/es/installation.mdx @@ -31,7 +31,7 @@ pnpm create t3-app@latest ### bun ```bash -bunx create-t3-app@latest +bun create t3-app@latest ``` Después de que tu aplicación haya sido creada, consulta los [primeros pasos](/es/usage/first-steps) para comenzar con tu nueva aplicación. diff --git a/www/src/pages/fr/installation.mdx b/www/src/pages/fr/installation.mdx index 827e0c5028..953a69f357 100644 --- a/www/src/pages/fr/installation.mdx +++ b/www/src/pages/fr/installation.mdx @@ -31,7 +31,7 @@ pnpm create t3-app@latest ### bun ```bash -bunx create-t3-app@latest +bun create t3-app@latest ``` Une fois votre application configurée, consultez les [premières étapes](/fr/usage/first-steps) pour démarrer sur votre nouvelle application. diff --git a/www/src/pages/ja/installation.mdx b/www/src/pages/ja/installation.mdx index 729b083235..350afcd9aa 100644 --- a/www/src/pages/ja/installation.mdx +++ b/www/src/pages/ja/installation.mdx @@ -31,7 +31,7 @@ pnpm create t3-app@latest ### bun ```bash -bunx create-t3-app@latest +bun create t3-app@latest ``` アプリケーションの初期構成が生成されたら、[ファーストステップ](/ja/usage/first-steps) をチェックして、新しいアプリケーションを開始しましょう。 diff --git a/www/src/pages/no/installation.mdx b/www/src/pages/no/installation.mdx index b96b139c57..bb4c84de20 100644 --- a/www/src/pages/no/installation.mdx +++ b/www/src/pages/no/installation.mdx @@ -31,7 +31,7 @@ pnpm create t3-app@latest ### bun ```bash -bunx create-t3-app@latest +bun create t3-app@latest ``` Etter at applikasjonen din har blitt opprettet, sjekk ut [første steg](/no/usage/first-steps) for å begynne å utvikle den nye applikasjonen. diff --git a/www/src/pages/pl/installation.mdx b/www/src/pages/pl/installation.mdx index c2031d52b5..7366fef6f4 100644 --- a/www/src/pages/pl/installation.mdx +++ b/www/src/pages/pl/installation.mdx @@ -31,7 +31,7 @@ pnpm create t3-app@latest ### bun ```bash -bunx create-t3-app@latest +bun create t3-app@latest ``` Po tym, jak szablon aplikacji zostanie utworzony, sprawdź [pierwsze kroki](/pl/usage/first-steps) aby zacząć budować swoją nową aplikację. diff --git a/www/src/pages/pt/installation.mdx b/www/src/pages/pt/installation.mdx index 59efcf42d9..d7ae82eb32 100644 --- a/www/src/pages/pt/installation.mdx +++ b/www/src/pages/pt/installation.mdx @@ -31,7 +31,7 @@ pnpm create t3-app@latest ### bun ```bash -bunx create-t3-app@latest +bun create t3-app@latest ``` Após sua aplicação ter sido estruturada, verifique os [Primeiros Passos](/pt/usage/first-steps) para começar a usar sua nova aplicação. diff --git a/www/src/pages/ru/installation.mdx b/www/src/pages/ru/installation.mdx index 54e84243a8..1a11e7c6cb 100644 --- a/www/src/pages/ru/installation.mdx +++ b/www/src/pages/ru/installation.mdx @@ -31,7 +31,7 @@ pnpm create t3-app@latest ### bun ```bash -bunx create-t3-app@latest +bun create t3-app@latest ``` После того, как приложение будет создано, ознакомьтесь с [первыми шагами](/ru/usage/first-steps), чтобы начать работу над вашим новым приложением. diff --git a/www/src/pages/zh-hans/installation.mdx b/www/src/pages/zh-hans/installation.mdx index 4982bd7065..c78ea286cb 100644 --- a/www/src/pages/zh-hans/installation.mdx +++ b/www/src/pages/zh-hans/installation.mdx @@ -31,7 +31,7 @@ pnpm create t3-app@latest ### bun ```bash -bunx create-t3-app@latest +bun create t3-app@latest ``` 在你的应用程序被创建后，请查看 [第一步](/zh-hans/usage/first-steps) 以开始你的新应用。 diff --git a/www/tailwind.config.ts b/www/tailwind.config.ts index 536ee92de4..3cbef461ad 100644 --- a/www/tailwind.config.ts +++ b/www/tailwind.config.ts @@ -28,6 +28,14 @@ export default { "t3-purple-900": "#231ed3", "t3-purple-1000": "#1613cb", }, + animation: { + draw: "draw 2s linear normal", + }, + }, + keyframes: { + draw: { + to: { strokeDashoffset: "200" }, + }, }, fontFamily: { sans: [