From 5f9f3a089dd008153f3e9f3a1557c6a46dca1042 Mon Sep 17 00:00:00 2001 From: maximlt Date: Mon, 28 Oct 2024 09:03:11 +0100 Subject: [PATCH] dark mode compatibility and allow opt-out and customization --- nbsite/_shared_static/hv-sidebar-dropdown.css | 27 +++-- .../hv-sidebar-dropdown.html | 80 +++---------- nbsite/shared_conf.py | 109 +++++++++++++++--- site/doc/conf.py | 1 - 4 files changed, 127 insertions(+), 90 deletions(-) diff --git a/nbsite/_shared_static/hv-sidebar-dropdown.css b/nbsite/_shared_static/hv-sidebar-dropdown.css index 523a573..8951972 100644 --- 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 index 9229ab1..944c9a9 100644 --- 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', - }, -} %} - -
+{% if hv_sidebar_dropdown %} +
- HoloViz.org - -
    - {% for project_name, project_opts in hv_library_mapping.items() %} +
      + {% for project_name, project_opts in hv_sidebar_dropdown['libraries'].items() %} {% if project_name | lower not in project | lower %}
    • {{ project_opts['text'] }}
      • {% endif %} {% endfor %} -
      • - {% for project_name, project_opts in hv_others_mapping.items() %} + {% if hv_sidebar_dropdown['others'] %} +
      • + {% for project_name, project_opts in hv_sidebar_dropdown['others'].items() %} {% if project_name | lower not in project | lower %} -
    • {{ project_opts['text'] }}
      • +
    • {{ project_opts['text'] }}
      • {% endif %} {% endfor %} + {% endif %}
+{% endif %} diff --git a/nbsite/shared_conf.py b/nbsite/shared_conf.py index c00eea2..831777f 100644 --- 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 index 8ee84b7..50e15f3 100644 --- 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': [