Fix Giscus load after navigation (#17042)
Signed-off-by: UltralyticsAssistant <web@ultralytics.com> Co-authored-by: UltralyticsAssistant <web@ultralytics.com>
This commit is contained in:
parent
2c8f31c9c0
commit
0535db9885
1 changed files with 53 additions and 36 deletions
|
|
@ -1,5 +1,8 @@
|
|||
// Giscus functionality
|
||||
function loadGiscus() {
|
||||
const giscusContainer = document.getElementById("giscus-container");
|
||||
if (!giscusContainer || giscusContainer.querySelector("script")) return;
|
||||
|
||||
const script = document.createElement("script");
|
||||
script.src = "https://giscus.app/client.js";
|
||||
script.setAttribute("data-repo", "ultralytics/ultralytics");
|
||||
|
|
@ -17,47 +20,61 @@ function loadGiscus() {
|
|||
script.setAttribute("crossorigin", "anonymous");
|
||||
script.setAttribute("async", "");
|
||||
|
||||
const giscusContainer = document.getElementById("giscus-container");
|
||||
if (giscusContainer) {
|
||||
giscusContainer.appendChild(script);
|
||||
giscusContainer.appendChild(script);
|
||||
|
||||
// Synchronize Giscus theme with palette
|
||||
var palette = __md_get("__palette");
|
||||
if (palette && typeof palette.color === "object") {
|
||||
var theme = palette.color.scheme === "slate" ? "dark" : "light";
|
||||
script.setAttribute("data-theme", theme);
|
||||
}
|
||||
// Synchronize Giscus theme with palette
|
||||
var palette = __md_get("__palette");
|
||||
if (palette && typeof palette.color === "object") {
|
||||
var theme = palette.color.scheme === "slate" ? "dark" : "light";
|
||||
script.setAttribute("data-theme", theme);
|
||||
}
|
||||
|
||||
// Register event handlers for theme changes
|
||||
var ref = document.querySelector("[data-md-component=palette]");
|
||||
if (ref) {
|
||||
ref.addEventListener("change", function () {
|
||||
var palette = __md_get("__palette");
|
||||
if (palette && typeof palette.color === "object") {
|
||||
var theme = palette.color.scheme === "slate" ? "dark" : "light";
|
||||
// Register event handlers for theme changes
|
||||
var ref = document.querySelector("[data-md-component=palette]");
|
||||
if (ref) {
|
||||
ref.addEventListener("change", function () {
|
||||
var palette = __md_get("__palette");
|
||||
if (palette && typeof palette.color === "object") {
|
||||
var theme = palette.color.scheme === "slate" ? "dark" : "light";
|
||||
|
||||
// Instruct Giscus to change theme
|
||||
var frame = document.querySelector(".giscus-frame");
|
||||
if (frame) {
|
||||
frame.contentWindow.postMessage(
|
||||
{ giscus: { setConfig: { theme } } },
|
||||
"https://giscus.app",
|
||||
);
|
||||
}
|
||||
// Instruct Giscus to change theme
|
||||
var frame = document.querySelector(".giscus-frame");
|
||||
if (frame) {
|
||||
frame.contentWindow.postMessage(
|
||||
{ giscus: { setConfig: { theme } } },
|
||||
"https://giscus.app",
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// MkDocs specific: Load Giscus when the page content is fully loaded
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var observer = new MutationObserver(function (mutations) {
|
||||
if (document.getElementById("giscus-container")) {
|
||||
loadGiscus();
|
||||
observer.disconnect();
|
||||
}
|
||||
});
|
||||
// Use Intersection Observer to load Giscus when the container is visible
|
||||
function setupGiscusLoader() {
|
||||
const giscusContainer = document.getElementById("giscus-container");
|
||||
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
});
|
||||
if (giscusContainer) {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
loadGiscus();
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1 }); // Trigger when 10% of the element is visible
|
||||
|
||||
observer.observe(giscusContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// Hook into MkDocs' navigation system
|
||||
if (typeof document$ !== "undefined") {
|
||||
document$.subscribe(() => {
|
||||
// This function is called on every page load/change
|
||||
setupGiscusLoader();
|
||||
});
|
||||
} else {
|
||||
console.warn("MkDocs document$ not found. Falling back to DOMContentLoaded.");
|
||||
document.addEventListener("DOMContentLoaded", setupGiscusLoader);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue