Add more RISE config options to SlidesExporter

- reveal_overlay - reveal_header - reveal_backimage - reveal_footer These options are documented here: https://rise.readthedocs.io/en/latest/customize.html#decorating-all-slides Styling and ids of these elements follow RISE: https://github.com/damianavila/RISE/blob/master/classic/rise/static/main.js#L446-L470 Also update the reveal config options using the reveal dict in the notebook metadata if provided.
jupyter · May 7, 2024 · f1db586 · f1db586
1 parent d6dc8a5
commit f1db586
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1586,6 +1586,7 @@ raw template
 {%- endblock in_prompt -%}
     """
 
+
 exporter_attr = AttrExporter()
 output_attr, _ = exporter_attr.from_notebook_node(nb)
 assert "raw template" in output_attr

diff --git a/nbconvert/exporters/slides.py b/nbconvert/exporters/slides.py
@@ -78,6 +78,10 @@ def preprocess(self, nb, resources=None):
         nb.cells[-1].metadata.subslide_end = True
         nb.cells[-1].metadata.slide_end = True
 
+        # Update reveal config values using values from notebook metadata if present
+        if isinstance(resources, dict) and "reveal" in resources:
+            resources["reveal"].update(nb.metadata.get("reveal", {}))
+
         return nb, resources
 
 
@@ -186,6 +190,35 @@ def _reveal_url_prefix_default(self):
         """,
     ).tag(config=True)
 
+    reveal_overlay = Unicode(
+        "",
+        help="""
+                             Optional text or html overlay.
+                             If this is set then reveal_header, reveal_footer and reveal_backimage are ignored.
+                             """,
+    ).tag(config=True)
+
+    reveal_header = Unicode(
+        "",
+        help="""
+                             Optional header to display above slides.
+                             """,
+    ).tag(config=True)
+
+    reveal_backimage = Unicode(
+        "",
+        help="""
+                             Optional background image to display behind the slides.
+                             """,
+    ).tag(config=True)
+
+    reveal_footer = Unicode(
+        "",
+        help="""
+                             Optional footer to display below slides.
+                             """,
+    ).tag(config=True)
+
     font_awesome_url = Unicode(
         "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css",
         help="""
@@ -206,4 +239,8 @@ def _init_resources(self, resources):
         resources["reveal"]["number"] = self.reveal_number
         resources["reveal"]["height"] = self.reveal_height
         resources["reveal"]["width"] = self.reveal_width
+        resources["reveal"]["overlay"] = self.reveal_overlay
+        resources["reveal"]["header"] = self.reveal_header
+        resources["reveal"]["backimage"] = self.reveal_backimage
+        resources["reveal"]["footer"] = self.reveal_footer
         return resources
diff --git a/share/templates/reveal/index.html.j2 b/share/templates/reveal/index.html.j2
@@ -9,6 +9,10 @@
 {% set reveal_width = resources.reveal.width | default('960', true) %}
 {% set reveal_height = resources.reveal.height | default('700', true) %}
 {% set reveal_scroll = resources.reveal.scroll | default(false, true) | json_dumps %}
+{% set reveal_overlay = resources.reveal.overlay | default('', true) %}
+{% set reveal_header = resources.reveal.header | default('', true) %}
+{% set reveal_backimage = resources.reveal.backimage | default('', true) %}
+{% set reveal_footer = resources.reveal.footer | default('', true) %}
 
 {%- block header -%}
 <!DOCTYPE html>
@@ -122,6 +126,21 @@ a.anchor-link {
 {% endif %}
 <main>
 <div class="reveal">
+
+{% if reveal_overlay != '' %}
+<div id='rise-overlay'>{{ reveal_overlay }}</div>
+{% else %}
+{% if reveal_header != '' %}
+<div id='rise-header'>{{ reveal_header }}</div>
+{% endif %}
+{% if reveal_backimage != '' %}
+<img id='rise-backimage' src="{{ reveal_backimage }}" />
+{% endif %}
+{% if reveal_footer != '' %}
+<div id='rise-footer'>{{ reveal_footer }}</div>
+{% endif %}
+{% endif %}
+
 <div class="slides">
 {%- endblock body_header -%}
 

diff --git a/share/templates/reveal/static/custom_reveal.css b/share/templates/reveal/static/custom_reveal.css
@@ -23,6 +23,7 @@
 .reveal .slides {
   text-align: left;
 }
+
 .reveal.fade {
   opacity: 1;
 }
@@ -107,6 +108,30 @@ main {
   background: #727272;
 }
 
+.reveal #rise-header {
+  position: absolute; top: 0;
+}
+
+.reveal #rise-header a {
+  z-index: 1;
+}
+
+.reveal #rise-backimage {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.reveal #rise-footer {
+  position: absolute; bottom: 0;
+}
+
+.reveal #rise-footer a {
+  z-index: 1;
+}
+
 /* Scrollbars */
 
 ::-webkit-scrollbar {