diff --git a/docs/main.py b/docs/main.py index 2fa40edb..71f58fa7 100644 --- a/docs/main.py +++ b/docs/main.py @@ -2,7 +2,7 @@ from typing import Any def define_env(env: Any) -> None: - static_dir = "../static/" + static_dir = "/static/" video_dir = "https://clan.lol/" + "videos/" asciinema_dir = static_dir + "asciinema-player/" @@ -15,8 +15,7 @@ def define_env(env: Any) -> None: @env.macro def asciinema(name: str) -> str: - return f"""
- + return f"""
""" + +
""" diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index 302a31ed..371ce212 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -120,8 +120,11 @@ theme: icon: material/weather-sunny name: Switch to light mode - extra_javascript: - - static/main.js +extra_javascript: + - static/main.js +extra_css: + - static/asciinema-player/custom-theme.css + - static/asciinema-player/asciinema-player.css plugins: - search diff --git a/docs/nix/scripts/renderOptions.py b/docs/nix/scripts/renderOptions.py index d434fdff..1c28300f 100644 --- a/docs/nix/scripts/renderOptions.py +++ b/docs/nix/scripts/renderOptions.py @@ -74,7 +74,7 @@ def render_option(name: str, option: dict[str, Any], level: int = 3) -> str: read_only = option.get("readOnly") res = f""" -{"#" * level} {sanitize(name)} {{#{sanitize(name)}}} +{"#" * level} {sanitize(name)} {"Readonly" if read_only else ""} {option.get("description", "No description available.")} diff --git a/docs/site/static/main.js b/docs/site/static/main.js index 1d5dc0dc..a8e66e42 100644 --- a/docs/site/static/main.js +++ b/docs/site/static/main.js @@ -1,116 +1,72 @@ -// Set darkmode -document.getElementById('mode').addEventListener('click', () => { - let isDarkTheme = document.body.classList.contains('dark'); - setColorTheme(!isDarkTheme ? "dark" : "light"); - }); - - - let preferDarkTheme = prefersDarkMode(); - let theme = localStorage.getItem('theme'); - if (theme !== null) { - setColorTheme(theme); +let preferDarkTheme = prefersDarkMode(); +let theme = localStorage.getItem('theme'); +if (theme !== null) { + setColorTheme(theme); +} else { + setColorTheme(preferDarkTheme ? "dark" : "light"); +} + +// Get the media query list object for the prefers-color-scheme media feature +const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)"); +// Add an event listener for the change event +colorSchemeQueryList.addEventListener("change", handleColorSchemeChange); + + +function setColorTheme(theme) { + if (theme === "dark") { + document.body.setAttribute('data-md-color-scheme', 'slate'); + document.body.setAttribute('data-md-color-media', '(prefers-color-scheme: dark)') + localStorage.setItem('theme', 'dark'); } else { - setColorTheme(preferDarkTheme ? "dark" : "light"); + document.body.setAttribute('data-md-color-scheme', 'default'); + document.body.setAttribute('data-md-color-media', '(prefers-color-scheme: light)') + localStorage.setItem('theme', 'light'); } - - // Get the media query list object for the prefers-color-scheme media feature - const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)"); - // Add an event listener for the change event - colorSchemeQueryList.addEventListener("change", handleColorSchemeChange); - - - function setColorTheme(theme) { - if (theme === "dark") { - document.body.classList.add('dark'); - switchClanLogo("white"); - localStorage.setItem('theme', 'dark'); - } else { - document.body.classList.remove('dark'); - switchClanLogo("dark"); - localStorage.setItem('theme', 'light'); - } +} + +// A function that returns true if the user prefers dark mode, false otherwise +function prefersDarkMode() { + // Check if the browser supports the prefers-color-scheme media query + if (window.matchMedia) { + // Get the current value of the media query + let colorScheme = window.matchMedia("(prefers-color-scheme: dark)"); + // Return true if the media query matches, false otherwise + return colorScheme.matches; + } else { + // If the browser does not support the media query, return false by default + return false; } - - // A function that returns true if the user prefers dark mode, false otherwise - function prefersDarkMode() { - // Check if the browser supports the prefers-color-scheme media query - if (window.matchMedia) { - // Get the current value of the media query - let colorScheme = window.matchMedia("(prefers-color-scheme: dark)"); - // Return true if the media query matches, false otherwise - return colorScheme.matches; - } else { - // If the browser does not support the media query, return false by default - return false; - } +} + +// A function that executes some logic based on the color scheme preference +function handleColorSchemeChange(e) { + if (e.matches) { + // The user prefers dark mode + setColorTheme("dark"); + } else { + // The user prefers light mode + setColorTheme("light"); } - - function switchClanLogo(theme) { - let favs = document.getElementsByClassName("favicon"); - for (item of favs) { - if (theme === "white") - { - item.href = item.href.replace("dark-favicon", "white-favicon") - } else { - item.href = item.href.replace("white-favicon", "dark-favicon") - } - } - let clogos = document.getElementsByClassName("clogo"); - for (item of clogos) { - if (theme === "white") - { - item.src = item.src.replace("dark", "white") - } else { - item.src = item.src.replace("white", "dark") - } - } +} + +// Detects if user pressed on the "change theme" button +document.addEventListener('DOMContentLoaded', function () { + function handleThemeChange() { + const isDarkMode = document.body.getAttribute('data-md-color-media').includes('dark'); + console.log(`Theme is now ${isDarkMode ? 'dark' : 'light'}`); + + // Detect the current theme } - - - - // A function that executes some logic based on the color scheme preference - function handleColorSchemeChange(e) { - if (e.matches) { - // The user prefers dark mode - setColorTheme("dark"); - } else { - // The user prefers light mode - setColorTheme("light"); - } - } - - // Function to resize all video elements to match their parent article's width - function resizeVideosToMatchArticleWidth() { - // Function to adjust video sizes - function adjustVideoSizes() { - // Find all video elements - const videos = document.querySelectorAll('video'); - - videos.forEach(video => { - // Find the closest parent article element - const article = video.closest('article'); - if (!article) return; // Skip if no parent article found - - // Calculate new video height to maintain aspect ratio - const aspectRatio = video.videoHeight / video.videoWidth; - const newWidth = article.clientWidth; // Width of the parent article - const newHeight = newWidth * aspectRatio; - - // Set new width and height on the video - video.style.width = `${newWidth}px`; - video.style.height = `${newHeight}px`; - }); - } - - // Adjust video sizes on load - document.addEventListener('DOMContentLoaded', adjustVideoSizes); - - // Adjust video sizes on window resize - window.onresize = adjustVideoSizes; - } - - // Call the function to initialize the resizing - resizeVideosToMatchArticleWidth(); - \ No newline at end of file + + // Initial check + handleThemeChange(); + + // MutationObserver to detect changes to the `data-md-color-scheme` attribute + const observer = new MutationObserver(handleThemeChange); + observer.observe(document.body, { + attributes: true, + attributeFilter: ['data-md-color-media'] + }); +});