Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 新增 wiki alias #42

Merged
merged 1 commit into from
Sep 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion scripts/wiki/template.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 %>
Expand Down
30 changes: 17 additions & 13 deletions scripts/wiki/wiki-utils.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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() {
Expand All @@ -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) =>
Expand All @@ -72,7 +75,7 @@ export class WikiUtils {

const styleJSX = JSON.stringify(styleObject).replace(
/"([^"]+)":/g,
'$1:'
"$1:"
);
return `style={${styleJSX}}`;
});
Expand All @@ -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) {
Expand All @@ -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,
};
}
Expand Down
28 changes: 16 additions & 12 deletions src/components/ai-content/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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": "免责声明",
Expand Down Expand Up @@ -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>
);
};
69 changes: 45 additions & 24 deletions src/components/article-meta/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useDefaultLocale } from "@site/src/utils";
interface IArticleMetaProps {
updatedAt: string | null;
id: number;
alias: string;
}

const LocalesMap = {
Expand All @@ -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);
Expand All @@ -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 },
Expand Down Expand Up @@ -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 && (
Expand All @@ -128,7 +148,8 @@ export const ArticleMeta: FC<IArticleMetaProps> = (props) => {
</div>
</div>
)} */}
</div>
</div>
</div>
</>
);
};
Loading