fix: home page hmr doesn't work

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

@@ -1,5 +1,5 @@
 import styles from './index.module.scss';
-import { usePageData } from 'island/client';
+import { useFrontmatter } from '../../logic';
 
 const getGridClass = (count?: number) => {
   if (!count) {
@@ -16,9 +16,10 @@ const getGridClass = (count?: number) => {
 };
 
 export function HomeFeature() {
-  const { frontmatter } = usePageData();
+  const frontmatter = useFrontmatter();
   const features = frontmatter?.features;
   const gridClass = getGridClass(features?.length);
+
   return (
     <div className="max-w-1152px" m="auto" flex="~ wrap" justify="between">
       {features?.map((feature) => {

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

@@ -1,6 +1,5 @@
-import { usePageData } from 'island/client';
 import { Button } from '../Button';
-import { normalizeHref } from '../../logic/index';
+import { normalizeHref, useFrontmatter } from '../../logic/index';
 import styles from './index.module.scss';
 
 const DEFAULT_HERO = {
@@ -12,7 +11,7 @@ const DEFAULT_HERO = {
 };
 
 export function HomeHero() {
-  const { frontmatter } = usePageData();
+  const frontmatter = useFrontmatter();
   const hero = frontmatter?.hero || DEFAULT_HERO;
   const hasImage = hero.image !== undefined;
 

src/theme-default/logic/index.ts

@@ -2,6 +2,7 @@ export { usePrevNextPage } from './usePrevNextPage';
 export { useEditLink } from './useEditLink';
 export { useSidebarData } from './useSidebarData';
 export { useLocaleSiteData } from './useLocaleSiteData';
+export { useFrontmatter } from './useFrontmatter';
 export { setupEffects, bindingAsideScroll } from './sideEffects';
 export { setupCopyCodeButton } from './copyCode';
 export { PageSearcher } from './search';

src/theme-default/logic/useFrontmatter.ts

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { usePageData } from 'island/client';
+
+export const useFrontmatter = () => {
+  const pageData = usePageData();
+  const [frontmatter, setFrontmatter] = useState(pageData.frontmatter);
+
+  // #65
+  // The frontmatter data changes require us to manually trigger the react rerender
+  useEffect(() => {
+    if (import.meta.env.DEV) {
+      import.meta.hot?.on('md(x)-changed', ({ filePath }) => {
+        import(/* @vite-ignore */ `${filePath}?import&t=${Date.now()}`).then(
+          (mod) => {
+            setFrontmatter(mod.frontmatter);
+          }
+        );
+      });
+    }
+  }, []);
+
+  return frontmatter;
+};