From 03cfce580356fb92f87a53e2740369adc7f77174 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Robichet?= <remi.robichet@edtake.com>
Date: Tue, 26 Jul 2022 15:03:47 +0200
Subject: [PATCH 1/4] feat(theme): add link in homepage feature

---
 .../theme-default/components/VPButton.vue     |  7 ++++++
 .../theme-default/components/VPFeature.vue    | 23 +++++++++++++++++++
 .../theme-default/components/VPFeatures.vue   |  8 +++++++
 3 files changed, 38 insertions(+)

diff --git a/src/client/theme-default/components/VPButton.vue b/src/client/theme-default/components/VPButton.vue
index 12d0a44ad94a..f10477c460b1 100644
--- a/src/client/theme-default/components/VPButton.vue
+++ b/src/client/theme-default/components/VPButton.vue
@@ -54,6 +54,13 @@ const component = computed(() => {
   transition: color 0.1s, border-color 0.1s, background-color 0.1s;
 }
 
+.VPButton.small {
+  border-radius: 16px;
+  padding: 0 16px;
+  line-height: 30px;
+  font-size: 12px;
+}
+
 .VPButton.medium {
   border-radius: 20px;
   padding: 0 20px;
diff --git a/src/client/theme-default/components/VPFeature.vue b/src/client/theme-default/components/VPFeature.vue
index 7f24f3f351a9..3d92293cc3b0 100644
--- a/src/client/theme-default/components/VPFeature.vue
+++ b/src/client/theme-default/components/VPFeature.vue
@@ -1,8 +1,17 @@
 <script setup lang="ts">
+import VPButton from './VPButton.vue'
+
+export interface FeatureAction {
+  theme?: 'brand' | 'alt'
+  text: string
+  link: string
+}
+
 defineProps<{
   icon?: string
   title: string
   details: string
+  action?: FeatureAction
 }>()
 </script>
 
@@ -11,6 +20,16 @@ defineProps<{
     <div v-if="icon" class="icon">{{ icon }}</div>
     <h2 class="title">{{ title }}</h2>
     <p class="details">{{ details }}</p>
+    <div class="feature-actions">
+      <VPButton
+        v-if="action"
+        tag="a"
+        size="small"
+        :theme="action.theme"
+        :text="action.text"
+        :href="action.link"
+      />
+    </div>
   </article>
 </template>
 
@@ -52,4 +71,8 @@ defineProps<{
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
+
+.feature-actions {
+  padding-top: 16px;
+}
 </style>
diff --git a/src/client/theme-default/components/VPFeatures.vue b/src/client/theme-default/components/VPFeatures.vue
index db49bde43cc3..178ae1097696 100644
--- a/src/client/theme-default/components/VPFeatures.vue
+++ b/src/client/theme-default/components/VPFeatures.vue
@@ -6,6 +6,13 @@ export interface Feature {
   icon?: string
   title: string
   details: string
+  action?: FeatureAction
+}
+
+export interface FeatureAction {
+  theme?: 'brand' | 'alt'
+  text: string
+  link: string
 }
 
 const props = defineProps<{
@@ -38,6 +45,7 @@ const grid = computed(() => {
             :icon="feature.icon"
             :title="feature.title"
             :details="feature.details"
+            :action="feature.action"
           />
         </div>
       </div>

From d85c63d2b05b181a14b373ebd56c328bb22c86d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Robichet?= <remi.robichet@edtake.com>
Date: Tue, 26 Jul 2022 15:04:33 +0200
Subject: [PATCH 2/4] docs(theme): add link in homepage feature

---
 docs/guide/theme-home-page.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/docs/guide/theme-home-page.md b/docs/guide/theme-home-page.md
index e791c07acd6d..4ee72436d2ad 100644
--- a/docs/guide/theme-home-page.md
+++ b/docs/guide/theme-home-page.md
@@ -98,6 +98,10 @@ features:
   - icon: 🖖
     title: Power of Vue meets Markdown
     details: Lorem ipsum...
+    action:
+      theme: alt
+      text: markdown-it
+      link: https://github.com/markdown-it/markdown-it
   - icon: 🛠️
     title: Simple and minimal, always
     details: Lorem ipsum...
@@ -115,5 +119,19 @@ interface Feature {
 
   // Details of the feature.
   details: string
+
+  // Action button to display in home feature section.
+  action?: FeatureAction
+}
+
+interface HeroAction {
+  // Color theme of the button. Defaults to `brand`.
+  theme?: 'brand' | 'alt'
+
+  // Label of the button.
+  text: string
+
+  // Destination link of the button.
+  link: string
 }
 ```

From 680b82c1a7bf8cc98816f6d830946a40e43e5b8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Robichet?= <remi.robichet@edtake.com>
Date: Mon, 29 Aug 2022 09:07:54 +0200
Subject: [PATCH 3/4] fix: interface name typo

---
 docs/guide/theme-home-page.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/guide/theme-home-page.md b/docs/guide/theme-home-page.md
index 4ee72436d2ad..662f8e48f35a 100644
--- a/docs/guide/theme-home-page.md
+++ b/docs/guide/theme-home-page.md
@@ -124,7 +124,7 @@ interface Feature {
   action?: FeatureAction
 }
 
-interface HeroAction {
+interface FeatureAction {
   // Color theme of the button. Defaults to `brand`.
   theme?: 'brand' | 'alt'
 

From 01ad74d3283e15f5372f13e727912b3b2c563762 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Robichet?= <remi.robichet@edtake.com>
Date: Wed, 31 Aug 2022 08:46:26 +0200
Subject: [PATCH 4/4] fix: add small size to button definition

---
 src/client/theme-default/components/VPButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/theme-default/components/VPButton.vue b/src/client/theme-default/components/VPButton.vue
index f10477c460b1..98da30d56953 100644
--- a/src/client/theme-default/components/VPButton.vue
+++ b/src/client/theme-default/components/VPButton.vue
@@ -5,7 +5,7 @@ import { EXTERNAL_URL_RE } from '../../shared'
 
 const props = defineProps<{
   tag?: string
-  size?: 'medium' | 'big'
+  size?: 'small' | 'medium' | 'big'
   theme?: 'brand' | 'alt' | 'sponsor'
   text: string
   href?: string