# based on jupyter/base-notebook
docker pull jupyter/base-notebook

# or use Dockerfile, if need root, https://github.com/jupyter/docker-stacks/issues/211
cat << EOF > Dockerfile
# Copyright (C) 2018 by Dongming Jin
# Licensed under the Academic Free License version 3.0
# This program comes with ABSOLUTELY NO WARRANTY.
# You are free to modify and redistribute this code as long
# as you do not remove the above attribution and reasonably
# inform receipients that you have modified the original work

FROM jupyter/base-notebook

MAINTAINER Dongming Jin "dongming.jin@utrgv.edu"

# Switch account to root and adding user accounts and password. or not
USER root
RUN echo "root:Docker!" | chpasswd

USER jovyan
EOF

# build from Dockerfile
docker build -t jupyslides .

# test system configuration
docker run -it jupyslides /bin/bash

# load with data and slides
docker run -it -p 10000:8888 --rm -v /Users/domi/Dropbox/Research/Local_universe:/home/jovyan/slides -v /Users/domi/Desktop/LISA:/home/jovyan/LISA jupyslides /bin/bash

# convert to slides
jupyter nbconvert report.ipynb --to slides --reveal-prefix reveal.js --template hidecode.tpl

# replace initialization <script>

            'N  ,  SPACE':          'Next slide',
            'P':                    'Previous slide',
            '←  ,  H':        'Navigate left',
            '→  ,  L':        'Navigate right',
            '↑  ,  K':        'Navigate up',
            '↓  ,  J':        'Navigate down',
            'Fn + <':                   'First slide',
            'Fn + >':                   'Last slide',
            'B  ,  .':              'Pause',
            'F':                    'Fullscreen',
            'ESC, O':               'Slide overview'

from traitlets.config.manager import BaseJSONConfigManager
# get path: jupyter --path
path = "/Users/domi/anaconda3/envs/py35/etc/jupyter/nbconfig"
cm = BaseJSONConfigManager(config_dir=path)
cm.update("livereveal", {
              "theme": "serif",
              "transition": "fade",
              "start_slideshow_at": "selected",
})

<!--reveal.js initilization-->
<script>
require(
    {
      // it makes sense to wait a little bit when you are loading
      // reveal from a cdn in a slow connection environment
      waitSeconds: 10
    },
    [
      "reveal.js/lib/js/head.min.js",
      "reveal.js/js/reveal.js"
    ],

    function(head, Reveal){

        // Full list of configuration options available here: https://github.com/hakimel/reveal.js#configuration
        Reveal.initialize({
            controls: true,
            progress: true,
            history: true,
            center: true,

            transition: "slide",

            // Optional libraries used to extend on reveal.js
            dependencies: [
                { src: "reveal.js/lib/js/classList.js",
                  condition: function() { return !document.body.classList; } },
                { src: 'reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },            
                { src: "reveal.js/plugin/notes/notes.js",
                  async: true,
                  condition: function() { return !!document.body.classList; } },
                { src: 'reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
                { src: 'reveal.js/plugin/zoom-js/zoom.js', async: true }, // using zoom.js
            ]
        });

        var update = function(event){
          if(MathJax.Hub.getAllJax(Reveal.getCurrentSlide())){
            MathJax.Hub.Rerender(Reveal.getCurrentSlide());
          }
        };

        Reveal.addEventListener('slidechanged', update);

        function setScrollingSlide() {
            var scroll = true
            if (scroll === true) {
              var h = $('.reveal').height() * 0.95;
              $('section.present').find('section')
                .filter(function() {
                  return $(this).height() > h;
                })
                .css('height', 'calc(95vh)')
                .css('overflow-y', 'scroll')
                .css('margin-top', '20px');
            }
        }

        // check and set the scrolling slide every time the slide change
        Reveal.addEventListener('slidechanged', setScrollingSlide); 
    }
);
</script>

{%- extends 'slides_reveal.tpl' -%}
{% block input %}
{% endblock input %}

{%- extends 'slides_reveal.tpl' -%}

{% block input_group -%}
<div class="input_hidden">
{{ super() }}
</div>
{% endblock input_group %}

{%- block header -%}
{{ super() }}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
//div.output_wrapper {
//  margin-top: 0px;
//}
.input_hidden {
  display: none;
//  margin-top: 5px;
}
</style>

<script>
$(document).ready(function(){
  $(".output_wrapper").click(function(){
      $(this).prev('.input_hidden').slideToggle();
  });
})
</script>
{%- endblock header -%}