From bb3abef358d45eedded63034e2609e5f0d39b959 Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Sat, 28 Jan 2023 16:45:38 +0100 Subject: [PATCH 1/7] ENH: Add breadcrumbs to article header --- src/pydata_sphinx_theme/__init__.py | 2 ++ .../styles/components/_breadcrumbs.scss | 34 +++++++++++++++++++ .../assets/styles/pydata-sphinx-theme.scss | 1 + .../assets/styles/variables/_icons.scss | 3 ++ .../components/breadcrumbs.html | 16 +++++++++ .../sections/header-article.html | 17 +++++++++- .../theme/pydata_sphinx_theme/theme.conf | 2 ++ 7 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 src/pydata_sphinx_theme/assets/styles/components/_breadcrumbs.scss create mode 100644 src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html diff --git a/src/pydata_sphinx_theme/__init__.py b/src/pydata_sphinx_theme/__init__.py index 6fd5debde..f10f234e8 100644 --- a/src/pydata_sphinx_theme/__init__.py +++ b/src/pydata_sphinx_theme/__init__.py @@ -201,6 +201,8 @@ def update_and_remove_templates(app, pagename, templatename, context, doctree): "theme_navbar_center", "theme_navbar_persistent", "theme_navbar_end", + "theme_article_header_start", + "theme_article_header_end", "theme_footer_items", "theme_secondary_sidebar_items", "theme_primary_sidebar_end", diff --git a/src/pydata_sphinx_theme/assets/styles/components/_breadcrumbs.scss b/src/pydata_sphinx_theme/assets/styles/components/_breadcrumbs.scss new file mode 100644 index 000000000..6e1be7b3b --- /dev/null +++ b/src/pydata_sphinx_theme/assets/styles/components/_breadcrumbs.scss @@ -0,0 +1,34 @@ +/** + * Breadcrumbs for parent pages meant for the article header + */ +ul.bd-breadcrumbs { + list-style: none; + padding-left: 0; + display: flex; + + li.breadcrumb-item { + display: flex; + align-items: center; + + // Items that aren't the home have a carot to the left + &:not(.breadcrumb-home):before { + font-family: "Font Awesome 6 Free"; + font-weight: 900; + font-size: 0.8rem; + content: var(--pst-breadcrumb-divider); + color: var(--pst-color-text-muted); + padding: 0 0.5rem; + } + + // Breadcrumb links should behave like navbar links + a { + color: var(--pst-color-text-muted); + transition: color 0.25s ease-out; + + &:hover { + color: var(--pst-color-primary); + text-decoration: none; + } + } + } +} diff --git a/src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss b/src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss index 5de6eea20..c8e8b94d4 100644 --- a/src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss +++ b/src/pydata_sphinx_theme/assets/styles/pydata-sphinx-theme.scss @@ -32,6 +32,7 @@ @import "./sections/sidebar-toggle"; // Re-usable components across the theme +@import "./components/breadcrumbs"; @import "./components/icon-links"; @import "./components/header/header-logo"; @import "./components/navbar-links"; diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss b/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss index 2a6b0456c..f7618ec4e 100644 --- a/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss +++ b/src/pydata_sphinx_theme/assets/styles/variables/_icons.scss @@ -23,4 +23,7 @@ html { --pst-icon-share: "\f064"; // fa-solid fa-share --pst-icon-bell: "\f0f3"; // fa-solid fa-bell --pst-icon-pencil: "\f303"; // fa-solid fa-pencil + + // Bootstrap icons + --pst-breadcrumb-divider: "\f105"; } diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html new file mode 100644 index 000000000..d9b2685b8 --- /dev/null +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html @@ -0,0 +1,16 @@ +{%- block breadcrumbs %} +{#- Only show breadcrumbs if we are nested under a top-level header #} +{# Otherwise the breadcrumbs would just be the "home" button -#} +{% if title and (parents | length >= 1) %} + +{% endif %} +{%- endblock %} diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header-article.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header-article.html index 00bdf56c4..7abad0e9e 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header-article.html +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header-article.html @@ -1 +1,16 @@ -{#- Intentionally empty in case others want to add something -#} +
+ {% if theme_article_header_start %} +
+ {% for item in theme_article_header_start %} +
{% include item %}
+ {% endfor %} +
+ {% endif %} + {% if theme_article_header_end %} +
+ {% for item in theme_article_header_end %} +
{% include item %}
+ {% endfor %} +
+ {% endif %} +
diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/theme.conf b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/theme.conf index 0df9b3f5e..c2b4ce1b1 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/theme.conf +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/theme.conf @@ -32,6 +32,8 @@ navbar_start = navbar-logo.html navbar_center = navbar-nav.html navbar_end = theme-switcher.html, navbar-icon-links.html navbar_persistent = search-button.html +article_header_start = breadcrumbs.html +article_header_end = header_links_before_dropdown = 5 primary_sidebar_end = sidebar-ethical-ads.html footer_items = copyright.html, theme-version.html, sphinx-version.html From 9e25a43c946a187ae5f8ee4bbacf0bedc88c0dff Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Wed, 8 Feb 2023 01:02:23 -0800 Subject: [PATCH 2/7] Update src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html Co-authored-by: Tania Allard --- .../theme/pydata_sphinx_theme/components/breadcrumbs.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html index d9b2685b8..d3215a324 100644 --- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html +++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html @@ -2,7 +2,7 @@ {#- Only show breadcrumbs if we are nested under a top-level header #} {# Otherwise the breadcrumbs would just be the "home" button -#} {% if title and (parents | length >= 1) %} -