feat: Use rel="noopener noreferrer nofollow ugc" on user links (#215)

fix #214 

- `+ ugc` 符合最新语义（Google 自 2019） 

我调查了下其他的
- twikoo 是 noopener noreferrer nofollow ugc twikoojs/twikoo#907
- waline 是 ugc nofollow noopener noreferrer walinejs/waline#3531
- artalk 是 noreferrer noopener nofollow ArtalkJS/Artalk#1120
- valine 是 noopener

相关文档：
- nofollow 和 ugc 一起用以保证兼容性：https://developers.google.com/search/blog/2019/09/evolving-nofollow-new-ways-to-identify?hl=zh-cn#can-i-use-more-than-one-rel-value-on-a-link
- 几个用于出站链接的 rel 值（sponsored，ugc，nofollow）介绍：https://developers.google.com/search/docs/crawling-indexing/qualify-outbound-links?hl=zh-cn 

---

没有把链接的 target / rel 处理放进 packages/comment-widget/src/utils/html.ts 的 cleanHtml()，而是放在了渲染期 packages/comment-widget/src/comment-content.ts。

给评论正文里的 <a> 统一补 target="_blank" 和 rel="noopener noreferrer nofollow ugc" 作为渲染策略，区分于清洗逻辑。如果要在清洗的时候就做这个 rel 修改，有以下问题：
- 首先数据库要额外保存 rel，要修改默认 sanitize-html 策略（附：sanitize-html 默认给 a 允许的是：href、name、target。）
- 之前数据不带 rel 的已有数据，在渲染时也不能自带加上新 rel。

Author: HowieHz

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

@@ -62,7 +62,7 @@ export class BaseCommentItem extends LitElement {
                 class="item-author font-medium text-sm text-text-1 hover:underline"
                 target="_blank"
                 href=${ifDefined(this.userWebsite)}
-                rel="noopener noreferrer"
+                rel="noopener noreferrer nofollow ugc"
               >
                 ${this.userDisplayName}
               </a>

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

@@ -9,6 +9,16 @@ export class CommentContent extends LitElement {
   @property({ type: String })
   content: string = '';
 
+  private applyLinkAttributes() {
+    const anchors =
+      this.shadowRoot?.querySelectorAll<HTMLAnchorElement>('.content a');
+
+    anchors?.forEach((anchor) => {
+      anchor.target = '_blank';
+      anchor.rel = 'noopener noreferrer nofollow ugc';
+    });
+  }
+
   protected override firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     const codeElements = this.shadowRoot?.querySelectorAll('pre>code');
@@ -38,6 +48,13 @@ export class CommentContent extends LitElement {
     );
   }
 
+  protected override updated(_changedProperties: PropertyValues) {
+    super.updated(_changedProperties);
+    if (_changedProperties.has('content')) {
+      this.applyLinkAttributes();
+    }
+  }
+
   private extractLanguageFromCodeElement(codeElement: Element): string | null {
     const supportedPrefixes = ['language-', 'lang-'];
 

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

@@ -95,12 +95,11 @@ export class CommentEditor extends LitElement {
 
   async createEditor() {
     const { Editor } = await import('@tiptap/core');
-    const { Placeholder } = await import('@tiptap/extensions');
+    const { CharacterCount, Placeholder } = await import('@tiptap/extensions');
     const { StarterKit } = await import('@tiptap/starter-kit');
     const { CodeBlockShiki } = await import(
       'tiptap-extension-code-block-shiki'
     );
-    const { CharacterCount } = await import('@tiptap/extensions');
 
     this.loading = false;
 
@@ -111,6 +110,11 @@ export class CommentEditor extends LitElement {
           heading: false,
           link: {
             openOnClick: false,
+            defaultProtocol: 'https',
+            HTMLAttributes: {
+              target: '_blank',
+              rel: 'noopener noreferrer nofollow ugc',
+            },
           },
           codeBlock: false,
         }),

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

@@ -67,7 +67,7 @@ export class UserAvatar extends LitElement {
 
   override render() {
     if (this.href) {
-      return html`<a class="avatar" href="${this.href}" target="_blank" rel="noopener noreferrer">
+      return html`<a class="avatar" href="${this.href}" target="_blank" rel="noopener noreferrer nofollow ugc">
         ${this.renderAvatarContent()}
       </a>`;
     }