mixa/zed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: Customize view transition and other layout shift improvements (#43763)

Browse Source 
Follow up to https://github.com/zed-industries/zed/pull/43762.

Yet another shot at making the navigation between pages flicker less.

Release Notes:

- N/A
This commit is contained in:
Danilo Leal
2025-11-28 20:05:58 -03:00
committed by GitHub
parent 34b453cee6
commit 63eb3ea7e0
3 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/theme/index.hbs vendored
View File

@@ -3,11 +3,13 @@
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<meta name="view-transition" content="same-origin">
<style>
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.15s;
animation-duration: 0.05s;
}
</style>
<!-- Theme initialization - must run before any CSS loads to prevent flicker -->

2
docs/theme/page-toc.js vendored
View File

@@ -56,7 +56,7 @@ const updateFunction = () => {
}
};
window.addEventListener("load", () => {
document.addEventListener("DOMContentLoaded", () => {
const pagetoc = getPagetoc();
const headers = [...document.getElementsByClassName("header")];

31
docs/theme/plugins.js vendored
View File

@@ -24,7 +24,8 @@ function detectOS() {
var os = detectOS();
console.log("Operating System:", os);
(function updateKeybindings() {
// Defer keybinding processing to avoid blocking initial render
function updateKeybindings() {
const os = detectOS();
const isMac = os === "Mac" || os === "iOS";
@@ -34,19 +35,17 @@ console.log("Operating System:", os);
element.classList.add("keybinding");
}
function walkDOM(node) {
if (node.nodeType === Node.ELEMENT_NODE) {
if (node.tagName.toLowerCase() === "kbd") {
processKeybinding(node);
} else {
Array.from(node.children).forEach(walkDOM);
}
}
}
// Process all kbd elements at once (more efficient than walking entire DOM)
const kbdElements = document.querySelectorAll("kbd");
kbdElements.forEach(processKeybinding);
}
// Start the process from the body
walkDOM(document.body);
})();
// Use requestIdleCallback if available, otherwise requestAnimationFrame
if (typeof requestIdleCallback === "function") {
requestIdleCallback(updateKeybindings);
} else {
requestAnimationFrame(updateKeybindings);
}
function darkModeToggle() {
var html = document.documentElement;
@@ -59,11 +58,6 @@ function darkModeToggle() {
html.setAttribute("data-color-scheme", theme);
html.className = theme;
localStorage.setItem("mdbook-theme", theme);
// Force a repaint to ensure the changes take effect in the client immediately
document.body.style.display = "none";
document.body.offsetHeight;
document.body.style.display = "";
}
themeToggleButton.addEventListener("click", function (event) {
@@ -226,6 +220,7 @@ const copyMarkdown = () => {
// Initialize functionality when DOM is loaded
document.addEventListener("DOMContentLoaded", () => {
darkModeToggle();
copyMarkdown();
});