feat: Add Dropdown for Installation Commands on Homepage #1612

Jacksonmills · 2023-10-20T05:53:29Z

✅ Checklist

I have followed every step in the contributing guide (updated 2022-10-06).
The PR title follows the convention we established conventional-commit
I performed a functional test on my final commit

Changelog

Add dropdown for different package manager copy to clipboard options on homepage

Screenshots

🫡💖

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.

changeset-bot · 2023-10-20T05:53:32Z

⚠️ No Changeset found

Latest commit: 378367a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2023-10-20T05:53:33Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
create-t3-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 20, 2023 10:09pm

vercel · 2023-10-20T05:53:35Z

@Jacksonmills is attempting to deploy a commit to the t3-oss Team on Vercel.

A member of the Team first needs to authorize it.

- 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.

juliusmarminge

This is great, but could you make it match the language selector more?

CleanShot.2023-10-20.at.09.13.51.mp4

Jacksonmills · 2023-10-20T07:26:01Z

This is great, but could you make it match the language selector more?
CleanShot.2023-10-20.at.09.13.51.mp4

Ah yes! That would make a lot more sense, I will update that tomorrow 🫡

ronanru · 2023-10-20T11:07:49Z

I think bun command should be bun create t3-app@latest. Also, you don't need a changeset for docs site changes.

Jacksonmills · 2023-10-20T12:22:45Z

I think bun command should be bun create t3-app@latest. Also, you don't need a changeset for docs site changes.

Okay noted, thanks! Bunx command I got from the readme doc(bunx create-t3-app@latest), but maybe they both need updated?

I'll remove the change set once I push the headlessui change, making it much more inline with the docs style

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.

Jacksonmills · 2023-10-20T13:04:43Z

Updated screenshots 🫡

Jacksonmills · 2023-10-20T13:10:13Z

I think bun command should be bun create t3-app@latest. Also, you don't need a changeset for docs site changes.

I removed the changeset but now the CI is mad, is that something y'all just override once you review?

…he 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.

Jacksonmills · 2023-10-20T18:31:36Z

updated styles to remove weird rounded edges of each item

Jacksonmills · 2023-10-20T18:42:14Z

Something I am noticing is that bg-default seems to have quite different colors for the docs homepage vs the landing page so I am unable to perfect the color to match the dark theme docs dropdown. (doing some more inspecting locally and its even the same RGB value yet still visually different)

e.g. both dropdown containers have bg-default

Jacksonmills · 2023-10-20T19:28:53Z

Fixed! Hope y'all like it 😊

juliusmarminge

Lgtm

juliusmarminge

bun create t3-app
bun

?

www/src/components/landingPage/ClipboardSelect.tsx

github-actions · 2023-10-20T20:29:55Z

Hey t3-oss/translators!

This PR contains changes to your language. Please review the changes ❤️.

juliusmarminge · 2023-10-20T21:15:24Z

Sorry for the confusion, but we still want the @latest - my bad for being unclear 😐

Jacksonmills · 2023-10-20T21:16:28Z

Sorry for the confusion, but we still want the @latest - my bad for being unclear 😐

xD np I'll update in a bit.

So: bun create t3-app@latest would be the final bun command we want?

…d font weight

joachimjusth · 2023-10-20T23:57:50Z

Lgtm

juliusmarminge

Thank you for your patience

Jacksonmills · 2023-10-21T12:27:38Z

Thank you for your patience

np! stoked you guys liked the change, hope to contribute more soon 🫡💖

Jacksonmills added 2 commits October 20, 2023 00:46

added changeset

39bf2ff

Jacksonmills requested review from juliusmarminge, nexxeln, t3dotgg and c-ehrlich as code owners October 20, 2023 05:53

github-actions bot added the 📚 documentation Improvements or additions to documentation label Oct 20, 2023

vercel bot deployed to Preview – create-t3-app October 20, 2023 05:54 View deployment

Fix banner dropdown menu closing issue on outside click

4cbe900

- 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.

vercel bot deployed to Preview – create-t3-app October 20, 2023 06:55 View deployment

juliusmarminge requested changes Oct 20, 2023

View reviewed changes

Jacksonmills requested a review from juliusmarminge October 20, 2023 13:03

vercel bot deployed to Preview – create-t3-app October 20, 2023 13:04 View deployment

prettier

f96379a

vercel bot deployed to Preview – create-t3-app October 20, 2023 13:08 View deployment

removed uneeded id, cleaned up container styles to match live www styles

48f905a

vercel bot deployed to Preview – create-t3-app October 20, 2023 13:27 View deployment

vercel bot deployed to Preview – create-t3-app October 20, 2023 18:32 View deployment

vercel bot deployed to Preview – create-t3-app October 20, 2023 18:45 View deployment

matched rounded corners 🤣

f4401b9

vercel bot deployed to Preview – create-t3-app October 20, 2023 18:51 View deployment

solved the wrong bg color bug, now matches language menu exactly

d0028ce

vercel bot deployed to Preview – create-t3-app October 20, 2023 19:29 View deployment

removed unused variable to fix typecheck error

f2ae1a4

vercel bot deployed to Preview – create-t3-app October 20, 2023 19:58 View deployment

juliusmarminge approved these changes Oct 20, 2023

View reviewed changes

juliusmarminge reviewed Oct 20, 2023

View reviewed changes

www/src/components/landingPage/ClipboardSelect.tsx Outdated Show resolved Hide resolved

fix keyboard active state

3bf5a5e

vercel bot deployed to Preview – create-t3-app October 20, 2023 20:09 View deployment

Jacksonmills requested a review from juliusmarminge October 20, 2023 20:09

updated bun commands across the project

268d12d

vercel bot deployed to Preview – create-t3-app October 20, 2023 20:27 View deployment

github-actions bot added the 📌 area: cli Relates to the CLI label Oct 20, 2023

updated bun command with @latest, cleaned up menu to match padding an…

378367a

…d font weight

vercel bot deployed to Preview – create-t3-app October 20, 2023 22:09 View deployment

juliusmarminge approved these changes Oct 21, 2023

View reviewed changes

juliusmarminge added this pull request to the merge queue Oct 21, 2023

Merged via the queue into t3-oss:next with commit 4e3e458 Oct 21, 2023
74 of 76 checks passed

c-ehrlich mentioned this pull request Oct 25, 2023

fix: replace all incorrect versions #1621

Closed

devvianto605 pushed a commit to devvianto605/create-devviantex-nextjs-app that referenced this pull request Jun 9, 2024

feat: Add Dropdown for Installation Commands on Homepage (t3-oss#1612)

43c1029

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add Dropdown for Installation Commands on Homepage #1612

feat: Add Dropdown for Installation Commands on Homepage #1612

Jacksonmills commented Oct 20, 2023 •

edited

Loading

changeset-bot bot commented Oct 20, 2023 •

edited

Loading

vercel bot commented Oct 20, 2023 •

edited

Loading

vercel bot commented Oct 20, 2023

juliusmarminge left a comment

Jacksonmills commented Oct 20, 2023

ronanru commented Oct 20, 2023

Jacksonmills commented Oct 20, 2023 •

edited

Loading

Jacksonmills commented Oct 20, 2023

Jacksonmills commented Oct 20, 2023

Jacksonmills commented Oct 20, 2023

Jacksonmills commented Oct 20, 2023 •

edited

Loading

Jacksonmills commented Oct 20, 2023 •

edited

Loading

juliusmarminge left a comment

juliusmarminge left a comment

github-actions bot commented Oct 20, 2023 •

edited

Loading

juliusmarminge commented Oct 20, 2023

Jacksonmills commented Oct 20, 2023 •

edited

Loading

joachimjusth commented Oct 20, 2023

juliusmarminge left a comment

Jacksonmills commented Oct 21, 2023

feat: Add Dropdown for Installation Commands on Homepage #1612

feat: Add Dropdown for Installation Commands on Homepage #1612

Conversation

Jacksonmills commented Oct 20, 2023 • edited Loading

✅ Checklist

Changelog

Screenshots

changeset-bot bot commented Oct 20, 2023 • edited Loading

⚠️ No Changeset found

vercel bot commented Oct 20, 2023 • edited Loading

vercel bot commented Oct 20, 2023

juliusmarminge left a comment

Choose a reason for hiding this comment

Jacksonmills commented Oct 20, 2023

ronanru commented Oct 20, 2023

Jacksonmills commented Oct 20, 2023 • edited Loading

Jacksonmills commented Oct 20, 2023

Jacksonmills commented Oct 20, 2023

Jacksonmills commented Oct 20, 2023

Jacksonmills commented Oct 20, 2023 • edited Loading

Jacksonmills commented Oct 20, 2023 • edited Loading

juliusmarminge left a comment

Choose a reason for hiding this comment

juliusmarminge left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 20, 2023 • edited Loading

juliusmarminge commented Oct 20, 2023

Jacksonmills commented Oct 20, 2023 • edited Loading

joachimjusth commented Oct 20, 2023

juliusmarminge left a comment

Choose a reason for hiding this comment

Jacksonmills commented Oct 21, 2023

Jacksonmills commented Oct 20, 2023 •

edited

Loading

changeset-bot bot commented Oct 20, 2023 •

edited

Loading

vercel bot commented Oct 20, 2023 •

edited

Loading

Jacksonmills commented Oct 20, 2023 •

edited

Loading

Jacksonmills commented Oct 20, 2023 •

edited

Loading

Jacksonmills commented Oct 20, 2023 •

edited

Loading

github-actions bot commented Oct 20, 2023 •

edited

Loading

Jacksonmills commented Oct 20, 2023 •

edited

Loading