From 436e1c54c22c551260ac91ba877fe4be03680119 Mon Sep 17 00:00:00 2001
From: Clifton Hills <ylinwind@163.com>
Date: Fri, 13 Sep 2024 13:00:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=20wiki=20alias=20(#42?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: linxin <xin.lin@longbridge-inc.com>
---
 scripts/wiki/template.mdx             |  2 +-
 scripts/wiki/wiki-utils.ts            | 30 +++++++-----
 src/components/ai-content/index.tsx   | 28 ++++++-----
 src/components/article-meta/index.tsx | 69 +++++++++++++++++----------
 4 files changed, 79 insertions(+), 50 deletions(-)

diff --git a/scripts/wiki/template.mdx b/scripts/wiki/template.mdx
index 62afd15a2..83422b1f3 100644
--- a/scripts/wiki/template.mdx
+++ b/scripts/wiki/template.mdx
@@ -10,7 +10,7 @@ import { AIContent } from "@site/src/components/ai-content";
 
 # <%= title %>
 
-<ArticleMeta id={<%= id %>} updatedAt={'<%=contentUpdatedAt%>'} />
+<ArticleMeta id={<%= id %>} updatedAt={'<%=contentUpdatedAt%>'} alias={`<%= wikiAlias %>`} />
 <div className='border-solid border-b border-t-0 my-4 border-[var(--ifm-color-gray-300)]' />
 
 <%= jsxDesc %>
diff --git a/scripts/wiki/wiki-utils.ts b/scripts/wiki/wiki-utils.ts
index 88d9a5585..5479e2f2d 100644
--- a/scripts/wiki/wiki-utils.ts
+++ b/scripts/wiki/wiki-utils.ts
@@ -1,12 +1,12 @@
-import dayjs from 'dayjs';
-import { IWiki } from '../../types.d';
+import dayjs from "dayjs";
+import { IWiki } from "../../types.d";
 
 /**
  * 删除所有 HTML 标签
  * @param HTML html 字符串
  * @returns 纯字符串
  */
-const removeHtmlTag = (html = '') => html.replace(/(<([^>]+)>)/gi, '');
+const removeHtmlTag = (html = "") => html.replace(/(<([^>]+)>)/gi, "");
 
 export class WikiUtils {
   private wiki: IWiki;
@@ -19,19 +19,19 @@ export class WikiUtils {
   }
 
   get body() {
-    return this.wiki.body_locales[this.locale] || '';
+    return this.wiki.body_locales[this.locale] || "";
   }
 
   get title() {
-    return this.wiki.name_locales[this.locale] || '';
+    return this.wiki.name_locales[this.locale] || "";
   }
 
   get en_title() {
-    return this.wiki.name_locales['en'] || '';
+    return this.wiki.name_locales["en"] || "";
   }
 
   get description() {
-    return this.wiki.description_locales[this.locale] || '';
+    return this.wiki.description_locales[this.locale] || "";
   }
 
   get liteDesc() {
@@ -40,26 +40,29 @@ export class WikiUtils {
 
   get contentUpdatedAt() {
     return dayjs(this.wiki.content_updated_at * 1000).format(
-      'YYYY-MM-DD HH:mm:ss'
+      "YYYY-MM-DD HH:mm:ss"
     );
   }
 
   get pageSlug() {
-    if (this.locale === 'en') {
+    if (this.locale === "en") {
       return `/${this.locale}/learn/${this.wiki.slug}`;
     } else {
       return `/learn/${this.wiki.slug}`;
     }
   }
 
+  get wikiAlias() {
+    return this.wiki.alias || [];
+  }
   // convert style="..." to style={...}
   static convertHTMLStyleToJSXStyle(htmlString) {
     return htmlString.replace(/style="([^"]*)"/g, (match, styleString) => {
       const styleObject = styleString
-        .split(';')
+        .split(";")
         .filter(Boolean)
         .reduce((acc, style) => {
-          const [key, value] = style.split(':').map((s) => s.trim());
+          const [key, value] = style.split(":").map((s) => s.trim());
           if (key && value) {
             // Convert kebab-case to camelCase
             const camelCaseKey = key.replace(/-([a-z])/g, (g) =>
@@ -72,7 +75,7 @@ export class WikiUtils {
 
       const styleJSX = JSON.stringify(styleObject).replace(
         /"([^"]+)":/g,
-        '$1:'
+        "$1:"
       );
       return `style={${styleJSX}}`;
     });
@@ -83,7 +86,7 @@ export class WikiUtils {
   }
 
   static normalizeBRHTMLDOM(string) {
-    return string.replace(/<br>/g, '<br/>');
+    return string.replace(/<br>/g, "<br/>");
   }
 
   static normalizeMDXContent(content: string) {
@@ -104,6 +107,7 @@ export class WikiUtils {
       jsxBody: WikiUtils.normalizeMDXContent(this.body),
       liteDesc: this.liteDesc,
       contentUpdatedAt: this.contentUpdatedAt,
+      wikiAlias: JSON.stringify(this.wikiAlias),
       ...this.wiki,
     };
   }
diff --git a/src/components/ai-content/index.tsx b/src/components/ai-content/index.tsx
index f9c67fdd6..d1f57b9f2 100644
--- a/src/components/ai-content/index.tsx
+++ b/src/components/ai-content/index.tsx
@@ -9,9 +9,9 @@ interface AIContentProps {
 }
 const LocalesMap = {
   aiGen: {
-    "zh-CN": "以下内容是 AI 的进一步解读",
-    "zh-HK": "以下內容是 AI 的進一步解讀",
-    en: "The following content is a further interpretation by AI.",
+    "zh-CN": "以上内容是 AI 的进一步解读",
+    "zh-HK": "以上內容是 AI 的進一步解讀",
+    en: "The above content is a further interpretation by AI.",
   },
   disclaimer: {
     "zh-CN": "免责声明",
@@ -43,22 +43,26 @@ export const AIContent: React.FC<AIContentProps> = ({ content, id }) => {
   if (!AIContent) return <></>;
   return (
     <div className="ai-content pt-8 rounded-lg">
-      <div className="flex items-center space-x-4 pb-3 mb-3 border-solid border-b border-t-0 border-r-0 border-l-0 border-[var(--ifm-color-gray-300)]">
+      <div
+        dangerouslySetInnerHTML={{ __html: AIContent }}
+        className="border-solid border-t border-b-0 border-r-0 border-l-0 border-[var(--ifm-color-gray-300)] pt-5"
+      ></div>
+
+      <div className="flex items-center space-x-4 pt-3 mb-3 border-solid border-t border-b-0 border-r-0 border-l-0 border-[var(--ifm-color-gray-300)]">
         <img
           src="https://assets.lbctrl.com/uploads/831466be-e4f8-46a7-aa0b-efcda7a424ff/portai.png"
           alt="port-ai"
           className="w-7 h-7 rounded-full"
         />
         <span className="text-sm">{LocalesMap.aiGen[locale]}</span>
+        <a
+          href="https://support.longbridgewhale.com/topics/misc/portaidisclaimer"
+          className="text-sm text-[#37a0ff]"
+          target="_blank"
+        >
+          {LocalesMap.disclaimer[locale]}
+        </a>
       </div>
-      <div dangerouslySetInnerHTML={{ __html: AIContent }}></div>
-      <a
-        href="https://support.longbridgewhale.com/topics/misc/portaidisclaimer"
-        className="text-sm text-[#37a0ff]"
-        target="_blank"
-      >
-        {LocalesMap.disclaimer[locale]}
-      </a>
     </div>
   );
 };
diff --git a/src/components/article-meta/index.tsx b/src/components/article-meta/index.tsx
index 725487ffd..8ba0fdaa8 100644
--- a/src/components/article-meta/index.tsx
+++ b/src/components/article-meta/index.tsx
@@ -7,6 +7,7 @@ import { useDefaultLocale } from "@site/src/utils";
 interface IArticleMetaProps {
   updatedAt: string | null;
   id: number;
+  alias: string;
 }
 
 const LocalesMap = {
@@ -28,7 +29,7 @@ const LocalesMap = {
 };
 
 export const ArticleMeta: FC<IArticleMetaProps> = (props) => {
-  const { updatedAt, id } = props;
+  const { updatedAt, id, alias } = props;
   const [viewCount, setViewCount] = useState(0);
   const [AIContent, setAIContent] = useState("");
   const [aiGen, setAIGen] = useState(false);
@@ -39,6 +40,14 @@ export const ArticleMeta: FC<IArticleMetaProps> = (props) => {
   //   message: "Docs pages",
   //   description: "The ARIA label for the docs pagination"
   // });
+
+  let aliasArray = [];
+  try {
+    aliasArray = JSON.parse(alias);
+  } catch (error) {
+    console.log("🚀 ~ error:", error);
+  }
+
   const {
     siteConfig: {
       customFields: { apiProxyUrl },
@@ -87,30 +96,41 @@ export const ArticleMeta: FC<IArticleMetaProps> = (props) => {
   }, []);
 
   return (
-    <div className={"article-meta flex items-center justify-between text-sm"}>
-      <div className="info">
-        {!!viewCount && (
-          <span className={"view-count"}>
-            {viewCount} {LocalesMap.peopleLearned[locale]} .
-          </span>
-        )}
-        <span className={"updated-at"}>
-          {" "}
-          {translate(
-            {
-              id: "article.meta.updated_at",
-            },
-            { datetime: updatedAt }
+    <>
+      {aliasArray && aliasArray.length > 0 && (
+        <div className="alias flex items-center space-x-1 text-gray-500 mb-2 text-sm">
+          {aliasArray.map((a, i) => (
+            <>
+              <strong key={i}>{a}</strong>
+              {i !== aliasArray.length - 1 && <span key={`${i}_split`}>/</span>}
+            </>
+          ))}
+        </div>
+      )}
+      <div className={"article-meta flex items-center justify-between text-sm"}>
+        <div className="info">
+          {!!viewCount && (
+            <span className={"view-count"}>
+              {viewCount} {LocalesMap.peopleLearned[locale]} .
+            </span>
           )}
-        </span>
-      </div>
-      <div className="actions">
-        {/*<div className="copy-section" id={"copy_trigger"} onClick={onClickCopySection}>*/}
-        {/*  <div className="copy-link" />*/}
-        {/*</div>*/}
+          <span className={"updated-at"}>
+            {" "}
+            {translate(
+              {
+                id: "article.meta.updated_at",
+              },
+              { datetime: updatedAt }
+            )}
+          </span>
+        </div>
+        <div className="actions">
+          {/*<div className="copy-section" id={"copy_trigger"} onClick={onClickCopySection}>*/}
+          {/*  <div className="copy-link" />*/}
+          {/*</div>*/}
 
-        {/* 没有 AI 内容并且没点击过生成 */}
-        {/* {!AIContent && aiGen && (
+          {/* 没有 AI 内容并且没点击过生成 */}
+          {/* {!AIContent && aiGen && (
           <div className="text-xs">{LocalesMap.aiGenUnderReview[locale]}</div>
         )}
         {!AIContent && !aiGen && (
@@ -128,7 +148,8 @@ export const ArticleMeta: FC<IArticleMetaProps> = (props) => {
             </div>
           </div>
         )} */}
+        </div>
       </div>
-    </div>
+    </>
   );
 };