fix: update all avatar to adapt to dynamic avatar shape option

src/components/ArticleCard/src/Article.vue

@@ -77,9 +77,9 @@
         <div class="article-footer" v-if="post.author && post.date">
           <div class="flex flex-row items-center">
             <img
-              class="hover:opacity-50 cursor-pointer"
+              :class="avatarClasses"
               :src="post.author.avatar"
-              alt="author avatar"
+              :alt="`avatar-${post.author.name}`"
               @click="handleAuthorClick(post.author.link)"
             />
             <span class="text-ob-dim">
@@ -138,6 +138,12 @@ export default defineComponent({
     }
 
     return {
+      avatarClasses: computed(() => {
+        return {
+          'hover:opacity-50 cursor-pointer': true,
+          [appStore.themeConfig.theme.profile_shape]: true
+        }
+      }),
       gradientBackground: computed(() => {
         return { background: appStore.themeConfig.theme.header_gradient_css }
       }),

src/components/ArticleCard/src/HorizontalArticle.vue

@@ -80,9 +80,9 @@
         <div class="article-footer" v-if="post.count_time">
           <div class="flex flex-row items-center">
             <img
-              class="hover:opacity-50 cursor-pointer"
+              :class="avatarClass"
               v-lazy="post.author.avatar"
-              alt=""
+              :alt="`avatar-${post.author.name}`"
               @click="handleAuthorClick(post.author.link)"
             />
             <span class="text-ob-dim">
@@ -149,6 +149,12 @@ export default defineComponent({
     }
 
     return {
+      avatarClass: computed(() => {
+        return {
+          'hover:opacity-50 cursor-pointer': true,
+          [appStore.themeConfig.theme.profile_shape]: true
+        }
+      }),
       bannerHoverGradient: computed(() => {
         return { background: appStore.themeConfig.theme.header_gradient_css }
       }),

src/components/Comment.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="bg-ob-deep-800 p-4 mt-8 lg:px-14 lg:py-10 rounded-2xl shadow-xl mb-8 lg:mb-0"
-  >
+  <div :class="wrapperClasses">
     <Title
       :title="'titles.comment'"
       icon="quote"
@@ -17,7 +15,7 @@
 
 <script lang="ts">
 import { useAppStore } from '@/stores/app'
-import { defineComponent, onMounted, toRefs, watch } from 'vue'
+import { computed, defineComponent, onMounted, toRefs, watch } from 'vue'
 import { Title } from '@/components/Title'
 import { usePostStore } from '@/stores/post'
 import { twikooInit } from '@/utils/comments/twikoo-api'
@@ -192,6 +190,16 @@ export default defineComponent({
     onMounted(() => {
       enabledComment(postTitle.value, postBody.value, postUid.value)
     })
+
+    return {
+      wrapperClasses: computed(() => {
+        return {
+          'bg-ob-deep-800 p-4 mt-8 lg:px-14 lg:py-10 rounded-2xl shadow-xl mb-8 lg:mb-0':
+            true,
+          [`comment-${appStore.themeConfig.theme.profile_shape}`]: true
+        }
+      })
+    }
   }
 })
 </script>
@@ -443,6 +451,27 @@ export default defineComponent({
   }
 }
 
+.comment-diamond-avatar #waline {
+  .wl-user img,
+  .wl-login-nick img {
+    clip-path: polygon(50% 3%, 91% 25%, 91% 75%, 50% 97%, 9% 75%, 9% 25%);
+  }
+}
+.comment-circle-avatar #waline {
+  .wl-user img,
+  .wl-login-nick img {
+    @apply rounded-full border-ob-deep-900;
+    border-width: 6px;
+  }
+}
+.comment-rounded-avatar #waline {
+  .wl-user img,
+  .wl-login-nick img {
+    @apply rounded-2xl border-ob-deep-900;
+    border-width: 6px;
+  }
+}
+
 #waline {
   --waline-theme-color: var(--text-accent);
   --waline-border: var(--background-secondary);
@@ -461,10 +490,10 @@ export default defineComponent({
   }
 
   .wl-login-nick {
-    @apply text-lg lg:text-2xl pt-0 lg:pt-2;
+    @apply text-lg lg:text-2xl;
     color: var(--text-sub-accent);
     img {
-      @apply h-6 w-6 lg:h-9 lg:w-9 mt-1.5;
+      @apply h-6 w-6 lg:h-9 lg:w-9;
     }
   }
 
@@ -473,7 +502,7 @@ export default defineComponent({
   }
 
   .wl-avatar {
-    @apply h-6 w-6 lg:h-9 lg:w-9 mb-3 lg:mb-5 mr-3;
+    @apply h-6 w-6 lg:h-9 lg:w-9 mr-3;
   }
 
   .wl-header {
@@ -508,13 +537,13 @@ export default defineComponent({
     @apply flex flex-col gap-2 pb-4;
 
     .wl-user {
-      @apply flex justify-center pr-2 lg:pr-4 bg-ob-deep-900;
+      @apply flex justify-center pr-2 lg:pr-4 bg-ob-deep-900 mt-1.5;
       margin-inline-end: 0;
       .verified-icon {
         @apply left-4 top-6 lg:left-6 lg:top-8;
       }
       img {
-        @apply h-6 w-6 lg:h-9 lg:w-9 mt-1.5;
+        @apply h-6 w-6 lg:h-9 lg:w-9;
       }
       svg {
         position: absolute;

src/components/Footer/FooterLink.vue

@@ -165,12 +165,12 @@ export default defineComponent({
 <style lang="scss">
 .footer-link-divider {
   @apply flex h-1 w-2/3 lg:w-2/5 mt-4 mb-8 relative opacity-70 rounded-full shadow-xl;
-  .footer-link-avatar {
+  .footer-link-img-wrapper {
     @apply m-0 h-10 w-10 shadow-xl absolute rounded-full box-content;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    border: 0.8rem solid var(--background-primary);
+    border: 4px solid var(--background-primary);
     background: var(--background-primary);
   }
 }

src/components/Header/src/Controls.vue

@@ -166,7 +166,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .header-controls {
   .progress-ball {
-    @apply flex flex-col justify-center items-center bg-ob-bright text-ob-invert h-6 w-6 rounded-full mr-4 scale-0 transform-cpu text-xs cursor-pointer overflow-hidden;
+    @apply flex flex-col justify-center items-center bg-ob-bright text-ob-invert h-6 w-6 rounded-full mr-4 scale-0 transform-gpu text-xs cursor-pointer overflow-hidden;
     transition: 0.3s transform ease;
     &:hover span {
       @apply mt-6 opacity-100;

src/components/Header/src/Logo.vue

@@ -6,7 +6,7 @@
     <span class="flex mr-3">
       <img
         v-if="themeConfig.site.author"
-        class="logo-image"
+        :class="avatarClass"
         :src="themeConfig.site.logo || themeConfig.site.avatar"
         alt="site-logo"
       />
@@ -52,6 +52,12 @@ export default defineComponent({
 
     return {
       handleLogoClick,
+      avatarClass: computed(() => {
+        return {
+          'logo-image': true,
+          [appStore.themeConfig.theme.profile_shape]: true
+        }
+      }),
       themeConfig: computed(() => appStore.themeConfig)
     }
   }

src/components/Link/LinkAvatar.vue

@@ -1,23 +1,30 @@
 <template>
   <a
-    class="links-group-avatar h-[120px] w-[120px] flex items-center justify-center text-white text-6xl font-bold"
+    class="links-group-avatar h-[120px] w-[120px] flex items-center justify-center text-white text-6xl font-bold scale"
     :href="link"
     target="_blank"
     :title="title"
   >
     <img
       v-if="source"
-      class="h-full w-full shadow-xl m-0 rounded-full"
+      :class="avatarClasses"
       :src="source"
       alt="link-avatar"
       :title="title"
     />
-    <ob-skeleton v-else width="7rem" height="7rem" circle />
+    <ob-skeleton
+      :class="avatarClasses"
+      v-else
+      width="100%"
+      height="100%"
+      circle
+    />
   </a>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { useAppStore } from '@/stores/app'
+import { computed, defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'ARLinkAvatar',
@@ -29,6 +36,19 @@ export default defineComponent({
       type: String
     }
   },
-  setup() {}
+  setup() {
+    const appStore = useAppStore()
+
+    return {
+      avatarClasses: computed(() => {
+        return {
+          'h-full w-full shadow-xl m-0 transform-gpu': true,
+          [appStore.themeConfig.theme.profile_shape]: true,
+          'scale-[1.15]':
+            appStore.themeConfig.theme.profile_shape === 'diamond-avatar'
+        }
+      })
+    }
+  }
 })
 </script>

src/components/Link/LinkBox.vue

@@ -64,15 +64,14 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent } from 'vue'
+import { PropType, defineComponent } from 'vue'
 import LinkAvatar from '@/components/Link/LinkAvatar.vue'
 import { Title } from '@/components/Title'
 import { useI18n } from 'vue-i18n'
 import PrimaryButton from '@/components/Button/PrimaryButton.vue'
 import SecondaryButton from '@/components/Button/SecondaryButton.vue'
 import { Link } from '@/models/Article.class'
 import { useCommonStore } from '@/stores/common'
-import { useAppStore } from '@/stores/app'
 
 export default defineComponent({
   name: 'ARLinkBox',
@@ -126,6 +125,10 @@ export default defineComponent({
   .links-group-avatar:nth-child(even) {
     @apply mt-4 transform-gpu;
     transform: translate(-60px);
+    &:has(.diamond-avatar) {
+      @apply mt-0;
+      transform: translate(-66px);
+    }
   }
 }
 

src/components/Sidebar/src/RecentComment.vue

@@ -15,11 +15,9 @@
           >
             <div class="flex justify-start items-start">
               <img
-                class="col-span-1 mr-2 rounded-full p-1"
+                :class="avatarClass"
                 :src="comment.user.avatar_url"
                 alt="comment-avatar"
-                height="28"
-                width="28"
               />
             </div>
             <div class="flex-1 text-xs">
@@ -135,10 +133,16 @@ export default defineComponent({
     )
 
     return {
-      SvgTypes,
+      avatarClass: computed(() => {
+        return {
+          'col-span-1 mr-2 h-6 w-6': true,
+          [appStore.themeConfig.theme.profile_shape]: true
+        }
+      }),
       isLoading: computed(() => commentPluginLoading.value),
       comments: computed(() => recentComments.value),
       isConfigReady: computed(() => appStore.configReady),
+      SvgTypes,
       fetchRecentComment,
       enabledCommentPlugin,
       t

src/views/Post.vue

@@ -52,9 +52,9 @@
             v-if="post.author && post.count_time.symbolsTime"
           >
             <img
-              class="hover:opacity-50 cursor-pointer"
+              :class="avatarClasses"
               v-lazy="post.author.avatar || ''"
-              alt="author avatar"
+              :alt="`author-${post.author.name}`"
               @click="handleAuthorClick(post.author.link)"
             />
             <span class="text-white opacity-80">
@@ -266,6 +266,12 @@ export default defineComponent({
     }
 
     return {
+      avatarClasses: computed(() => {
+        return {
+          'hover:opacity-50 cursor-pointer': true,
+          [appStore.themeConfig.theme.profile_shape]: true
+        }
+      }),
       isMobile: computed(() => commonStore.isMobile),
       currentPath: computed(() => route.path),
       pluginConfigs: computed(() => appStore.themeConfig.plugins),