Docs - add stats on home

Author: SimonMellerin

docs/.vitepress/theme/DbToolsBundleActions.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue'
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
+
+const stats = reactive({
+  github: '--',
+  packagist: '--',
+});
+
+onMounted(() => {
+  fetch("https://packagist.org/packages/makinacorpus/db-tools-bundle.json")
+    .then(raw => raw.json())
+    .then(data => {
+      stats.packagist = data.package.downloads.monthly
+      stats.github = data.package.github_stars
+    });
+});
+
+</script>
+
+<template>
+  <div class="actions">
+    <div class="action">
+      <VPButton
+        tag="a"
+        size="medium"
+        theme="brand"
+        text="Get Started"
+        href="./getting-started/introduction"
+      />
+    </div>
+    <div class="action">
+      <VPButton
+        tag="a"
+        size="medium"
+        theme="alt"
+        text="View on GitHub"
+        href="https://github.com/makinacorpus/DbToolsBundle"
+      />
+      <small>{{ stats.github }} ⭐</small>
+
+    </div>
+    <div class="action">
+      <VPButton
+        tag="a"
+        size="medium"
+        theme="alt"
+        text="View on packagist"
+        href="https://packagist.org/packages/makinacorpus/db-tools-bundle"
+      />
+      <small>{{ stats.packagist }} installs/month</small>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -6px;
+  padding-top: 24px;
+}
+
+.actions small {
+  margin-top: -5px;
+}
+
+@media (min-width: 640px) {
+  .actions {
+    padding-top: 32px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPHero.has-image .actions {
+    justify-content: flex-start;
+  }
+}
+
+.action {
+  flex-shrink: 0;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  gap: 0.4rem;
+}
+</style>

docs/.vitepress/theme/custom.css

@@ -7,6 +7,8 @@
   --vp-c-brand-lighter: #a279e0;
   --vp-c-brand-dark: #221157;
   --vp-c-brand-darker: #221157;
+  --vp-button-brand-bg: var(--vp-c-brand);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-dark);
   --vp-c-text-code: #221157;
   --vp-button-brand-border: transparent;
   --vp-button-brand-hover-border: transparent;

docs/.vitepress/theme/index.js

@@ -4,13 +4,16 @@ import './custom.css'
 import MakinaCorpusHorizontal from './MakinaCorpusHorizontal.vue'
 import MakinaCorpusSquare from './MakinaCorpusSquare.vue'
 import { h } from 'vue'
+import DbToolsBundleActions from './DbToolsBundleActions.vue'
 
 export default {
-  ...DefaultTheme,
+  extends: DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
       'aside-bottom': () => h(MakinaCorpusSquare),
       'home-features-after': () => h(MakinaCorpusHorizontal),
+      'home-hero-actions-after': () => h(DbToolsBundleActions)
     })
-  }
+  },
+  VPHomeHero: DbToolsBundleActions,
 }

docs/content/index.md

@@ -8,16 +8,6 @@ hero:
     light: ./logo.svg
     dark: ./logo-d.svg
     alt: DbToolsBundle by Makina Corpus
-  actions:
-    - theme: brand
-      text: Get Started
-      link: ./getting-started/introduction
-    - theme: alt
-      text: View on GitHub
-      link: https://github.com/makinacorpus/DbToolsBundle
-    - theme: alt
-      text: View on Packagist
-      link: https://packagist.org/packages/makinacorpus/db-tools-bundle
 
 features:
   - icon: