deps: update

src/components/MarkdownContent.vue

@@ -0,0 +1,14 @@
+<template>
+  <HopeMarkdownContent v-bind="$attrs" data-clarity-region="article">
+    <template #contentBefore>
+      <slot name="contentBefore" />
+    </template>
+    <template #contentAfter>
+      <slot name="contentAfter" />
+    </template>
+  </HopeMarkdownContent>
+</template>
+
+<script lang="ts" setup>
+import HopeMarkdownContent from 'vuepress-theme-hope/components/base/MarkdownContent'
+</script>

src/layouts/FriendsHome.vue

@@ -1,14 +1,12 @@
 <template>
-  <BlogWrapper>
-    <div class="vp-page vp-blog">
-      <BlogHero>
-        <template #info="{ tagline, isFullScreen, text, alt }">
-          <HitokotoBlogHero v-if="text" :text="text" :alt="alt" />
-        </template>
-        <template #bg>
-          <BingHeroBackground />
-        </template>
-      </BlogHero>
+  <Layout>
+    <template #heroInfo="{ text, tagline, style, isFullScreen }">
+      <HitokotoBlogHero v-if="text" :text="text" :alt="text" />
+    </template>
+    <template #heroBg>
+      <BingHeroBackground />
+    </template>
+    <template #content>
       <div class="blog-page-wrapper">
         <main id="main-content" class="vp-blog-main friends round-avatar">
           <DropTransition appear :delay="0.16">
@@ -25,25 +23,27 @@
           <InfoPanel />
         </DropTransition>
       </div>
-    </div>
-  </BlogWrapper>
+    </template>
+  </Layout>
 </template>
 
 <script lang="ts" setup>
-import BlogHero from 'vuepress-theme-hope/blog/components/BlogHero.js'
-import BlogWrapper from 'vuepress-theme-hope/blog/components/BlogWrapper.js'
-import InfoPanel from 'vuepress-theme-hope/blog/components/InfoPanel.js'
-import ProjectPanel from 'vuepress-theme-hope/blog/components/ProjectPanel.js'
-import MarkdownContent from 'vuepress-theme-hope/components/MarkdownContent.js'
-import { DropTransition } from 'vuepress-theme-hope/components/transitions/DropTransition.js'
+import InfoPanel from 'vuepress-theme-hope/components/blog/InfoPanel'
+import ProjectPanel from 'vuepress-theme-hope/components/blog/ProjectPanel'
+import DropTransition from 'vuepress-theme-hope/components/transitions/DropTransition'
+import Layout from 'vuepress-theme-hope/layouts/base/Layout.js'
 import BingHeroBackground from 'vuepress-theme-hope/presets/BingHeroBackground.js'
 import HitokotoBlogHero from 'vuepress-theme-hope/presets/HitokotoBlogHero.js'
 
-import 'vuepress-theme-hope/modules/blog/styles/home.scss'
 import friends from "../friends"
+import MarkdownContent from '../components/MarkdownContent.vue'
 </script>
 
 <style lang="scss">
+.vp-hero-info {
+  flex-direction: column;
+}
+
 main.friends.round-avatar {
   .vp-project-card {
     img.vp-project-icon {