From 33fb96b1330f1b7f11e41aaccf816772aff6f29c Mon Sep 17 00:00:00 2001 From: gabalafou Date: Wed, 13 Dec 2023 11:08:58 -0500 Subject: [PATCH] Header nav link styles (focus, hover, current) (#1545) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Implement header nav link styles * add comments * add comment * changes from implementation review * Consistent focus ring (first pass) (#1549) * wip * Style focus state in header nav * update focus ring style on all focussable elements * simplify * fix links in mobile sidebar overlay * put focus rings around a few more focusable elements * polish * update comment * review * better align focus ring on collapsible admonitions * comment and simplify sphinx-togglebutton focus ring * make css override more explicit * Fix SD link-card focus ring and on homepage, bring links inside card * Update docs/index.md --------- Co-authored-by: Daniel McCloy * Resolve current sidebar link notch and focus ring (#1561) * Fix sidebar current notch * focus-ring-radius * missed a spot 0.125rem * keep focus ring on top * Restyle Sphinx Design tabs (#1555) * restyle sphinx design tabs * increase panel border radius * increase line height, zero padding-y * use shadow variable * Update src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss * Update src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss * Fix tabbed panel colors (#1567) * update feature focus (#1569) * docs: add instructions for custom SVG icons (#1490) * docs: add instructions for custom SVG icons * docs: minor tweaks in SVG icon instructions * docs: some more tweaks to SVG icon instructions * Update docs/user_guide/header-links.rst Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com> * Change literalinclude to code-block in header links * Update docs/user_guide/header-links.rst Co-authored-by: Daniel McCloy * Update docs/user_guide/header-links.rst * Update docs/user_guide/header-links.rst * Update docs/user_guide/header-links.rst * Update docs/user_guide/header-links.rst * Update docs/user_guide/header-links.rst --------- Co-authored-by: tgresavage Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com> Co-authored-by: Daniel McCloy * fix: make table background transparent (#1546) * fix: make table background transparent * fix: make table background transparent * fix: add color-theme option to html tag (#1536) * Silence warnings (#1542) * avoid webpack warning during asset compile * avoid frozen modules warning during import * try to make jupyterlite quieter * add config option to silence warnings * fix tests * add docs * hide conditional warning logic in utils * bump: 0.14.2 → 0.14.3 * chore: back to dev * docs: add the list of component using a directive (#1476) * fix: create the component list automatically * fix: read the first comment as documentation * docs: add disclaimer on .html suffix * docs: document every component with a simple one liner * fix: use regex to identify comments * update component branch (#15) * Change default logo alt text (#1472) * Default logo alt text only if no extra text * change default logo * use docstitle as default logo alt text * update docs to reflect change * Apply suggestions from code review Co-authored-by: Daniel McCloy * use string formatting operator * Update docs/user_guide/branding.rst * docs fixes * Update docs/user_guide/branding.rst * add test * Update pyproject.toml * revert to original --------- Co-authored-by: Daniel McCloy Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com> * chore(i18n) catalan (#1488) i18n: Translate sphinx.po in ca 100% translated source file: 'sphinx.po' on 'ca'. Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> * Build(deps): Bump postcss and css-loader (#1494) Bumps [postcss](https://github.com/postcss/postcss) to 8.4.31 and updates ancestor dependency [css-loader](https://github.com/webpack-contrib/css-loader). These dependencies need to be updated together. Updates `postcss` from 8.4.21 to 8.4.31 - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/8.4.21...8.4.31) Updates `css-loader` from 3.6.0 to 6.8.1 - [Release notes](https://github.com/webpack-contrib/css-loader/releases) - [Changelog](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md) - [Commits](https://github.com/webpack-contrib/css-loader/compare/v3.6.0...v6.8.1) --- updated-dependencies: - dependency-name: postcss dependency-type: indirect - dependency-name: css-loader dependency-type: direct:development ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Revert "Build(deps): Bump postcss and css-loader" (#1509) Revert "Build(deps): Bump postcss and css-loader (#1494)" This reverts commit 185a37aa36820f77bffa4c87a772092e9e7cc380. * Update pst docs buttons (#1502) * call them button-links * copy edit * docs: link back to GitHub from PyPI metadata (#1504) This will add a "Source" link in the PyPI page. * navigation_with_keys = False (#1503) * navigation_with_keys = False * None -> False * Apply suggestions from code review --------- Co-authored-by: Daniel McCloy * fix: convert "stable" to actual version number (#1512) * convert "stable" to actual version number * fix tests re: navigation_with_keys * try bumping autoapi * refactor: use nbsphinx as the default execution lib (#1482) * refactor: use nbsphinx as the default execution lib * add nbstripout to the pre-commits' * add pandoc to the readthedocs deps * refactor: clean the notebook * move the example to the correct folder * fix: solve link issue * install pandoc in the test environment * fix: display of large table in executed cells * avoid Userwarnings from matplotlib * hide the matplotlib wrning management cell * Update readthedocs.yml * build: use pandoc_binary to install pandoc * docs: add reference to pandoc in the setup * update docs * remove pypandoc_binary * Update pyproject.toml Co-authored-by: gabalafou * ci: use back setup-pandoc * Trigger CI build --------- Co-authored-by: Gabriel Fouasnon * BUG - Clear alt_text in conf.py (#1471) * comment out alt_text in conf.py * set alt_text to empty string * remove alt_text from conf.py * fix: use 12rambau fork until it's merged with nikeee repo (#1517) * deps: drop support for Sphinx 5 (#1516) * remove ref to myst-nb * update minimal supported version of sphinx * Fix: (webpack.config.js) css-loader API change (#1508) * Fix: (webpack.config.js) css-loader API change The build was broken in /. This change fixes the build, and it seems to be in accordance with the current API as described at . Closes . * dedup * restore version bump --------- Co-authored-by: Daniel McCloy * Fix duplicate HTML IDs (#1425) * Fix duplicate HTML IDs * fix tests * Do not animate the version admonitions colors. (#1424) Otherwise a delay has to be added to the accessibility color contrast checks, to wait for the colors to fully transition. * BUG - Remove redundant ARIA in breadcrumb navigation (#1426) * style(i18n): French Typo fixed (#1430) * Add the ability to add a center section to the footer (#1432) * Add a center section for the footer * Add docs for footer_center * Add a test site for the center footer * test it in our own docs * remove new test site * add footer test --------- Co-authored-by: Daniel McCloy * Build(deps): Bump actions/checkout from 3 to 4 (#1433) Bumps [actions/checkout](https://github.com/actions/checkout) from 3 to 4. - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](https://github.com/actions/checkout/compare/v3...v4) --- updated-dependencies: - dependency-name: actions/checkout dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Add dropdown_text argument to generate_header_nav_html (#1423) * Add dropdown_text argument to generate_header_nav_html * Add a test, fix typo in theme.conf and remove header_dropdown_text from docs/conf.py * fixed? --------- Co-authored-by: Daniel McCloy * fix: rollback ref and Id changes (#1438) * bump: version 0.13.3 → 0.14.0 (#1440) * bump version * update version switcher * back to dev * fix: change the z-index of the dropdown (#1442) In order to be on top of the primary sidebar on small screens. * fix: set the same background for dark/light (#1443) * fix: set the same background for dark/light et the same background color for all state of the search field. It is currently only applied when hovered * fix: wrong css selector * Update src/pydata_sphinx_theme/assets/styles/components/_search.scss * Update src/pydata_sphinx_theme/assets/styles/components/_search.scss * Fix duplicate HTML IDs * fix tests * unique_html_id * backwards-compat generate_header_nav_html * feedback review * update fixture * ughhhh...caching * code cleanup * fix test snapshot * put comment inside def --------- Signed-off-by: dependabot[bot] Co-authored-by: Denis Bitouzé Co-authored-by: Stuart Mumford Co-authored-by: Daniel McCloy Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Alenka Frim Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com> * chore: build the devcontainer automatically in codespace (#1483) * chore: build the devcontainer automaticallyin codespace * refactor: lint * add pandoc to the environment * Fix font color in search input box (#1524) * Fix color * Use --pst-color-text-base * docs: add DecentralChain (#1528) Co-authored-by: jourlez * Updates for file src/pydata_sphinx_theme/locale/en/LC_MESSAGES/sphinx.po in ru [Manual Sync] (#1527) i18n: Translate sphinx.po in ru [Manual Sync] 96% of minimum 20% translated source file: 'sphinx.po' on 'ru'. Sync of partially translated files: untranslated content is included with an empty translation or source language content depending on file format Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> * ignore transient errors in windows build CI (#1520) * use warning list * clean up notebook * refactor to pass on all platforms? * simplify * fix logic * iterate backwards * fix plaform detection? also don't log unnecessarily * ignore empty string warnings * remove notebook metawarning * Revert "remove notebook metawarning" This reverts commit 42f46723eb9eeea7603efb91fbfb6bdfa1de28b3. * try again * debug the mysterious empty warning * escape color codes * import * triage by intermittency, not by platform; better var names * simplify * fix list.remove * undo what I broke * Update tests/utils/check_warnings.py * refactor: remove extention on component set-up (#1529) * use event.key for search shortcut (#1525) * use event.key for search shortcut * suggestions from review * caps lock --------- Signed-off-by: dependabot[bot] Co-authored-by: gabalafou Co-authored-by: Daniel McCloy Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ned Batchelder Co-authored-by: Adam Porter Co-authored-by: Denis Bitouzé Co-authored-by: Stuart Mumford Co-authored-by: Alenka Frim Co-authored-by: Harutaka Kawamura Co-authored-by: jourlez * fix: use a directive instead of raw html * fix: make links externals * fix: set reference in paragraphs * fix: missing parameter * fix: use the stem for the component name * refactor: remove never used variables * standardize component descriptions --------- Signed-off-by: dependabot[bot] Co-authored-by: gabalafou Co-authored-by: Daniel McCloy Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ned Batchelder Co-authored-by: Adam Porter Co-authored-by: Denis Bitouzé Co-authored-by: Stuart Mumford Co-authored-by: Alenka Frim Co-authored-by: Harutaka Kawamura Co-authored-by: jourlez * fix: primer link in docs (#1556) * docs: add data-content (#1559) Reproduce the change made in Sphinx 7 https://github.com/sphinx-doc/sphinx/commit/8e730ae303ae686705ea12f44ef11da926a87cf5#diff-a5066e933cbf65adc46e0d1ab9a0b44e0a53ca64cc95dca7e6aa902aed6bd468R105 * Obviate background-from-color-variable (#1558) * Obviate background-from-color-variable * backwards compatibility --------- Signed-off-by: dependabot[bot] Co-authored-by: gresavage Co-authored-by: tgresavage Co-authored-by: Daniel McCloy Co-authored-by: gabalafou Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ned Batchelder Co-authored-by: Adam Porter Co-authored-by: Denis Bitouzé Co-authored-by: Stuart Mumford Co-authored-by: Alenka Frim Co-authored-by: Harutaka Kawamura Co-authored-by: jourlez Co-authored-by: Chris Holdgraf * simplify (do not change state of hover) * fix icon links * forgot to add pydata-icon.js * Restore hover styles to sidebar toggles --------- Signed-off-by: dependabot[bot] Co-authored-by: Daniel McCloy Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com> Co-authored-by: gresavage Co-authored-by: tgresavage Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Ned Batchelder Co-authored-by: Adam Porter Co-authored-by: Denis Bitouzé Co-authored-by: Stuart Mumford Co-authored-by: Alenka Frim Co-authored-by: Harutaka Kawamura Co-authored-by: jourlez Co-authored-by: Chris Holdgraf --- docs/_static/pydata-icon.js | 16 ++++ docs/_static/pydata-logo.png | Bin 1900 -> 0 bytes docs/conf.py | 6 +- .../assets/styles/abstracts/_links.scss | 80 ++++++++++++++++++ .../assets/styles/components/_icon-links.scss | 9 ++ .../assets/styles/components/_search.scss | 2 +- .../styles/components/_switcher-version.scss | 9 +- .../assets/styles/sections/_header.scss | 19 +++-- src/pydata_sphinx_theme/toctree.py | 21 +++-- 9 files changed, 139 insertions(+), 23 deletions(-) create mode 100644 docs/_static/pydata-icon.js delete mode 100644 docs/_static/pydata-logo.png diff --git a/docs/_static/pydata-icon.js b/docs/_static/pydata-icon.js new file mode 100644 index 000000000..d111ec834 --- /dev/null +++ b/docs/_static/pydata-icon.js @@ -0,0 +1,16 @@ +/******************************************************************************* + * Set a custom icon for PyData + */ +FontAwesome.library.add( + (faListOldStyle = { + prefix: "fa-custom", + iconName: "pydata", + icon: [ + 24, // viewBox width + 24, // viewBox height + [], // ligature + "e002", // unicode codepoint - private use area + "M12.1,17.8v5.8l-5-2.9v-5.8L12.1,17.8z M12.1,12v5.8l-5-2.9V9.1L12.1,12z M17,9.1L12.1,12v5.8l4.9-2.9V9.1z M12.1,6.2L7,9.1l5,2.9L17,9.1L12.1,6.2z M17,9.1V3.3l-4.9-2.8v5.8L17,9.1z", + ], + }) +); diff --git a/docs/_static/pydata-logo.png b/docs/_static/pydata-logo.png deleted file mode 100644 index bfdf323b971b3e0852ff1d8189c8d08c88557cce..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1900 zcmV-y2b1`TP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGqB>(^xB>_oNB=7(L2LVY$K~!i%%~@$| zR81kWGS^pvYEBYlMJd5s`?IT@XTnNJLOT)D)vp8UZ6J zHVDQ9E&h;Q5J8Ya_q{XiOlLaNnfE;R&3jUY>CpE&uka;b=id9yUCuk-+{RS#sK5)Nicmn16)fD zG#U-)k7&_-XxV^j(hc%Lr-eSIA2>@rnzm)Z^jRKwd#l$zO4uXP5qHxQh$ z9E}?XqUFHrqCxj0*CW!p3p6ow0njB3Mtk`=)UQcI%Qwrw;>X^u67-O?2vlU%J4i9m z1{k1E7zAhODb&3c4abd>LO;3eVQFU`~y4cz>kj3mTnRkcay#EiaVd zZ7g5xA!*SHJ*3nbC3qXl7kflnyu%8<-FoLM_cMA#T0xo5!!RrduA09AmxJ1GOUaWG zyp83HDoIOR4Z%{h5zU1Q5jG_saa*gQ?>iLE+H2sP4zi;S_(7GH`waos;*U|kHU;*} zMQ~PKLjCGQn2&Bkc+PIbZK;4hJ`JvhYaoxrp524r(|GIe1+X650&TBoXoAAURyTNu z4K8CTLME<4uklO4a~wy{%d0t~iO`(gQU zJ!QI)q5~ZS?*ZOnA%`jvN{bE|yBIE06`H@C3upORgy(*OpvPtia*+e&jxY()2fJ&S z4=;x%AXsq1mjj;QDFU3i4xv*vBRK0NILgj~r<2_k05UGci{DUaLtv%;_eOFGF$7w zx0w->w+AsR&)}jf8B-R$f!|J@6>a1}k+d$?nvnbTuLz`DpObc;ol{3++(Xeo`Drxl zUkDAI5!%o=7Cy0u1Rfm8h{wp)^dj*@ix$!T4a>IAp{a z;JR=K#&1{AQyyWHH^A`tY&fX4@x9$Rf8{C?)w`y_LQN;HNXs(K%x@hRj&*oDc|gx{srk$2g5 ziEf8I=e-vdNsCPYxa*=N%~7yTQsGNjYb`+kp|8894sMUc8b$O=$O=vny04 zEs8?O`meC!=xNN)dKe`uvN3s3GX803fz9a>tvZ7S?M^3dR#YN=Kz|(j{3E>fa*pss zT9gtfk`~)e)8ixXM@0jY-#v(RKcB;zahWJxnT@gid*fQ88Eq~OTDJF!V0~TGR#sJw zetnZrRIm%n=g;|nOoop0$fe=~k(CW}il@g$;6zCcQnww%_Ts;gKXDjtt(b`sNzu4c zM~Nb3Kpds^mDRO~2n$2uj;&a?WC0zH`n$&N4*i;IG0D|X;<)Uo3@jNr7!HzIaalc* z`Bn;}9%=nj1Uojdzu~v+we5Gaxs`z$kA z=~^pPIwiAXCJY_NP=m6i#h4x+i9eUVfS>>^%1y0saoin}lE`eyB>|pe_?wEP#X2U_ z_F6P&A`az^rF*&tRdf)t|D@b6$d;Bw2}62EX*& mctVQM$5~5U&2=E`uwdr!olnl@S0000 .nav-link, or X > .dropdown-toggle. + +It also assumes X.current is how the app annotates which item in the header nav +corresponds to the section in the docs that the user is currently reading. +*/ +@mixin header-link { + // Target the child and not the parent because we want the underline in the + // mobile sidebar to only span the width of the text not the entire row/line. + > .nav-link, + > .dropdown-toggle { + border-radius: 2px; + color: var(--pst-color-text-muted); + font-weight: 700; + + &:focus-visible { + box-shadow: none; // override Bootstrap + outline: 3px solid var(--pst-color-accent); + outline-offset: 3px; + } + } + + > .nav-link { + // Set up pseudo-element for hover and current states below. + position: relative; + &::before { + content: ""; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: transparent; + } + + // Underline on hover. + // - Don't use text-decoration because it will wrap across two lines if + // the link text also wraps across two lines. + // - Use pseudo-element in order to avoid the border-radius values + // rounding the edges of the underline. (And since a header link can be + // both focused and hovered at the same time and we want the focus ring + // but not the underline to be rounded, we cannot use a box shadow or + // bottom border link element to create the underline, or else it will + // be rounded and if we apply border-radius 0 then the hovered focus + // ring would go from rounded to sharp. So we have to use the + // pseudo-element.) + &:hover { + color: var(--pst-color-secondary); + text-decoration: none; // override the link-style-hover mixin + &::before { + border-bottom: 3px solid var(--pst-color-secondary); + } + } + } + + > .dropdown-toggle { + &:hover { + text-decoration: none; + box-shadow: 0 0 0 $focus-ring-width var(--pst-color-link-hover); // purple focus ring + // Brighten the text on hover (muted -> base) + color: var(--pst-color-text-base); + } + } + + &.current { + > .nav-link { + color: var(--pst-color-primary); + + // Underline the current navbar item + &::before { + border-bottom: 3px solid var(--pst-color-primary); + } + } + } +} diff --git a/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss b/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss index 86d5ef8aa..50a180b18 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_icon-links.scss @@ -13,6 +13,9 @@ padding-left: 0; padding-right: 0; @include icon-navbar-hover; + &:focus { + color: inherit; + } } // Spacing and centering @@ -50,4 +53,10 @@ height: 1.5em; border-radius: 0.2rem; } + + .fa-pydata { + stroke: var(--pst-color-background); + stroke-linejoin: round; + stroke-width: 0.35; + } } diff --git a/src/pydata_sphinx_theme/assets/styles/components/_search.scss b/src/pydata_sphinx_theme/assets/styles/components/_search.scss index 891a19701..46cf8bb1a 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_search.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_search.scss @@ -149,7 +149,7 @@ background-color: var(--pst-color-surface); &:hover { - border: 2px solid var(--pst-color-link-hover); + box-shadow: 0 0 0 $focus-ring-width var(--pst-color-link-hover); } &:focus-visible { diff --git a/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss b/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss index 7d1f5f957..d6281bf51 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss @@ -6,12 +6,17 @@ button.btn.version-switcher__button { @include media-breakpoint-up($breakpoint-sidebar-primary) { margin-bottom: unset; } - - @include link-style-hover; + &:hover { + box-shadow: 0 0 0 $focus-ring-width var(--pst-color-secondary); + border-color: transparent; + } &:active { color: var(--pst-color-text-base); border-color: var(--pst-color-border); } + &:focus-visible { + border-color: transparent; + } } .version-switcher__menu { diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss index a04d04598..251ec607d 100644 --- a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss +++ b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss @@ -84,23 +84,28 @@ @include media-breakpoint-up($breakpoint-sidebar-primary) { // Center align on wide screens so the dropdown button is centered properly - align-items: center; + align-items: baseline; } - li a.nav-link { - @include link-style-text; + li.pst-header-nav-item { + margin-inline: 5px; // breathing room so hover, focus styles do not overlap + &:first-child { + margin-inline-start: 0; + } + &:last-child { + margin-inline-end: 0; + } + @include header-link; } - // Current page is always underlined in the navbar - > .current > .nav-link { - @include link-navbar-current; + li a.nav-link.dropdown-item { + @include link-style-text; } // Dropdowns for the extra links .dropdown { button { display: unset; - color: var(--pst-color-text-muted); border: none; @include link-style-hover; } diff --git a/src/pydata_sphinx_theme/toctree.py b/src/pydata_sphinx_theme/toctree.py index 94a0d9b48..629b62e72 100644 --- a/src/pydata_sphinx_theme/toctree.py +++ b/src/pydata_sphinx_theme/toctree.py @@ -91,7 +91,7 @@ def generate_header_nav_before_dropdown(n_links_before_dropdown): page = toc.attributes["parent"] if page == "self" else page # If this is the active ancestor page, add a class so we highlight it - current = " current active" if page == active_header_page else "" + current = "current active" if page == active_header_page else "" # sanitize page title for use in the html output if needed if title is None: @@ -108,14 +108,14 @@ def generate_header_nav_before_dropdown(n_links_before_dropdown): # If it's an absolute one then we use the external class and # the complete url. is_absolute = bool(urlparse(page).netloc) - link_status = "external" if is_absolute else "internal" + link_status = "nav-external" if is_absolute else "nav-internal" link_href = page if is_absolute else context["pathto"](page) # create the html output links_html.append( f""" -
  • - +
  • + {title}
    • @@ -126,7 +126,7 @@ def generate_header_nav_before_dropdown(n_links_before_dropdown): for external_link in context["theme_external_links"]: links_html.append( f""" -
  • +
  • { external_link["name"] } @@ -140,9 +140,12 @@ def generate_header_nav_before_dropdown(n_links_before_dropdown): # Wrap the final few header items in a "more" dropdown links_dropdown = [ - # 🐲 brittle code, relies on the assumption that the code above - # gives each link in the nav a `nav-link` CSS class - html.replace("nav-link", "nav-link dropdown-item") + # 🐲 brittle code because it relies on the code above to build the HTML in a particular way + html.replace("nav-link", "nav-link dropdown-item").replace( + # Prevents the header-link mixin from applying to links within the dropdown + "pst-header-nav-item", + "", + ) for html in links_html[n_links_before_dropdown:] ] @@ -177,7 +180,7 @@ def generate_header_nav_html( dropdown_id = unique_html_id("pst-nav-more-links") links_dropdown_html = "\n".join(links_dropdown) out += f""" -
  • +