feat: init HomeHero HomeFeature

docs/index.mdx

@@ -0,0 +1,38 @@
+---
+pageType: home
+
+hero:
+  name: Shaco
+  text: 基于 Vite & MDX 语法的静态站点生成器
+  tagline: 简单、强大、高性能的现代化 SSG 方案
+  image:
+    src: /shaco.png
+    alt: shaco
+  actions:
+    - theme: brand
+      text: 快速开始
+      link: /zh/guide/getting-started
+    - theme: alt
+      text: GitHub 地址
+      link: 
+
+features:
+  - title: 'Vite: 极速的开发响应速度'
+    details: 基于 Vite 构建，开发时的响应速度极快，即时的热更新，带给你极致的开发体验。
+    icon: 🚀
+  - title: 'MDX: Markdown & React 组件来写内容'
+    details: MDX 是一种强大的方式来写内容。你可以在 Markdown 中使用 React 组件。
+    icon: 📦
+  - title: '孤岛架构: 更高的生产性能'
+    details: 采用 shacos 架构，意味着更少的 JavaScript 代码、局部 hydration， 从而带来更好的首屏性能。
+    icon: ✨
+  - title: '功能丰富: 一站式解决方案'
+    details: 对全文搜索、国际化等常见功能可以做到开箱即用。
+    icon: 🛠️
+  - title: 'TypeScript: 优秀的类型支持'
+    details: 使用 TypeScript 编写，提供了优秀的类型支持，让你的开发更加顺畅。
+    icon: 🔑
+  - title: '扩展性强: 提供多种自定义能力'
+    details: 通过其扩展机制，你可以轻松的扩展 shaco 的主题 UI 和构建能力。
+    icon: 🎨
+---

src/runtime/App.tsx

@@ -15,7 +15,7 @@ export async function initPageData(routePath: string): Promise<PageData> {
     const moduleInfo = await route.preload()
     console.log('moduleInfo', moduleInfo)
     return {
-      pageType: 'doc',
+      pageType: moduleInfo.frontmatter.pageType ?? 'doc',
       siteData,
       frontmatter: moduleInfo.frontmatter,
       pagePath: routePath

src/shared/types/index.ts

@@ -57,6 +57,29 @@ export interface FrontMatter {
   pageType?: PageType
   sidebar?: boolean
   outline?: boolean
+  features?: Feature[]
+  hero?: Hero
+}
+
+export interface Feature {
+  icon: string
+  title: string
+  details: string
+}
+
+export interface Hero {
+  name: string
+  text: string
+  tagline: string
+  image?: {
+    src: string
+    alt: string
+  }
+  actions: {
+    text: string
+    link: string
+    theme: 'brand' | 'alt'
+  }[]
 }
 
 export interface PageData {

src/theme-default/Layout/HomeLayout/index.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+import { usePageData } from '@runtime'
+import { HomeHero } from '../../components/HomeHero'
+import { HomeFeature } from '../../components/HomeFeature'
+
+export const HomeLayout: FC = () => {
+  const { frontmatter } = usePageData()
+
+  return (
+    <div>
+      <HomeHero hero={frontmatter.hero} />
+      <HomeFeature feature={frontmatter.features} />
+    </div>
+  )
+}

src/theme-default/Layout/index.tsx

@@ -1,5 +1,6 @@
 import { usePageData } from '@runtime'
 import { Nav } from '../components/Nav'
+import { HomeLayout } from './HomeLayout'
 
 import '../styles/base.css'
 import '../styles/vars.css'
@@ -11,7 +12,7 @@ export function Layout() {
 
   const getContent = () => {
     if (pageType === 'home') {
-      return <div>Home</div>
+      return <HomeLayout />
     } else if (pageType === 'doc') {
       return <div>Doc</div>
     } else {

src/theme-default/components/HomeFeature/index.tsx

@@ -0,0 +1,6 @@
+import { FC } from 'react'
+import { Feature } from 'shared/types'
+
+export const HomeFeature: FC<{ feature: Feature[] }> = () => {
+  return <div>Home Feature</div>
+}

src/theme-default/components/HomeHero/index.tsx

@@ -0,0 +1,6 @@
+import { FC } from 'react'
+import { Hero } from 'shared/types'
+
+export const HomeHero: FC<{ hero: Hero }> = () => {
+  return <div>HomeHero</div>
+}