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
82
83
84
85
86
87
88
89
90
|
(() => {
if (window.__wsapGiscusInitialized) return;
window.__wsapGiscusInitialized = true;
const initContainer = (root) => {
if (!(root instanceof HTMLElement) || root.dataset.giscusInit === "1")
return;
root.dataset.giscusInit = "1";
const toggle = root.querySelector(".comments-toggle");
const trigger = root.querySelector(".giscus-trigger");
const slot = root.querySelector(".giscus-slot");
if (
!(toggle instanceof HTMLButtonElement) ||
!(slot instanceof HTMLElement)
) {
return;
}
let isLoading = false;
let hasLoaded = false;
let observer = null;
const loadComments = () => {
if (isLoading || hasLoaded) return;
isLoading = true;
toggle.disabled = true;
toggle.textContent = "Loading comments...";
const script = document.createElement("script");
script.src = "https://giscus.app/client.js";
script.setAttribute("data-repo", "wenekar/giscus");
script.setAttribute("data-repo-id", "R_kgDOREZgEQ");
script.setAttribute("data-category", "Announcements");
script.setAttribute("data-category-id", "DIC_kwDOREZgEc4C1nRY");
script.setAttribute("data-mapping", "pathname");
script.setAttribute("data-strict", "0");
script.setAttribute("data-reactions-enabled", "1");
script.setAttribute("data-emit-metadata", "0");
script.setAttribute("data-input-position", "top");
script.setAttribute("data-theme", "preferred_color_scheme");
script.setAttribute("data-lang", "en");
script.setAttribute("data-loading", "lazy");
script.crossOrigin = "anonymous";
script.async = true;
script.addEventListener("load", () => {
isLoading = false;
hasLoaded = true;
toggle.remove();
});
script.addEventListener("error", () => {
isLoading = false;
hasLoaded = false;
toggle.disabled = false;
toggle.textContent = "Show comments";
script.remove();
});
slot.appendChild(script);
if (observer) observer.disconnect();
};
toggle.addEventListener("click", loadComments);
if ("IntersectionObserver" in window && trigger instanceof HTMLElement) {
observer = new IntersectionObserver(
(entries) => {
if (entries.some((entry) => entry.isIntersecting)) loadComments();
},
{ rootMargin: "300px 0px" },
);
observer.observe(trigger);
}
};
const initAll = () => {
document.querySelectorAll("[data-giscus-root]").forEach(initContainer);
};
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initAll, { once: true });
return;
}
initAll();
})();
|
