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.

Sign up for GitHub

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

Jump to bottom

feat: Add Dropdown for Installation Commands on Homepage #1612

Merged
merged 14 commits into from
Oct 21, 2023
Merged

feat: Add Dropdown for Installation Commands on Homepage #1612

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c7f33df
feat: Add dropdown for package manager options in installation command
Jacksonmills Oct 20, 2023
39bf2ff
added changeset
Jacksonmills Oct 20, 2023
4cbe900
Fix banner dropdown menu closing issue on outside click
Jacksonmills Oct 20, 2023
652b5ee
feat: Add Dropdown for Installation Commands on Homepage
Jacksonmills Oct 20, 2023
f96379a
prettier
Jacksonmills Oct 20, 2023
48f905a
removed uneeded id, cleaned up container styles to match live www styles
Jacksonmills Oct 20, 2023
44e2deb
Refactor code to remove rounded corners on items in order to follow t…
Jacksonmills Oct 20, 2023
6eb4d89
updated hover to match docs dropdown a bit better
Jacksonmills Oct 20, 2023
f4401b9
matched rounded corners 🤣
Jacksonmills Oct 20, 2023
d0028ce
solved the wrong bg color bug, now matches language menu exactly
Jacksonmills Oct 20, 2023
f2ae1a4
removed unused variable to fix typecheck error
Jacksonmills Oct 20, 2023
3bf5a5e
fix keyboard active state
Jacksonmills Oct 20, 2023
268d12d
updated bun commands across the project
Jacksonmills Oct 20, 2023
378367a
updated bun command with @latest, cleaned up menu to match padding an…
Jacksonmills Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
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.
  • Loading branch information
@Jacksonmills
Jacksonmills committed Oct 20, 2023
commit c7f33df5198f18fdc91ff7622f1b71bca850083d
157 changes: 105 additions & 52 deletions www/src/components/landingPage/banner.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,43 +69,84 @@ import Button from "./button.astro";

<div class="flex w-full flex-col items-center">
<div class="relative mt-4 flex h-full xl:mt-8">
<button
class="relative flex cursor-pointer flex-row items-center gap-2 rounded-md border border-t3-purple-200/20 bg-t3-purple-100/10 px-2 py-2 text-sm transition-colors duration-300 hover:border-t3-purple-300/50 hover:bg-t3-purple-100/20 md:px-3 md:py-3 md:text-lg lg:px-5 lg:py-4 lg:text-xl"
title="Copy the command to get started"
id="command"
<div
id="dropdown"
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"
>
<code id="command-text">npm create t3-app@latest</code>
<svg
id="copy-icon"
xmlns="https://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><rect x="9" y="9" width="13" height="13" rx="2" ry="2"
></rect><path
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
></path>
</svg>
<svg
id="check-icon"
class="hidden"
xmlns="https://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><polyline points="20 6 9 17 4 12"></polyline>
</svg>
</button>
<span class="mr-12 md:mr-32">npx create t3-app@latest</span>
<button
id="dropdown-toggle"
class="rounded p-2 transition-colors duration-300 hover:border-t3-purple-300/50 hover:bg-t3-purple-100/20"
>
<svg
id="copy-icon"
class="h-[1em] w-[1em]"
xmlns="https://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><rect x="9" y="9" width="13" height="13" rx="2" ry="2"
></rect><path
d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
></path>
</svg>
<svg
id="check-icon"
class="hidden h-[1em] w-[1em]"
xmlns="https://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><polyline points="20 6 9 17 4 12"></polyline>
</svg></button
>

<div
id="dropdown-menu"
class="absolute right-[0] top-[60%] z-10 mt-4 hidden min-w-[8em] flex-col items-start gap-2 rounded-md border border-primary/20 bg-default p-2 md:right-[1em]"
>
<button
class="command relative flex w-full cursor-pointer flex-row items-center gap-2 rounded-md border border-t3-purple-200/20 bg-t3-purple-100/10 px-2 py-2 text-sm transition-colors duration-300 hover:border-t3-purple-300/50 hover:bg-t3-purple-100/20"
title="Copy the npm command to get started"
>
<code class="command-text sr-only"
>npm create t3-app@latest</code
>npm
</button>
<button
class="command relative flex w-full cursor-pointer flex-row items-center gap-2 rounded-md border border-t3-purple-200/20 bg-t3-purple-100/10 px-2 py-2 text-sm transition-colors duration-300 hover:border-t3-purple-300/50 hover:bg-t3-purple-100/20"
title="Copy the yarn command to get started"
>
<code class="command-text sr-only"
>yarn create t3-app</code
>yarn
</button><button
class="command relative flex w-full cursor-pointer flex-row items-center gap-2 rounded-md border border-t3-purple-200/20 bg-t3-purple-100/10 px-2 py-2 text-sm transition-colors duration-300 hover:border-t3-purple-300/50 hover:bg-t3-purple-100/20"
title="Copy the pnpm command to get started"
>
<code class="command-text sr-only"
>pnpm create t3-app@latest</code
>pnpm
</button><button
class="command relative flex w-full cursor-pointer flex-row items-center gap-2 rounded-md border border-t3-purple-200/20 bg-t3-purple-100/10 px-2 py-2 text-sm transition-colors duration-300 hover:border-t3-purple-300/50 hover:bg-t3-purple-100/20"
title="Copy the bunx command to get started"
>
<code class="command-text sr-only"
>bunx create-t3-app@latest</code
>bunx
</button>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -114,28 +155,40 @@ import Button from "./button.astro";
</div>
</div>
<script is:inline>
const command = document.querySelector("#command");
const commandText = document.querySelector("#command-text");
const dropdownToggle = document.querySelector("#dropdown-toggle");
const dropdownMenu = document.querySelector("#dropdown-menu");
const copyIcon = document.querySelector("#copy-icon");
const checkIcon = document.querySelector("#check-icon");
let cooldown = false;

function toggleIcons() {
copyIcon.classList.toggle("hidden");
checkIcon.classList.toggle("hidden");
}
dropdownToggle.addEventListener("click", () => {
dropdownMenu.classList.toggle("hidden");
dropdownMenu.classList.toggle("flex");
});

command.addEventListener("click", () => {
if (cooldown === false) {
cooldown = true;
navigator.clipboard.writeText(commandText.innerText);
toggleIcons();
const commands = Array.from(document.querySelectorAll(".command"));
commands.forEach((command) => {
const commandText = command.querySelector(".command-text");
let cooldown = false;

setTimeout(() => {
toggleIcons();
cooldown = false;
}, 2000);
function toggleIcons() {
copyIcon.classList.toggle("hidden");
checkIcon.classList.toggle("hidden");
}

command.addEventListener("click", () => {
if (cooldown === false) {
cooldown = true;
navigator.clipboard.writeText(commandText.innerText);
toggleIcons();
dropdownMenu.classList.toggle("hidden");
dropdownMenu.classList.toggle("flex");

setTimeout(() => {
toggleIcons();
cooldown = false;
}, 2000);
}
});
});
</script>
</div>
Expand Down