dark mode compatibility and allow opt-out and customization

holoviz-dev · Oct 28, 2024 · 5f9f3a0 · 5f9f3a0
1 parent cf9f6ca
commit 5f9f3a0
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 90 deletions.
diff --git a/nbsite/_shared_static/hv-sidebar-dropdown.css b/nbsite/_shared_static/hv-sidebar-dropdown.css
@@ -1,30 +1,43 @@
 /* Sidebar styling for the HoloViz dropdown section */
-.hv-sidebar-dropdown {
+.hv-sb-dd {
   margin-bottom: 0.5em;
 }
 
-.hv-sidebar-dropdown .btn-group {
+.hv-sb-dd .btn-group {
   width: 100%;
 }
 
-.hv-sidebar-dropdown a.btn-light {
+.hv-sb-dd .hv-sb-dd-value {
   text-align: start;
   font-size: 0.9rem;
 }
 
-.hv-sidebar-dropdown .dropdown-toggle-split {
+.hv-sb-dd .btn {
+  background-color: var(--pst-color-surface);
+  color: var(--pst-color-text-base);
+}
+
+.hv-sb-dd a.btn:hover {
+  color: var(--pst-color-link-hover);
+  text-decoration: underline;
+  text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
+}
+
+.hv-sb-dd .dropdown-toggle-split {
   border-left: solid 1px lightgray;
 }
 
-.hv-sidebar-dropdown .dropdown-menu {
+.hv-sb-dd .dropdown-menu {
   width: 100%;
+  background-color: var(--pst-color-surface);
+  color: var(--pst-color-text-base);
 }
 
-.hv-sidebar-dropdown .dropdown-item {
+.hv-sb-dd .dropdown-item {
   font-size: 0.8rem;
 }
 
-.hv-sidebar-dropdown .hv-icon {
+.hv-sb-dd .hv-icon {
   font-size: 0.75em;
   margin-left: 0.3em;
 }
diff --git a/nbsite/_shared_templates/hv-sidebar-dropdown.html b/nbsite/_shared_templates/hv-sidebar-dropdown.html
@@ -1,77 +1,29 @@
-{% set hv_library_mapping = {
-  'panel': {
-    'text': 'Panel',
-    'url': 'https://param.holoviz.org',
-    'title': 'Assembling objects from many different libraries into a layout or app, whether in a Jupyter notebook or in a standalone servable dashboard',
-  },
-  'hvplot': {
-    'text': 'hvPlot',
-    'url': 'https://hvplot.holoviz.org',
-    'title': 'Quickly return interactive HoloViews, GeoViews, or Panel objects from Pandas, Xarray, or other data structures',
-  },
-  'holoviews': {
-    'text': 'HoloViews',
-    'url': 'https://holoviews.org',
-    'title': 'Declarative objects for instantly visualizable data, building Bokeh plots from convenient high-level specifications',
-  },
-  'geoviews': {
-    'text': 'GeoViews',
-    'url': 'https://geoviews.org',
-    'title': 'Visualizable geographic data that that can be mixed and matched with HoloViews objects',
-  },
-  'datashader': {
-    'text': 'Datashader',
-    'url': 'https://datashader.org',
-    'title': 'Rasterizing huge datasets quickly as fixed-size images',
-  },
-  'param': {
-    'text': 'Param',
-    'url': 'https://param.holoviz.org',
-    'title': 'Make your Python code clearer and more reliable by declaring Parameters',
-  },
-  'lumen': {
-    'text': 'Lumen',
-    'url': 'https://lumen.holoviz.org',
-    'title': 'Framework for visual analytics that allows users to build data-driven dashboards from a simple YAML specification',
-  },
-  'colorcet': {
-    'text': 'Colorcet',
-    'url': 'https://colorcet.holoviz.org',
-    'title': 'A wide range of perceptually uniform continuous colormaps and perceptually based categorical color sets for use with the other libraries',
-  },
-} %}
-
-{% set hv_others_mapping = {
-  'examples': {
-    'text': 'Examples Gallery',
-    'url': 'https://examples.holoviz.org',
-    'title': ' Visualization-focused examples using HoloViz for specific topics ',
-  },
-  'blog': {
-    'text': 'Blog',
-    'url': 'https://blog.holoviz.org',
-    'title': 'HoloViz blog',
-  },
-} %}
-
-<div class="hv-sidebar-dropdown">
+{% if hv_sidebar_dropdown %}
+<div class="hv-sb-dd">
   <div class="btn-group">
-    <a href="https://holoviz.org" class="btn btn-light" target="_blank">HoloViz.org<i class="fa fa-external-link hv-icon" aria-hidden="true"></i></a>
-    <button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    {% if 'href' in hv_sidebar_dropdown['dropdown_value'] %}
+    <a href="{{ hv_sidebar_dropdown['dropdown_value']['href'] }}" class="btn hv-sb-dd-value" target="_blank">{{ hv_sidebar_dropdown['dropdown_value']['text'] }}<i class="fa fa-external-link hv-icon" aria-hidden="true"></i></a>
+    {% else %}
+    <span class="btn hv-sb-dd-value">{{ hv_sidebar_dropdown['dropdown_value']['text'] }}</span>
+    {% endif %}
+    <button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden"></span>
     </button>
-    <ul class="dropdown-menu bg-light">
-      {% for project_name, project_opts in hv_library_mapping.items() %}
+    <ul class="dropdown-menu">
+      {% for project_name, project_opts in hv_sidebar_dropdown['libraries'].items() %}
       {% if project_name | lower not in project | lower %}
         <li><a class="dropdown-item" href="{{ project_opts['url'] }}" target="_blank" title="{{ project_opts['title'] }}">{{ project_opts['text'] }}<i class="fa fa-external-link hv-icon" aria-hidden="true"></i></a></li>
       {% endif %}
       {% endfor %}
-        <li><hr class="dropdown-divider"></li>
-      {% for project_name, project_opts in hv_others_mapping.items() %}
+      {% if hv_sidebar_dropdown['others'] %}
+      <li><hr class="dropdown-divider"></li>
+      {% for project_name, project_opts in hv_sidebar_dropdown['others'].items() %}
       {% if project_name | lower not in project | lower %}
-        <li><a class="dropdown-item" href="{{ project_opts['url'] }}" target="_blank" title="{{ project_opts['title'] }}">{{ project_opts['text'] }}<i class="fa fa-external-link hv-icon" aria-hidden="true"></i></a></li>
+      <li><a class="dropdown-item" href="{{ project_opts['url'] }}" target="_blank" title="{{ project_opts['title'] }}">{{ project_opts['text'] }}<i class="fa fa-external-link hv-icon" aria-hidden="true"></i></a></li>
       {% endif %}
       {% endfor %}
+      {% endif %}
     </ul>
   </div>
 </div>
+{% endif %}
diff --git a/nbsite/shared_conf.py b/nbsite/shared_conf.py
@@ -24,24 +24,6 @@ def holoviz_icon_white(cur_file):
     return str(icon_path)
 
 
-def setup(app):
-    try:
-        from nbsite.paramdoc import param_formatter, param_skip
-        app.connect('autodoc-process-docstring', param_formatter)
-        app.connect('autodoc-skip-member', param_skip)
-    except ImportError:
-        print('no param_formatter (no param?)')
-
-    nbbuild.setup(app)
-    app.connect("builder-inited", remove_mystnb_static)
-
-def remove_mystnb_static(app):
-    # Ensure our myst_nb.css is loaded by removing myst_nb static_path
-    # from config
-    app.config.html_static_path = [
-        p for p in app.config.html_static_path if 'myst_nb' not in p
-    ]
-
 extensions = [
     'myst_nb',
     'sphinx_design',
@@ -208,3 +190,94 @@ def linkcode_resolve(domain, info):
         return f"{GITHUB_BASE_URL}{package}/blob/main/{package}/{fn}{linespec}"
     else:
         return f"{GITHUB_BASE_URL}{package}/blob/v{pver}/{package}/{fn}{linespec}"
+
+
+nbsite_hv_sidebar_dropdown = {
+    'dropdown_value': {
+        'href': 'https://holoviz.org',
+        'text': 'HoloViz.org',
+    },
+    'libraries': {
+        'panel': {
+            'text': 'Panel',
+            'url': 'https://param.holoviz.org',
+            'title': 'Assembling objects from many different libraries into a layout or app, whether in a Jupyter notebook or in a standalone servable dashboard',
+        },
+        'hvplot': {
+            'text': 'hvPlot',
+            'url': 'https://hvplot.holoviz.org',
+            'title': 'Quickly return interactive HoloViews, GeoViews, or Panel objects from Pandas, Xarray, or other data structures',
+        },
+        'holoviews': {
+            'text': 'HoloViews',
+            'url': 'https://holoviews.org',
+            'title': 'Declarative objects for instantly visualizable data, building Bokeh plots from convenient high-level specifications',
+        },
+        'geoviews': {
+            'text': 'GeoViews',
+            'url': 'https://geoviews.org',
+            'title': 'Visualizable geographic data that that can be mixed and matched with HoloViews objects',
+        },
+        'datashader': {
+            'text': 'Datashader',
+            'url': 'https://datashader.org',
+            'title': 'Rasterizing huge datasets quickly as fixed-size images',
+        },
+        'param': {
+            'text': 'Param',
+            'url': 'https://param.holoviz.org',
+            'title': 'Make your Python code clearer and more reliable by declaring Parameters',
+        },
+        'lumen': {
+            'text': 'Lumen',
+            'url': 'https://lumen.holoviz.org',
+            'title': 'Framework for visual analytics that allows users to build data-driven dashboards from a simple YAML specification',
+        },
+        'colorcet': {
+            'text': 'Colorcet',
+            'url': 'https://colorcet.holoviz.org',
+            'title': 'A wide range of perceptually uniform continuous colormaps and perceptually based categorical color sets for use with the other libraries',
+        },
+    },
+    'others': {
+        'examples': {
+            'text': 'Examples Gallery',
+            'url': 'https://examples.holoviz.org',
+            'title': ' Visualization-focused examples using HoloViz for specific topics ',
+        },
+        'blog': {
+            'text': 'Blog',
+            'url': 'https://blog.holoviz.org',
+            'title': 'HoloViz blog',
+        },
+    },
+}
+
+
+def remove_mystnb_static(app):
+    # Ensure our myst_nb.css is loaded by removing myst_nb static_path
+    # from config
+    app.config.html_static_path = [
+        p for p in app.config.html_static_path if 'myst_nb' not in p
+    ]
+
+
+def add_hv_sidebar_dropdown_context(app, pagename, templatename, context, doctree, *args) -> None:
+    # Inject it in the context to make it available to the template namespace.s
+    context['hv_sidebar_dropdown'] = app.config.nbsite_hv_sidebar_dropdown
+
+
+def setup(app):
+    try:
+        from nbsite.paramdoc import param_formatter, param_skip
+        app.connect('autodoc-process-docstring', param_formatter)
+        app.connect('autodoc-skip-member', param_skip)
+    except ImportError:
+        print('no param_formatter (no param?)')
+
+    nbbuild.setup(app)
+    app.connect("builder-inited", remove_mystnb_static)
+
+    # hv_sidebar_dropdown
+    app.add_config_value('nbsite_hv_sidebar_dropdown', {}, 'html')
+    app.connect("html-page-context", add_hv_sidebar_dropdown_context)
diff --git a/site/doc/conf.py b/site/doc/conf.py
@@ -69,7 +69,6 @@
             "icon": "fab fa-discourse",
         },
     ],
-    "navbar_end": ["navbar-icon-links"],
     "pygments_light_style": "material",
     "pygments_dark_style": "material",
     'secondary_sidebar_items': [