index.html.j2 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. {%- extends 'base.html.j2' -%}
  2. {% from 'mathjax.html.j2' import mathjax %}
  3. {% from 'jupyter_widgets.html.j2' import jupyter_widgets %}
  4. {% set reveal_url_prefix = resources.reveal.url_prefix | default('https://unpkg.com/reveal.js@4.0.2', true) %}
  5. {% set reveal_theme = resources.reveal.theme | default('white', true) %}
  6. {% set reveal_transition = resources.reveal.transition | default('slide', true) %}
  7. {% set reveal_number = resources.reveal.number | default('', true) %}
  8. {% set reveal_width = resources.reveal.width | default('960', true) %}
  9. {% set reveal_height = resources.reveal.height | default('700', true) %}
  10. {% set reveal_scroll = resources.reveal.scroll | default(false, true) | json_dumps %}
  11. {%- block header -%}
  12. <!DOCTYPE html>
  13. <html lang="{{ resources.language_code }}">
  14. <head>
  15. {%- block html_head -%}
  16. <meta charset="utf-8" />
  17. <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  18. <meta name="apple-mobile-web-app-capable" content="yes" />
  19. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  20. {% set nb_title = nb.metadata.get('title', resources['metadata']['name']) | escape_html_keep_quotes %}
  21. <title>{{nb_title}} slides</title>
  22. {%- block html_head_js -%}
  23. {%- block html_head_js_jquery -%}
  24. <script src="{{ resources.jquery_url }}"></script>
  25. {%- endblock html_head_js_jquery -%}
  26. {%- block html_head_js_requirejs -%}
  27. <script src="{{ resources.require_js_url }}"></script>
  28. {%- endblock html_head_js_requirejs -%}
  29. {%- block html_head_js_mermaidjs -%}
  30. <script type="module">
  31. import mermaid from '{{ resources.mermaid_js_url }}';
  32. mermaid.initialize({ startOnLoad: true });
  33. </script>
  34. {%- endblock html_head_js_mermaidjs -%}
  35. {%- endblock html_head_js -%}
  36. {% block jupyter_widgets %}
  37. {%- if "widgets" in nb.metadata -%}
  38. {{ jupyter_widgets(resources.jupyter_widgets_base_url, resources.html_manager_semver_range, resources.widget_renderer_url) }}
  39. {%- endif -%}
  40. {% endblock jupyter_widgets %}
  41. <!-- General and theme style sheets -->
  42. <link rel="stylesheet" href="{{ reveal_url_prefix }}/dist/reveal.css">
  43. <!-- If the query includes 'print-pdf', include the PDF print sheet -->
  44. <script>
  45. if( window.location.search.match( /print-pdf/gi ) ) {
  46. var link = document.createElement( 'link' );
  47. link.rel = 'stylesheet';
  48. link.type = 'text/css';
  49. document.getElementsByTagName( 'head' )[0].appendChild( link );
  50. }
  51. </script>
  52. {% for css in resources.inlining.css -%}
  53. <style type="text/css">
  54. {{ css }}
  55. </style>
  56. {% endfor %}
  57. {% block notebook_css %}
  58. {{ resources.include_css("static/index.css") }}
  59. {% if resources.theme == 'dark' %}
  60. {{ resources.include_css("static/theme-dark.css") }}
  61. {% else %}
  62. {{ resources.include_css("static/theme-light.css") }}
  63. {% endif %}
  64. <style type="text/css">
  65. a.anchor-link {
  66. display: none;
  67. }
  68. .highlight {
  69. margin: 0.4em;
  70. }
  71. .jp-Notebook {
  72. padding: 0;
  73. }
  74. :root {
  75. --jp-ui-font-size1: 20px; /* instead of 14px */
  76. --jp-content-font-size1: 20px; /* instead of 14px */
  77. --jp-code-font-size: 19px; /* instead of 13px */
  78. --jp-cell-prompt-width: 110px; /* instead of 64px */
  79. }
  80. @media print {
  81. body {
  82. margin: 0;
  83. }
  84. }
  85. </style>
  86. {{ resources.include_css("static/custom_reveal.css") }}
  87. {% endblock notebook_css %}
  88. {%- block html_head_js_mathjax -%}
  89. {{ mathjax(resources.mathjax_url) }}
  90. {%- endblock html_head_js_mathjax -%}
  91. {%- block html_head_css -%}
  92. {%- endblock html_head_css -%}
  93. {%- endblock html_head -%}
  94. <!-- Reveal Theme -->
  95. <link rel="stylesheet" href="{{ reveal_url_prefix }}/dist/theme/{{reveal_theme}}.css" id="theme">
  96. </head>
  97. {% endblock header%}
  98. {%- block body_header -%}
  99. {% if resources.theme == 'dark' %}
  100. <body class="jp-Notebook" data-jp-theme-light="false" data-jp-theme-name="JupyterLab Dark">
  101. {% else %}
  102. <body class="jp-Notebook" data-jp-theme-light="true" data-jp-theme-name="JupyterLab Light">
  103. {% endif %}
  104. <main>
  105. <div class="reveal">
  106. <div class="slides">
  107. {%- endblock body_header -%}
  108. {% block body_footer %}
  109. </div>
  110. </div>
  111. </main>
  112. </body>
  113. {% endblock body_footer %}
  114. {% block footer %}
  115. {{ super() }}
  116. {% block footer_js %}
  117. <script>
  118. require(
  119. {
  120. // it makes sense to wait a little bit when you are loading
  121. // reveal from a cdn in a slow connection environment
  122. waitSeconds: 15
  123. },
  124. [
  125. "{{ reveal_url_prefix }}/dist/reveal.js",
  126. "{{ reveal_url_prefix }}/plugin/notes/notes.js"
  127. ],
  128. function(Reveal, RevealNotes){
  129. // Full list of configuration options available here: https://github.com/hakimel/reveal.js#configuration
  130. Reveal.initialize({
  131. controls: true,
  132. progress: true,
  133. history: true,
  134. transition: "{{reveal_transition}}",
  135. slideNumber: "{{reveal_number}}",
  136. plugins: [RevealNotes],
  137. width: {{reveal_width}},
  138. height: {{reveal_height}},
  139. });
  140. var update = function(event){
  141. if(MathJax.Hub.getAllJax(Reveal.getCurrentSlide())){
  142. MathJax.Hub.Rerender(Reveal.getCurrentSlide());
  143. }
  144. };
  145. Reveal.addEventListener('slidechanged', update);
  146. function setScrollingSlide() {
  147. var scroll = {{ reveal_scroll }}
  148. if (scroll === true) {
  149. var h = $('.reveal').height() * 0.95;
  150. $('section.present').find('section')
  151. .filter(function() {
  152. return $(this).height() > h;
  153. })
  154. .css('height', 'calc(95vh)')
  155. .css('overflow-y', 'scroll')
  156. .css('margin-top', '20px');
  157. }
  158. }
  159. // check and set the scrolling slide every time the slide change
  160. Reveal.addEventListener('slidechanged', setScrollingSlide);
  161. }
  162. );
  163. </script>
  164. {% endblock footer_js %}
  165. </html>
  166. {% endblock footer %}