feat: add meta in page module

Author: sanyuan0704

src/runtime/app.tsx

@@ -19,7 +19,7 @@ export async function waitForApp(path: string): Promise<PageData> {
     const pagePath = cleanUrl((matched[0].route as Route).filePath);
     const relativePagePath = getRelativePagePath(path, pagePath, siteData.base);
     // API Page
-    if (mod.api || mod.pageType === 'api') {
+    if (mod?.meta?.api || mod?.meta?.pageType === 'api') {
       const subModules = await Promise.all(
         routes
           .filter(
@@ -38,16 +38,18 @@ export async function waitForApp(path: string): Promise<PageData> {
         siteData,
         pagePath,
         relativePagePath,
-        pageType: 'api',
-        subModules
+        subModules,
+        ...omit(mod, ['default']),
+        pageType: 'api'
       };
     } else {
       // Doc/Custom Page
       return {
         siteData,
         pagePath,
         relativePagePath,
-        ...omit(mod, ['default'])
+        ...omit(mod, ['default']),
+        pageType: mod?.meta?.pageType || 'doc'
       } as PageData;
     }
   } else {

src/shared/types/index.ts

@@ -146,19 +146,30 @@ export type ComponentPropsWithIsland<T = unknown> = T & { __island: boolean };
 
 export interface PageModule<T extends ComponentType<unknown>> {
   default: T;
+  meta?: FrontMatterMeta;
   [key: string]: unknown;
 }
 
+export type PageType = 'home' | 'doc' | 'api' | 'custom' | '404';
+
+export interface FrontMatterMeta {
+  title: string;
+  description: string;
+  api: boolean;
+  pageType: PageType;
+  features?: Feature[];
+  hero?: Hero;
+}
+
 export interface PageData {
   siteData: SiteData<DefaultTheme.Config>;
   pagePath: string;
   relativePagePath: string;
   title?: string;
+  meta?: FrontMatterMeta;
   description?: string;
-  pageType: 'home' | 'doc' | 'api' | 'custom' | '404';
+  pageType: PageType;
   toc?: Header[];
-  features?: Feature[];
-  hero?: Hero;
   icon?: string;
   subModules?: PageModule<ComponentType<unknown>>[];
 }

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

@@ -16,7 +16,8 @@ const getGridClass = (count?: number) => {
 };
 
 export function HomeFeature() {
-  const { features } = usePageData();
+  const { meta } = usePageData();
+  const features = meta?.features;
   const gridClass = getGridClass(features?.length);
   return (
     <div className={styles.features}>

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

@@ -12,7 +12,8 @@ const DEFAULT_HERO = {
 };
 
 export function HomeHero() {
-  const { hero = DEFAULT_HERO } = usePageData();
+  const { meta } = usePageData();
+  const hero = meta?.hero || DEFAULT_HERO;
   const hasImage = hero.image !== undefined;
 
   return (

src/theme-default/layout/APILayout/index.tsx

@@ -13,6 +13,7 @@ interface GroupItem {
 
 export function APILayout() {
   const { subModules = [] } = usePageData();
+
   const initialGroups = subModules.map((subModule) => {
     const { routePath, title } = subModule;
     return {
@@ -23,17 +24,21 @@ export function APILayout() {
   });
   const [groups, setGroups] = useState(initialGroups);
 
+  console.log(groups);
+
   useEffect(() => {
     // Handle title hmr
     if (import.meta.env.DEV) {
       import.meta.hot?.on('md(x)-changed', ({ routePath, filePath }) => {
+        console.log(routePath);
         const group = groups.find((group) => group.link === routePath);
         if (!group) {
           return;
         }
         import(/* @vite-ignore */ `${filePath}?import&t=${Date.now()}`).then(
           (mod) => {
             group.headers = mod.toc;
+            group.text = mod.title;
             setGroups([...groups]);
           }
         );

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

@@ -8,9 +8,16 @@ import { Helmet } from 'react-helmet-async';
 import { APILayout } from '../APILayout';
 
 export const Layout: React.FC = () => {
-  const { pageType, title: pageTitle, description, siteData } = usePageData();
-  // Priority page title > site title
-  const title = pageTitle || siteData?.title;
+  const {
+    // Inject by remark-plugin-toc
+    title: articleTitle,
+    meta,
+    siteData,
+    pageType
+  } = usePageData();
+  // Priority: front matter title > h1 title > site title
+  const title = (meta?.title ?? articleTitle) || siteData?.title;
+  const description = meta?.description || siteData.description;
   // Use doc layout by default
   const getContentLayout = () => {
     switch (pageType) {