From ee7fa47f0a7b916e08c545fdc839a1a93d7b7b99 Mon Sep 17 00:00:00 2001
From: Timothy Lau <timothy-lau@outlook.com>
Date: Wed, 17 Apr 2024 10:53:34 +0800
Subject: [PATCH 1/2] feat(default theme): Add icons on action buttons

---
 docs/index.md                                 |  6 +++
 docs/reference/default-theme-home-page.md     | 17 +++++++
 .../theme-default/components/VPButton.vue     | 49 ++++++++++++++++++-
 .../theme-default/components/VPHero.vue       |  4 ++
 types/default-theme.d.ts                      | 16 ++++++
 5 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 9be32c3e103c..3c7faece1d25 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -12,12 +12,18 @@ hero:
     - theme: brand
       text: What is VitePress?
       link: /guide/what-is-vitepress
+      startIcon: 
+        src: /public/vitepress-logo-mini.svg
+        width: 18
+        height: 18
+      endIcon: 
     - theme: alt
       text: Quickstart
       link: /guide/getting-started
     - theme: alt
       text: GitHub
       link: https://github.com/vuejs/vitepress
+      endIcon: <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m16.172 11l-5.364-5.364l1.414-1.414L20 12l-7.778 7.778l-1.414-1.414L16.172 13H4v-2z"/></svg>
   image:
     src: /vitepress-logo-large.webp
     alt: VitePress
diff --git a/docs/reference/default-theme-home-page.md b/docs/reference/default-theme-home-page.md
index f7baecca0138..3cf9fc96b497 100644
--- a/docs/reference/default-theme-home-page.md
+++ b/docs/reference/default-theme-home-page.md
@@ -75,7 +75,24 @@ interface HeroAction {
 
   // Link rel attribute.
   rel?: string
+
+  // Show the left icon on action button.
+  startIcon?: ActionIcon
+
+  // Show the right icon on action button.
+  endIcon?: ActionIcon
 }
+
+type ActionIcon =
+  | string
+  | { src: string; alt?: string; width?: string; height: string }
+  | {
+      light: string
+      dark: string
+      alt?: string
+      width?: string
+      height: string
+    }
 ```
 
 ### Customizing the name color
diff --git a/src/client/theme-default/components/VPButton.vue b/src/client/theme-default/components/VPButton.vue
index 3b9152f2f2ba..55d63209403f 100644
--- a/src/client/theme-default/components/VPButton.vue
+++ b/src/client/theme-default/components/VPButton.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { DefaultTheme } from 'vitepress/theme'
 import { normalizeLink } from '../support/utils'
 import { EXTERNAL_URL_RE } from '../../shared'
+import VPImage from './VPImage.vue'
 
 interface Props {
   tag?: string
@@ -11,6 +13,8 @@ interface Props {
   href?: string
   target?: string;
   rel?: string;
+  startIcon?: DefaultTheme.ActionIcon;
+  endIcon?: DefaultTheme.ActionIcon;
 }
 const props = withDefaults(defineProps<Props>(), {
   size: 'medium',
@@ -35,13 +39,35 @@ const component = computed(() => {
     :target="props.target ?? (isExternal ? '_blank' : undefined)"
     :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
   >
-    {{ text }}
+    <div class="start-icon" v-if="startIcon">
+      <VPImage
+        v-if="typeof startIcon === 'object'"
+        :image="startIcon"
+        :alt="startIcon.alt"
+        :height="startIcon.height || 32"
+        :width="startIcon.width || 32"
+      />
+      <div v-else-if="startIcon" class="icon" v-html="startIcon"></div>
+    </div>
+    <span>{{ text }}</span>
+    <div class="end-icon" v-if="endIcon">
+      <VPImage
+        v-if="typeof endIcon === 'object'"
+        :image="endIcon"
+        :alt="endIcon.alt"
+        :height="endIcon.height || 32"
+        :width="endIcon.width || 32"
+      />
+      <div v-else-if="endIcon" class="icon" v-html="endIcon"></div>
+    </div>
   </component>
 </template>
 
 <style scoped>
 .VPButton {
-  display: inline-block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border: 1px solid transparent;
   text-align: center;
   font-weight: 600;
@@ -120,4 +146,23 @@ const component = computed(() => {
   color: var(--vp-button-sponsor-active-text);
   background-color: var(--vp-button-sponsor-active-bg);
 }
+
+.VPButton:only-child{
+  grid-template-columns: 1fr;
+  grid-gap: 0;
+}
+
+.icon{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.start-icon {
+  margin-right: 8px;
+}
+
+.end-icon {
+  margin-left: 8px;
+}
 </style>
diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index 9fc1f396c1a3..ffea5679f1f6 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -10,6 +10,8 @@ export interface HeroAction {
   link: string
   target?: string
   rel?: string
+  startIcon?: DefaultTheme.ActionIcon
+  endIcon?: DefaultTheme.ActionIcon
 }
 
 defineProps<{
@@ -47,6 +49,8 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
               :href="action.link"
               :target="action.target"
               :rel="action.rel"
+              :start-icon="action.startIcon"
+              :end-icon="action.endIcon"
             />
           </div>
         </div>
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 58d7d89ff6e7..24209c7e97fc 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -220,6 +220,22 @@ export namespace DefaultTheme {
         wrap?: boolean
       }
 
+  export type ActionIcon =
+    | string
+    | {
+        src: string
+        alt?: string
+        width?: string
+        height?: string
+      }
+    | {
+        light: string
+        dark: string
+        alt?: string
+        width?: string
+        height?: string
+      }
+
   // sidebar -------------------------------------------------------------------
 
   export type Sidebar = SidebarItem[] | SidebarMulti

From c6fa8ac1c6aaadafd7d09e69698b4fdbbc16a114 Mon Sep 17 00:00:00 2001
From: Timothy Lau <timothy-lau@outlook.com>
Date: Sat, 27 Apr 2024 13:27:15 +0800
Subject: [PATCH 2/2] Using span instead of div

---
 docs/index.md                                    |  3 ++-
 src/client/theme-default/components/VPButton.vue | 12 ++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 3c7faece1d25..395f16083b3b 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -13,7 +13,7 @@ hero:
       text: What is VitePress?
       link: /guide/what-is-vitepress
       startIcon: 
-        src: /public/vitepress-logo-mini.svg
+        src: /vitepress-logo-mini.svg
         width: 18
         height: 18
       endIcon: 
@@ -23,6 +23,7 @@ hero:
     - theme: alt
       text: GitHub
       link: https://github.com/vuejs/vitepress
+      startIcon: <span class="vpi-social-github" />
       endIcon: <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m16.172 11l-5.364-5.364l1.414-1.414L20 12l-7.778 7.778l-1.414-1.414L16.172 13H4v-2z"/></svg>
   image:
     src: /vitepress-logo-large.webp
diff --git a/src/client/theme-default/components/VPButton.vue b/src/client/theme-default/components/VPButton.vue
index 55d63209403f..b4c89a8b4fb8 100644
--- a/src/client/theme-default/components/VPButton.vue
+++ b/src/client/theme-default/components/VPButton.vue
@@ -39,7 +39,7 @@ const component = computed(() => {
     :target="props.target ?? (isExternal ? '_blank' : undefined)"
     :rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
   >
-    <div class="start-icon" v-if="startIcon">
+    <span class="start-icon" v-if="startIcon">
       <VPImage
         v-if="typeof startIcon === 'object'"
         :image="startIcon"
@@ -47,10 +47,10 @@ const component = computed(() => {
         :height="startIcon.height || 32"
         :width="startIcon.width || 32"
       />
-      <div v-else-if="startIcon" class="icon" v-html="startIcon"></div>
-    </div>
+      <span v-else-if="startIcon" class="icon" v-html="startIcon"></span>
+    </span>
     <span>{{ text }}</span>
-    <div class="end-icon" v-if="endIcon">
+    <span class="end-icon" v-if="endIcon">
       <VPImage
         v-if="typeof endIcon === 'object'"
         :image="endIcon"
@@ -58,8 +58,8 @@ const component = computed(() => {
         :height="endIcon.height || 32"
         :width="endIcon.width || 32"
       />
-      <div v-else-if="endIcon" class="icon" v-html="endIcon"></div>
-    </div>
+      <span v-else-if="endIcon" class="icon" v-html="endIcon"></span>
+    </span>
   </component>
 </template>