feat: add install snippet on the home page

Author: innocenzi

src/Web/Homepage/home.view.php

@@ -40,6 +40,14 @@
             </svg>
           </a>
         </div>
+				<button data-copy="#install-tempest-snippet" class="group mt-6 md:mt-8 xl:mt-10 flex items-center gap-x-2 text-base font-mono relative cursor-pointer">
+					<x-icon name="tabler:terminal" class="size-5 text-(--ui-primary)" />
+					<span id="install-tempest-snippet" class="text-(--ui-text-muted)">composer require tempest/framework:{{ \Tempest\Core\Kernel::VERSION }}</span>
+					<span class="ml-4 flex items-center justify-center opacity-0 group-hover:opacity-100 transition text-(--ui-text-dimmed) bg-(--ui-bg-muted) rounded border border-(--ui-border)">
+						<x-icon name="tabler:copy" class="size-5 absolute" />
+						<x-icon name="tabler:copy-check-filled" class="size-5 absolute opacity-0 group-[[data-copied]]:opacity-100 transition text-(--ui-success)" />
+					</span>
+				</button>
       </section>
       <!-- Discovery -->
 			<x-home-section

src/Web/scripts/copy-code-blocks.ts

@@ -1,4 +1,4 @@
-function extractPlainText(pre: HTMLElement, button: HTMLButtonElement): string {
+function extractPlainText(pre: HTMLElement, button?: HTMLButtonElement): string {
 	return Array.from(pre.childNodes)
 		.filter((node) => node !== button)
 		.map((node) =>
@@ -39,3 +39,26 @@ document.addEventListener('DOMContentLoaded', () => {
 		})
 	})
 })
+
+document.addEventListener('DOMContentLoaded', () => {
+	document.querySelectorAll<HTMLPreElement>('button[data-copy]').forEach((button) => {
+		button.addEventListener('click', () => {
+			const target = document.querySelector(button.dataset.copy!) as HTMLElement
+			console.log(target)
+
+			if (!target) {
+				return
+			}
+
+			const content = extractPlainText(target)
+
+			navigator.clipboard
+				.writeText(content)
+				.then(() => {
+					button.setAttribute('data-copied', 'true')
+					setTimeout(() => button.removeAttribute('data-copied'), 2000)
+				})
+				.catch((err) => console.error('Copy failed', err))
+		})
+	})
+})