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.

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

Jupyter notebook dark mode doesn't work on first load #1545

Open
3 tasks done
george-gca opened this issue Jul 8, 2023 · 31 comments
Open
3 tasks done

Jupyter notebook dark mode doesn't work on first load #1545

george-gca opened this issue Jul 8, 2023 · 31 comments
Labels

Comments

@george-gca
Copy link
Collaborator

Acknowledge the following

  • I carefully read and followed the Getting Started guide.
  • I read through FAQ and searched through the past issues, none of which addressed my issue.
  • The issue I am raising is a potential bug in al-folio and not just a usage question.
    [For usage questions, please post in the Discussions instead of raising an issue.]

Describe the bug
When first opening the blog post about jupyter notebooks, activating the dark mode doesn't affect the notebook. After a reload it works as expected.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://alshedivat.github.io/al-folio/blog/2023/jupyter-notebook/
  2. Change theme to dark and back
  3. Reload the page
  4. Change theme to dark and back again
@george-gca george-gca added the bug label Jul 8, 2023
@george-gca george-gca changed the title Jupyter notebook doesn't work on first load Jupyter notebook dark mode doesn't work on first load Jul 8, 2023
@RedaBenh
Copy link

Same issue:
I try the start jekyll with this command:
bundle exec jekyll serve --lsi

I get this error:

....
Jekyll Feed: Generating feed for posts
Populating LSI... 
Rebuilding index... 
                  
 Jekyll Diagrams: Command Not Found: mmdc
Conversion error: JekyllJupyterNotebook::Converter encountered an error while converting 'assets/jupyter/blog.ipynb':
                  No such file or directory - jupyter
                  ------------------------------------------------
    Jekyll 4.3.2   Please append `--trace` to the `serve` command 
                   for any additional information or backtrace. 
                  ------------------------------------------------
/Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-jupyter-notebook-0.0.5/lib/jekyll-jupyter-notebook/converter.rb:50:in `spawn': No such file or directory - jupyter (Errno::ENOENT)
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-jupyter-notebook-0.0.5/lib/jekyll-jupyter-notebook/converter.rb:50:in `block in convert_notebook'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-jupyter-notebook-0.0.5/lib/jekyll-jupyter-notebook/converter.rb:49:in `pipe'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-jupyter-notebook-0.0.5/lib/jekyll-jupyter-notebook/converter.rb:49:in `convert_notebook'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-jupyter-notebook-0.0.5/lib/jekyll-jupyter-notebook/converter.rb:28:in `convert'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/renderer.rb:105:in `block in convert'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/renderer.rb:104:in `each'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/renderer.rb:104:in `reduce'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/renderer.rb:104:in `convert'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/renderer.rb:84:in `render_document'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/renderer.rb:63:in `run'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/site.rb:572:in `render_regenerated'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/site.rb:564:in `block in render_pages'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/site.rb:563:in `each'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/site.rb:563:in `render_pages'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/site.rb:211:in `render'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/site.rb:80:in `process'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/command.rb:28:in `process_site'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/commands/build.rb:65:in `build'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/commands/build.rb:36:in `process'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/command.rb:91:in `each'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/lib/jekyll/commands/serve.rb:86:in `block (2 levels) in init_with_program'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/gems/jekyll-4.3.2/exe/jekyll:15:in `<top (required)>'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/bin/jekyll:25:in `load'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/bin/jekyll:25:in `<main>'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/bin/ruby_executable_hooks:22:in `eval'
      from /Users/redabenh/.rvm/gems/ruby-3.1.3/bin/ruby_executable_hooks:22:in `<main>'

There is any workarround ?
i'm on Mac OS

@RedaBenh
Copy link

RedaBenh commented Jul 15, 2023

I finally build jekyll on docker
i think you need to complet the section local-setup-standard of getting started guide to include jupyter installation steps

@george-gca
Copy link
Collaborator Author

Actually the error you reported is not related to this. As you already figured it out, you were just missing jupyter installed on your machine. We have a PR #1523 to make Docker the recommended way of using this, but I agree that jupyter installation is missing in README. I will add it now.

@stale
Copy link

stale bot commented Sep 13, 2023

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the wontfix label Sep 13, 2023
@stale stale bot closed this as completed Sep 21, 2023
@george-gca george-gca reopened this Sep 22, 2023
@stale stale bot removed the wontfix label Sep 22, 2023
Copy link

stale bot commented Nov 22, 2023

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the wontfix label Nov 22, 2023
@george-gca
Copy link
Collaborator Author

I couldn't reproduce this bug anymore. Maybe it is solved now.

@lesterbotello
Copy link

I'm getting this but after I push my code to Github Pages in the build step.

  Jekyll Diagrams: Command Not Found: mmdc
  Conversion error: JekyllJupyterNotebook::Converter encountered an error while converting 'assets/jupyter/blog.ipynb':
                    No such file or directory - jupyter
                    ------------------------------------------------
      Jekyll 4.3.2   Please append `--trace` to the `build` command 
                     for any additional information or backtrace. 

Is there something I'm missing?

@lesterbotello
Copy link

lesterbotello commented Dec 10, 2023

Update on my issue: I was able to fix this by adding the missing Mermaid CLI and Jupyter to the jekyll.yml file:

      - name: Install Node.js for Mermaid CLI
        uses: actions/setup-node@v3
        with:
          node-version: "14"

      - name: Install Mermaid CLI
        run: npm install -g @mermaid-js/mermaid-cli

      - name: Install Python for Jupyter
        uses: actions/setup-python@v4
        with:
          python-version: "3.9"

      - name: Install Jupyter
        run: pip install jupyter

@roilhi
Copy link

roilhi commented Jan 3, 2024

Update on my issue: I was able to fix this by adding the missing Mermaid CLI and Jupyter to the jekyll.yml file:

      - name: Install Node.js for Mermaid CLI
        uses: actions/setup-node@v3
        with:
          node-version: "14"

      - name: Install Mermaid CLI
        run: npm install -g @mermaid-js/mermaid-cli

      - name: Install Python for Jupyter
        uses: actions/setup-python@v4
        with:
          python-version: "3.9"

      - name: Install Jupyter
        run: pip install jupyter

Can't fix after adding those lines to yml :(

@george-gca
Copy link
Collaborator Author

Where is the jekyll.yml file you are using? Is it for hosting in another provider? Also what is your error @roilhi?

This issue specifically is related to jupyter dark mode, but a lot of people used it to report a different bug.

@roilhi
Copy link

roilhi commented Jan 3, 2024

Where is the jekyll.yml file you are using? Is it for hosting in another provider? Also what is your error @roilhi?

This issue specifically is related to jupyter dark mode, but a lot of people used it to report a different bug.

Hello @george-gca, my jekyll.yml file is located at .github/workflows/ directory. I'm using github pages. Everything is fine at local by running the docker compose file. I have the same issue as @lesterbotello, github pages is not building the Jekyll file because of the jupyter notebook issue.

@george-gca
Copy link
Collaborator Author

I believe you are using a very old version of the template, since currently there is no file named jekyll.yml in .github/workflows/.

You probably have to update your code to get these changes, since the current building script does install jupyter.

@roilhi
Copy link

roilhi commented Jan 3, 2024

@george-gca Thanks. I don't think is an old version, since I have the same deploy.yml file that you show. I will try to update.

@george-gca
Copy link
Collaborator Author

Is that action that is currently running to deploy your site?

@roilhi
Copy link

roilhi commented Jan 3, 2024

Yes, it is. I've deleted the jekyll.yml file. It´s working but the theme is not renderizing.

@george-gca
Copy link
Collaborator Author

What do you mean?

Copy link

stale bot commented Mar 6, 2024

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the wontfix label Mar 6, 2024
@stale stale bot closed this as completed Mar 16, 2024
@george-gca george-gca reopened this Mar 17, 2024
@stale stale bot removed the wontfix label Mar 17, 2024
@fareedqk
Copy link

I believe you are using a very old version of the template, since currently there is no file named jekyll.yml in .github/workflows/.

You probably have to update your code to get these changes, since the current building script does install jupyter.

If it does install jupyter then what is the cause of error, as I am facing the same error

@fareedqk
Copy link

@george-gca I am facing this error: Conversion error: JekyllJupyterNotebook::Converter encountered an error while converting 'assets/jupyter/blog.ipynb':
No such file or directory - jupyter
------------------------------------------------
Jekyll 4.3.3 Please append --trace to the build command
for any additional information or backtrace.
------------------------------------------------

What could be the problem?

@george-gca
Copy link
Collaborator Author

A lot of comments here deviated from the original issue. The issue here is about dark mode not working on the first load. Other issues must be discussed in their respective issues (or discussions) on the repository.

@fareedqk check the comment above about related problems. If it doesn't solve your problem, please open a new issue for this matter.

@JacobSuWang
Copy link

Can confirm the error below still exists even after jupyter installation.
This error doesn't pop in some environments / machines, not clear yet why.

  Conversion error: JekyllJupyterNotebook::Converter encountered an error while converting 'assets/jupyter/blog.ipynb':
                    No such file or directory - jupyter
                    ------------------------------------------------
      Jekyll 4.3.3   Please append `--trace` to the `serve` command 
                     for any additional information or backtrace. 
                    ------------------------------------------------

@JacobSuWang
Copy link

JacobSuWang commented May 12, 2024

Conversion error: JekyllJupyterNotebook::Converter encountered an error while converting 'assets/jupyter/blog.ipynb':
I finally build jekyll on docker

This is the solution that worked for me. Thanks.
The old workflow is no longer supported it seems.

@lvanveen
Copy link

lvanveen commented Jun 10, 2024

So is there a solution? I copied the most recent version of alshedivat.github.io today (June 2024), followed the instructions and hit this error. If the solution is to "build Jekyll on Docker" then please explain what that means and how to do it.
Since it was mentioned above that the error may occur or not occur depending on the platform, I will mention that, locally, I am working on Ubuntu 20.04. It is the deployment on GitHub that keeps failing.

@george-gca
Copy link
Collaborator Author

If your error is not related to jupyter notebook dark mode not working, please open a new issue or Q&A to keep this focused on the error in question.

@DaniloBorquez
Copy link

The problem is related to your system path. In my case, I installed Jupyter through pip, and the installer put the exec on ~/.local/bin/. This folder wasn't on my path, so Jekyll did not find it when it required it. I just put this folder in the path and solved the problem.

@Charlie-XIAO
Copy link
Contributor

@george-gca I'm stil seeing the problem (of dark mode not working on first load). Still that page: https://alshedivat.github.io/al-folio/blog/2023/jupyter-notebook/, if I directly type in the URL it works on first load; if I navigate from somewhere else in the website then it does not work, e.g, try navigating from here: https://alshedivat.github.io/al-folio/blog/tag/jupyter/

@george-gca
Copy link
Collaborator Author

Yeah, I know, but idk how to fix this yet. If someone can find a solution for this and is willing to send a PR, I am happy to review it.

@Charlie-XIAO
Copy link
Contributor

Charlie-XIAO commented Sep 12, 2024

   let jupyterTheme = determineComputedTheme();

   $(".jupyter-notebook-iframe-container iframe").each(function () {
-    $(this).contents().find("head").append(cssLink);
+    var iframe = $(this);
+    iframe.contents().find("head").append(cssLink);

-    if (jupyterTheme == "dark") {
-      $(this).bind("load", function () {
-        $(this).contents().find("body").attr({
-          "data-jp-theme-light": "false",
-          "data-jp-theme-name": "JupyterLab Dark",
-        });
+    function changeToJpDarkTheme() {
+      iframe.contents().find("body").attr({
+        "data-jp-theme-light": "false",
+        "data-jp-theme-name": "JupyterLab Dark",
       });
+    };
+
+    if (jupyterTheme == "dark") {
+      if (iframe[0].contentWindow.document.readyState === "complete") {
+        changeToJpDarkTheme();
+      }
+      iframe.bind("load", changeToJpDarkTheme);
     }
   });

Maybe something like this 🤔 Working for my site not sure if it's general solution...

Please see #2693

@chengstark
Copy link

I solved mine by install jupyter in python and adding the python path to PATH.

@george-gca
Copy link
Collaborator Author

Does it really work? Because it doesn't make sense. We install what is needed to convert jupyter to html in the GitHub actions and convert it using the plug-in.

upunaprosk added a commit to upunaprosk/upunaprosk.github.io that referenced this issue Dec 15, 2024
@upunaprosk
Copy link

a complete jekyll.yml that should work for pages deployment, following the suggested fixes above:

# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.

# Sample workflow for building and deploying a Jekyll site to GitHub Pages
name: Deploy Jekyll site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@8575951200e472d5f2d95c625da0c7bec8217c42 # v1.161.0
        with:
          ruby-version: '3.1' # Not needed with a .ruby-version file
          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
          cache-version: 0 # Increment this number if you need to re-download cached gems
      - name: Install Node.js for Mermaid CLI
        uses: actions/setup-node@v3
        with:
          node-version: "14"
      - name: Install Mermaid CLI
        run: npm install -g @mermaid-js/mermaid-cli
      - name: Install Python for Jupyter
        uses: actions/setup-python@v4
        with:
          python-version: "3.9"
      - name: Install Jupyter
        run: pip install jupyter
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v5
      - name: Build with Jekyll
        # Outputs to the './_site' directory by default
        run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
        env:
          JEKYLL_ENV: production
      - name: Upload artifact
        # Automatically uploads an artifact from the './_site' directory by default
        uses: actions/upload-pages-artifact@v3

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.