Involve notebooks in the tutorials

[MatteoRobbiati]

I should be great to have jupyter notebook's rendering in the tutorial page. In the meanwhile I'm trying to render a nb directly into the site, one possibility is to write markdowns which really look like notebooks like PennyLane does in this kind of examples.

I would like to add the link to the GitHub codes and the ability to download the notebook at the bottom of the tutorial page.

[alecandido]

https://github.com/NNPDF/pineline/issues/4

If you implement the solution, you'd do me a favor (such that I can copy for the other website).

[alecandido]

I will restart the investigation from here

[alecandido]

Ok, I finally have a strategy for this: we can not really write a webpack loader, since running the notebooks might be an expensive operation, that could be done on build, but not during development (you do not want to wait for the notebook to be run every time you load the page, even if might be alleviated by caching).

So, if we have to run the notebook to obtain updated output, we can convert in the same step to HTML. For the time being let's apply Occam's razor, and use jupyter nbconvert that is built-in.

Therefore, we will have an HTML from each notebook in an external folder, and we just need to load it from a page. This is just a simpler version of what @MatteoRobbiati is already doing for markdowns, since md requires the extra step from md to HTML (here done by Jupyter itself).

Practically:

• I will implement a simple shell script to convert an output-less notebook to HTML including output
• for the time being, we run that script manually/in the CI
• we add loading of HTML from the tutorials folder, from which we are already loading markdown

Later on, we will re-discuss the notebooks storage in the repo, e.g. using JupyText or similar solutions, at that point we will take care also of re-hydrating notebooks automatically, and implementing hooks in Git to do it and automatically strip output. This will be discussed in a later issue, i.e. #28

[alecandido]

Just to close that line: before I considered using htmltojsx to load the HTML dynamically, but this looks to me an over-kill (even though the library is directly by React authors, so in that sense is reliable and a good dependency).

I'm confident there should be a more intrinsic solution using Next.js tools. In the end Next and webpack are definitely able to load HTML, here we just need to convert explicitly the file into a component, without relying on it being placed in the pages folder.