Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add Dropdown for Installation Commands on Homepage #1612

Merged
merged 14 commits into from
Oct 21, 2023

Conversation

Jacksonmills
Copy link
Contributor

@Jacksonmills Jacksonmills commented Oct 20, 2023

Closes #1609

✅ 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

image
image

🫡💖

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
Copy link

changeset-bot bot commented Oct 20, 2023

⚠️ 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
Copy link

vercel bot commented Oct 20, 2023

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
Copy link

vercel bot commented Oct 20, 2023

@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.
Copy link
Member

@juliusmarminge juliusmarminge left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

@Jacksonmills
Copy link
Contributor Author

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
Copy link
Contributor

ronanru commented Oct 20, 2023

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

@Jacksonmills
Copy link
Contributor Author

Jacksonmills commented Oct 20, 2023

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
Copy link
Contributor Author

image
image

Updated screenshots 🫡

@Jacksonmills
Copy link
Contributor Author

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
Copy link
Contributor Author

updated styles to remove weird rounded edges of each item

image
image

@Jacksonmills
Copy link
Contributor Author

Jacksonmills commented Oct 20, 2023

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)

image
image

e.g. both dropdown containers have bg-default

@Jacksonmills
Copy link
Contributor Author

Jacksonmills commented Oct 20, 2023

Fixed! Hope y'all like it 😊
image
image

Copy link
Member

@juliusmarminge juliusmarminge left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lgtm

Copy link
Member

@juliusmarminge juliusmarminge left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bun create t3-app
bun

?

@github-actions
Copy link
Contributor

github-actions bot commented Oct 20, 2023

Hey t3-oss/translators!

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

AR: @a4addel, @Sboonny | ES: | FR: @Defranos, @joachimjusth, @vdeva | JA: @t6adev, @uehaj | NO: @estubmo, @josephayman | PL: @matibox, @Infiplaya, @PiotrekPKP | PT: @minsk-dev, @Sn0wye, @victoriaquasar, @MattFerreira18, @gilhrpenner | RU: @AmadeusTwi, @ronanru, @JohnBakhmat | ZH-HANS: @fernandoxu, @escwxyz

@github-actions github-actions bot added the 📌 area: cli Relates to the CLI label Oct 20, 2023
@juliusmarminge
Copy link
Member

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

@Jacksonmills
Copy link
Contributor Author

Jacksonmills commented Oct 20, 2023

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?

@joachimjusth
Copy link
Contributor

Lgtm

Copy link
Member

@juliusmarminge juliusmarminge left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your patience

@juliusmarminge 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
73 of 74 checks passed
@Jacksonmills
Copy link
Contributor Author

Thank you for your patience

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

devvianto605 pushed a commit to devvianto605/create-devviantex-nextjs-app-deprecated that referenced this pull request Jun 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
📌 area: cli Relates to the CLI 📚 documentation Improvements or additions to documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: Add Dropdown for Package Manager Options in Installation Command
4 participants