feat(website): add tabbed install selector

[benvinegar]

Problem

The landing page presents npm as the primary install path, then repeats the available methods in a second section further down the page. Installation and update guidance also does not consistently establish the curl installer and hunk update as the canonical paths.

Approach

• replace the hero npm button with one terminal-style install selector for curl, Homebrew, npm, mise, and Nix
• keep the command panel full width while sizing the traditional tab row to its labels
• move the GitHub star action into a compact top-right header control and remove the larger hero CTA
• select curl by default while preserving no-JavaScript access to every command
• support accessible tab semantics, keyboard navigation, URL fragments/history, mobile tab scrolling, and visible clipboard success/failure feedback
• remove the duplicated lower install section and its obsolete components
• make curl the default in the README and install docs, with accurate platform, Node.js 22, checksum, custom-directory, and pre-0.20 caveats
• make hunk update canonical from Hunk 0.20 onward and keep current versus historical changelog install guidance accurate

This does not add a PowerShell installer or change installer/update runtime behavior.

Validation

• bun run website:check
• bun run website:build
• bun run website:test:browser — 87 passed, 1 expected mobile-only skip
• bun run website:links
• bun test scripts/generate-changelog.test.ts — 95 passed
• bun run typecheck
• targeted oxfmt --check for all changed files
• git diff --check origin/main...HEAD

Manual visual checks covered desktop and 320px mobile layouts in Chromium, including the compact header star control, content-sized tabs, internal tab scrolling, and no page-level horizontal overflow. Automated axe checks passed on desktop and mobile. Safari and physical devices were not tested.

Review

Fresh-context subagent reviews covered frontend correctness/accessibility, documentation and generated changelog semantics, and developer-facing UX. Findings around fragment/history synchronization, clipboard failure feedback, pre-0.20 updates, and conditional checksum verification were addressed; the final focused review found no remaining blockers or fixes worth doing now.

This PR description was generated by Pi using GPT-5.6-sol

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hunk-web	Ready	Preview	Aug 30, 2026 3:30pm

[greptile-apps]

Greptile Summary

The PR replaces the landing-page install CTA with an accessible, progressively enhanced tab selector and updates installation and changelog guidance around curl and hunk update.

• Adds curl, Homebrew, npm, mise, and Nix tabs with keyboard, fragment-history, mobile scrolling, and clipboard feedback.
• Removes the duplicated lower installation section and its obsolete components.
• Revises generated release guidance and documentation while preserving pinned npm commands for superseded releases.
• Adds browser and generator coverage for the new behavior.

Confidence Score: 4/5

The PR appears safe to merge, with one non-blocking clipboard-feedback timing issue under rapid repeated activation.

The installation selector, generated guidance, and documentation are internally consistent, but overlapping reset timers can clear the most recent copy result too early.

Files Needing Attention: website/src/components/marketing/InstallTabs.astro

Important Files Changed

Filename	Overview
website/src/components/marketing/InstallTabs.astro	Adds the progressively enhanced tab and clipboard controller; repeated copy activations can prematurely clear the latest feedback.
website/src/pages/index.astro	Integrates the selector into the hero and removes the duplicated installation section.
website/src/styles/marketing.css	Adds responsive tab, panel, command, and feedback styling while removing obsolete install-list styles.
scripts/generate-changelog.ts	Uses canonical curl and update guidance for the current release while retaining pinned npm installation for superseded series.
website/src/content/docs/docs/start/install.md	Clarifies platform support, conditional checksum verification, custom-directory behavior, and update ownership.
website/tests/marketing-smoke.spec.ts	Thoroughly covers tab semantics, fragments, keyboard behavior, no-JavaScript content, mobile layout, and single-attempt clipboard outcomes.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  Load[Landing page loads] --> Enhance[Enhance install selector]
  Enhance --> Select[Select install method]
  Select --> Panel[Show matching command panel]
  Select --> Fragment[Update URL fragment]
  Fragment --> History[Back or forward navigation]
  History --> Panel
  Panel --> Copy[Copy command]
  Copy --> Feedback[Show success or recovery feedback]

Loading

Prompt To Fix All With AI

### Issue 1
website/src/components/marketing/InstallTabs.astro:157-181
**Overlapping copy feedback timers**

When the same copy button is activated more than once within 2.4 seconds, the earlier timeout clears the latest result prematurely, shortening both the visible feedback and its accessible live-region announcement.

```suggestion
    for (const button of picker.querySelectorAll<HTMLButtonElement>("[data-copy-command]")) {
      let resetTimer: number | undefined;

      button.addEventListener("click", async () => {
        const status = button.querySelector<HTMLElement>("[data-copy-status]");
        const label = button.querySelector<HTMLElement>("[data-copy-label]");

        if (resetTimer !== undefined) window.clearTimeout(resetTimer);
        button.classList.remove("copied", "failed");
        if (label) label.textContent = "[ copy ]";
        try {
          await navigator.clipboard.writeText(button.dataset.copyCommand ?? "");
          button.classList.add("copied");
          if (label) label.textContent = "[ copied ]";
          if (status) status.textContent = "Copied to clipboard";
        } catch {
          button.classList.add("failed");
          if (label) label.textContent = "[ select ]";
          if (status) status.textContent = "Could not copy. Select the command manually.";
        }

        resetTimer = window.setTimeout(() => {
          button.classList.remove("copied", "failed");
          if (label) label.textContent = "[ copy ]";
          if (status) status.textContent = "";
          resetTimer = undefined;
        }, 2400);
      });
    }
```

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

_{Reviews (1): Last reviewed commit: "feat(website): add tabbed install select..." | Re-trigger Greptile}