Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Search bar missing on notebook pages #519

Closed
rclement opened this issue Aug 12, 2021 · 5 comments
Closed

Search bar missing on notebook pages #519

rclement opened this issue Aug 12, 2021 · 5 comments

Comments

@rclement
Copy link
Contributor

rclement commented Aug 12, 2021 •
edited
Loading

Description

When using mknotebooks combined with the search plugin, the search bar is either disabled (default theme) or completely missing (mkdocs-material theme) but only for notebook pages.

This behavior can be observed with any of the examples by activating the search plugin:

Screenshot 2021-08-12 at 18 20 54

Screenshot 2021-08-12 at 18 20 35

Observations

The search bar is enabled at runtime by some JavaScript code provided by the theme: when doing so, the .no-js class should be dynamically removed from the top-level HTML tag:

<!doctype html>
<html lang="en" class="no-js">
  <head>
...

For notebook pages, this class is not dynamically removed from the DOM. Trying to remove it by hand (to simulate the behavior) makes the search bar appear but without any JavaScript interaction.

It seems some JS code specific to notebooks is inhibiting the JS code of the theme.
This can be observe in two places:

  • The Git repository information (top-right corner) is not fetch at runtime (no stars, etc.)
  • The browser devtools console showing error when loading JS code from mkdocs-material:

Screenshot 2021-08-12 at 18 38 36

Digging a bit further, only deactivating this JavaScript include makes the whole search bar system appear and work:

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>

Hypothesis

The inclusion of the require.js library seems definitely involved in the culprit.

I do not know the root cause of all this but some a report has been make and fixed in mkdocs-material: squidfunk/mkdocs-material#2339

I will be happy to do some more testing and/or provided some feedback!
@rclement
Copy link
Contributor Author

It seems other MkDocs plugins using JS code are disabled when used on notebook pages.
For instance, with mkdocs-git-revision-date-localized-plugin: timvink/mkdocs-git-revision-date-localized-plugin#40

@akhmerov
Copy link

It seems that requirejs (including its latest version) for an unknown reason interferes with rxjs.

A possible and an extremely ugly workaround would be to move also the bundle to load before require (so to the page header).

@timvink
Copy link
Contributor

timvink commented Sep 3, 2021

Good find, hope we can fix this :)

@rclement rclement mentioned this issue Sep 3, 2021
Merged
@rclement
Copy link
Contributor Author

rclement commented Sep 3, 2021

I may have found a workaround: instead of including require.js at the end of the page content, appending at the end of the body with @jupyter-widgets works on a few examples. PR #565 submitted with this fix.

Here is one of the examples of this repo working after using the fix (no more JS errors, search bar is working again):

Screenshot 2021-09-03 at 23 14 06

@rclement
Copy link
Contributor Author

rclement commented Sep 7, 2021

I'll close the issue for now as a fix has been merged on master branch. Feel free to reopen the issue if needed.

@rclement rclement closed this as completed Sep 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rclement @akhmerov @timvink