fix(site): move the star count out of the hero button row

As a third pill next to the two calls to action it read as a truncated
button: same shape and weight as the CTAs for something that is a
statistic, not an action, and a bare star glyph that says nothing about
GitHub.

Render it below the buttons instead, as a muted line with the GitHub mark
the navbar already uses. The hero buttons go back to the front matter and
custom.css drops the VPHero rules it had to mirror.

website/.vitepress/components/HeroActions.vue

@@ -1,32 +0,0 @@
-<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/components/HeroStars.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { data as stars } from '../githubStars.data';
+</script>
+
+<template>
+  <a
+    class="hero-stars"
+    href="https://github.com/go-task/task"
+    target="_blank"
+    rel="noreferrer"
+    data-umami-event="home-hero-github"
+  >
+    <span class="vpi-social-github" aria-hidden="true"></span>
+    {{ stars.label }} stars on GitHub
+  </a>
+</template>
+
+<style scoped>
+/* inline-flex so the hero container's own text-align keeps this in step with
+   the buttons: centred below 960px, left-aligned above. */
+.hero-stars {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin-top: 20px;
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: color 0.25s;
+}
+
+.hero-stars:hover,
+.hero-stars:focus-visible {
+  color: var(--vp-c-brand-1);
+}
+</style>

website/.vitepress/theme/custom.css

@@ -169,36 +169,6 @@ 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;
@@ -219,13 +189,13 @@ html:not(.dark) .vp-sponsor-grid-item .logo-dark {
     line-height: 36px;
   }
 
-  .VPHomeHero .hero-actions {
+  .VPHomeHero .actions {
     align-items: stretch;
     margin-right: 0;
     margin-left: 0;
   }
 
-  .VPHomeHero .hero-action {
+  .VPHomeHero .action {
     min-width: min(100%, 15rem);
   }
 

website/.vitepress/theme/index.ts

@@ -2,7 +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 HeroStars from '../components/HeroStars.vue';
 import AuthorCard from '../components/AuthorCard.vue';
 import BlogPost from '../components/BlogPost.vue';
 import Version from '../components/Version.vue';
@@ -16,7 +16,7 @@ export default {
   extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
-      'home-hero-actions-after': () => h(HeroActions),
+      'home-hero-actions-after': () => h(HeroStars),
       'home-features-after': () => h(HomePage)
     });
   },

website/src/index.md

@@ -5,8 +5,6 @@ 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
@@ -16,6 +14,13 @@ 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