From c7f33df5198f18fdc91ff7622f1b71bca850083d Mon Sep 17 00:00:00 2001 From: Jacksonmills Date: Fri, 20 Oct 2023 00:46:36 -0500 Subject: [PATCH 01/14] feat: Add dropdown for package manager options in installation command This commit adds a dropdown menu in the landing page banner component that allows users to select different package manager options for the installation command. The dropdown menu includes options for npm, yarn, pnpm, and bunx. When a user clicks on one of the options, the corresponding command is copied to their clipboard. Icons indicating the copy and success status are also displayed when the command is copied. --- www/src/components/landingPage/banner.astro | 157 +++++++++++++------- 1 file changed, 105 insertions(+), 52 deletions(-) diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro index 26b041f250..56c6278934 100644 --- a/www/src/components/landingPage/banner.astro +++ b/www/src/components/landingPage/banner.astro @@ -69,43 +69,84 @@ import Button from "./button.astro";
- + npx create t3-app@latest + + + +
@@ -114,28 +155,40 @@ import Button from "./button.astro"; From 39bf2ffd1e0d63ff607751c7d6eef29a4cfcbafe Mon Sep 17 00:00:00 2001 From: Jacksonmills Date: Fri, 20 Oct 2023 00:50:21 -0500 Subject: [PATCH 02/14] added changeset --- .changeset/sour-cooks-design.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sour-cooks-design.md diff --git a/.changeset/sour-cooks-design.md b/.changeset/sour-cooks-design.md new file mode 100644 index 0000000000..4ac5a7d8a7 --- /dev/null +++ b/.changeset/sour-cooks-design.md @@ -0,0 +1,5 @@ +--- +"create-t3-app": minor +--- + +feat: Add Dropdown for Installation Commands on Homepage From 4cbe900cedaf725e3cf46040dd6ed05ab714ae37 Mon Sep 17 00:00:00 2001 From: Jacksonmills Date: Fri, 20 Oct 2023 01:54:53 -0500 Subject: [PATCH 03/14] Fix banner dropdown menu closing issue on outside click - Added event listener to close the dropdown menu when user clicks outside of the menu or toggle button. - The event listener checks if the clicked element is outside the dropdown menu and toggle button, and if so, hides the menu. --- www/src/components/landingPage/banner.astro | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro index 56c6278934..916182afd6 100644 --- a/www/src/components/landingPage/banner.astro +++ b/www/src/components/landingPage/banner.astro @@ -175,6 +175,18 @@ import Button from "./button.astro"; checkIcon.classList.toggle("hidden"); } + function clickOutsideMenuOrToggle(event) { + if ( + !dropdownMenu.contains(event.target) && + !dropdownToggle.contains(event.target) + ) { + dropdownMenu.classList.add("hidden"); + dropdownMenu.classList.remove("flex"); + } + } + + document.addEventListener("click", clickOutsideMenuOrToggle); + command.addEventListener("click", () => { if (cooldown === false) { cooldown = true; From 652b5eeccecfe9e1a0fc7e9e08e921e115c35512 Mon Sep 17 00:00:00 2001 From: Jacksonmills Date: Fri, 20 Oct 2023 08:03:08 -0500 Subject: [PATCH 04/14] feat: Add Dropdown for Installation Commands on Homepage This commit adds a new component called `ClipboardSelect` to the landing page. The component displays a dropdown menu with installation commands for different package managers, such as npm, yarn, pnpm, and bunx. The user can click on a command to copy it to the clipboard. The dropdown menu appears when the user clicks on a button and disappears when the user clicks outside of the menu or on the button again. The component also includes animations for the copy and check icons, creating a visual feedback when copying commands. --- .changeset/sour-cooks-design.md | 5 - .../landingPage/ClipboardSelect.tsx | 120 +++++++++++++++ www/src/components/landingPage/banner.astro | 137 +----------------- www/tailwind.config.ts | 8 + 4 files changed, 130 insertions(+), 140 deletions(-) delete mode 100644 .changeset/sour-cooks-design.md create mode 100644 www/src/components/landingPage/ClipboardSelect.tsx diff --git a/.changeset/sour-cooks-design.md b/.changeset/sour-cooks-design.md deleted file mode 100644 index 4ac5a7d8a7..0000000000 --- a/.changeset/sour-cooks-design.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"create-t3-app": minor ---- - -feat: Add Dropdown for Installation Commands on Homepage diff --git a/www/src/components/landingPage/ClipboardSelect.tsx b/www/src/components/landingPage/ClipboardSelect.tsx new file mode 100644 index 0000000000..416512e7d4 --- /dev/null +++ b/www/src/components/landingPage/ClipboardSelect.tsx @@ -0,0 +1,120 @@ +import { Menu, Transition } from "@headlessui/react"; +import clsx from "clsx"; +import { Fragment, useState } from "react"; + +const commands = [ + { + command: "npm create t3-app@latest", + manager: "npm", + }, + { + command: "yarn create t3-app", + manager: "yarn", + }, + { + command: "pnpm create t3-app@latest", + manager: "pnpm", + }, + { + command: "bunx create-t3-app@latest", + manager: "bunx", + }, +]; + +export default function ClipboardSelect() { + const [coolDown, setCoolDown] = useState(false); + + const handleCopyToClipboard = async (command: string) => { + try { + await navigator.clipboard.writeText(command); + } catch (err) { + console.error("Failed to copy text: ", err); + } + }; + + const checkStyles = { + strokeDasharray: 450, + strokeDashoffset: -30, + }; + + return ( +
+ +
+ + + + + + + + + + + + {commands.map(({ command, manager }) => ( + + {({ active }) => { + return ( + + ); + }} + + ))} + + +
+ +
+ ); +} diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro index 916182afd6..271ae7487e 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"; ---
@@ -74,78 +75,7 @@ import Button from "./button.astro"; class="relative flex items-center rounded border border-t3-purple-200/20 bg-t3-purple-100/10 px-2 py-2 text-sm md:px-3 md:py-3 md:text-lg lg:px-5 lg:py-4 lg:text-xl" > npx create t3-app@latest - - - +
@@ -154,68 +84,5 @@ import Button from "./button.astro"; - - - 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: [ From f96379a674e6dbdd1f3a206e3a34c40628156f0b Mon Sep 17 00:00:00 2001 From: Jacksonmills Date: Fri, 20 Oct 2023 08:07:41 -0500 Subject: [PATCH 05/14] prettier --- www/src/components/landingPage/ClipboardSelect.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/components/landingPage/ClipboardSelect.tsx b/www/src/components/landingPage/ClipboardSelect.tsx index 416512e7d4..cccfa9fa2c 100644 --- a/www/src/components/landingPage/ClipboardSelect.tsx +++ b/www/src/components/landingPage/ClipboardSelect.tsx @@ -58,7 +58,7 @@ export default function ClipboardSelect() { Date: Fri, 20 Oct 2023 08:26:49 -0500 Subject: [PATCH 06/14] removed uneeded id, cleaned up container styles to match live www styles --- www/src/components/landingPage/banner.astro | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/www/src/components/landingPage/banner.astro b/www/src/components/landingPage/banner.astro index 271ae7487e..c3d0ab01bd 100644 --- a/www/src/components/landingPage/banner.astro +++ b/www/src/components/landingPage/banner.astro @@ -71,10 +71,9 @@ import ClipboardSelect from "./ClipboardSelect";
- npx create t3-app@latest + npx create t3-app@latest
From 44e2debabae16cd087001456ea83aa4189a1b7ad Mon Sep 17 00:00:00 2001 From: Jacksonmills Date: Fri, 20 Oct 2023 13:31:00 -0500 Subject: [PATCH 07/14] Refactor code to remove rounded corners on items in order to follow the menu corners style. The changes update the class name in the ClipboardSelect component to use the "bg-primary" class instead of "bg-violet-500" to achieve the desired background color. This ensures consistency with the menu style. --- www/src/components/landingPage/ClipboardSelect.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/src/components/landingPage/ClipboardSelect.tsx b/www/src/components/landingPage/ClipboardSelect.tsx index cccfa9fa2c..c26e60ffce 100644 --- a/www/src/components/landingPage/ClipboardSelect.tsx +++ b/www/src/components/landingPage/ClipboardSelect.tsx @@ -92,8 +92,8 @@ export default function ClipboardSelect() { return (