feat(theme-default): support multiple action buttons in homepage (close #23)

Author: meteorlxy

packages/@vuepress/theme-default/src/components/Home.vue

@@ -1,50 +1,29 @@
 <template>
-  <main
-    class="home"
-    :aria-labelledby="$frontmatter.heroText !== null ? 'main-title' : null"
-  >
+  <main class="home" :aria-labelledby="heroText ? 'main-title' : null">
     <header class="hero">
-      <img
-        v-if="$frontmatter.heroImage"
-        :src="$withBase($frontmatter.heroImage)"
-        :alt="$frontmatter.heroAlt || 'hero'"
-      />
-
-      <h1 v-if="$frontmatter.heroText !== null" id="main-title">
-        {{ $frontmatter.heroText || $siteLocale.title || 'Hello' }}
+      <img v-if="heroImage" :src="heroImage" :alt="heroAlt" />
+
+      <h1 v-if="heroText" id="main-title">
+        {{ heroText }}
       </h1>
 
-      <p v-if="$frontmatter.tagline !== null" class="description">
-        {{
-          $frontmatter.tagline ||
-          $siteLocale.description ||
-          'Welcome to your VuePress site'
-        }}
+      <p v-if="tagline" class="description">
+        {{ tagline }}
       </p>
 
-      <p
-        v-if="$frontmatter.actionText && $frontmatter.actionLink"
-        class="action"
-      >
+      <p v-if="actions.length" class="actions">
         <NavLink
+          v-for="action in actions"
+          :key="action.text"
           class="action-button"
-          :item="{
-            text: $frontmatter.actionText,
-            link: $frontmatter.actionLink,
-          }"
+          :class="[action.type]"
+          :item="action"
         />
       </p>
     </header>
 
-    <div
-      v-if="$frontmatter.features && $frontmatter.features.length"
-      class="features"
-    >
-      <div
-        v-for="(feature, index) in $frontmatter.features"
-        :key="index"
-        class="feature"
-      >
+    <div v-if="features.length" class="features">
+      <div v-for="feature in features" :key="feature.title" class="feature">
         <h2>{{ feature.title }}</h2>
         <p>{{ feature.details }}</p>
       </div>
@@ -54,20 +33,96 @@
       <Content />
     </div>
 
-    <div v-if="$frontmatter.footer" class="footer">
-      {{ $frontmatter.footer }}
+    <div v-if="footer" class="footer">
+      {{ footer }}
     </div>
   </main>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
+import {
+  usePageFrontmatter,
+  useSiteLocaleData,
+  withBase,
+} from '@vuepress/client'
+import { isArray } from '@vuepress/shared'
+import type { DefaultThemeHomePageFrontmatter } from '../types'
 import NavLink from './NavLink.vue'
 
 export default defineComponent({
   name: 'Home',
+
   components: {
     NavLink,
   },
+
+  setup() {
+    const frontmatter = usePageFrontmatter<DefaultThemeHomePageFrontmatter>()
+    const siteLocale = useSiteLocaleData()
+
+    const heroImage = computed(() => {
+      if (!frontmatter.value.heroImage) {
+        return null
+      }
+
+      return withBase(frontmatter.value.heroImage)
+    })
+
+    const heroText = computed(() => {
+      if (frontmatter.value.heroText === null) {
+        return null
+      }
+      return frontmatter.value.heroText || siteLocale.value.title || 'Hello'
+    })
+
+    const heroAlt = computed(
+      () => frontmatter.value.heroAlt || heroText.value || 'hero'
+    )
+
+    const tagline = computed(() => {
+      if (frontmatter.value.tagline === null) {
+        return null
+      }
+      return (
+        frontmatter.value.tagline ||
+        siteLocale.value.description ||
+        'Welcome to your VuePress site'
+      )
+    })
+
+    const actions = computed(() => {
+      if (!isArray(frontmatter.value.actions)) {
+        return []
+      }
+
+      return frontmatter.value.actions.map(
+        ({ text, link, type = 'primary' }) => ({
+          text,
+          link,
+          type,
+        })
+      )
+    })
+
+    const features = computed(() => {
+      if (isArray(frontmatter.value.features)) {
+        return frontmatter.value.features
+      }
+      return []
+    })
+
+    const footer = computed(() => frontmatter.value.footer)
+
+    return {
+      heroImage,
+      heroAlt,
+      heroText,
+      tagline,
+      actions,
+      features,
+      footer,
+    }
+  },
 })
 </script>

packages/@vuepress/theme-default/src/styles/home.styl

@@ -20,7 +20,7 @@
       font-size: 3rem;
     }
 
-    h1, .description, .action {
+    h1, .description, .actions {
       margin: 1.8rem auto;
     }
 
@@ -34,16 +34,34 @@
     .action-button {
       display: inline-block;
       font-size: 1.2rem;
-      color: #fff;
-      background-color: $accentColor;
       padding: 0.8rem 1.6rem;
+      border-width: 2px;
+      border-style: solid;
       border-radius: 4px;
       transition: background-color 0.1s ease;
       box-sizing: border-box;
-      border-bottom: 1px solid darken($accentColor, 10%);
 
-      &:hover {
-        background-color: lighten($accentColor, 10%);
+      &:not(:first-child) {
+        margin-left: 1.5rem;
+      }
+
+      &.primary {
+        color: #fff;
+        background-color: $tipColor;
+        border-color: $tipColor;
+        &:hover {
+          background-color: lighten($tipColor, 10%);
+        }
+      }
+
+      &.secondary {
+        color: $tipColor;
+        background-color: #fff;
+        border-color: $tipColor;
+        &:hover {
+          color: #fff;
+          background-color: lighten($tipColor, 10%);
+        }
       }
     }
   }
@@ -113,7 +131,7 @@
         font-size: 2rem;
       }
 
-      h1, .description, .action {
+      h1, .description, .actions {
         margin: 1.2rem auto;
       }
 

packages/@vuepress/theme-default/src/types/page.ts

@@ -1,5 +1,34 @@
 import type { GitPluginPageData } from '@vuepress/plugin-git'
+import type { NavLink, SidebarConfig } from './nav'
 
 export interface DefaultThemePageData extends GitPluginPageData {
   filePathRelative: string
 }
+
+export interface DefaultThemeHomePageFrontmatter {
+  home: true
+  heroImage?: string
+  heroAlt?: string
+  heroText?: string
+  tagline?: string
+  actions?: {
+    text: string
+    link: string
+    type?: 'primary' | 'secondary'
+  }[]
+  features?: {
+    title: string
+    details: string
+  }[]
+  footer?: string
+}
+
+export interface DefaultThemePageFrontmatter {
+  home?: boolean
+  editLink?: boolean
+  lastUpdated?: boolean
+  contributors?: boolean
+  prev?: string | NavLink
+  next?: string | NavLink
+  sidebar?: 'auto' | false | SidebarConfig
+}