feat(theme): add link feature in homepage features (#984) (#1404)

close #984 
close #1070 

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Co-authored-by: Kia Ishii <kia.king.08@gmail.com>

docs/config/frontmatter-configs.md

@@ -197,9 +197,23 @@ interface Feature {
 
   // Details of the feature.
   details: string
+
+  // Link when clicked on feature component. The link can
+  // be both internal or external.
+  //
+  // e.g. `guide/theme-home-page` or `htttps://example.com`
+  link?: string
+
+  // Link text to be shown inside feature component. Best
+  // used with `link` option.
+  //
+  // e.g. `Learn more`, `Visit page`, etc.
+  linkText?: string
 }
 ```
 
+You may learn more about it in [Theme: Home Page](../guide/theme-home-page).
+
 ## aside
 
 - Type: `boolean`

docs/guide/theme-home-page.md

@@ -115,5 +115,17 @@ interface Feature {
 
   // Details of the feature.
   details: string
+
+  // Link when clicked on feature component. The link can
+  // be both internal or external.
+  //
+  // e.g. `guide/theme-home-page` or `htttps://example.com`
+  link?: string
+
+  // Link text to be shown inside feature component. Best
+  // used with `link` option.
+  //
+  // e.g. `Learn more`, `Visit page`, etc.
+  linkText?: string
 }
 ```

src/client/theme-default/components/VPFeature.vue

@@ -1,26 +1,56 @@
 <script setup lang="ts">
+import VPLink from './VPLink.vue'
+import VPIconArrowRight from './icons/VPIconArrowRight.vue'
+
 defineProps<{
   icon?: string
   title: string
   details: string
+  link?: string
+  linkText?: string
 }>()
 </script>
 
 <template>
-  <article class="VPFeature">
-    <div v-if="icon" class="icon">{{ icon }}</div>
-    <h2 class="title">{{ title }}</h2>
-    <p class="details">{{ details }}</p>
-  </article>
+  <VPLink class="VPFeature" :href="link" :no-icon="true">
+    <article class="box">
+      <div v-if="icon" class="icon">{{ icon }}</div>
+      <h2 class="title">{{ title }}</h2>
+      <p class="details">{{ details }}</p>
+
+      <div v-if="linkText" class="link-text">
+        <p class="link-text-value">
+          {{ linkText }} <VPIconArrowRight class="link-text-icon" />
+        </p>
+      </div>
+    </article>
+  </VPLink>
 </template>
 
 <style scoped>
 .VPFeature {
+  display: block;
   border: 1px solid var(--vp-c-bg-soft);
   border-radius: 12px;
-  padding: 24px;
   height: 100%;
   background-color: var(--vp-c-bg-soft);
+  transition: border-color 0.25s, background-color 0.25s;
+}
+
+.VPFeature.link:hover {
+  border-color: var(--vp-c-brand);
+  background-color: var(--vp-c-bg);
+}
+
+.dark .VPFeature.link:hover {
+  background-color: var(--vp-c-bg-mute);
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  height: 100%;
 }
 
 .icon {
@@ -33,10 +63,11 @@ defineProps<{
   width: 48px;
   height: 48px;
   font-size: 24px;
+  transition: background-color 0.25s;
 }
 
 .dark .icon {
-  background-color: var(--vp-c-bg);
+  background-color: var(--vp-c-gray-dark-5);
 }
 
 .title {
@@ -46,10 +77,36 @@ defineProps<{
 }
 
 .details {
+  flex-grow: 1;
   padding-top: 8px;
   line-height: 24px;
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
+
+.link-text {
+  padding-top: 8px;
+}
+
+.link-text-value {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand);
+  transition: color 0.25s;
+}
+
+.VPFeature.link:hover .link-text-value {
+  color: var(--vp-c-brand-dark);
+}
+
+.link-text-icon {
+  display: inline-block;
+  margin-left: 6px;
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
 </style>

src/client/theme-default/components/VPFeatures.vue

@@ -6,6 +6,8 @@ export interface Feature {
   icon?: string
   title: string
   details: string
+  link?: string
+  linkText?: string
 }
 
 const props = defineProps<{
@@ -38,6 +40,8 @@ const grid = computed(() => {
             :icon="feature.icon"
             :title="feature.title"
             :details="feature.details"
+            :link="feature.link"
+            :link-text="feature.linkText"
           />
         </div>
       </div>