Add navtabs + Python to step-by-step description

[uekerman]

Apologies if we discussed this in the past already. I think it could be good to add Python code to the complete "couple your code" step-by-step descriptions. We could do this by using Navtabs for example.

Why?

• More and more users are using the Python bindings, not the C++ API, especially due to our course
• The Python API becomes searchable, e.g. is_coupling_ongoing

Let's not (directly) do this for all bindings. This could easily become a lot of work. And let's not make this a must for each docs page with code. Let's merely start with the step-by-step guide and then see.

Current state is meant as a discussion starter and example. If we agree to do this, we might want to fine-tune things.

[MakisH]

Great idea! Comparing the two languages also helps a lot getting started with Python if you know C++, etc. And indeed, let's not add it for everything.

I like the tabs implementation, it is visually very minimal.

How does this work in the PDF export?

[chlorenz]

Good question, let's test when generating the pdf the next time.
In case it doesn't work out of the box there is 'css/printstyles.css'.

[MakisH]

Converting to PDF with Prince 15.1, only the first tab is shown:

I would argue that we can solve this in two phases:

1. Add the Python version of the complete "couple your code" section in this PR (maybe be and @IshaanDesai could do this together).
2. Open an issue about the PDF export of tabs and solve it in a second phase.

Since we are currently porting the documentation to preCICE v3, we should take this discussion into account. We could already update the Python part without having updated the C++ part, but target this PR to the precice-v3 branch.

[IshaanDesai]

Would definitely be a great addition! @MakisH we can do this together in a short time.

[BenjaminRodenberg]

I also like the general proposal, but please let's only merge this when version 3 is released. We already have all our hands full with keeping the documentation synchronized with the C++ API.

[MakisH]

@gdenayer this is how the "Coupled your code" pages could look like at some point.

[gdenayer]

@MakisH It would be a great improvement and help new people to get into preCICE faster.

[chlorenz]

I've started working on this issue and it was fairly easy to display both tabs (in the example above with a C++ and a Python tab) when the document is printed. However, the association between the tab header and the tab content is lost, so I came up with the following solution:

I used two CSS counters to create small bubble-like badges. This implementation is pure CSS which is quite nice.

[MakisH]

This is a very creative solution, I like it!
I assume that displaying the name of the tab in the bubble was complicated, right? But this is already very good.

[chlorenz]

I assume that displaying the name of the tab in the bubble was complicated, right? But this is already very good.

Yes, the name of the tab is at a different place in the code/tree, so to reference it you would need some Javascript that retrieves it.

[MakisH]

I understand that now we only need to add more content, right? I.e., to port every example of the "couple your code" section to Python.

We still have some conflicts in css/customstyles-precice.css.

[uekerman]

I like the solution as well.
Yes, now we "only" need the content.
I am removing the PR from the technical prio board.