Docs: Restyled ADR pages

2026-03-10 00:08:11 -04:00
parent 01a2a03e2e
commit c2db74ba81
49 changed files with 3402 additions and 1946 deletions
@@ -0,0 +1,84 @@
+/**
+ * ADR Page — timeline placement
+ *
+ * On ADR pages the build hook embeds a hidden `.adr-timeline` element in the
+ * page content.
+ *
+ *   Desktop (>= 76.25em) — move the timeline into the left sidebar, replacing
+ *                           the integrated Table of Contents.
+ *   Mobile  (<  76.25em) — leave the navigation drawer alone; instead show
+ *                           the timeline at the end of the article body.
+ *
+ * Compatible with Material for MkDocs instant-loading (SPA navigation).
+ */
+
+var _adrDesktopQuery = window.matchMedia("(min-width: 76.25em)");
+
+document$.subscribe(function () {
+  var timeline = document.querySelector(".md-content .adr-timeline");
+
+  if (!timeline) {
+    // Not an ADR page — clean up any leftover state from a previous page.
+    document.body.classList.remove("adr-page");
+    return;
+  }
+
+  document.body.classList.add("adr-page");
+
+  if (_adrDesktopQuery.matches) {
+    _placeInSidebar(timeline);
+  } else {
+    _placeInContent(timeline);
+  }
+});
+
+/* ── Desktop: replace the sidebar TOC with the timeline ──────────────── */
+
+function _placeInSidebar(timeline) {
+  var sidebarInner = document.querySelector(
+    ".md-sidebar--primary .md-sidebar__inner"
+  );
+  if (!sidebarInner) return;
+
+  var nav = document.createElement("nav");
+  nav.className = "md-nav md-nav--primary adr-sidebar-timeline";
+  nav.setAttribute("data-md-level", "0");
+
+  var title = document.createElement("label");
+  title.className = "md-nav__title adr-timeline-title";
+  title.textContent = "Status History";
+
+  var clone = timeline.cloneNode(true);
+  clone.style.display = "";
+
+  nav.appendChild(title);
+  nav.appendChild(clone);
+
+  sidebarInner.innerHTML = "";
+  sidebarInner.appendChild(nav);
+
+  // Remove the hidden source element from the content area.
+  timeline.parentNode.removeChild(timeline);
+}
+
+/* ── Mobile: append the timeline at the end of the article ───────────── */
+
+function _placeInContent(timeline) {
+  var article = document.querySelector(".md-content__inner");
+  if (!article) return;
+
+  // Build a wrapper with a heading so it reads as a distinct section.
+  var wrapper = document.createElement("div");
+  wrapper.className = "adr-timeline-mobile";
+
+  var heading = document.createElement("h2");
+  heading.textContent = "Status History";
+  heading.id = "status-history";
+  wrapper.appendChild(heading);
+
+  // Move (not clone) the timeline into the wrapper and make it visible.
+  timeline.style.display = "";
+  wrapper.appendChild(timeline);
+
+  article.appendChild(wrapper);
+}