Generate Binder badge/link from _quarto.yml

[ccamara]

Description

Summary

For every page generated from a ipynb notebook, I'd like to have an icon/link to run that particular notebook (not the root's project) into binder. Ideally, this should be done automatically from adding the binder url to _quarto.yml , in a similar way that current "Edit this page on github" works.

Even shorter: I want an implementation like the one implemented by jupyterbook: https://jupyterbook.org/en/stable/interactive/launchbuttons.html?highlight=binder#add-a-launch-on-binder-button

Context

I'd like to create a book aimed to python users. Therefore, I'd want to use solutions that are well known within python community, so despite I much prefer .qmd over .ipynb, I'd be using jupyter notebooks. I can see quarto can generate a book page from .ipynb pretty well, although I need to run the code cells beforehand or render them using quarto render --execute.

I'd like my students to be able to run every notebook on binder, as easily as possible, meaning that they should see a link/button pointing to that particular notebook on binder, in a similar way that current "Edit page on github" works now.

Currently, I could do any of these options:

• Simply add a badge to binder at the home page, pointing to the project's root. Regretfully, students would need to navigate to the correct notebook, which is prone error.
• Manually add a link to the specific url in every notebook, but as an author, this is extremely time consuming and prone error.

Ideally, I would like the url to be automatically generated based on the url specified at _quarto.yml, in a similar way that github links are generated and in a similar way it is currently implemented by jupyterbook

[mcanouil]

Since Quarto allows to embed Jupyter Notebooks and add a link to it, you could use a LUA filter to manipulate those link in order to target a binder, see https://quarto.org/docs/extensions/creating.html.

[ccamara]

Thank you for this, @mcanouil . I do not know how LUA filters work, so I'll have to read a getting started guide (hopefully this one would be enough: https://quarto.org/docs/extensions/filters.html). I wonder, though, how can lua filters change the html output, and if it would be the same implementation of adding an edit on github link on every page (I'd suspect the answer is no, seeing the code below -admittedly, I am not familiar with TS, so I'm not 100% sure)

quarto-cli/src/project/types/website/website-navigation.ts

Line 733 in 22b46a6

const firstIcon = repoUrlIcon(repoInfo.baseUrl);

[mcanouil]

A Quarto document is translated to AST which is a representation of the document. LUA can interact with that.

In this case, since the link is added via TypeScript (thus not part of the AST), my suggested solution would not work.

Another solution from the development of the "manuscript" project type is to use the ability to add links, see https://quarto.org/docs/manuscripts/.