Blogging with nbviewer and github gists.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<center><h1>Blogging with github gists and  jupyter nbviewer</h1></center>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <style>\n",
       "    body {\n",
       "      font-size: 20px;\n",
       "      font-family: 'Lora', serif;\n",
       "      color: #444;\n",
       "      }\n",
       "\n",
       "    h1 {\n",
       "      font-size: 180%;\n",
       "      line-height: 135%;\n",
       "      font-family: 'Open Sans', sans-serif;\n",
       "      text-align: center;\n",
       "      margin: 0 0 60px;\n",
       "      padding: 0 40px;\n",
       "      }\n",
       "\n",
       "    h1, h2, h3, h4, h5, h6 { \n",
       "      padding: 0 40px; \n",
       "      margin-top: 40px;\n",
       "      color: #444;\n",
       "      }\n",
       "\n",
       "    h2 {\n",
       "        font-size: 28px;\n",
       "        font-style: italic;\n",
       "        font-family: 'Lora', serif;\n",
       "    }\n",
       "\n",
       "    p {\n",
       "      font-family: 'Lora', serif;\n",
       "      line-height: 160%;\n",
       "      font-size: 100%;\n",
       "      margin-bottom: 0;\n",
       "      color: #444;\n",
       "      }\n",
       "\n",
       "    </style>\n",
       "\n",
       "    <script>\n",
       "    $('div.input').show();\n",
       "    $('div.output_prompt').css('display','flex');\n",
       "    $('div.input_prompt').css('display','flex');\n",
       "    \n",
       "    \n",
       "    var filename = \"http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700|Lora:400,700,400italic\";\n",
       "    var fileref=document.createElement(\"link\")\n",
       "        fileref.setAttribute(\"rel\", \"stylesheet\")\n",
       "        fileref.setAttribute(\"type\", \"text/css\")\n",
       "        fileref.setAttribute(\"href\", filename)\n",
       "    document.getElementsByTagName(\"head\")[0].appendChild(fileref)\n",
       "    </script>\n",
       "\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from IPython.display import HTML\n",
    "\n",
    "HTML(\"\"\"\n",
    "    <style>\n",
    "    body {\n",
    "      font-size: 20px;\n",
    "      font-family: 'Lora', serif;\n",
    "      color: #444;\n",
    "      }\n",
    "\n",
    "    h1 {\n",
    "      font-size: 180%;\n",
    "      line-height: 135%;\n",
    "      font-family: 'Open Sans', sans-serif;\n",
    "      text-align: center;\n",
    "      margin: 0 0 60px;\n",
    "      padding: 0 40px;\n",
    "      }\n",
    "\n",
    "    h1, h2, h3, h4, h5, h6 { \n",
    "      padding: 0 40px; \n",
    "      margin-top: 40px;\n",
    "      color: #444;\n",
    "      }\n",
    "\n",
    "    h2 {\n",
    "        font-size: 28px;\n",
    "        font-style: italic;\n",
    "        font-family: 'Lora', serif;\n",
    "    }\n",
    "\n",
    "    p {\n",
    "      font-family: 'Lora', serif;\n",
    "      line-height: 160%;\n",
    "      font-size: 100%;\n",
    "      margin-bottom: 0;\n",
    "      color: #444;\n",
    "      }\n",
    "\n",
    "    </style>\n",
    "\n",
    "    <script>\n",
    "    $('div.input').show();\n",
    "    $('div.output_prompt').css('display','flex');\n",
    "    $('div.input_prompt').css('display','flex');\n",
    "    \n",
    "    \n",
    "    var filename = \"http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700|Lora:400,700,400italic\";\n",
    "    var fileref=document.createElement(\"link\")\n",
    "        fileref.setAttribute(\"rel\", \"stylesheet\")\n",
    "        fileref.setAttribute(\"type\", \"text/css\")\n",
    "        fileref.setAttribute(\"href\", filename)\n",
    "    document.getElementsByTagName(\"head\")[0].appendChild(fileref)\n",
    "    </script>\n",
    "\n",
    "\"\"\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Jupyter notebooks are an awesome way to publish simultaneously code and it's output.\n",
    "But for blogging, I generally don't want to show the code, unless this is the topic of my post ;\n",
    "I want to use notebooks as an editor with ability to draw things with python.\n",
    "\n",
    "Furthermore, I have difficulties to install Jekyll and that kind of things ; and I don't\n",
    "like having to compile something (I don't know where I caught this bad habbit).\n",
    "\n",
    "So I had to find a way to publish directly a notebook, with or without showing the code.\n",
    "\n",
    "## Hiding the code\n",
    "\n",
    "The first issue is to be able to toggle the code inside the notebook.\n",
    "A simple way is to create two cells in the notebook:\n",
    "\n",
    "* One for showing the code:\n",
    "\n",
    "```python\n",
    "    from IPython.display import HTML\n",
    "\n",
    "    HTML(\n",
    "        \"<script>\"\n",
    "        \"$('div.input').show();\"\n",
    "        \"$('div.output_prompt').css('display','flex');\"\n",
    "        \"</script>\"\n",
    "        \"Executing this div shows the code.\"\n",
    "        )\n",
    "```\n",
    "\n",
    "* One for hiding the code:\n",
    "```python\n",
    "    HTML(\n",
    "        \"<script>\"\n",
    "        \"$('div.input').hide();\"\n",
    "        \"$('div.output_prompt').css('display','none');\"\n",
    "        \"</script>\"\n",
    "        \"Executing this one hides the code.\"\n",
    "        )\n",
    "```\n",
    "\n",
    "You can eventually create links to toggle the code visibility:\n",
    "\n",
    "```python\n",
    "    HTML(\n",
    "    '<a href=\"#\" onclick=\"$(\\\\'div.input\\\\').hide();'\n",
    "    '$(\\\\'div.output_prompt\\\\').css(\\\\'display\\\\',\\\\'none\\\\');\">'\n",
    "    'Hide code</a>'\n",
    "    \n",
    "    '<a href=\"#\" onclick=\"$(\\\\'div.input\\\\').show();'\n",
    "    '$(\\\\'div.output_prompt\\\\').css(\\\\'display\\\\',\\\\'flex\\\\');\">'\n",
    "    'Show code</a>'\n",
    "    )\n",
    "```\n",
    "\n",
    "## Publishing with [github gists](https://gist.github.com) and  [nbviewer](http://nbviewer.jupyter.org)\n",
    "\n",
    "I'm not really good at maintaining a personal website around blog posts ; twitter makes most of the job for giving access to posts and let people react to them.\n",
    "\n",
    "Finally, I find quite useful the ability to drop a notebook in a github gist, and have nbviewer render it.\n",
    "Then I can directly post the link to the rendered notebook.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<center>\n",
       "<a href=\"https://twitter.com/share\" class=\"twitter-share-button\" data-via=\"Bibmartin_\">Tweet</a>\n",
       "<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>\n",
       "</center>    \n",
       "<script>$('div.input').hide();$('div.output_prompt').css('display','none');$('div.input_prompt').css('display','none');</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "HTML(\"\"\"\n",
    "<center>\n",
    "<a href=\"https://twitter.com/share\" class=\"twitter-share-button\" data-via=\"Bibmartin_\">Tweet</a>\n",
    "<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>\n",
    "</center>    \n",
    "\"\"\"     \n",
    "    +\"<script>\"\n",
    "    \"$('div.input').hide();\"\n",
    "    \"$('div.output_prompt').css('display','none');\"\n",
    "    \"$('div.input_prompt').css('display','none');\"\n",
    "    \"</script>\"\n",
    "    )"
   ]
  }
 ],
 "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.5.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}