Add Binder links to all examples and user guides

[philippjfr]

As the title says, all pages built from notebooks should have links to binder.

[ceball]

Should be supported now by nbsite - holoviz-dev/nbsite#188

However, might look ugly or take up too much vertical space - haven't seen how it looks yet with our theme. Will be happy to make that better when we see an example...

[MarcSkovMadsen]

Where can I check this out @ceball?. I tried to look at references example at for example https://pyviz-dev.github.io/panel/reference/widgets/DatetimeInput.html#widgets-gallery-datetimeinput. But they don't have any links.

[ceball]

@MarcSkovMadsen the website build hasn't been updated to use this new feature of nbsite yet. I'll have a go at that now (no promises...I haven't built the panel docs myself for 3 years or so :) ).

[ceball]

Currently looks like this:

It's a sphinx note (https://docutils.sourceforge.io/docs/ref/rst/directives.html#note). I think we need to style it better and remove some text!

Some thoughts/questions...

Is the button well known enough that no text at all is required (or maybe just a few words in the button itself would be enough)?

I think a binder link might not be useful on every notebook (though if just a small button, doesn't matter...although if just a small button, will people find it on notebooks where it is useful...).

I also think it might be worth combining with the "download from github" link (the blue box, below).

And might be worth adding binder badge to notes about non-interactive notebooks:

[ceball]

For comparison, here's how dask does it:

[jbednar]

The Dask way to to it looks fine, though I don't know if it needs the bar saying "Live Notebook" at all.

[philippjfr]

Agreed, the dask one looks fine.

[ceball]

As far as nbsite goes, it's the same as dask, except "note" (nbsite) vs "admonition" (dask):

dask:

.. admonition:: Live Notebook
    You can run this notebook in a `live session <https://mybinder.org/v2/gh/dask/dask-examples/master?urlpath=lab/tree/{{ docname }}>`_ |Binder| or view it `on Github <https://github.com/dask/dask-examples/blob/master/{{ docname }}>`_.

.. |Binder| image:: https://mybinder.org/badge.svg
   :target: https://mybinder.org/v2/gh/dask/dask-examples/master?urlpath=lab/tree/{{ docname }}

nbsite:

.. note:: Try live in your browser!
  |Binder| to run this notebook in your browser (no setup required).

.. |Binder| image:: https://mybinder.org/badge_logo.svg
   :target: https://mybinder.org/v2/gh/{org}/{repo}/{branch}?filepath={examples}/{relpath}

note's just a type of admonition (https://docutils.sourceforge.io/docs/ref/rst/directives.html#note). So it seems likely that we need to change https://github.com/pyviz-dev/sphinx_holoviz_theme/, right?

[philippjfr]

That sounds right, or is it wherever the rst is generated?

[ceball]

That sounds right, or is it wherever the rst is generated?

I'm not sure what you're asking exactly. I'm only going to say things you already know, so I don't think I get your question :) nbsite produces the rst. We can make that be anything we want, to apply across all holoviz projects (or could even be customizable per project). You can also edit/override the rst after it's generated initially, and save in panel's repo. But none of that helps with the styling - that's from the theme.

it seems likely that we need to change https://github.com/pyviz-dev/sphinx_holoviz_theme/

If that's true, the best I could offer at the moment would be for nbsite not to generate a sphinx admonition, but instead to generate a "longer"/more descriptive button (on its own - no other text), like this:

You could play with wording at https://mybinder.readthedocs.io/en/latest/howto/badges.html. I'm trying to word it so that people who don't know what binder is understand what it's for, and so that people who know what binder is still recognize it.

Seems like having a badge alone means it could also maybe be placed in a way that wouldn't need to take up vertical space...and it could even stay visible throughout the whole page...though any of that would also require changes to sphinx_holoviz_theme 🤔

Someone else might be able to do better by working on sphinx_holoviz_theme...

[philippjfr]

We should also update the partially broken Binder links in the gallery demos.

[MarcSkovMadsen]

Currently you cannot run the Panel repo on binder

[MarcSkovMadsen]

As a part of a nice binder setup we should include

• jupyter-server-proxy and setup all example notebooks to be served as apps in there. And have one icon in the launcher to launch the panel apps.
• vs-code. Demonstrating that you can use something like VS as well in there and work would make the look and feel of Panel very modern and powerful. See https://github.com/betatim/vscode-binder

I know how to enable both things and it is simple.

This would be so powerful for training, workshops, marketing, users etc.