From 93958b0a479f216876d4b671a5b13c98791a5a0f Mon Sep 17 00:00:00 2001
From: Valentin Maerten <maerten.valentin@gmail.com>
Date: Sun, 30 Aug 2026 15:02:00 +0200
Subject: [PATCH] feat(site): show the GitHub star count in the hero actions

The first sign of traction on the homepage was the adopters carousel, two
sections down. Add a third hero button next to the two calls to action.

VitePress renders home-hero-actions-after outside its own .actions row, so
the hero buttons move from the front matter into HeroActions.vue, which is
the only way to line the count up with them. That row's layout rules are
scoped to VPHero, so custom.css mirrors them.
---
 website/.vitepress/components/HeroActions.vue | 32 +++++++++++++++++
 website/.vitepress/theme/custom.css           | 34 +++++++++++++++++--
 website/.vitepress/theme/index.ts             |  7 +++-
 website/src/index.md                          |  9 ++---
 4 files changed, 72 insertions(+), 10 deletions(-)
 create mode 100644 website/.vitepress/components/HeroActions.vue

diff --git a/website/.vitepress/components/HeroActions.vue b/website/.vitepress/components/HeroActions.vue
new file mode 100644
index 00000000..02ca51d5
--- /dev/null
+++ b/website/.vitepress/components/HeroActions.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { VPButton } from 'vitepress/theme';
+import { data as stars } from '../githubStars.data';
+
+// VitePress renders the `home-hero-actions-after` slot outside its own
+// `.actions` row, so the hero CTAs live here rather than in the front matter:
+// it is the only way to line the star count up with the other two buttons.
+</script>
+
+<template>
+  <div class="hero-actions">
+    <div class="hero-action">
+      <VPButton theme="brand" text="Get Started" href="/docs/getting-started" />
+    </div>
+    <div class="hero-action">
+      <VPButton
+        theme="alt"
+        text="Browse the Reference"
+        href="/docs/reference/schema"
+      />
+    </div>
+    <div class="hero-action">
+      <VPButton
+        theme="alt"
+        :text="`★ ${stars.label}`"
+        :aria-label="`Task on GitHub, ${stars.count} stars`"
+        href="https://github.com/go-task/task"
+        data-umami-event="home-hero-github"
+      />
+    </div>
+  </div>
+</template>
diff --git a/website/.vitepress/theme/custom.css b/website/.vitepress/theme/custom.css
index 79590773..57017abf 100644
--- a/website/.vitepress/theme/custom.css
+++ b/website/.vitepress/theme/custom.css
@@ -169,6 +169,36 @@ html:not(.dark) .vp-sponsor-grid-item .logo-dark {
   display: block;
 }
 
+/* Mirrors the .actions/.action rules of VitePress' VPHero.vue, which are scoped
+   to that component and so do not reach the row in HeroActions.vue. */
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -6px;
+  padding-top: 24px;
+}
+
+.hero-action {
+  flex-shrink: 0;
+  padding: 6px;
+}
+
+.VPHero.has-image .hero-actions {
+  justify-content: center;
+}
+
+@media (min-width: 640px) {
+  .hero-actions {
+    padding-top: 32px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPHero.has-image .hero-actions {
+    justify-content: flex-start;
+  }
+}
+
 @media (max-width: 639px) {
   .VPHomeHero {
     overflow: hidden;
@@ -189,13 +219,13 @@ html:not(.dark) .vp-sponsor-grid-item .logo-dark {
     line-height: 36px;
   }
 
-  .VPHomeHero .actions {
+  .VPHomeHero .hero-actions {
     align-items: stretch;
     margin-right: 0;
     margin-left: 0;
   }
 
-  .VPHomeHero .action {
+  .VPHomeHero .hero-action {
     min-width: min(100%, 15rem);
   }
 
diff --git a/website/.vitepress/theme/index.ts b/website/.vitepress/theme/index.ts
index 495bf7dc..9670930b 100644
--- a/website/.vitepress/theme/index.ts
+++ b/website/.vitepress/theme/index.ts
@@ -2,6 +2,7 @@ import DefaultTheme from 'vitepress/theme';
 import type { Theme } from 'vitepress';
 import './custom.css';
 import HomePage from '../components/HomePage.vue';
+import HeroActions from '../components/HeroActions.vue';
 import AuthorCard from '../components/AuthorCard.vue';
 import BlogPost from '../components/BlogPost.vue';
 import Version from '../components/Version.vue';
@@ -15,6 +16,7 @@ export default {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
+      'home-hero-actions-after': () => h(HeroActions),
       'home-features-after': () => h(HomePage)
     });
   },
@@ -23,7 +25,10 @@ export default {
     app.component('BlogPost', BlogPost);
     app.component('Version', Version);
     app.component('Adopters', Adopters);
-    app.component('CopyOrDownloadAsMarkdownButtons', CopyOrDownloadAsMarkdownButtons);
+    app.component(
+      'CopyOrDownloadAsMarkdownButtons',
+      CopyOrDownloadAsMarkdownButtons
+    );
     enhanceAppWithTabs(app);
   }
 } satisfies Theme;
diff --git a/website/src/index.md b/website/src/index.md
index 491beb2b..70a900e5 100644
--- a/website/src/index.md
+++ b/website/src/index.md
@@ -5,6 +5,8 @@ description:
   YAML Taskfile.
 layout: home
 titleTemplate: false
+# The hero buttons live in .vitepress/components/HeroActions.vue, which
+# renders them next to the GitHub star count.
 hero:
   name: Task
   text: The Modern Task Runner
@@ -14,13 +16,6 @@ hero:
   image:
     src: /img/logo.svg
     alt: Task logo
-  actions:
-    - theme: brand
-      text: Get Started
-      link: /docs/getting-started
-    - theme: alt
-      text: Browse the Reference
-      link: /docs/reference/schema
 
 features:
   - title: Readable by design