Make it easier to create and run the slides.

Author: datitran

README.md

@@ -4,24 +4,27 @@
 
 Microsoft PowerPoint is cool. I like it! It is like a Swiss army knife for consultants. You can make beautiful slides with it. When it comes to code though, PowerPoint sucks. Really! The solution is to use [reveal.js](http://lab.hakim.se/reveal-js/#/). It is cool. You can use Markdown to highlight code. It is responsive but like LaTeX, it can be tedious.
 
-Another way to use reveal.js is through Jupyter Notebook. You just create a notebook and then use `nbconvert` to get reveal.js slides as well. The standard output is however boring. I seriously mean it! This repo therefore tries to bridge this gap by using customized colors and images which are based on the [Pivotal](https://pivotal.io/) color scheme.
+Another way to use reveal.js is through Jupyter Notebook. You just create a notebook and then use `nbconvert` to get reveal.js slides as well. The standard output is however boring. I seriously mean it! This repo therefore tries to bridge this gap by using customized colors and images.
 
 Moreover, we live in a cloud native world with a cloud native lifestyle, cloud native storage, cloud native solution. Why not having cloud native presentation slides then? This repo also solves this problem by simply using `cf push`.
 
 ## Getting Started
 
-1. You can find a notebook template in the `static` folder which contains some examples like cover and divider slides, markdown syntax and many more. Here is a [link](http://www.slideviper.oquanta.info/tutorial/slideshow_tutorial_slides.html#/3) for a nice intro into creating slides with jupyter notebook.
-
-2. When you are done with editing your notebook, you need to generate the slides with this command `jupyter nbconvert presentation_template.ipynb --to slides --reveal-prefix "reveal.js-3.1.0" --config slides_config.py`. This command basically looks for the reveal.js folder and converts the notebook into a HTML file. The flag `--config slides_config.py` points to some customized settings defined in the `jupyter_template.tpl`. For example there you can control whether the slide numbers are shown or not or you can also add additional plugins etc..
-
-3. Having created the HTML file, it is recommended to use this command `python clean_html.py presentation_template.slides.html` afterwards, especially if you use raw html code in the jupyter notebook. The reason is that in a newer version of nbconvert, it adds section instead of div tags so that data-background doesn't work as expected.
-
-4. Now you can either call `python run.py` to serve the presentation on your local machine or just use `cf push` to push it to the cloud. I use Flask to serve those static files and also be aware that if you change the name of the notebook, this has to be reflected in the `run.py` as well.
+1. You can find a notebook template in the `static` folder which contains some examples like cover and divider slides, markdown syntax and many more. Here is a [link](http://www.slideviper.oquanta.info/tutorial/slideshow_tutorial_slides.html#/3) for a nice intro into creating slides with Jupyter notebook.
+2. When you are done with editing your notebook, you need to generate the slides with this command:
+    ```
+    # from ./jupyter-presentation-template/
+    python create_slides.py --file static/presentation_template.ipynb
+    ```
+3. Now you can either call this command to serve the presentation on your local machine
+    ```
+    python run.py --file static/presentation_template.slides.html
+    ```
+    or just use `cf push` to push it to the cloud. I use Flask to serve those static files.
 
 #### Requirements:
 - Python 3.5.2
-- nbconvert 4.2.0
-- jupyter 1.0.0
+- nbconvert 5.2.1
 - reveal.js 3.1.0
 
 #### Demo:
@@ -39,9 +42,6 @@ If you need to change the footer, open `jupyter_template.tpl` and go to `Change
 ###### Where did you get the image and favicon?
 The image used for the cover slide is from [Pexel](https://www.pexels.com/) and the favicon is from [freefavicon](http://www.freefavicon.com/). They are both free to use.
 
-###### Can I change the name of the jupyter notebook?
-Yes, you can but make sure to adjust the code for `jupyter nbconvert new_name.ipynb ...`, `python clean_html.py new_name.ipynb` and also in the `run.py` file.
-
 ###### Does it work with other reveal.js version?
 Yes, but this is not recommended as the colors might be broken due to differences in the css styles.
 

create_slides.py

@@ -0,0 +1,34 @@
+import subprocess
+import argparse
+
+parser = argparse.ArgumentParser()
+parser.add_argument('--file', dest='file_name', type=str, help='Name of the jupyter notebook.')
+args = parser.parse_args()
+
+
+def clean_html(html_file):
+    """Remove unnecessary tags from slides."""
+    clean_file = (html_file.replace('<section><section><image>', '')
+                  .replace('</image></section></section>', ''))
+    return clean_file
+
+
+def main():
+    """Convert the notebook to slides and then do some cleaning."""
+    try:
+        output = subprocess.check_output(
+            ['jupyter', 'nbconvert', args.file_name, '--to', 'slides', '--reveal-prefix', 'reveal.js-3.1.0',
+             '--config', 'static/slides_config.py'], stderr=subprocess.STDOUT).decode('utf-8')
+        print(output.rstrip())
+
+        slide_name = output.split(' ')[-1].rstrip()
+        with open(slide_name, 'r') as f:
+            clean_file = clean_html(f.read())
+        with open(slide_name, 'w') as f:
+            f.write(clean_file)
+        print('Successfully adjusted.')
+    except IndexError:
+        print('Provide name of the slide.')
+
+
+main()

manifest.yml

@@ -6,4 +6,4 @@ applications:
   disk_quota: 256MB
   random-route: false
   buildpack: python_buildpack
-  command: python run.py
+  command: python run.py --file static/presentation_template.slides.html

run.py

@@ -1,19 +1,28 @@
-from flask import Flask, request, send_from_directory
 import os
+import argparse
+
+from flask import Flask, request, send_from_directory
+
+parser = argparse.ArgumentParser()
+parser.add_argument('--file', dest='file_name', type=str, help='Name of the slides to run.')
+args = parser.parse_args()
 
-port = int(os.getenv("PORT", 9099))
+port = int(os.getenv('PORT', 9099))
 
 app = Flask(__name__)
 
-@app.route("/<path:path>")
+
+@app.route('/<path:path>')
 def serve_page(path):
-    return send_from_directory("static", path)
+    return send_from_directory('static', path)
+
 
-@app.route("/")
+@app.route('/')
 def main():
     """Adjust the presentation_name if you rename the jupyter notebook."""
-    presentation_name = "presentation_template.slides.html"
+    presentation_name = args.file_name.split('/')[-1]
     return app.send_static_file(presentation_name)
 
-if __name__ == "__main__":
-    app.run(host="0.0.0.0", port=port)
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=port)

static/clean_html.py

@@ -135,10 +135,10 @@ ul li{
 
 ul li:before {
   display: inline-block;
-  content: "\25CB";
+  content: "\25CD";
   width: 1em;
   margin-left: -1em;
-  color: #1F6FB8;
+  color: #000000;
 }
 
 /* Correct for links in list */
@@ -176,7 +176,7 @@ ol li ul li:before {
  * LINKS
  *********************************************/
 .reveal a:not(.image) {
-  color: darkblue;
+  color: #2D7FDD;
   text-decoration: none;
   -webkit-transition: color .15s ease;
   -moz-transition: color .15s ease;
@@ -185,8 +185,9 @@ ol li ul li:before {
   transition: color .15s ease; }
 
 .reveal a:not(.image):hover {
-  color: #0000f1;
+  color: #2D7FDD;
   text-shadow: none;
+  text-decoration: underline;
   border: none; }
 
 .reveal .roll span:after {

static/css/custom.css

@@ -1,3 +1,3 @@
 c = get_config()
 
-c.Exporter.template_file = 'jupyter_template'
+c.Exporter.template_file = 'static/jupyter_template'