Merge branch 'main' into feat/placeholder

Author: ruibaby

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

@@ -77,6 +77,7 @@ export class BaseCommentItem extends LitElement {
         <user-avatar
           src="${this.userAvatar || ''}"
           alt="${this.userDisplayName || ''}"
+          href=${this.userWebsite}
         ></user-avatar>
       </div>
       <div class="item-main flex-[1_1_auto] min-w-0 w-full">
@@ -87,6 +88,7 @@ export class BaseCommentItem extends LitElement {
                 class="item-author font-medium text-sm"
                 target="_blank"
                 href=${this.userWebsite}
+                rel="noopener noreferrer"
               >
                 ${this.userDisplayName}
               </a>`

packages/comment-widget/src/styles/content.css

@@ -9,7 +9,7 @@
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
-  color: var(--halo-cw-text-1-color);
+  color: var(--halo-cw-text-1-color, #111827);
   font-family: var(--base-font-family);
   font-size: var(--base-font-size);
   line-height: var(--base-line-height);
@@ -39,7 +39,7 @@
 
 .markdown-body mark {
   background-color: var(--bgColor-attention-muted);
-  color: var(--halo-cw-text-1-color);
+  color: var(--halo-cw-text-1-color, #111827);
 }
 
 .markdown-body sub,
@@ -78,11 +78,11 @@
   box-sizing: content-box;
   overflow: hidden;
   background: transparent;
-  border-bottom: 1px solid var(--halo-cw-muted-1-color);
+  border-bottom: 1px solid var(--halo-cw-muted-1-color, #d1d5db);
   height: 0.25em;
   padding: 0;
   margin: 1.4em 0;
-  background-color: var(--halo-cw-muted-1-color);
+  background-color: var(--halo-cw-muted-1-color, #d1d5db);
   border: 0;
 }
 
@@ -134,8 +134,8 @@
 .markdown-body blockquote {
   margin: 0;
   padding: 0 1em;
-  color: var(--base-info-color);
-  border-left: 0.25em solid var(--borderColor-default);
+  color: var(--halo-cw-text-1-color, #111827);
+  border-left: 0.25em solid var(--halo-cw-muted-1-color, #d1d5db);
 }
 
 .markdown-body ul,
@@ -256,7 +256,7 @@
   margin: 0;
   font-size: 85%;
   white-space: break-spaces;
-  background-color: var(--halo-cw-muted-1-color);
+  background-color: var(--halo-cw-muted-2-color, #e5e7eb);
   border-radius: 6px;
 }
 

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

@@ -10,6 +10,9 @@ export class UserAvatar extends LitElement {
   @property({ type: String })
   alt: string | undefined;
 
+  @property({ type: String })
+  href: string | undefined;
+
   @state()
   error = false;
 
@@ -63,29 +66,33 @@ export class UserAvatar extends LitElement {
   }
 
   override render() {
-    if (this.src) {
-      if (this.loading) {
-        return html`<div class="avatar">
-          <icon-loading></icon-loading>
-        </div>`;
-      }
-
-      if (this.error) {
-        return html`<div class="avatar">
-          <i class="i-tabler:alert-circle size-5"></i>
-        </div>`;
-      }
-
-      return html`<div class="avatar">
-        <img class="avatar-image size-full object-cover" src="${this.src}" alt="${this.alt || ''}" loading="lazy" />
-      </div>`;
+    if (this.href) {
+      return html`<a class="avatar" href="${this.href}" target="_blank" rel="noopener noreferrer">
+        ${this.renderAvatarContent()}
+      </a>`;
     }
 
     return html`<div class="avatar">
-      <span class="avatar-placeholder text-sm font-medium text-text-1 select-none">${this.getPlaceholderText()}</span>
+      ${this.renderAvatarContent()}
     </div>`;
   }
 
+  renderAvatarContent() {
+    if (!this.src) {
+      return html`<span class="avatar-placeholder text-sm font-medium text-text-1 select-none">${this.getPlaceholderText()}</span>`;
+    }
+
+    if (this.loading) {
+      return html`<icon-loading></icon-loading>`;
+    }
+
+    if (this.error) {
+      return html`<i class="i-tabler:alert-circle size-5"></i>`;
+    }
+
+    return html`<img class="avatar-image size-full object-cover" src="${this.src}" alt="${this.alt || ''}" loading="lazy" />`;
+  }
+
   static override styles = [
     ...baseStyles,
     css`