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

Update extra.js (#17040)

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 03:12:23 +02:00 • committed by GitHub
parent e38228774f
commit 2c8f31c9c0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 175 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

135
docs/overrides/javascript/extra.js
View file

@ -1,71 +1,68 @@
// Function that applies light/dark theme based on the user's preference
const applyAutoTheme = () => {
// Determine the user's preferred color scheme
const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
// Apply theme based on user preference
const applyTheme = (isDark) => {
document.body.setAttribute(
"data-md-color-scheme",
isDark ? "slate" : "default",
);
document.body.setAttribute(
"data-md-color-primary",
isDark ? "black" : "indigo",
);
};
// Apply the appropriate attributes based on the user's preference
if (prefersLight) {
document.body.setAttribute("data-md-color-scheme", "default");
document.body.setAttribute("data-md-color-primary", "indigo");
} else if (prefersDark) {
document.body.setAttribute("data-md-color-scheme", "slate");
document.body.setAttribute("data-md-color-primary", "black");
// Check and apply auto theme
const checkAutoTheme = () => {
const supportedLangCodes = [
"en",
"zh",
"ko",
"ja",
"ru",
"de",
"fr",
"es",
"pt",
"it",
"tr",
"vi",
"ar",
];
const langCode = window.location.pathname.split("/")[1];
const localStorageKey = `${supportedLangCodes.includes(langCode) ? `/${langCode}` : ""}/.__palette`;
const palette = JSON.parse(localStorage.getItem(localStorageKey) || "{}");
if (palette.index === 0) {
applyTheme(window.matchMedia("(prefers-color-scheme: dark)").matches);
}
};
// Function that checks and applies light/dark theme based on the user's preference (if auto theme is enabled)
function checkAutoTheme() {
// Array of supported language codes -> each language has its own palette (stored in local storage)
const supportedLangCodes = ["en", "zh", "ko", "ja", "ru", "de", "fr", "es", "pt", "it", "tr", "vi", "nl"];
// Get the URL path
const path = window.location.pathname;
// Extract the language code from the URL (assuming it's in the format /xx/...)
const langCode = path.split("/")[1];
// Check if the extracted language code is in the supported languages
const isValidLangCode = supportedLangCodes.includes(langCode);
// Construct the local storage key based on the language code if valid, otherwise default to the root key
const localStorageKey = isValidLangCode ? `/${langCode}/.__palette` : "/.__palette";
// Retrieve the palette from local storage using the constructed key
const palette = localStorage.getItem(localStorageKey);
if (palette) {
// Check if the palette's index is 0 (auto theme)
const paletteObj = JSON.parse(palette);
if (paletteObj && paletteObj.index === 0) {
applyAutoTheme();
}
}
}
// Event listeners for theme changes
const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
mediaQueryList.addListener(checkAutoTheme);
// Run function when the script loads
// Initial theme check
checkAutoTheme();
// Re-run the function when the user's preference changes (when the user changes their system theme)
window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", checkAutoTheme);
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", checkAutoTheme);
// Re-run the function when the palette changes (e.g. user switched from dark theme to auto theme)
// ! We can't use window.addEventListener("storage", checkAutoTheme) because it will NOT be triggered on the current tab
// ! So we have to use the following workaround:
// Get the palette input for auto theme
var autoThemeInput = document.getElementById("__palette_1");
if (autoThemeInput) {
// Add a click event listener to the input
autoThemeInput.addEventListener("click", function () {
// Check if the auto theme is selected
if (autoThemeInput.checked) {
// Re-run the function after a short delay (to ensure that the palette has been updated)
setTimeout(applyAutoTheme);
}
// Auto theme input listener
document.addEventListener("DOMContentLoaded", () => {
const autoThemeInput = document.getElementById("__palette_1");
autoThemeInput?.addEventListener("click", () => {
if (autoThemeInput.checked) setTimeout(checkAutoTheme);
});
}
});
// Add iframe navigation
window.onhashchange = function() {
window.parent.postMessage({
type: 'navigation',
hash: window.location.pathname + window.location.search + window.location.hash
}, '*');
// Iframe navigation
window.onhashchange = () => {
window.parent.postMessage(
{
type: "navigation",
hash:
window.location.pathname +
window.location.search +
window.location.hash,
},
"*",
);
};
// Add Inkeep button
@ -112,35 +109,35 @@ document.addEventListener("DOMContentLoaded", () => {
},
aiChatSettings: {
chatSubjectName: "Ultralytics",
botAvatarSrcUrl: "https://storage.googleapis.com/organization-image-assets/ultralytics-botAvatarSrcUrl-1727908259285.png",
botAvatarDarkSrcUrl: "https://storage.googleapis.com/organization-image-assets/ultralytics-botAvatarDarkSrcUrl-1727908258478.png",
botAvatarSrcUrl:
"https://storage.googleapis.com/organization-image-assets/ultralytics-botAvatarSrcUrl-1729379860806.svg",
quickQuestions: [
"What's new in Ultralytics YOLO11?",
"How can I get started with Ultralytics HUB?",
"How does Ultralytics Enterprise Licensing work?"
"How does Ultralytics Enterprise Licensing work?",
],
getHelpCallToActions: [
{
name: "Ask on Ultralytics GitHub",
url: "https://github.com/ultralytics/ultralytics",
icon: {
builtIn: "FaGithub"
}
builtIn: "FaGithub",
},
},
{
name: "Ask on Ultralytics Discourse",
url: "https://community.ultralytics.com/",
icon: {
builtIn: "FaDiscourse"
}
builtIn: "FaDiscourse",
},
},
{
name: "Ask on Ultralytics Discord",
url: "https://discord.com/invite/ultralytics",
icon: {
builtIn: "FaDiscord"
}
}
builtIn: "FaDiscord",
},
},
],
},
},

63
docs/overrides/javascript/giscus.js Normal file
View file

@ -0,0 +1,63 @@
// Giscus functionality
function loadGiscus() {
const script = document.createElement("script");
script.src = "https://giscus.app/client.js";
script.setAttribute("data-repo", "ultralytics/ultralytics");
script.setAttribute("data-repo-id", "R_kgDOH-jzvQ");
script.setAttribute("data-category", "Docs");
script.setAttribute("data-category-id", "DIC_kwDOH-jzvc4CWLkL");
script.setAttribute("data-mapping", "pathname");
script.setAttribute("data-strict", "1");
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.setAttribute("crossorigin", "anonymous");
script.setAttribute("async", "");
const giscusContainer = document.getElementById("giscus-container");
if (giscusContainer) {
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);
}
// 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",
);
}
}
});
}
}
}
// 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();
}
});
observer.observe(document.body, { childList: true, subtree: true });
});

48
docs/overrides/partials/comments.html
View file

@ -1,51 +1,7 @@
{% if page.meta.comments %}
<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
<!-- Insert Giscus code snippet from https://giscus.app/ here -->
<script async
crossorigin="anonymous"
data-category="Docs"
data-category-id="DIC_kwDOH-jzvc4CWLkL"
data-emit-metadata="0"
data-input-position="top"
data-lang="en"
data-loading="lazy"
data-mapping="pathname"
data-reactions-enabled="1"
data-repo="ultralytics/ultralytics"
data-repo-id="R_kgDOH-jzvQ"
data-strict="1"
data-theme="preferred_color_scheme"
src="https://giscus.app/client.js">
</script>
<!-- Giscus container -->
<div id="giscus-container"></div>
<!-- Synchronize Giscus theme with palette -->
<script>
var giscus = document.querySelector("script[src*=giscus]")
/* Set palette on initial load */
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate" ? "dark" : "light"
giscus.setAttribute("data-theme", theme)
}
/* Register event handlers after documented loaded */
document.addEventListener("DOMContentLoaded", function() {
var ref = document.querySelector("[data-md-component=palette]")
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")
frame.contentWindow.postMessage(
{ giscus: { setConfig: { theme } } },
"https://giscus.app"
)
}
})
})
</script>
{% endif %}

14
docs/overrides/stylesheets/style.css
View file

@ -76,7 +76,6 @@ div.highlight {
.banner-wrapper {
justify-content: space-between;
gap: 16px;
padding: 16px;
}
@ -121,7 +120,6 @@ div.highlight {
.banner-wrapper > .banner-button-wrapper,
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper {
padding: 2px;
background-color: rgba(222, 255, 56, 0.2);
}
@ -131,13 +129,10 @@ div.highlight {
.banner-wrapper > .banner-button-wrapper > .banner-button-wrapper > button {
cursor: pointer;
min-width: 132px;
padding: 10px;
font-weight: 500;
color: #111f68;
background-color: rgb(222, 255, 56);
}
@ -156,13 +151,11 @@ div.highlight {
.banner-wrapper {
gap: 32px;
padding: 12px;
}
.banner-wrapper > .banner-content-wrapper {
gap: 24px;
margin: 0 auto;
}
}
@ -217,6 +210,13 @@ div.highlight {
height: 50px;
border-radius: 50%;
margin-right: 3px;
background-color: #f0f0f0; /* Placeholder color */
opacity: 0; /* Start fully transparent */
transition: opacity 0.3s ease-in-out;
}
.author-link .hover-item[src] {
opacity: 1; /* Fade in when src is set (image loaded) */
}
.hover-item:hover {