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

docs/index.md

@@ -20,18 +20,31 @@ hero:
     alt: VitePress
 
 features:
-  - icon: 📝
-    title: Focus on Your Content
-    details: Effortlessly create beautiful documentation sites with just markdown.
-  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 256 256.32"><defs><linearGradient id="a" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"/><stop offset="100%" stop-color="#BD34FE"/></linearGradient><linearGradient id="b" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"/><stop offset="8.333%" stop-color="#FFDD35"/><stop offset="100%" stop-color="#FFA800"/></linearGradient></defs><path fill="url(#a)" d="M255.153 37.938 134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"/><path fill="url(#b)" d="M185.432.063 96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"/></svg>
-    title: Enjoy the Vite DX
-    details: Instant server start, lightning fast hot updates, and leverage Vite ecosystem plugins.
-  - icon: <svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 256 220.8"><path fill="#41B883" d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z"/><path fill="#41B883" d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z"/><path fill="#35495E" d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z"/></svg>
-    title: Customize with Vue
-    details: Use Vue syntax and components directly in markdown, or build custom themes with Vue.
-  - icon: 🚀
-    title: Ship Fast Sites
-    details: Fast initial load with static HTML, fast post-load navigation with client-side routing.
+  - title: Features
+    features: 
+      - icon: 📝
+        title: Focus on Your Content
+        details: Effortlessly create beautiful documentation sites with just markdown.
+      - icon: <svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 256 256.32"><defs><linearGradient id="a" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"/><stop offset="100%" stop-color="#BD34FE"/></linearGradient><linearGradient id="b" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"/><stop offset="8.333%" stop-color="#FFDD35"/><stop offset="100%" stop-color="#FFA800"/></linearGradient></defs><path fill="url(#a)" d="M255.153 37.938 134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"/><path fill="url(#b)" d="M185.432.063 96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028 72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"/></svg>
+        title: Enjoy the Vite DX
+        details: Instant server start, lightning fast hot updates, and leverage Vite ecosystem plugins.
+      - icon: <svg xmlns="http://www.w3.org/2000/svg" width="30" viewBox="0 0 256 220.8"><path fill="#41B883" d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0h47.36Z"/><path fill="#41B883" d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0H0Z"/><path fill="#35495E" d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0H50.56Z"/></svg>
+        title: Customize with Vue
+        details: Use Vue syntax and components directly in markdown, or build custom themes with Vue.
+      - 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,44 +18,64 @@ export interface Feature {
 }
 
 const props = defineProps<{
-  features: Feature[]
+  features: FeatureGroup[]
 }>()
 
-const grid = computed(() => {
-  const length = props.features.length
-
-  if (!length) {
-    return
-  } else if (length === 2) {
-    return 'grid-2'
-  } else if (length === 3) {
-    return 'grid-3'
-  } else if (length % 3 === 0) {
-    return 'grid-6'
-  } else if (length > 3) {
-    return 'grid-4'
+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) {
+        return 'grid-2'
+      } else if (length === 3) {
+        return 'grid-3'
+      } else if (length % 3 === 0) {
+        return 'grid-6'
+      } 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="container">
-      <div class="items">
-        <div
-          v-for="feature in features"
-          :key="feature.title"
-          class="item"
-          :class="[grid]"
-        >
-          <VPFeature
-            :icon="feature.icon"
-            :title="feature.title"
-            :details="feature.details"
-            :link="feature.link"
-            :link-text="feature.linkText"
-            :rel="feature.rel"
-          />
+    <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 feature_group.features"
+            :key="feature.title"
+            class="item"
+            :class="[grid(feature_group_idx)]"
+          >
+            <VPFeature
+              :icon="feature.icon"
+              :title="feature.title"
+              :details="feature.details"
+              :link="feature.link"
+              :link-text="feature.linkText"
+              :rel="feature.rel"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -61,6 +86,9 @@ const grid = computed(() => {
 .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;
 }