feat(theme): link in homepage features

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 FeatureAction {
+  // Color theme of the button. Defaults to `brand`.
+  theme?: 'brand' | 'alt'
+
+  // Label of the button.
+  text: string
+
+  // Destination link of the button.
+  link: string
 }
 ```

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;

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>

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>