feat: redesign homepage

docs/.vitepress/theme/Layout.vue

@@ -50,6 +50,12 @@ const { Layout } = DefaultTheme
     <template #home-hero-prelink>
       <Announcement />
     </template>
+    <template #home-features-before>
+      <p class="text-center text-lg text-text-2 mb-2">
+        Or browse these pages
+        <span class="inline-block i-twemoji:sparkles" />
+      </p>
+    </template>
     <Content />
   </Layout>
 </template>

docs/.vitepress/theme/PostLayout.vue

@@ -2,7 +2,7 @@
 import Authors from './components/Authors.vue'
 
 const props = defineProps<{
-  authors: string[]
+  authors: string
 }>()
 
 const formatDate = (raw: string): string => {
@@ -14,10 +14,11 @@ const formatDate = (raw: string): string => {
 }
 
 const { frontmatter } = useData()
+const authors = computed(() => props.authors.split(','))
 </script>
 
 <template>
   <h1>{{ frontmatter.title }}</h1>
   <div>{{ frontmatter.description }} • {{ formatDate(frontmatter.date) }}</div>
-  <Authors :authors="props.authors" />
+  <Authors :authors="authors" />
 </template>

docs/.vitepress/theme/index.ts

@@ -15,13 +15,14 @@
  */
 
 import type { Theme } from 'vitepress'
+import Components from '@fmhy/components'
 import DefaultTheme from 'vitepress/theme'
 import { loadProgress } from './composables/nprogress'
 import Layout from './Layout.vue'
 import Post from './PostLayout.vue'
 
 import './style.scss'
-import 'uno.css'
+import 'virtual:uno.css'
 
 import Feedback from './components/Feedback.vue'
 
@@ -29,6 +30,7 @@ export default {
   extends: DefaultTheme,
   Layout,
   enhanceApp({ router, app }) {
+    app.use(Components)
     app.component('Post', Post)
     app.component('Feedback', Feedback)
     loadProgress(router)

docs/.vitepress/theme/posts.data.ts

@@ -1,7 +1,3 @@
-import type { ContentData } from 'vitepress'
-import { createContentLoader } from 'vitepress'
-import { groupBy } from '../utils'
-
 /**
  *  Copyright (c) taskylizard. All rights reserved.
  *
@@ -18,18 +14,22 @@ import { groupBy } from '../utils'
  *  limitations under the License.
  */
 
+import type { ContentData } from 'vitepress'
+import { createContentLoader } from 'vitepress'
+import { groupBy } from '../utils'
+
 interface Post {
   title: string
   url: string
   date: string
 }
 
-type Dictionary = ReturnType
+type Dictionary = ReturnType<typeof createContentLoader>
 
 declare const data: Dictionary
 export { data }
 
-function transformRawPosts(rawPosts: ContentData[]): Record {
+function transformRawPosts(rawPosts: ContentData[]): Record<string, Post[]> {
   const posts: Post[] = rawPosts
     .map(({ url, frontmatter }) => ({
       title: frontmatter.title,