From 3a787897ab925d4e1c2b20ec84f62ae3a6babcdf Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Wed, 11 Sep 2024 02:26:35 +0800
Subject: [PATCH] perf(theme): optimize profile avatar

---
 .../client/components/Blog/VPBlogProfile.vue  |  7 ++-
 theme/src/client/styles/md-enhance.css        | 14 +++---
 theme/src/node/prepare/prepareThemeData.ts    | 47 ++++++++++++++++++-
 theme/src/node/theme.ts                       |  4 +-
 4 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/theme/src/client/components/Blog/VPBlogProfile.vue b/theme/src/client/components/Blog/VPBlogProfile.vue
index daf8455c..38ed58f6 100644
--- a/theme/src/client/components/Blog/VPBlogProfile.vue
+++ b/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>
diff --git a/theme/src/client/styles/md-enhance.css b/theme/src/client/styles/md-enhance.css
index 02617a8f..ced3d094 100644
--- a/theme/src/client/styles/md-enhance.css
+++ b/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 {
diff --git a/theme/src/node/prepare/prepareThemeData.ts b/theme/src/node/prepare/prepareThemeData.ts
index ebe65830..017a0e0f 100644
--- a/theme/src/node/prepare/prepareThemeData.ts
+++ b/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
+        }
+      }
+    }
+  }
+}
diff --git a/theme/src/node/theme.ts b/theme/src/node/theme.ts
index 658e42f3..0b8b96ae 100644
--- a/theme/src/node/theme.ts
+++ b/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)