👌 IMPROVE: RHS TOC sticky when scrolling option

.github/workflows/ci.yml

@@ -10,6 +10,7 @@ jobs:
         shell: bash -l {0}
         run: |
           git clone https://github.com/QuantEcon/lecture-python-programming.myst
+          cd lecture-python-programming.myst && git checkout rhs-toc-sticky && cd ..
       - name: Setup Anaconda
         uses: conda-incubator/setup-miniconda@v2
         with:

.pre-commit-config.yaml

@@ -8,7 +8,7 @@ exclude: >
 
 repos:
 
-  - repo: git://github.com/pre-commit/pre-commit-hooks
+  - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v3.2.0
     hooks:
     - id: check-json
@@ -22,7 +22,7 @@ repos:
     - id: flake8
 
   - repo: https://github.com/psf/black
-    rev: 20.8b1
+    rev: 22.3.0
     hooks:
     - id: black
 
@@ -42,3 +42,4 @@ repos:
                 quantecon_book_theme/static/.*|
                 quantecon_book_theme/theme.conf
             )$
+        additional_dependencies: ['markupsafe==2.0.1']

quantecon_book_theme/__init__.py

@@ -66,7 +66,7 @@ def add_static_path(app):
 
 
 def add_to_context(app, pagename, templatename, context, doctree):
-    """ Functions and variable additions to context."""
+    """Functions and variable additions to context."""
 
     def sbt_generate_nav_html(
         level=1,

quantecon_book_theme/layout.html

@@ -90,7 +90,11 @@
 
                 <div class="qe-page__toc">
 
+                    {% if theme_sticky_contents is defined and theme_sticky_contents is sameas true %}
+                    <div class="inner sticky">
+                    {%- else %}
                     <div class="inner">
+                    {%- endif %}
 
                         {% set page_toc = generate_toc_html() %}
 

quantecon_book_theme/theme.conf

@@ -1,7 +1,7 @@
 # Note: this should only be changed in src/jinja/theme.conf.j2
 [theme]
 inherit = pydata_sphinx_theme
-stylesheet = quantecon-book-theme.1ef59f8f4e91ec8319176e8479c6af4e.css
+stylesheet = quantecon-book-theme.8e803950472302ed98c42444678c3bbd.css
 
 [options]
 single_page = False
@@ -28,4 +28,5 @@ keywords =
 twitter =
 twitter_logo_url =
 og_logo_url =
-persistent_sidebar: False
+sticky_toc = False
+persistent_sidebar = False

setup.py

@@ -30,6 +30,7 @@
         "sphinx_book_theme~=0.1.0",
         "beautifulsoup4",
         "web-compile",
+        "markupsafe~=2.0.1",
         'importlib-resources>=3.0,<3.5; python_version < "3.7"',
     ],
     extras_require={
@@ -48,7 +49,7 @@
             "sphinxcontrib-bibtex~=2.2",
         ],
         "testing": [
-            "myst_nb~=0.11.1",
+            "myst-nb~=0.11.1",
             "coverage",
             "pytest~=6.0.1",
             "pytest-cov",

src/jinja/theme.conf

@@ -27,3 +27,5 @@ keywords =
 twitter =
 twitter_logo_url =
 og_logo_url =
+sticky_toc = False
+persistent_sidebar = False

src/jinja/theme.conf.j2

@@ -28,4 +28,5 @@ keywords =
 twitter =
 twitter_logo_url =
 og_logo_url =
-persistent_sidebar: False
+sticky_toc = False
+persistent_sidebar = False

src/js/quantecon-book-theme.js

@@ -1,3 +1,6 @@
+// ScrollSpy Plugin: https://github.com/r3plica/Scrollspy
+!function($,window,document,undefined){$.fn.extend({scrollspy:function(options){var defaults={namespace:"scrollspy",activeClass:"active",animate:!1,duration:1e3,offset:0,container:window,replaceState:!1};options=$.extend({},defaults,options);var add=function(ex1,ex2){return parseInt(ex1,10)+parseInt(ex2,10)},findElements=function(links){for(var elements=[],i=0;i<links.length;i++){var link=links[i],hash=$(link).attr("href"),element=$(hash);if(element.length>0){var top=Math.floor(element.offset().top),bottom=top+Math.floor(element.outerHeight());elements.push({element:element,hash:hash,top:top,bottom:bottom})}}return elements},findLink=function(links,hash){for(var i=0;i<links.length;i++){var link=$(links[i]);if(link.attr("href")===hash)return link}},resetClasses=function(links){for(var i=0;i<links.length;i++)$(links[i]).parent().removeClass(options.activeClass)},scrollArea="";return this.each(function(){for(var element=this,container=$(options.container),links=$(element).find("a"),i=0;i<links.length;i++){var link=links[i];$(link).on("click",function(e){var target=$(this).attr("href"),$target=$(target);if($target.length>0){var top=add($target.offset().top,options.offset);options.animate?$("html, body").animate({scrollTop:top},options.duration):window.scrollTo(0,top),e.preventDefault()}})}resetClasses(links);var elements=findElements(links),trackChanged=function(){for(var link,position={top:add($(this).scrollTop(),Math.abs(options.offset)),left:$(this).scrollLeft()},i=0;i<elements.length;i++){var current=elements[i];if(position.top>=current.top&&position.top<current.bottom){var hash=current.hash;if(link=findLink(links,hash)){options.onChange&&scrollArea!==hash&&(options.onChange(current.element,$(element),position),scrollArea=hash),options.replaceState&&history.replaceState({},"","/"+hash),resetClasses(links),link.parent().addClass(options.activeClass);break}}}!link&&"exit"!==scrollArea&&options.onExit&&(options.onExit($(element),position),resetClasses(links),scrollArea="exit",options.replaceState&&history.replaceState({},"","/"))};container.bind("scroll."+options.namespace,function(){trackChanged()}),$(document).ready(function(e){trackChanged()})})}})}(jQuery,window,document);
+
 document.addEventListener("DOMContentLoaded", function(){
 
     // Avoid `console` errors in browsers that lack a console.
@@ -293,4 +296,7 @@ document.addEventListener("DOMContentLoaded", function(){
         touch: false,
     });
 
-});
+    // Highlight page TOC links as user scrolls
+    $(".sticky .page__toc-nav ul").scrollspy();
+
+})

src/scss/quantecon-book-theme.scss

@@ -467,7 +467,10 @@ tt {
     width: 200px;
 
     .inner {
-      height: 100%;
+      &.sticky {
+        position: sticky;
+        top: 7rem;
+      }
     }
 
     &-header {
@@ -500,6 +503,13 @@ tt {
               opacity: 1;
             }
           }
+
+          &.active {
+            >a {
+              //color: $color-primary;
+              font-weight: bold;
+            }
+          }
         }
       }
       .logo {
@@ -532,7 +542,7 @@ tt {
     }
 
     .nav>.active>ul {
-      display: block;
+      // display: block;
     }
 
     .nav .nav {