perf(theme): optimize profile avatar

theme/src/client/components/Blog/VPBlogProfile.vue

@@ -4,9 +4,12 @@ import { computed } from 'vue'
 import { withBase } from 'vuepress/client'
 import { isLinkHttp } from 'vuepress/shared'
 import { useData } from '../../composables/index.js'
+import type { PlumeThemeProfile } from '../../../shared/index.js'
 
 const { theme } = useData()
-const profile = computed(() => theme.value.profile)
+const profile = computed(() =>
+  theme.value.profile as PlumeThemeProfile & { originalWidth?: number, originalHeight?: number },
+)
 const imageUrl = computed(() => {
   const url = profile.value?.avatar ?? profile.value?.url
   if (!url)
@@ -20,7 +23,7 @@ const imageUrl = computed(() => {
 <template>
   <div v-if="profile" class="vp-blog-profile">
     <p v-if="imageUrl" :class="{ circle: !!profile.circle }">
-      <img :src="imageUrl" :alt="profile.name">
+      <img :src="imageUrl" :alt="profile.name" :width="profile.originalWidth" :height="profile.originalHeight">
     </p>
     <div class="profile-info">
       <h3>{{ profile.name }}</h3>

theme/src/client/styles/md-enhance.css

@@ -495,20 +495,18 @@
 /* --------------------- Markdown Enhance: Footnote -------------------------------- */
 .vp-doc .footnotes-sep {
   margin-top: 48px;
+  border-top: none;
 }
 
 .vp-doc .footnotes {
   position: relative;
   padding: 48px 0 12px 16px;
-  margin-left: -16px;
   font-size: 14px;
-  border-left: 4px solid var(--vp-c-default-soft);
-}
-
-@media (max-width: 419px) {
-  .vp-doc .footnotes {
-    margin-left: 0;
-  }
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  box-shadow: var(--vp-shadow-1);
+  opacity: 0.75;
+  transition: border var(--t-color), box-shadow var(--t-color);
 }
 
 .vp-doc .footnotes::before {

theme/src/node/prepare/prepareThemeData.ts

@@ -1,11 +1,54 @@
+import { resolveImageSize } from 'vuepress-plugin-md-power'
 import type { App } from 'vuepress'
 import { resolveThemeData } from '../config/resolveThemeData.js'
 import { resolveContent, writeTemp } from '../utils/index.js'
-import type { PlumeThemeLocaleOptions } from '../../shared/index.js'
+import type { PlumeThemeData, PlumeThemeLocaleOptions, PlumeThemePluginOptions } from '../../shared/index.js'
 
-export async function prepareThemeData(app: App, localeOptions: PlumeThemeLocaleOptions): Promise<void> {
+export async function prepareThemeData(
+  app: App,
+  localeOptions: PlumeThemeLocaleOptions,
+  pluginOptions: PlumeThemePluginOptions,
+): Promise<void> {
   const resolvedThemeData = resolveThemeData(app, localeOptions)
 
+  await resolveProfileImage(app, resolvedThemeData, pluginOptions)
+
   const content = resolveContent(app, { name: 'themeData', content: resolvedThemeData })
   await writeTemp(app, 'internal/themePlumeData.js', content)
 }
+
+async function resolveProfileImage(
+  app: App,
+  themeData: PlumeThemeData,
+  pluginOptions: PlumeThemePluginOptions,
+) {
+  const imageSize = typeof pluginOptions.markdownPower === 'boolean' ? false : pluginOptions.markdownPower?.imageSize
+  if (!app.env.isBuild || !imageSize)
+    return
+
+  const remote = imageSize === 'all'
+  if (themeData.profile?.avatar) {
+    const { width, height } = await resolveImageSize(app, themeData.profile.avatar, remote)
+    if (width && height) {
+      themeData.profile = {
+        ...themeData.profile,
+        originalWidth: width,
+        originalHeight: height,
+      } as any
+    }
+  }
+  if (themeData.locales) {
+    for (const locale of Object.keys(themeData.locales)) {
+      if (themeData.locales[locale].profile?.avatar) {
+        const { width, height } = await resolveImageSize(app, themeData.locales[locale].profile.avatar, remote)
+        if (width && height) {
+          themeData.locales[locale].profile = {
+            ...themeData.locales[locale].profile,
+            originalWidth: width,
+            originalHeight: height,
+          } as any
+        }
+      }
+    }
+  }
+}

theme/src/node/theme.ts

@@ -63,13 +63,13 @@ export function plumeTheme(options: PlumeThemeOptions = {}): Theme {
 
       onPrepared: async (app) => {
         const { localeOptions } = getThemeConfig()
-        await prepareThemeData(app, localeOptions)
+        await prepareThemeData(app, localeOptions, pluginOptions)
         await prepareData(app)
       },
 
       onWatched: (app, watchers) => {
         watchConfigFile(app, watchers, async ({ localeOptions }) => {
-          await prepareThemeData(app, localeOptions)
+          await prepareThemeData(app, localeOptions, pluginOptions)
           await prepareData(app)
         })
         watchAutoFrontmatter(app, watchers)