MAINT: Drop jQuery and use Bootstrap 5

[12rambau]

Fix #953, Fix #764

for bootstrap I've followed the instructions from: https://getbootstrap.com/docs/5.0/migration/

which lead to the following changes:

• include bootstrap 5.1 to packages
• update to popperjs/core (popper v2)
• change all occurences of left (res l) by start(res. s) and right (res. r) by end (res. e)
• check all the brekpoints as they changed how they work
• update all toggle like data-* by data-bs-*

and for jquery: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#network-requests-with-get-or-ajax

which lead to the following changes:

• create a function to mimic jquery .ready()
• replace $.ajax, $.getJSONand $.get by the generic fetch
• replace jquery selectors and manipulators ($().each etc...)
• drop jquery everywhere

It's a sensitive change as I'm modifying pretty much every js of theme so I tagged most of the regular maintainers. Let me know what you think and your suggestions. Also note that the package-lock.json ended up being a lot modified, if you know a way to cherry-pick the changes I'm happy to change it.

[drammock]

I know this is WIP, just a reminder that we will need to get these $(...) too:

pydata-sphinx-theme/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

Line 101 in 5133e4a

$(window).on("activate.bs.scrollspy", function () {

pydata-sphinx-theme/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

Line 330 in 5133e4a

$(".version-switcher__menu").append(node);

pydata-sphinx-theme/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

Lines 383 to 387 in 5133e4a

	$(addModeListener);
	$(scrollToActive);
	$(addTOCInteractivity);
	$(setupSearchButtons);
	$(initRTDObserver);

pydata-sphinx-theme/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/announcement.html

Lines 6 to 7 in 5133e4a

	$.get("{{ theme_announcement }}", success=(data)=>{
	$("#header-announcement").html(`<div class="bd-header-announcement__content">${data}</div>`);

[12rambau]

I know this is WIP, just a reminder that we will need to get these $(...) too:

Yep I'm working on it, I just want to check first if the bootstrap breaking changes are all tackled. @drammock do you know a way to edit package-lock.json but only the edited dependencies? like in https://github.com/pydata/pydata-sphinx-theme/pull/868/files. Currently, I run npm install --package-lock-only but it rewrites everything.

[drammock]

do you know a way to edit package-lock.json but only the edited dependencies?

I think with #868 it worked that way because FontAwesome doesn't have any dependencies. AFAIK npm update package_name will always update that package's dependencies too; there is no equivalent to pip install --no-deps package_name (or if there is, I don't know about it)

[drammock]

I love that package-lock.json has gone from 21k lines to 9k lines. I noticed a few problems, see below.

[choldgraf]

I took a pass through the preview docs, and they seem to look good to me. Scrolling behavior works and things seem to be formatted properly. Anything else that @12rambau wants to do here or are you ready for final review + merge? My feel is we should:

• cut a release before merging this one
• include an announcement banner saying that we updated to Bootstrap 5 and removed JQuery, so downstream authors should be aware of those changes.
• to do this quickly so it doesn't become out of date

[drammock]

• cut a release before merging this one
• include an announcement banner saying that we updated to Bootstrap 5 and removed JQuery, so downstream authors should be aware of those changes.
• to do this quickly so it doesn't become out of date

SGTM!

[12rambau]

what type of banner are you thinking about? Using the header banner or adding a warning admonition on the landing page ?

[choldgraf]

I was thinking header banner - what do you think? I'm happy with whatever path you think is best

[12rambau]

I was thinking, maybe that's a good reason to finish the PR on loud banners #759 ?

[choldgraf]

I agree that loud banners would be quite useful! Though I won't have any time to finish it any time soon. I am happy to review PRs if you or others want to take it over and get it over the finish line.

[12rambau]

Now that 0.12 is out should we commit this one to master ?

[choldgraf]

If you think that this is ready to go, then I suggest we merge it quickly and iterate from there. One suggestion: could you provide a short summary of the changes that you needed to make in this PR, as a "mini guide" to downstream authors who might need to make the same changes in their themes?

[12rambau]

@choldgraf done (I'll may need some proofreading though).
I think this page should be advertised in the loud banner i.e. in a follow-up PR.

[choldgraf]

OK looks good to me - I've cleaned up the language a little bit, so I think we should merge this and then see if any bugs or questions pop up!