docs: Scroll to the current page in the site nav

When any given docs page loads, the site nav should scroll so that the
page you're currently on is visible in the site nav.

Verified on Google Chrome on gLinux and Safari on iOS.

Bug: b/292273650
Change-Id: I9b480eb82791c6c5823c1ea7454eafe5c80e87df
Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/162410
Reviewed-by: Asad Memon <[email protected]>
Commit-Queue: Auto-Submit <[email protected]>
Presubmit-Verified: CQ Bot Account <[email protected]>
Reviewed-by: Kayce Basques <[email protected]>
Pigweed-Auto-Submit: Kayce Basques <[email protected]>

docs/BUILD.gn

@@ -21,6 +21,7 @@ import("$dir_pw_docgen/docs.gni")
 pw_doc_group("static_assets") {
   inputs = [
     "_static/css/pigweed.css",
+    "_static/js/pigweed.js",
     "_static/pw_logo.ico",
     "_static/pw_logo.svg",
   ]

docs/_static/css/pigweed.css

@@ -24,6 +24,7 @@
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
+
 .sidebar-brand-text {
   font-size: 2.5rem;
 }

docs/_static/js/pigweed.js

@@ -0,0 +1,38 @@
+// Copyright 2023 The Pigweed Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+function scrollSiteNavToCurrentPage() {
+  const siteNav = document.querySelector('.sidebar-scroll');
+  // The node within the site nav that represents the page that the user is
+  // currently looking at.
+  const currentPage = document.querySelector('.current-page');
+  // Determine which site nav node to scroll to.
+  let targetNode;
+  if (currentPage.classList.contains('toctree-l1') ||
+      currentPage.classList.contains('toctree-l2')) {
+    // Scroll directly to top-level (L1) and second-level (L2) nodes.
+    targetNode = currentPage;
+  } else {
+    // For L3 nodes and deeper, scroll to the node's L2 ancestor so that the
+    // user sees all the docs in the set.
+    targetNode = document.querySelector('li.toctree-l2.current');
+  }
+  scrollDistance = targetNode.getBoundingClientRect().top -
+      siteNav.getBoundingClientRect().top;
+  siteNav.scrollTop = scrollDistance;
+}
+
+window.addEventListener('load', () => {
+  scrollSiteNavToCurrentPage();
+});

docs/conf.py

@@ -127,6 +127,8 @@
     "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css",
 ]
 
+html_js_files = ['js/pigweed.js']
+
 # Furo color theme variables based on:
 # https://github.com/pradyunsg/furo/blob/main/src/furo/assets/styles/variables/_colors.scss
 # Colors with unchanged defaults are left commented out for easy updating.

docs/style_guide.rst

@@ -1539,6 +1539,14 @@ Why is the changelog organized by category / module? Why not the usual
   how we annotate our commits. We will not be able to publish changelog updates
   every 2 weeks if there is too much manual work involved.
 
+Site nav scrolling
+==================
+The site nav was customized (`change #162410`_) to scroll on initial page load
+so that the current page is visible in the site nav. The scrolling logic is
+handled in ``//docs/_static/js/pigweed.js``.
+
+.. _change #162410: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/162410
+
 .. _commit-style:
 
 --------------