diff --git a/website/.vitepress/components/HomePage.vue b/website/.vitepress/components/HomePage.vue index 802209cd..832631e4 100644 --- a/website/.vitepress/components/HomePage.vue +++ b/website/.vitepress/components/HomePage.vue @@ -5,8 +5,17 @@ import { sponsors } from '../sponsors'; import AdoptersCarousel from './AdoptersCarousel.vue'; import { data as example } from './homeExample.data'; -const installCommand = - 'sh -c "$(curl --location https://taskfile.dev/install.sh)" -- -d -b ~/.local/bin'; +const installCommands = { + unix: 'sh -c "$(curl --location https://taskfile.dev/install.sh)" -- -d -b ~/.local/bin', + windows: 'winget install Task.Task' +} as const; +type InstallPlatform = keyof typeof installCommands; + +const installPlatform = ref('unix'); +const installCommand = computed(() => installCommands[installPlatform.value]); +const installPlatformLabel = computed(() => + installPlatform.value === 'windows' ? 'Windows' : 'macOS and Linux' +); const copyState = ref<'idle' | 'copied' | 'failed'>('idle'); const commandEl = ref(); let copyResetTimer: number | undefined; @@ -19,7 +28,7 @@ const copyLabel = computed(() => { const copyAnnouncement = computed(() => { if (copyState.value === 'copied') { - return 'Install command copied to clipboard'; + return `${installPlatformLabel.value} install command copied to clipboard`; } if (copyState.value === 'failed') { return 'The install command could not be copied, so it has been selected'; @@ -28,11 +37,25 @@ const copyAnnouncement = computed(() => { }); const copyAriaLabel = computed(() => { - if (copyState.value === 'copied') return 'Install command copied'; - if (copyState.value === 'failed') return 'Copy install command again'; - return 'Copy install command'; + if (copyState.value === 'copied') { + return `${installPlatformLabel.value} install command copied`; + } + if (copyState.value === 'failed') { + return `Copy ${installPlatformLabel.value} install command again`; + } + return `Copy ${installPlatformLabel.value} install command`; }); +function selectInstallPlatform(platform: InstallPlatform) { + if (installPlatform.value === platform) return; + + window.clearTimeout(copyResetTimer); + copyResetTimer = undefined; + copyState.value = 'idle'; + installPlatform.value = platform; + window.getSelection()?.removeAllRanges(); +} + function resetCopyState() { window.clearTimeout(copyResetTimer); copyResetTimer = window.setTimeout(() => { @@ -42,7 +65,7 @@ function resetCopyState() { async function copyInstallCommand() { try { - await navigator.clipboard.writeText(installCommand); + await navigator.clipboard.writeText(installCommand.value); copyState.value = 'copied'; } catch { copyState.value = 'failed'; @@ -81,9 +104,36 @@ onUnmounted(() => window.clearTimeout(copyResetTimer));

+
+ Install on: + + +
+
- {{ installCommand }} + {{ installCommand }}

- Prefer a package manager? Task is also available through Homebrew, - WinGet, Scoop, npm, apt, dnf, apk, and more. + Need another installation method? Task is also available through + Homebrew, Scoop, npm, apt, dnf, apk, and more. See every installation method. @@ -252,6 +302,40 @@ onUnmounted(() => window.clearTimeout(copyResetTimer)); line-height: 1.7; } +.install-platforms { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.4rem; + max-width: 940px; + margin-bottom: 0.6rem; + color: var(--vp-c-text-2); + font-size: 0.78rem; + font-weight: 600; +} + +.install-platforms button { + border: 1px solid var(--vp-c-divider); + border-radius: 999px; + background: transparent; + color: var(--vp-c-text-2); + cursor: pointer; + font: inherit; + padding: 0.35rem 0.65rem; +} + +.install-platforms button[aria-pressed='true'] { + border-color: var(--vp-c-brand-1); + background: var(--vp-c-brand-soft); + color: var(--vp-c-brand-1); +} + +.install-platforms button:hover, +.install-platforms button:focus-visible { + border-color: var(--vp-c-brand-1); + color: var(--vp-c-brand-1); +} + .install-command { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;