From dee607270781c0ccda1d833198cf8a91f4140f0a Mon Sep 17 00:00:00 2001 From: Ramya Gurunathan Date: Wed, 13 May 2026 15:50:25 -0400 Subject: [PATCH] #45 - Style system-config tutorial: enlarge platform tabs, scope TOC to active tab MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refine the IGX Orin / DGX Spark dual-platform UX so the two reference platforms read as a clear top-level choice and the right-hand TOC stops exposing links that lead into the hidden tab. - Wrap the platform-tab block in
and enlarge its tab labels via a scoped CSS rule, leaving every nested sub-tab (tune_system.py / manual, One-time / Persistent, …) at the default size. - Add platform-tab-toc.js + a :has() CSS rule that hide TOC entries for the inactive platform, so anchor links into hidden content disappear and the TOC mirrors what is on screen. - Trim the intro: drop the "tabs are linked" implementation note and the PR #41 reference, soften "pick yours below" to "pick the one closest to yours below". Co-Authored-By: Claude Opus 4.7 (1M context) Signed-off-by: Ramya Gurunathan --- docs/javascripts/platform-tab-toc.js | 56 ++++++++++++++++++++++++++ docs/stylesheets/extra.css | 19 +++++++++ docs/tutorials/system_configuration.md | 8 ++-- mkdocs.yml | 3 ++ 4 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 docs/javascripts/platform-tab-toc.js diff --git a/docs/javascripts/platform-tab-toc.js b/docs/javascripts/platform-tab-toc.js new file mode 100644 index 0000000..90e763e --- /dev/null +++ b/docs/javascripts/platform-tab-toc.js @@ -0,0 +1,56 @@ +// Tag right-hand TOC links with the platform tab that owns their heading, +// then mirror the active tab onto so CSS can +// fade out the inactive tab's TOC entries. Used by docs/tutorials/system_configuration.md. + +(function () { + function apply() { + var wrapper = document.querySelector(".platform-tabs > .tabbed-set"); + if (!wrapper) return; + + var blocks = wrapper.querySelectorAll( + ":scope > .tabbed-content > .tabbed-block" + ); + if (blocks.length < 2) return; + + var tabKeys = ["igx-orin", "dgx-spark"]; + + var anchorTab = {}; + blocks.forEach(function (block, i) { + block.querySelectorAll("[id]").forEach(function (el) { + anchorTab["#" + el.id] = tabKeys[i]; + }); + }); + + document + .querySelectorAll(".md-nav--secondary a[href^='#']") + .forEach(function (a) { + var key = anchorTab[a.getAttribute("href")]; + if (key) a.setAttribute("data-tab", key); + }); + + var radios = wrapper.querySelectorAll(":scope > input[type='radio']"); + function syncActive() { + for (var i = 0; i < radios.length; i++) { + if (radios[i].checked) { + document.body.dataset.activeTab = tabKeys[i]; + return; + } + } + } + radios.forEach(function (r) { + r.addEventListener("change", syncActive); + r.addEventListener("input", syncActive); + }); + syncActive(); + } + + if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", apply); + } else { + apply(); + } + + if (window.document$ && typeof window.document$.subscribe === "function") { + window.document$.subscribe(apply); + } +})(); diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index b5ce45f..5761281 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -50,3 +50,22 @@ [data-md-color-scheme="slate"] .md-footer { background: #111; } + +/* ── Platform tabs (IGX Orin / DGX Spark) — enlarged labels ────────── */ +/* Scoped to the .platform-tabs wrapper in system_configuration.md and */ +/* limited to the wrapper's direct tabbed-set so nested sub-tabs */ +/* (tune_system.py / manual, One-time / Persistent, …) are unaffected. */ +.md-typeset .platform-tabs > .tabbed-set > .tabbed-labels > label { + font-size: 1rem; + font-weight: 700; + padding: 0.6em 1.2em; +} + +/* ── Right-hand TOC: hide entries that belong to the inactive platform tab. */ +/* JS (platform-tab-toc.js) tags each [data-tab] link and mirrors the active */ +/* tab onto . We hide the link's containing
  • */ +/* (via :has()) so the surrounding indentation collapses too. */ +body[data-active-tab="igx-orin"] .md-nav--secondary li:has(> a[data-tab="dgx-spark"]), +body[data-active-tab="dgx-spark"] .md-nav--secondary li:has(> a[data-tab="igx-orin"]) { + display: none; +} diff --git a/docs/tutorials/system_configuration.md b/docs/tutorials/system_configuration.md index d27ea2e..494ca60 100644 --- a/docs/tutorials/system_configuration.md +++ b/docs/tutorials/system_configuration.md @@ -5,12 +5,12 @@ hide: # System Configuration -DAQIRI requires an [**NVIDIA SmartNIC**](https://www.nvidia.com/en-us/networking/ethernet-adapters/) (ConnectX-6 Dx or later) and a CUDA-capable GPU. Two reference platforms are documented in this tutorial — pick yours below: +DAQIRI requires an [**NVIDIA SmartNIC**](https://www.nvidia.com/en-us/networking/ethernet-adapters/) (ConnectX-6 Dx or later) and a CUDA-capable GPU. Two reference platforms are documented in this tutorial — pick the one closest to yours below: - **IGX Orin** with a discrete GPU (e.g. [RTX 6000 Ada](https://www.nvidia.com/en-us/design-visualization/rtx-6000/)): peermem-based GPUDirect, a separate GPU BAR1, and a discrete-PCIe path between GPU and NIC. The originally-supported reference platform. -- **DGX Spark** (Grace Blackwell **GB10** superchip): unified CPU/GPU memory via NVLink-C2C, integrated **ConnectX-7**, no peermem, and GPUDirect via `kind: host_pinned` data buffers (see [PR #41](https://github.com/nvidia/daqiri/pull/41)). +- **DGX Spark** (Grace Blackwell **GB10** superchip): unified CPU/GPU memory via NVLink-C2C, integrated **ConnectX-7**, no peermem, and GPUDirect via `kind: host_pinned` data buffers. -The two tabs below are linked across the page (mkdocs-material `content.tabs.link`), so other same-named sub-tabs (`tune_system.py` vs `manual`, `One-time` vs `Persistent`, etc.) will switch in lockstep as you toggle the platform. +
    === "IGX Orin" @@ -1562,3 +1562,5 @@ The two tabs below are linked across the page (mkdocs-material `content.tabs.lin --- **Next:** [Benchmarking Examples](benchmarking_examples.md) — run your first DAQIRI benchmark +
    + diff --git a/mkdocs.yml b/mkdocs.yml index 4b80201..371c6db 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -29,6 +29,9 @@ theme: extra_css: - stylesheets/extra.css +extra_javascript: + - javascripts/platform-tab-toc.js + site_dir: site nav: