posts/a-simple-minimap-for-your-nbconverted-ipynb.ipynb

{
 "metadata": {
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Some days ago, I presented a way to mimic the execution of *nbconverted* **IPython** notebooks (*ipynb*). Today, I will show you how to add a simple *minimap* to these static html documents.\n",
      "\n",
      "But, what is a *minimap*? Do you know **SublimeText** or **Ninja-IDE**? They are IDEs with a thin column to the right (of the main window) which provides an overview of the code we are working on... OK, you don't have an idea what am I talking about? Just go ahead and you will see...\n",
      "<!-- TEASER_END -->\n",
      "\n",
      "**Addendum note**: There are some *performance issues* with **Firefox**, but in **Chromium** it is working OK! Simplicity comes with some hidden costs ;-)\n",
      "\n",
      "**NOTE**: if you are impatient, just go the beginning of this post and press the `Minimap` link next to the `Source` link... and surprise!\n",
      "\n",
      "Well, my first thought to develop this feature was to look if anybody had this same idea (a *minimap* for html-based documents) before, and obviously, there was somebody ;-)\n",
      "\n",
      "Mr. **Google** pointed me to a [blog](http://dropthebit.com/481/mini-page-navigation/) where I found a nice js-based (working) solution.\n",
      "\n",
      "The implementation was very simple and we used the same strategy from the last blog posts: pass a template in the `IPython.nbconvert` call from the command line (but please, do not forget that you can also use a config file to pass the template name -and other things - to the `IPython.nbconvert` infrastructure).\n",
      "\n",
      "OK, but we needed to write the template before passing it, so we did it:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "!cat /media/datos/Ejemplos/minimap.tpl"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "output_type": "stream",
       "stream": "stdout",
       "text": [
        "{%- extends 'html_full.tpl' -%}\r\n",
        "\r\n",
        "{%- block header -%}\r\n",
        "{{ super() }}\r\n",
        "\r\n",
        "<script src=\"http://dropthebit.com/demos/mini_page_nav/miniPageNav.js\"></script>\r\n",
        "\r\n",
        "<style type=\"text/css\">\r\n",
        "body{\r\n",
        "position: static;\r\n",
        "}\r\n",
        "</style>\r\n",
        "\r\n",
        "{%- endblock header -%}\r\n"
       ]
      }
     ],
     "prompt_number": 1
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "We extended the `html_full` template adding two things to the `block header`:\n",
      "\n",
      "* the url of the script which makes all of this happens\n",
      "* a simple css overwrite over `body.position` attribute to prevent the malfunction of the script.\n",
      "\n",
      "And as a the final step, we just wrote:\n",
      "\n",
      "`ipython nbconvert 3_NumPy.ipynb --to html --template minimap.tpl --post serve`\n",
      "\n",
      "in our console, and we saw something like [THIS](http://damianavila.github.io/Python-Cientifico-HCC/3_NumPy.html)\n",
      "\n",
      "**Do not forget!**: There are some *performance issues* with **Firefox**, but in **Chromium** it is working OK! Simplicity comes with some hidden costs ;-)\n",
      "\n",
      "Nice, don't you think?\n",
      "\n",
      "We also did the same (with minor modifications) with our **Nikola** *Zen* theme (probably you had already tested it because I assume you are impatient!).\n",
      "\n",
      "Now, with this simple feature, you not only can quickly get an idea of the length of your documents (blog post, article, lecture, whatever...) but also they are easier to scroll and navigate!\n",
      "\n",
      "NOTE: If you are thinking \"I want this minimap with in my **IPython** notebooks\", you will have to hack the source code of the `js` library I used because it was designed for simple windows and not for more complex structures such as the notebook itself.\n",
      "\n",
      "Enjoy your *minimaps*!\n",
      "\n",
      "Dami\u00e1n."
     ]
    }
   ],
   "metadata": {}
  }
 ]
}