Repository: voxel51/fiftyone

Issue:
[DOCUMENTATION] Add notebook usage options to tutorials/recipes
Analogous to the notebooks in the TF docs, eg https://www.tensorflow.org/guide/data, we should add buttons to the top of the notebooks in our docs (currently, recipes and tutorials) that allow users to
- Run in Colab
- View source on GitHub
- Download notebook

Per the [raw source](https://raw.githubusercontent.com/tensorflow/docs/master/site/en/guide/data.ipynb) of the [github instance](https://github.com/tensorflow/docs/blob/master/site/en/guide/data.ipynb) of the TF example above, it looks like they're achieving this by adding an HTML cell with content as follows:

```html
<table class="tfo-notebook-buttons" align="left">
  <td>
    <a target="_blank" href="https://www.tensorflow.org/guide/data"><img src="https://www.tensorflow.org/images/tf_logo_32px.png" />View on TensorFlow.org</a>
  </td>
  <td>
    <a target="_blank" href="https://colab.research.google.com/github/tensorflow/docs/blob/master/site/en/guide/data.ipynb"><img src="https://www.tensorflow.org/images/colab_logo_32px.png" />Run in Google Colab</a>
  </td>
  <td>
    <a target="_blank" href="https://github.com/tensorflow/docs/blob/master/site/en/guide/data.ipynb"><img src="https://www.tensorflow.org/images/GitHub-Mark-32px.png" />View source on GitHub</a>
  </td>
  <td>
    <a href="https://storage.googleapis.com/tensorflow_docs/docs/site/en/guide/data.ipynb"><img src="https://www.tensorflow.org/images/download_logo_32px.png" />Download notebook</a>
  </td>
</table>
```


Discussion:

Resolving patch:
diff --git a/docs/source/conf.py b/docs/source/conf.py
--- a/docs/source/conf.py
+++ b/docs/source/conf.py
@@ -100,15 +100,35 @@
 # requires it
 nbsphinx_requirejs_path = ""
 
-# Adds a link to download the notebook to the built HTML
+# Adds helpful external links to the built HTML
+ref = os.environ.get("FO_DOCS_VERSION_REF", "develop")
 nbsphinx_prolog = """
 
-.. note::
-
-    Download notebook:
-    :download:`{{ env.doc2path(env.docname, base=None) }} </{{ env.doc2path(env.docname, base=None) }}>`
-
-"""
+.. raw:: html
+
+    <table class="fo-notebook-links" align="left">
+        <td>
+            <a target="_blank" href="https://colab.research.google.com/github/voxel51/fiftyone/blob/%s/docs/source/{{ env.doc2path(env.docname, base=None) }}">
+                <img src="../_static/images/logo/colab-logo-32px.png"/>Run in Google Colab
+            </a>
+        </td>
+        <td>
+            <a target="_blank" href="https://github.com/voxel51/fiftyone/blob/%s/docs/source/{{ env.doc2path(env.docname, base=None) }}">
+                <img src="../_static/images/logo/github-logo-32px.png"/>View source on GitHub
+            </a>
+        </td>
+        <td>
+            <a target="_blank" href="https://gitcdn.link/repo/voxel51/fiftyone/%s/docs/source/{{ env.doc2path(env.docname, base=None) }}" download>
+                <img src="../_static/images/logo/download-logo-32px.png"/>Download notebook
+            </a>
+        </td>
+    </table>
+
+""" % (
+    ref,
+    ref,
+    ref,
+)
 
 # Path to the redirects file, relative to `source/`
 redirects_file = "redirects"


Test patch: