search

worldbank / template

🎩 Project Template
https://worldbank.github.io/template/
Mozilla Public License 2.0
23 stars 10 forks source link

Display IFrame #21

Open ccxzhang opened 1 year ago

ccxzhang commented 1 year ago

Hi @g4brielvs, I've several interactive visualizations (in HTML) that other people produced. I only have the products and several paragraphs to display. So, I would like to know the best way to display pre-produced HTML files in jupyter book.

Initially, I was trying to use jupyter notebook and IPython to display. When calling IFrame, it works for the notebook locally. However, when building the jupyter book, it would show as below:

jypyterbook-iframe

Given that Jupyter Notebook and IPython do not work in the Jupyter Book environment, I then translated it to a markdown file and embedded the iframe into the markdown file, which can be found here and additional CSS files. It works for Jupyter book, as shown here. Is there a better way to achieve this?

Additionally Below is our config file for Jupyter Book.

# Bibliography settings
bibtex_bibfiles:
  - references.bib

sphinx:
  config:
    bibtex_reference_style: author_year
    html_extra_path: ['images']

html:
  home_page_in_navbar: true
  use_edit_page_button: true
  use_repository_button: true
  use_issues_button: true
  baseurl: https://github.com/worldbank/pacific-observatory

execute:
  execute_notebooks: "off"
  allow_errors: true
  timeout: 60

latex:
  latex_engine: xelatex
  latex_documents:
    targetname: book.tex
  use_jupyterbook_latex: true
g4brielvs commented 1 year ago

@ccxzhang Thanks so much for opening this issue! I have prioritized the task and I will get back to you shortly with additional information and examples.