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

@@ -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>

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);
   }
 

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;

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