feat: use gravatar source as comment's avatar

packages/comment-widget/src/avatar-provider.ts

@@ -0,0 +1,24 @@
+import Gravatar from "./avatar/providers/gravatar";
+import AvatarProvider from "./avatar/providers/avatar-provider";
+
+let avatarProvider: AvatarProvider | undefined;
+
+enum AvatarProviderEnum {
+  GRAVATAR = "Gravatar"
+}
+
+export function setAvatarProvider(provider: string, mirrorUrl?: string) {
+  switch (provider) {
+    case AvatarProviderEnum.GRAVATAR:
+      if (mirrorUrl) {
+        Gravatar.url = mirrorUrl;
+      }
+      avatarProvider = Gravatar;
+      break;
+    default:
+  }
+}
+
+export function getAvatarProvider() {
+  return avatarProvider;
+}

packages/comment-widget/src/avatar/avatar-policy.ts

@@ -0,0 +1,84 @@
+import { CommentVo, ReplyVo } from '@halo-dev/api-client';
+import { getAvatarProvider } from '../avatar-provider';
+
+abstract class AvatarPolicy {
+  abstract applyCommentPolicy(comment: CommentVo | undefined): string | undefined;
+  abstract applyReplyPolicy(reply: ReplyVo | undefined): string | undefined;
+}
+
+let policyInstance: AvatarPolicy | undefined;
+const emailKind = "Email";
+const emailHash = "email-hash";
+
+class AnonymousUserPolicy extends AvatarPolicy {
+  applyCommentPolicy(comment: CommentVo | undefined): string | undefined {
+    const avatarProvider = getAvatarProvider();
+    const isAnonymous = comment?.owner.kind === emailKind;
+    if (isAnonymous) {
+      return avatarProvider?.getAvatarSrc(comment?.spec.owner.annotations?.[emailHash]);
+    }
+    return comment?.owner.avatar;
+  }
+  applyReplyPolicy(reply: ReplyVo | undefined): string | undefined {
+    const avatarProvider = getAvatarProvider();
+    const isAnonymous = reply?.owner.kind === emailKind;
+    if (isAnonymous) {
+      return avatarProvider?.getAvatarSrc(reply?.spec.owner.annotations?.[emailHash]);
+    }
+    return reply?.owner.avatar;
+  }
+}
+
+class AllUserPolicy extends AvatarPolicy {
+  applyCommentPolicy(comment: CommentVo | undefined): string | undefined {
+    const avatarProvider = getAvatarProvider();
+    return avatarProvider?.getAvatarSrc(comment?.spec.owner.annotations?.[emailHash]);
+  }
+  applyReplyPolicy(reply: ReplyVo | undefined): string | undefined {
+    const avatarProvider = getAvatarProvider();
+    return avatarProvider?.getAvatarSrc(reply?.spec.owner.annotations?.[emailHash]);
+  }
+}
+
+class NoAvatarUserPolicy extends AvatarPolicy {
+  applyCommentPolicy(comment: CommentVo | undefined): string | undefined {
+    const avatarProvider = getAvatarProvider();
+    const isAnonymous = comment?.owner.kind === emailKind;
+    if (isAnonymous) {
+      return undefined;
+    }
+    const avatar = comment?.owner.avatar;
+    if (!avatar) {
+      return avatarProvider?.getAvatarSrc(comment?.spec.owner.annotations?.[emailHash]);
+    }
+    return avatar;
+  }
+  applyReplyPolicy(reply: ReplyVo | undefined): string | undefined {
+    const avatarProvider = getAvatarProvider();
+    const isAnonymous = reply?.owner.kind === emailKind;
+    if (isAnonymous) {
+      return undefined;
+    }
+    const avatar = reply?.owner.avatar;
+    if (!avatar) {
+      return avatarProvider?.getAvatarSrc(reply?.spec.owner.annotations?.[emailHash]);
+    }
+    return avatar;
+  }
+}
+
+enum AvatarPolicyEnum {
+  ANONYMOUS_USER_POLICY = "AnonymousUserPolicy",
+  ALL_USER_POLICY = "AllUserPolicy",
+  NO_AVATAR_USER_POLICY = "NoAvatarUserPolicy"
+}
+
+function setPolicyInstance(nPolicyInstance: AvatarPolicy | undefined) {
+  policyInstance = nPolicyInstance;
+}
+
+function getPolicyInstance(): AvatarPolicy | undefined {
+  return policyInstance;
+}
+
+export { AnonymousUserPolicy, AllUserPolicy, NoAvatarUserPolicy, AvatarPolicyEnum, setPolicyInstance, getPolicyInstance };

packages/comment-widget/src/avatar/providers/avatar-provider.ts

@@ -0,0 +1,23 @@
+export default abstract class AvatarProvider {
+  private readonly _name: string;
+  private _url: string;
+
+  constructor(name: string, url: string) {
+    this._name = name;
+    this._url = url;
+  }
+
+  get url(): string {
+    return this._url;
+  }
+
+  set url(value: string) {
+    this._url = value;
+  }
+
+  get name(): string {
+    return this._name;
+  }
+
+  abstract getAvatarSrc(emailHash: string | undefined): string;
+}

packages/comment-widget/src/avatar/providers/gravatar.ts

@@ -0,0 +1,12 @@
+import AvatarProvider from "./avatar-provider";
+
+class Gravatar extends AvatarProvider {
+  override getAvatarSrc(emailHash: string | undefined): string {
+    return this.url + emailHash;
+  }
+}
+
+export default new Gravatar(
+  "Gravatar",
+  "https://gravatar.com/avatar/"
+);

packages/comment-widget/src/comment-item.ts

@@ -12,6 +12,7 @@ import { LS_UPVOTED_COMMENTS_KEY } from './constant';
 import varStyles from './styles/var';
 import { Ref, createRef, ref } from 'lit/directives/ref.js';
 import { CommentReplies } from './comment-replies';
+import { handleCommentAvatar } from "./user-avatar";
 
 export class CommentItem extends LitElement {
   @consume({ context: baseUrlContext })
@@ -103,7 +104,7 @@ export class CommentItem extends LitElement {
 
   override render() {
     return html`<base-comment-item
-      .userAvatar="${this.comment?.owner.avatar}"
+      .userAvatar="${handleCommentAvatar(this.comment)}"
       .userDisplayName="${this.comment?.owner.displayName}"
       .content="${this.comment?.spec.content || ''}"
       .creationTime="${this.comment?.spec.creationTime}"

packages/comment-widget/src/comment-widget.ts

@@ -5,7 +5,6 @@ import { repeat } from 'lit/directives/repeat.js';
 import baseStyles from './styles/base';
 import { provide } from '@lit/context';
 import {
-  allowAnonymousCommentsContext,
   baseUrlContext,
   currentUserContext,
   emojiDataUrlContext,
@@ -16,12 +15,19 @@ import {
   toastContext,
   versionContext,
   withRepliesContext,
+  allowAnonymousCommentsContext,
+  useAvatarProviderContext,
+  avatarPolicyContext,
+  avatarProviderContext,
+  avatarProviderMirrorContext
 } from './context';
 import './comment-form';
 import './comment-item';
 import './comment-pagination';
 import varStyles from './styles/var';
 import { ToastManager } from './lit-toast';
+import { AnonymousUserPolicy, AllUserPolicy, NoAvatarUserPolicy, AvatarPolicyEnum, setPolicyInstance } from './avatar/avatar-policy';
+import { setAvatarProvider } from "./avatar-provider";
 
 export class CommentWidget extends LitElement {
   @provide({ context: baseUrlContext })
@@ -58,6 +64,22 @@ export class CommentWidget extends LitElement {
   @property({ type: Number, attribute: 'with-reply-size' })
   withReplySize = 10;
 
+  @provide({ context: useAvatarProviderContext })
+  @property({ type: Boolean, attribute: 'use-avatar-provider' })
+  useAvatarProvider = false;
+
+  @provide({ context: avatarProviderContext })
+  @property({ type: String, attribute: 'avatar-provider' })
+  avatarProvider = '';
+
+  @provide({ context: avatarProviderMirrorContext })
+  @property({ type: String, attribute: 'avatar-provider-mirror' })
+  avatarProviderMirror = '';
+
+  @provide({ context: avatarPolicyContext })
+  @property({ type: String, attribute: 'avatar-policy' })
+  avatarPolicy = '';
+
   @provide({ context: emojiDataUrlContext })
   @property({ type: String, attribute: 'emoji-data-url' })
   emojiDataUrl = 'https://unpkg.com/@emoji-mart/data';
@@ -203,12 +225,42 @@ export class CommentWidget extends LitElement {
     await this.fetchComments({ scrollIntoView: true });
   }
 
+  initAvatarProvider() {
+    if (!this.useAvatarProvider) {
+      return;
+    }
+    setAvatarProvider(this.avatarProvider, this.avatarProviderMirror);
+  }
+
+  initAvatarPolicy() {
+    if (!this.useAvatarProvider) {
+      console.log(this.useAvatarProvider);
+      setPolicyInstance(undefined);
+      return;
+    }
+    switch (this.avatarPolicy) {
+      case AvatarPolicyEnum.ALL_USER_POLICY: {
+        setPolicyInstance(new AllUserPolicy());
+        break;
+      }
+      case AvatarPolicyEnum.NO_AVATAR_USER_POLICY: {
+        setPolicyInstance(new NoAvatarUserPolicy());
+        break;
+      }
+      case AvatarPolicyEnum.ANONYMOUS_USER_POLICY:
+      default:
+        setPolicyInstance(new AnonymousUserPolicy());
+    }
+  }
+
   override connectedCallback(): void {
     super.connectedCallback();
     this.toastManager = new ToastManager();
     this.fetchCurrentUser();
     this.fetchComments();
     this.fetchGlobalInfo();
+    this.initAvatarProvider();
+    this.initAvatarPolicy();
   }
 
   static override styles = [

packages/comment-widget/src/context/index.ts

@@ -9,6 +9,10 @@ export const nameContext = createContext<string>(Symbol('name'));
 export const versionContext = createContext<string>(Symbol('version'));
 export const replySizeContext = createContext<number>(Symbol('replySize'));
 export const withRepliesContext = createContext<boolean>(Symbol('withReplies'));
+export const useAvatarProviderContext = createContext<boolean>(Symbol('useAvatarProvider'));
+export const avatarProviderContext = createContext<string>(Symbol('avatarProvider'));
+export const avatarProviderMirrorContext = createContext<string>(Symbol('avatarProviderMirror'));
+export const avatarPolicyContext = createContext<string>(Symbol('avatarPolicy'));
 
 export const allowAnonymousCommentsContext = createContext<boolean>(
   Symbol('allowAnonymousComments')

packages/comment-widget/src/reply-item.ts

@@ -10,6 +10,7 @@ import { LS_UPVOTED_REPLIES_KEY } from './constant';
 import { consume } from '@lit/context';
 import { baseUrlContext } from './context';
 import varStyles from './styles/var';
+import { handleReplyAvatar } from "./user-avatar";
 
 export class ReplyItem extends LitElement {
   @consume({ context: baseUrlContext })
@@ -106,7 +107,7 @@ export class ReplyItem extends LitElement {
   override render() {
     return html`
       <base-comment-item
-        .userAvatar="${this.reply?.owner.avatar}"
+        .userAvatar="${handleReplyAvatar(this.reply)}"
         .userDisplayName="${this.reply?.owner.displayName}"
         .content="${this.reply?.spec.content || ''}"
         .creationTime="${this.reply?.metadata.creationTimestamp ?? undefined}"
@@ -121,7 +122,7 @@ export class ReplyItem extends LitElement {
           @click="${this.handleUpvote}"
         >
           ${this.upvoted
-            ? html`<svg
+        ? html`<svg
                 slot="icon"
                 xmlns="http://www.w3.org/2000/svg"
                 width="32"
@@ -136,7 +137,7 @@ export class ReplyItem extends LitElement {
                   />
                 </g>
               </svg>`
-            : html`<svg
+        : html`<svg
                 slot="icon"
                 xmlns="http://www.w3.org/2000/svg"
                 width="32"
@@ -178,7 +179,7 @@ export class ReplyItem extends LitElement {
         </base-comment-item-action>
 
         ${this.showReplyForm
-          ? html`
+        ? html`
               <div class="form__wrapper" slot="footer">
                 <reply-form
                   .comment=${this.comment}
@@ -187,9 +188,9 @@ export class ReplyItem extends LitElement {
                 ></reply-form>
               </div>
             `
-          : ``}
+        : ``}
         ${this.quoteReply
-          ? html`<span
+        ? html`<span
                 slot="pre-content"
                 @mouseenter=${() => this.handleSetActiveQuoteReply(this.quoteReply)}
                 @mouseleave=${() => this.handleSetActiveQuoteReply()}
@@ -207,7 +208,7 @@ export class ReplyItem extends LitElement {
                 ><span>${this.quoteReply?.owner.displayName}</span>
               </span>
               <br slot="pre-content" />`
-          : ''}
+        : ''}
       </base-comment-item>
     `;
   }

packages/comment-widget/src/user-avatar.ts

@@ -1,8 +1,10 @@
+import { CommentVo, ReplyVo } from '@halo-dev/api-client';
 import './icons/icon-loading';
 import { LitElement, css, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import baseStyles from './styles/base';
 import varStyles from './styles/var';
+import { getPolicyInstance } from "./avatar/avatar-policy";
 
 export class UserAvatar extends LitElement {
   @property({ type: String })
@@ -130,6 +132,22 @@ export class UserAvatar extends LitElement {
 
 customElements.get('user-avatar') || customElements.define('user-avatar', UserAvatar);
 
+export function handleCommentAvatar(comment: CommentVo | undefined): string | undefined {
+  const avatarPolicy = getPolicyInstance();
+  if (avatarPolicy === undefined) {
+    return comment?.owner.avatar;
+  }
+  return avatarPolicy.applyCommentPolicy(comment);
+}
+
+export function handleReplyAvatar(reply: ReplyVo | undefined): string | undefined {
+  const avatarPolicy = getPolicyInstance();
+  if (avatarPolicy === undefined) {
+    return reply?.owner.avatar;
+  }
+  return avatarPolicy.applyReplyPolicy(reply);
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'user-avatar': UserAvatar;

packages/widget/src/index.ts

@@ -11,6 +11,10 @@ interface Props {
   replySize?: number;
   withReplies?: boolean;
   withReplySize?: number;
+  useAvatarProvider: boolean;
+  avatarProvider?: string;
+  avatarProviderMirror?: string;
+  avatarPolicy?: string;
 }
 
 export function init(el: string, props: Props) {
@@ -34,6 +38,10 @@ export function init(el: string, props: Props) {
   commentWidget.withReplySize = props.withReplySize || 10;
   commentWidget.emojiDataUrl =
     '/plugins/PluginCommentWidget/assets/static/emoji/native.json';
+  commentWidget.useAvatarProvider = props.useAvatarProvider || false;
+  commentWidget.avatarProvider = props.avatarProvider || "";
+  commentWidget.avatarProviderMirror = props.avatarProviderMirror || "";
+  commentWidget.avatarPolicy = props.avatarPolicy || "";
 
   const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {