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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
function setGiscusTheme(newTheme) {
// Get the giscus iframe.
const frame = document.querySelector('iframe.giscus-frame');
if (frame) {
// If the iframe exists, send a message to set the theme.
frame.contentWindow.postMessage(
{ giscus: { setConfig: { theme: newTheme } } },
'https://giscus.app'
);
}
}
// Function to initialize Giscus. This function is run when the window loads.
function initGiscus() {
// Get the div that will contain the comments.
const commentsDiv = document.querySelector('.comments');
if (commentsDiv) {
// Get the various settings from data attributes on the div.
const repo = commentsDiv.getAttribute('data-repo');
const repoId = commentsDiv.getAttribute('data-repo-id');
const category = commentsDiv.getAttribute('data-category');
const categoryId = commentsDiv.getAttribute('data-category-id');
const strictTitleMatching = commentsDiv.getAttribute('data-strict');
const term = commentsDiv.getAttribute('data-term');
const reactionsEnabled = commentsDiv.getAttribute('data-reactions-enabled');
const inputPosition = commentsDiv.getAttribute('data-input-position');
const lightTheme = commentsDiv.getAttribute('data-light-theme');
const darkTheme = commentsDiv.getAttribute('data-dark-theme');
const lang = commentsDiv.getAttribute('data-lang');
const lazyLoading = commentsDiv.getAttribute('data-lazy-loading');
// Create a new script tag that will load the Giscus script.
const script = document.createElement('script');
script.src = 'https://giscus.app/client.js';
script.async = true;
// Set the various settings as data attributes on the script tag.
script.setAttribute('data-repo', repo);
script.setAttribute('data-repo-id', repoId);
script.setAttribute('data-category', category);
script.setAttribute('data-category-id', categoryId);
script.setAttribute('data-term', term);
script.setAttribute('data-strict', strictTitleMatching);
script.setAttribute('data-reactions-enabled', reactionsEnabled);
script.setAttribute('data-emit-metadata', '0');
script.setAttribute('data-input-position', inputPosition);
script.setAttribute('data-lang', lang);
script.setAttribute('crossorigin', 'anonymous');
// Set the mapping if it is provided.
const mapping = commentsDiv.getAttribute('data-mapping');
if (mapping) {
script.setAttribute('data-mapping', mapping);
}
// Choose the correct theme based on the current theme of the document.
const currentTheme =
document.documentElement.getAttribute('data-theme') || 'light';
const selectedTheme = currentTheme === 'dark' ? darkTheme : lightTheme;
script.setAttribute('data-theme', selectedTheme);
// Set the loading attribute if lazy loading is enabled.
if (lazyLoading === 'true') {
script.setAttribute('data-loading', 'lazy');
}
// Add the script tag to the div.
commentsDiv.appendChild(script);
// Listen for theme changes and update the Giscus theme when they occur.
window.addEventListener('themeChanged', (event) => {
const selectedTheme =
event.detail.theme === 'dark' ? darkTheme : lightTheme;
setGiscusTheme(selectedTheme);
});
}
}
// Initialize Giscus.
initGiscus();
|
