Very early Jupyterlab extension prototype

lab/README.md

@@ -0,0 +1,56 @@
+# rise-jupyterlab
+
+A JupyterLab extension to turn your Jupyter Notebooks into a live presentation
+
+## Requirements
+
+* JupyterLab >= 2.0
+
+## Install
+
+```bash
+jupyter labextension install rise-jupyterlab
+```
+
+## Contributing
+
+### Install
+
+The `jlpm` command is JupyterLab's pinned version of
+[yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
+`yarn` or `npm` in lieu of `jlpm` below.
+
+```bash
+# Clone the RISE repo to your local environment
+# Move to lab directory
+# Install dependencies
+jlpm
+# Build Typescript source
+jlpm build
+# Install the local rise-reveal patched stuff
+jupyter labextension link ../rise-reveal
+# Link your development version of the extension with JupyterLab
+jupyter labextension link .
+# Build JupyterLab
+jupyter lab build
+# Rebuild Typescript source after making changes
+jlpm build
+# Rebuild JupyterLab after making any changes
+jupyter lab build
+```
+
+You can watch the source directory and run JupyterLab in watch mode to watch for changes in the extension's source and automatically rebuild the extension and application.
+
+```bash
+# Watch the source directory in another terminal tab
+jlpm watch
+# Run jupyterlab in watch mode in one terminal tab
+jupyter lab --watch
+```
+
+### Uninstall
+
+```bash
+jupyter labextension uninstall rise-jupyterlab
+```
+

lab/foo.ipynb

@@ -0,0 +1,86 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "slideshow": {
+     "slide_type": "slide"
+    }
+   },
+   "source": [
+    "# RISE-jupyterlab (prototype!!!) in JupyterLab 2.2.9!"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {
+    "slideshow": {
+     "slide_type": "slide"
+    }
+   },
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "I am a WIP PoC again!\n"
+     ]
+    }
+   ],
+   "source": [
+    "print(\"I am a WIP PoC again!\")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "slideshow": {
+     "slide_type": "slide"
+    }
+   },
+   "source": [
+    "# Let's ride the wave..."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "slideshow": {
+     "slide_type": "slide"
+    }
+   },
+   "source": [
+    "![commits](commits.png)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Thank you!"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.8"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

lab/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "rise-jupyterlab",
+  "version": "0.1.0",
+  "description": "A JupyterLab extension to turn your Jupyter Notebooks into a live presentation",
+  "keywords": [
+    "jupyter",
+    "jupyterlab",
+    "jupyterlab-extension",
+    "reveal.js",
+    "RISE",
+    "slideshow",
+    "slides"
+  ],
+  "homepage": "https://github.com/damianavila/RISE/tree/lab/README.md",
+  "bugs": {
+    "url": "https://github.com/damianavila/RISE/issues"
+  },
+  "license": "BSD-3-Clause",
+  "author": {
+    "name": "Damián Avila",
+    "url": "https://github.com/damianavila"
+  },
+  "contributors": [
+    {
+      "name": "Thierry Parmentelat",
+      "url": "https://github.com/parmentelat"
+    }
+  ],
+  "files": [
+    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+    "src/custom.d.ts"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "style": "style/index.css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/damianavila/RISE.git"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rimraf lib tsconfig.tsbuildinfo",
+    "prepare": "jlpm run clean && jlpm run build",
+    "watch": "tsc -w"
+  },
+  "dependencies": {
+    "@jupyterlab/application": "^3.0.0",
+    "@jupyterlab/notebook": "^3.0.0",
+    "rise-reveal": "../rise-reveal"
+  },
+  "devDependencies": {
+    "rimraf": "^2.6.1",
+    "typescript": "~3.7.0"
+  },
+  "sideEffects": [
+    "style/*.css"
+  ],
+  "jupyterlab": {
+    "extension": true
+  }
+}

lab/src/custom.d.ts

@@ -0,0 +1,6 @@
+declare module "rise-reveal/export/reveal.js";
+
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}

lab/src/index.ts

@@ -0,0 +1,158 @@
+declare let require:(moduleId:string) => any;
+//let Reveal = require('reveal.js');
+import Reveal from 'rise-reveal/export/reveal.js';
+
+import {
+  JupyterFrontEnd, JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+import {
+  IDisposable, DisposableDelegate
+} from '@lumino/disposable';
+
+import {
+  ToolbarButton
+} from '@jupyterlab/apputils';
+
+import {
+  DocumentRegistry
+} from '@jupyterlab/docregistry';
+
+import {
+  NotebookPanel, INotebookModel
+} from '@jupyterlab/notebook';
+
+import {
+  JSONObject
+} from '@lumino/coreutils';
+
+import {
+  LabIcon
+} from '@jupyterlab/ui-components';
+
+import '../style/index.css';
+
+import riseIconStr from '../style/icons/assessment.svg';
+
+/**
+ * Initialization data for the rise-lab extension.
+ */
+const extension: JupyterFrontEndPlugin<void> = {
+  id: 'rise-lab',
+  autoStart: true,
+  activate
+};
+
+/**
+ * A notebook widget extension that adds a RISE button to the toolbar.
+ */
+export
+class RiseExtension implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel> {
+  /**
+   * Create a new extension object.
+   */
+  createNew(panel: NotebookPanel, context: DocumentRegistry.IContext<INotebookModel>): IDisposable {
+    let callback = () => {
+
+      function get_slide_type(cell: any) {
+        let slideshow = (cell.metadata.get("slideshow") || {});
+        let slide_type = (slideshow as JSONObject)['slide_type'];
+        //console.log(slide_type);
+       return ((slide_type === undefined) || (slide_type == '-')) ? '' : slide_type;
+      }
+
+      // function is_slide(cell: any)    {return get_slide_type(cell) == 'slide';}
+      // function is_subslide(cell: any) {return get_slide_type(cell) == 'subslide';}
+      // function is_fragment(cell: any) {return get_slide_type(cell) == 'fragment';}
+      // function is_regular(cell: any)  {return get_slide_type(cell) == '';
+
+      function markupSlides(container: any) {
+        let slide_section;
+        let slide_counter = 0;
+        let cells = container.model.cells;
+
+        for (let i=0; i < cells.length; i++) {
+          let cell = cells.get(i);
+          let slide_type = get_slide_type(cell);
+
+          let cell_node = container.node.children[slide_counter];
+          let prev_slide_section = slide_section;
+
+          if (slide_type === 'slide') {
+            // Start new slide
+            slide_section = document.createElement('section');
+            slide_section.appendChild(cell_node);
+            if (i === 0) {
+              container.node.insertBefore(slide_section, container.node.firstChild);
+            } else {
+              container.node.insertBefore(slide_section, prev_slide_section.nextSibling);
+            }
+            slide_counter++;
+            console.log("Sep slide", i);
+          } else {
+            slide_section.appendChild(cell_node);
+            console.log("Nop slide", i);
+          }
+        console.log(container.node);
+        }
+      }
+
+      let notebook = panel.content;
+      markupSlides(notebook);
+
+      let panel_container = document.getElementsByClassName("jp-NotebookPanel")[0];
+      panel_container.classList.add("reveal");
+      //console.log("panel_container");
+
+      let notebook_container = document.getElementsByClassName("jp-Notebook")[0];
+      notebook_container.classList.add("slides");
+      //console.log("notebook_container");
+
+      let revealCSS = require('../../rise-reveal/export/reveal.js/css/reveal.css');
+      console.log(revealCSS);
+      let customCSS = require('../style/rise.css');
+      console.log(customCSS);
+      //let revealTheme = require('reveal.js/css/theme/simple.css');
+
+      Reveal.initialize({
+				controls: true,
+				progress: true,
+				history: true,
+				center: true,
+
+        transition: 'slide', // none/fade/slide/convex/concave/zoom
+        //make codemirror works as expected
+        minScale: 1.0,
+        maxScale: 1.0
+			});
+    };
+
+    const riseIcon = new LabIcon({ name: 'rise:slideshow', svgstr: riseIconStr });
+
+    let button = new ToolbarButton({
+      icon: riseIcon,
+      onClick: callback,
+      tooltip: 'RISE me'
+    });
+
+    // Getting the index iteratively is less resource consuming, but this is far more readable
+    // and we only need to get the index at the loading of the extension...
+    let cellTypeButton = panel.toolbar.node.getElementsByClassName("jp-Notebook-toolbarCellType")[0]
+    let index = Array.from(cellTypeButton.parentNode.children).indexOf(cellTypeButton)
+
+    panel.toolbar.insertItem(index + 1,'rise', button);
+    return new DisposableDelegate(() => {
+      button.dispose();
+    });
+  }
+}
+
+/**
+ * Activate the extension.
+ */
+function activate(app: JupyterFrontEnd) {
+  app.docRegistry.addWidgetExtension('Notebook', new RiseExtension());
+  console.log('JupyterLab extension rise-lab is activated!');
+};
+
+export default extension;

lab/style/rise.css

@@ -0,0 +1,3 @@
+.reveal .slides {
+    text-align: left;
+}