Add presentation mode notebook

[jucheval]

This notebook shows some tips about Pluto's built-in presentation mode (the current documentation page is pretty light).

Non exhaustive list of tips:

• multi-columns layout via PlutoTeachingTools,
• markdown admonitions,
• two tips related to math equations in Markdown/LaTeX,
• helper functions using Bonito to handle formatting (vertical space and text color),
• WGLMakie integration.

[fonsp]

Hi @jucheval , very nice, thank you for contributing!

It's a good idea to document more presentation related features, and how to customize the look!

I had some ideas for this notebook:

Link between docs and featured

Like you mentioned, there is already documentation on https://plutojl.org/en/docs/presentation/ (edit link at the bottom of the page), and I would like the two to be linked together better. Here are my suggestions:

• Instead of explaining the presentation mode concept in the introduction, you could link to the documentation? You could use PlutoUI.NotebookCard for this.
• I think this notebook is "advanced" information – we would people to first read https://plutojl.org/en/docs/presentation/ and try the built-in features, before modifying styling etc. My first priority is that the presentation feature is simple and that people can use it, and I don't want to overwhelm users with packages and options. How do you see this, and can this be made more clear in this notebook? E.g. in the title, introduction.
• In the docs website, can you link to this featured notebook? The website is also open source.

Images, Markdown, Math, Columns

These sections are very nice, and it's good that you link to the full pages for more information!

Vertical space

For the vertical space, I think importing Bonito is a bit overkill (because it makes the notebook slower to start). You could use:

• The built-in function HTML: https://featured.plutojl.org/web/interactivity%20with%20html
• https://github.com/JuliaWeb/Hyperscript.jl directly. This is the package used by Bonito for the DOM API.
• We usually recommend https://github.com/JuliaPluto/HypertextLiteral.jl to users. See e.g. https://featured.plutojl.org/web/javascript

Interactivity and animations

This notebook demonstrates PlutoUI and WGLMakie. Could you move the WGLMakie example to a separate featured notebook? You can use NotebookCard to link to another notebook. WGLMakie takes a long time to install and run, so it would be better to move it to its own notebook, so people can download and run this notebook more easily.

• WGLMakie is not the first thing I would show when showing Pluto interactivity to users, because WGLMakie has its own interactivity (Observable), which can make it confusing as a first package to learn. Maybe you can show a simpler example, or pick some other documentation on interactivity to link to?

[jucheval]

Hi @fonsp,

Thank you very much for your quick reply. I comment on your 4 ideas below :

1. Link between docs and featured
   I agree with you. I thought it would be too much to change the documentation without asking you before hand. Since you agree, I will do it by following your suggestions.
2. Images, Markdown, Math, Columns
   Thanks. By the way, if you have any idea of stuff to include here or there, please tell me.
3. Vertical space
   At first, I used the html built-in function but since I used Bonito later, I decided to use it. In the same lines, I first used the @markdown macro for the textcolor and divcolor functions. However, I think that the Bonito implementation is more robust. What is your opinion ?
4. Interactivity and animations
   Once again, I thought it would be too much to put it in a separate notebook, but I agree with you. I propose to replace the content of the current slide as follows :
   • PlutoUI: give a simple example and link to the featured notebook,
   • WGLMakie: link to a new featured notebook and mention the heaviness of this package (installation and precompilation)

Once again, if you have any suggestion of interesting tips regarding the presentation mode, I am happy to hear them.

[jucheval]

Side question:
Do you want me to open two new PRs ? (1. WGLMakie notebook and 2. modification in the documentation)
Or can I include them into this PR ?

Sorry for this naive question but I'm not very familiar with GitHub PRs and related stuff.

[jucheval]

I just made PR #98 to add a notebook about WGLMakie integration to Pluto.

I made the following modifications on the Presentation mode notebook :

• Remove basic explanations of the presentation mode
• Add link to the documentation
• Remove example of WGLMakie animation
• Add link to the WGLMakie notebook via NotebookCard

[jucheval]

Now that the WGLMakie notebook is merged, I am going back to this one.

Modifications I made

• I added a horizontalspace function which uses HTML and non breakable spaces
• I replaced the anchor $(DOM.div(; id="label")) by a label function to remove the Bonito dependence

Bonito dependences I did not successfully remove

• handle vertical spacing in a column
• divcolor and textcolor functions
• include right-aligned text in a markdown string

NotebookCard

Something is bothering me about NotebookCard. In presentation mode, the card becomes full screen which is not really convenient. Maybe you want to modify this behavior ?