feature(home): added feature groups & ability to set title

docs/index.md

@@ -20,6 +20,8 @@ hero:
     alt: VitePress
 
 features:
+  - title: Features
+    features: 
       - icon: 📝
         title: Focus on Your Content
         details: Effortlessly create beautiful documentation sites with just markdown.
@@ -32,6 +34,17 @@ features:
       - icon: 🚀
         title: Ship Fast Sites
         details: Fast initial load with static HTML, fast post-load navigation with client-side routing.
+  - title: Title
+    features: 
+      - icon: 📝
+        title: Test
+        details: Test
+      - icon: 📝
+        title: Test
+        details: Test
+      - icon: 📝
+        title: Test
+        details: Test
 ---
 <style>
 :root {

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

@@ -3,6 +3,11 @@ import type { DefaultTheme } from 'vitepress/theme'
 import { computed } from 'vue'
 import VPFeature from './VPFeature.vue'
 
+export interface FeatureGroup {
+  title?: string,
+  features: Feature[]
+}
+
 export interface Feature {
   icon?: DefaultTheme.FeatureIcon
   title: string
@@ -13,12 +18,15 @@ export interface Feature {
 }
 
 const props = defineProps<{
-  features: Feature[]
+  features: FeatureGroup[]
 }>()
 
-const grid = computed(() => {
-  const length = props.features.length
-
+const grid = computed({
+  get() {
+    return (idx: number) => {
+      const group = props.features[idx]
+      if (!group) return ''
+      const length = group.features.length
       if (!length) {
         return
       } else if (length === 2) {
@@ -30,18 +38,34 @@ const grid = computed(() => {
       } else if (length > 3) {
         return 'grid-4'
       }
+    }
+  }
+})
+
+const firstHeading = computed({
+  get() {
+    return (idx: number) => {
+      return idx === 0 ? 'first' : ''
+    }
+  }
 })
 </script>
 
 <template>
   <div v-if="features" class="VPFeatures">
+    <div class="section" v-for="(feature_group, feature_group_idx) in features">
+      <h2 
+        class="feature-group-title"
+        :class="[firstHeading(feature_group_idx)]"
+        v-if="feature_group.title"
+        v-html="feature_group.title" />
       <div class="container">
         <div class="items">
           <div
-          v-for="feature in features"
+            v-for="feature in feature_group.features"
             :key="feature.title"
             class="item"
-          :class="[grid]"
+            :class="[grid(feature_group_idx)]"
           >
             <VPFeature
               :icon="feature.icon"
@@ -55,12 +79,16 @@ const grid = computed(() => {
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <style scoped>
 .VPFeatures {
   position: relative;
   padding: 0 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
 }
 
 @media (min-width: 640px) {
@@ -75,8 +103,20 @@ const grid = computed(() => {
   }
 }
 
-.container {
+h2.feature-group-title {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+h2.feature-group-title.first {
+  margin-top: 0;
+}
+
+.section {
   margin: 0 auto;
+  width: 100%;
   max-width: 1152px;
 }