HPCesia/AstralHalo
1
0
Fork 0
mirror of https://codeberg.org/HPCesia/AstralHalo.git synced 2025-04-08 17:34:27 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: wrong console error

Browse Source
This commit is contained in:
HPCesia 2025-03-18 21:05:25 +08:00
parent 620282e30d
commit f18a320965
4 changed files with 67 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/aside/ResentCommentsCard.astro
View File

@ -1,70 +1,9 @@
---
import { commentConfig, siteConfig } from '@/config';
import { commentConfig } from '@/config';
import I18nKey from '@i18n/I18nKey';
import { i18n } from '@i18n/translation';
import TwikooRecentCommentScript from './recent-comments/Twikoo.astro';
import WalineRecentCommentScript from './recent-comments/Waline.astro';
export function getTemplate() {
const recentCommentsCard = document.getElementById('recent-comments-card');
if (!recentCommentsCard) {
console.error('Recent comments card not found');
return;
}
const recentCommentsList = recentCommentsCard.querySelector('ul')!;
const recentCommentTemplate = recentCommentsList.querySelector('template');
return {
container: recentCommentsList,
template: recentCommentTemplate,
};
}
export function cleanCommentHtml(htmlString: string) {
return htmlString
.replaceAll(/<img.*?src="(.*?)"?[^>]+>/gi, i18n(I18nKey.commentReplaceImage)!)
.replaceAll(
/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,
i18n(I18nKey.commentReplaceLink)!
)
.replaceAll(/<pre><code[^>]+?>.*?<\/pre>/gis, i18n(I18nKey.commentReplaceCode)!)
.replaceAll(/<[^>]+>/g, '');
}
export function createCommentItem(
container: HTMLUListElement,
template: HTMLTemplateElement,
data: {
avatarUrl: string;
commentContent: string;
commentUrl: string;
author: string;
time: Date;
}
) {
const item = template.content.firstElementChild!.cloneNode(true) as HTMLLIElement;
const avatarLinkEl = item.querySelector('a.avatar')!;
const avatarWrapper = avatarLinkEl.querySelector('div')!;
const avatarImg = new Image();
const comment = item.querySelector('a.line-clamp-2')!;
const time = item.querySelector('time')!;
avatarLinkEl.setAttribute('href', data.commentUrl);
comment.setAttribute('href', data.commentUrl);
avatarImg.src = data.avatarUrl;
avatarImg.alt = data.author;
avatarWrapper.appendChild(avatarImg);
comment.innerHTML = data.commentContent;
time.setAttribute('datetime', data.time.toISOString());
time.innerText = data.time.toLocaleDateString(siteConfig.lang.replace('_', '-'), {
year: 'numeric',
month: '2-digit',
day: '2-digit',
});
container.appendChild(item);
}
---
<div id="recent-comments-card" class="card border-base-300 bg-base-200/25 border">

6
src/components/aside/recent-comments/Twikoo.astro
View File

@ -2,11 +2,7 @@
import { asideConfig, commentConfig } from '@/config';
import { loadScript } from '@/scripts/utils';
import { CDN } from '@constants/cdn.mjs';
import {
cleanCommentHtml,
createCommentItem,
getTemplate,
} from '../ResentCommentsCard.astro';
import { cleanCommentHtml, createCommentItem, getTemplate } from './utils.ts';
const twikooConfig = commentConfig.twikoo!;

6
src/components/aside/recent-comments/Waline.astro
View File

@ -1,11 +1,7 @@
<script>
import { asideConfig, commentConfig } from '@/config';
import { joinUrl } from '@utils/url-utils';
import {
cleanCommentHtml,
createCommentItem,
getTemplate,
} from '../ResentCommentsCard.astro';
import { cleanCommentHtml, createCommentItem, getTemplate } from './utils.ts';
async function setup() {
const walineConfig = commentConfig.waline!;

64
src/components/aside/recent-comments/utils.ts Normal file
View File

@ -0,0 +1,64 @@
import { siteConfig } from '@/config';
import I18nKey from '@i18n/I18nKey';
import { i18n } from '@i18n/translation';
export function getTemplate() {
const recentCommentsCard = document.getElementById('recent-comments-card');
if (!recentCommentsCard) {
console.error('Recent comments card not found');
return;
}
const recentCommentsList = recentCommentsCard.querySelector('ul')!;
const recentCommentTemplate = recentCommentsList.querySelector('template');
return {
container: recentCommentsList,
template: recentCommentTemplate,
};
}
export function cleanCommentHtml(htmlString: string) {
return htmlString
.replaceAll(/<img.*?src="(.*?)"?[^>]+>/gi, i18n(I18nKey.commentReplaceImage)!)
.replaceAll(
/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,
i18n(I18nKey.commentReplaceLink)!
)
.replaceAll(/<pre><code[^>]+?>.*?<\/pre>/gis, i18n(I18nKey.commentReplaceCode)!)
.replaceAll(/<[^>]+>/g, '');
}
export function createCommentItem(
container: HTMLUListElement,
template: HTMLTemplateElement,
data: {
avatarUrl: string;
commentContent: string;
commentUrl: string;
author: string;
time: Date;
}
) {
const item = template.content.firstElementChild!.cloneNode(true) as HTMLLIElement;
const avatarLinkEl = item.querySelector('a.avatar')!;
const avatarWrapper = avatarLinkEl.querySelector('div')!;
const avatarImg = new Image();
const comment = item.querySelector('a.line-clamp-2')!;
const time = item.querySelector('time')!;
avatarLinkEl.setAttribute('href', data.commentUrl);
comment.setAttribute('href', data.commentUrl);
avatarImg.src = data.avatarUrl;
avatarImg.alt = data.author;
avatarWrapper.appendChild(avatarImg);
comment.innerHTML = data.commentContent;
time.setAttribute('datetime', data.time.toISOString());
time.innerText = data.time.toLocaleDateString(siteConfig.lang.replace('_', '-'), {
year: 'numeric',
month: '2-digit',
day: '2-digit',
});
container.appendChild(item);
}