forked from tangly1024/NotionNext
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Utterances.js
60 lines (53 loc) · 1.71 KB
/
Utterances.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { useEffect, useState } from 'react'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
/**
* 评论插件
* @param issueTerm
* @param layout
* @returns {JSX.Element}
* @constructor
*/
const Utterances = ({ issueTerm, layout }) => {
const { isDarkMode } = useGlobal()
const [isLoading, setLoading] = useState(true);
useEffect(() => {
const anchor = document.getElementById('comments');
if (!anchor) {
return
}
const script = document.createElement('script');
script.onload = () => setLoading(false);
script.setAttribute('src', 'https://utteranc.es/client.js');
script.setAttribute('crossorigin', 'anonymous');
script.setAttribute('async', true);
script.setAttribute('repo', siteConfig('COMMENT_UTTERRANCES_REPO'));
script.setAttribute('issue-term', 'title');
// 初始主题
script.setAttribute('theme', isDarkMode ? 'github-dark' : 'github-light');
anchor?.appendChild(script);
return () => {
// anchor.innerHTML = ''
};
}, []);
useEffect(() => {
// 直接设置 iframe 的类来改变主题,不重新加载脚本
const iframe = document.querySelector('iframe.utterances-frame');
if (iframe) {
iframe.contentWindow.postMessage({
type: 'set-theme',
theme: isDarkMode ? 'github-dark' : 'github-light'
}, 'https://utteranc.es');
}
}, [isDarkMode]);
return (
<div id="comments" className='utterances'>
{isLoading && (
<div className="flex justify-center items-center m-8">
<div className="animate-spin rounded-full h-8 w-8 border-2 border-indigo-400 border-t-transparent"></div>
</div>
)}
</div>
);
}
export default Utterances