From 7bd88a50338a7017ec554ba2008d822f9230e5ba Mon Sep 17 00:00:00 2001 From: Florian Verdonck Date: Sun, 13 Sep 2026 20:04:50 +0200 Subject: [PATCH] Restyle the docs sidebar and make it work with the fsdocs hotkeys fsdocs 23 adds keyboard navigation: j and k walk the links of the main menu, h and l move between the menu, the content and the page menu. Our menu folds its sections with visibility: hidden, which a browser will not focus, so the walk stalled at the first folded section. A folded section now hides by height alone and unfolds when a link inside it receives the focus, from the hotkeys or from Tab, which before had no way to open a section at all. The hotkey outline is white inside the sidebar, where the primary colour it uses by default is invisible. While there, give the sidebar the polish it lacked. Sections get a rail with their items inset under the header, and the current page is a rounded highlight with a marker on that rail. Hover and highlight are translucent white, so they hold up on both the light and the dark panel colour. The fold animates, the chevron is sized from the stylesheet rather than the template, and the type sits on the default scale. docs-setup.js was left behind when the Bootstrap theme went; nothing has loaded it since and everything it looked for is gone from the page. Bump fsdocs-tool to 23.0.0-alpha.4 and fantomas to 8.0.0-beta-003. --- .config/dotnet-tools.json | 6 +- docs/_body.html | 18 ++++- docs/_menu_template.html | 2 +- docs/content/docs-setup.js | 31 --------- docs/content/fsdocs-theme.css | 124 +++++++++++++++++++++++++++------- 5 files changed, 122 insertions(+), 59 deletions(-) delete mode 100644 docs/content/docs-setup.js diff --git a/.config/dotnet-tools.json b/.config/dotnet-tools.json index 10dd1fa134..c2c0482149 100644 --- a/.config/dotnet-tools.json +++ b/.config/dotnet-tools.json @@ -10,14 +10,14 @@ "rollForward": false }, "fantomas": { - "version": "8.0.0-beta-001", + "version": "8.0.0-beta-003", "commands": [ "fantomas" ], "rollForward": false }, "fsdocs-tool": { - "version": "23.0.0-alpha.1", + "version": "23.0.0-alpha.4", "commands": [ "fsdocs" ], @@ -38,4 +38,4 @@ "rollForward": false } } -} +} \ No newline at end of file diff --git a/docs/_body.html b/docs/_body.html index 8793272d6c..7f888857dd 100644 --- a/docs/_body.html +++ b/docs/_body.html @@ -3,7 +3,23 @@ menuHeaders.forEach(nv => { nv.addEventListener("click", () => { nv.classList.toggle("active"); - }) + }); + // A link in a folded section can still receive the focus, from Tab or from the j / k + // hotkeys of fsdocs. Unfold the section so the reader sees where the focus went. + const items = nv.nextElementSibling; + items?.addEventListener("focusin", ev => { + if (nv.classList.contains("active")) return; + nv.classList.add("active"); + // The section grows over its transition, and a scroll made while it was still folded + // could not reach a link below the folded height. Scroll again once it is fully open. + const link = ev.target; + const unfolded = e => { + if (e.target !== items) return; + items.removeEventListener("transitionend", unfolded); + link.scrollIntoView({ block: "nearest" }); + }; + items.addEventListener("transitionend", unfolded); + }); })