HongChuang/ultralytics-ascend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix Giscus load after navigation (#17042)

Browse source 
Signed-off-by: UltralyticsAssistant <web@ultralytics.com>
Co-authored-by: UltralyticsAssistant <web@ultralytics.com>
This commit is contained in:
Glenn Jocher 2024-10-20 04:00:25 +02:00 • committed by GitHub
parent 2c8f31c9c0
commit 0535db9885
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 53 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

89
docs/overrides/javascript/giscus.js
View file

@ -1,5 +1,8 @@
// Giscus functionality // Giscus functionality
function loadGiscus() { function loadGiscus() {
const giscusContainer = document.getElementById("giscus-container");
if (!giscusContainer || giscusContainer.querySelector("script")) return;
const script = document.createElement("script"); const script = document.createElement("script");
script.src = "https://giscus.app/client.js"; script.src = "https://giscus.app/client.js";
script.setAttribute("data-repo", "ultralytics/ultralytics"); script.setAttribute("data-repo", "ultralytics/ultralytics");
@ -17,47 +20,61 @@ function loadGiscus() {
script.setAttribute("crossorigin", "anonymous"); script.setAttribute("crossorigin", "anonymous");
script.setAttribute("async", ""); script.setAttribute("async", "");
const giscusContainer = document.getElementById("giscus-container"); giscusContainer.appendChild(script);
if (giscusContainer) {
giscusContainer.appendChild(script);
// Synchronize Giscus theme with palette // Synchronize Giscus theme with palette
var palette = __md_get("__palette"); var palette = __md_get("__palette");
if (palette && typeof palette.color === "object") { if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate" ? "dark" : "light"; var theme = palette.color.scheme === "slate" ? "dark" : "light";
script.setAttribute("data-theme", theme); script.setAttribute("data-theme", theme);
} }
// Register event handlers for theme changes // Register event handlers for theme changes
var ref = document.querySelector("[data-md-component=palette]"); var ref = document.querySelector("[data-md-component=palette]");
if (ref) { if (ref) {
ref.addEventListener("change", function () { ref.addEventListener("change", function () {
var palette = __md_get("__palette"); var palette = __md_get("__palette");
if (palette && typeof palette.color === "object") { if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate" ? "dark" : "light"; var theme = palette.color.scheme === "slate" ? "dark" : "light";
// Instruct Giscus to change theme // Instruct Giscus to change theme
var frame = document.querySelector(".giscus-frame"); var frame = document.querySelector(".giscus-frame");
if (frame) { if (frame) {
frame.contentWindow.postMessage( frame.contentWindow.postMessage(
{ giscus: { setConfig: { theme } } }, { giscus: { setConfig: { theme } } },
"https://giscus.app", "https://giscus.app",
); );
}
} }
}); }
} });
} }
} }
// MkDocs specific: Load Giscus when the page content is fully loaded // Use Intersection Observer to load Giscus when the container is visible
document.addEventListener("DOMContentLoaded", function () { function setupGiscusLoader() {
var observer = new MutationObserver(function (mutations) { const giscusContainer = document.getElementById("giscus-container");
if (document.getElementById("giscus-container")) {
loadGiscus();
observer.disconnect();
}
});
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);
}