Which is the best way for the tutorial rendering?

[MatteoRobbiati]

For now the situation is the following:

• we have a qiboteam/tutorials repo in which jupyter notebooks are uploaded without the outputs;
• we have a tutorials page in the website which is built thanks to a rendering of a *.md version of the same notebooks.

The idea is to build a mechanism for:

1. compile the no-output.ipynb in order to return the outputs;
2. convert the with-output.ipynb to a markdown file or whatever we want to use in the site rendering;
3. showing the output on the site.

[MatteoRobbiati]

Moreover, in order to show beautiful notebooks on the page, I am wondering about the best method for customizing the markdown style while (or post?) the rendering done using nextjs. An example can be this.

[alecandido]

customizing the markdown style while (or post?)

Definitely "post":

1. Next.js will create the HTML/JS bundle (essentially, transpile your md code to HTML)
2. you want to style the result with CSS, possibly reusing the same of the rest of the website, plus a few dedicated options

[MatteoRobbiati]

Definitely "post":

1. Next.js will create the HTML/JS bundle (essentially, transpile your md code to HTML)

2. you want to style the result with CSS, possibly reusing the same of the rest of the website, plus a few dedicated options

I agree with the strategy but, before acting more precisely on the css file, I was doing some experiments with some react applications. For example, I have just find this one: react-jupyter-notebook-viewer, which I find interesting in terms of style.

The problem with this is that it seems to "overload" my css style, changing for example the navbar and the footer layout (acting on images and not on the writings). A proof follows:

Before going on this research, I wanted a confrontation about it @AleCandido: is my current investigation useful? Or should I proceed as we said?

[alecandido]

You can definitely keep going, that is perfectly fine.

For example, I have just find this one: react-jupyter-notebook-viewer, which I find interesting in terms of style.

About this package: it is worrisome that is the personal project of a random guy, that worked on it a bit in June, and then stopped for 5 months. If you like the result, what you can do is to draw inspiration from his code, and write your own components in this repo. It is a relatively small amount of code, so you can reproduce it and customize :)

By doing it, you will also find a way to circumvent the css issue, I'm fairly confident ^^

[MatteoRobbiati]

You can definitely keep going, that is perfectly fine.

For example, I have just find this one: react-jupyter-notebook-viewer, which I find interesting in terms of style.

About this package: it is worrisome that is the personal project of a random guy, that worked on it a bit in June, and then stopped for 5 months. If you like the result, what you can do is to draw inspiration from his code, and write your own components in this repo. It is a relatively small amount of code, so you can reproduce it and customize :)

Ok, you are right. Thank you!

[MatteoRobbiati]

I think this issue can be closed after merging #15.

[alecandido]

Ok, #15 is closed, there is already another PR doing this (#6), and this issue switched topic from JN to markdown style.

I will close this to clean-up, since:

• markdown styling has been done in #15 (can be improved, but in dedicated issues/PRs)
• JN will keep being discussed in #3