merge: working branch(presentations) into main branch

- introduction for reveal.js
- draft for customisation
- rewrite some other parts

.gitignore

@@ -1,5 +1,4 @@
 output
 __pycache__
 *.pid
-plugins
 cache

.gitmodules

@@ -1,3 +1,9 @@
 [submodule "themes/clean-blog"]
 	path = themes/clean-blog
-	url = ssh://gitea@git.epheme.re:2222/fmouhart/pelican-clean-blog.git
+	url = https://git.epheme.re/fmouhart/pelican-clean-blog.git
+[submodule "plugins/autopages"]
+	path = plugins/autopages
+	url = https://git.epheme.re/fmouhart/pelican-autopages.git
+[submodule "plugins/i18n_subsites"]
+	path = plugins/i18n_subsites
+	url = https://git.epheme.re/fmouhart/pelican-i18n_subsites.git

Makefile

@@ -12,7 +12,10 @@ publish:
 clean:
 	uv run invoke clean
 
-init:
+%.mo: %.po
+	msgfmt "$^" -o "$@"
+
+init: themes/clean-blog/translations/fr/LC_MESSAGES/messages.mo
 	uv sync
 
 .PHONY: clean build publish dev init

content/cheat-sheets/wget-fr.md

@@ -2,7 +2,7 @@
 Title: wget/curl
 Date: 2022-07-25 13:45 CEST
 Author: Fabrice
-Category: cheat sheets
+Category: antisèches
 Tags: wget, curl, cli
 Slug: wget-curl
 Header_Cover: ../images/covers/speedboat.jpg

content/software/nvim-configure.md

@@ -1,7 +1,7 @@
 ---
 Title: Setup Neovim with kickstart.nvim
 Date: 2023-12-25 17:15
-Modified: 2025-02-12 10:00
+Modified: 2025-02-12 13:00
 Lang: en
 Author: Fabrice
 Category: software
@@ -22,7 +22,7 @@ incrementally before it starts getting too big for me to find anything inside
 it and not using even half of the plugins I installed. That goes without saying,
 there were quite a bit on conflicting keymaps as well as I'm using
 [bépo](http://bepo.fr/) as my keyboard layout with [partial remaps
-(fr)](https://cdn.bepo.fr/Vim-bepo-066.png).
+(fr)](https://cdn.bepo.fr/images/Vim-bepo-066.png).
 
 Obviously, it slowly became quite a mess. To address this issue, I decided to
 reorganise my `$HOME/.config/vim` directory using the [vim directory

content/software/typst.md

@@ -1,7 +1,7 @@
 ---
 Title: Typesetting with Typst 
 Date: 2024-10-19 18:00
-Modified: 2024-10-19 21:00
+Modified: 2025-02-14 12:45
 Lang: en
 Author: Fabrice
 Category: software
@@ -126,7 +126,7 @@ at the outset of the file.
 ```typst
 #import "lettre.typ": *
 
-#show: doc => lettre(
+#show: doc => lettre.with(
   de: [
     Sender\
     Address
@@ -144,7 +144,6 @@ at the outset of the file.
   post: [
     post-letter (e.g., post-scriptum)
   ],
-  doc
 )
 ```
 

content/tips/presenting.md

@@ -0,0 +1,218 @@
+---
+Title: Tools for making and giving presentations
+Date: 2024-11-03
+Author: Fabrice
+Category: Tips
+Tags: presentation, vim, latex
+Slug: presenting
+Header_Cover: ../images/covers/pts24-talk.jpg
+Summary: Some of the tools I use for making and giving presentations.
+lang: en
+---
+
+# Introduction
+
+Over the past year, I have to give quite a few presentations in different
+contexts: internal to the company, for open-source conferences, for business
+conferences…
+
+I used these different opportunities to refine a bit my presentation tools, and
+I just summarize them here for curious people. Please note that this blog post
+will only cover the tooling needed to produce slides, not what to put inside.
+
+This page may be updated, for instance if I start using yet another tool for
+slide making that I think is worth mentioning. If you have subscribed to this
+blog’s [RSS feed], you will be notified of future updates.
+
+# Making Slides
+
+For slide making, I prefer using tools that separate the content from the actual
+design. I’m thus not using fancy WYSIWYG tools for that. If you are not
+interested in that, you can already skip to the [presenting slides] section.
+
+## LaTeX Beamer
+
+As explained in the [typst article], I’m mostly using [LaTeX] to produce/typeset
+documents, and presentations are not an exception. For this purpose I’m using
+[beamer].
+
+For this purpose, my [vim setup for LaTeX] proved to be pretty useful,
+especially with the “compilation on save” feature. It allows me to have an
+already set up text editor for LaTeX without having to fiddle and twiddle with
+multiple setups. However, the backward search is not very accurate with beamer
+slides.
+
+### Overlays and Graphics
+
+The main advantage, besides my familiarity with [LaTeX], lays in the [overlay]
+system in beamer, that is quite powerful and provides a very precise way to
+display elements. This overlay mechanism also compounds well with [TikZ] to
+design animated graphics.
+
+For instance in the example below, I can show the top part of the graph
+initially, then the bottom, and change the name of the last node for the second
+slide. That can be easily adjusted to have more steps in the process.
+
+```latex
+…
+\usetikzlibrary{positioning}
+…
+\begin{tikzpicture}
+  \tikzstyle{node} = [draw, rectangle, fill=blue!40, minimum height=2em]
+  \tikzstyle{arrow} = [->, >=stealth, very thick]
+  \node[node] (start) {Data};
+  \node[node, right=1cm of start] (a1) {Enc($\cdot$)};
+  \node<2->[node, below=5mm of a1] (a2) {Sig($\cdot$)};
+  \node<1>[node, right=1cm of a1] (stop) {Encrypted Data};
+  \node<2->[node, right=1cm of a1] (stop) {Encrypted and Signed Data};
+
+  \draw[arrow] (start) -- (a1);
+  \draw<2->[arrow] (start) -- (a2);
+  \draw[arrow] (a1) -- (stop);
+  \draw<2->[arrow] (a2) -- (stop);
+\end{tikzpicture}
+```
+
+Resulting in:
+
+![The last image from the above code](../examples/tikz-graph.svg "The last image from the above code"){width=66%}
+
+Moreover, you have access to the whole latex ecosystem, especially those for
+neat illustrations such as [tikzpingus].
+
+**Note:** I feel compelled to say that the above technique is unsafe under fairly
+reasonable assumptions. Long story short you should sign first *then* encrypt
+and not do both in parallel. Please see [this paper](https://ia.cr/2001/045)
+from the Crypto 2001 conference if you want a more detailed explanation.
+
+### Customisation
+
+It is also quite easy to customise slides with beamer. For instance, with
+[metropolis], from its
+[documentation](https://ctan.tetaneutral.net/macros/latex/contrib/beamer-contrib/themes/metropolis/doc/metropolistheme.pdf),
+section 8 describes where to find specific colours. As for the fonts, if you are
+using xelatex/lualatex, a simple `\setmainfont` suffices to redefine it.
+
+For instance, if I want to have the alert text in orange:
+
+```latex
+\setbeamercolor[alerted text]{fg=orange}
+```
+
+### Drawbacks
+
+However, LaTeX starts to slow down quickly, especially with a lot of [TikZ]
+drawings… On documents, it’s not really an issue as it is possible to cache the
+drawings with the `externalize` tikz library. However, when mixing overlays and
+TikZ, it starts to [need some
+tweaks](https://tex.stackexchange.com/questions/78955/use-tikz-external-feature-with-beamer-only).
+I never included them in my workflow as they make TikZ drawings more complicated
+than they are.
+
+## Typst Touying
+
+## Pandoc and reveal.js
+
+[reveal.js] is a javascript framework to produce clean and dynamic slides. My
+settings to generate them are liberally inspired by [Pablo
+Coves](https://pcoves.gitlab.io/blog/pandoc-markdown-revealjs/).
+
+[Pandoc] on the other hand is a document converter tool that supports a very
+extensive spectrum of formats and syntaxes. My most use case is to convert
+markdown to some other reflowable format (usually HTML, and sometimes EPUB).
+
+Using both in conjunction allows for quick and dynamic presentations which don’t
+require _accuracy_ in placements. That may be the case for lightning talks for
+instance. The main advantage compared to the two above solutions is that
+[reveal.js] takes advantage of web browser capabilities to produce dynamic
+transitions. Those are otherwise hard to get from PDFs (some people made custom
+PDF reader for that).
+
+I know that it’s also possible to use [pandoc] to produce directly [beamer] slides
+for instance, thus benefiting from the simpler [Markdown] syntax while having
+[LaTeX] as an engine. I however find this approach too rigid. It is indeed easy
+to feed some LaTeX‑specific commands via the YAML header, e.g., for styling.
+Unfortunately, when the need arises to do some specific positioning on a slide
+for example, then we end up with some markdown-TeX mix that I found deeply
+inelegant. That’s why I usually stick to LaTeX (or more recently [typst]) to
+produce PDFs, as these tools are designed with an awareness of the page layout
+(which blends well into the language). This property is not the case with
+[Markdown], which is a markup language for text formatting (not typesetting).
+
+### Ease of use
+
+One nice thing about [pandoc] + [reveal.js] slide making is that, for simple
+intends and purpose, there are very little structural codes (contrary to
+[beamer] for instance where you have to define several variables before
+starting).
+
+From the following code, you can start making a presentation:
+
+```yaml
+---
+title: Example Presentation
+subtitle: It’s all about presenting
+author: Fabrice Mouhartem
+date: 2025-01-29
+theme: solarized
+---
+```
+
+Then run:
+
+```sh
+pandoc --standalone -t revealjs -o output.html input.md
+```
+
+And that’s all… well, it’s just a title slide and an empty slide, but it’s the
+beginning of a **wonderful** presentation.
+
+Then, similarly to [typst] + [touying], a level 1 heading creates a title slide,
+and a level 2 heading spawns a new content slide. You can also spawn a new slide
+with three hyphens (`---`).
+
+### Speaker view
+
+One of the advantage of [reveal.js] is the built-in [speaker view]. It spans a
+pop-up with useful pieces of information for the speaker: a chronometer, a preview of the
+upcoming slide and notes if there are any.
+
+Its behaviour is similar to what you can have with `pdfpc` that I’ll show later
+for PDF slides.
+
+![Screenshot of the speaker view in reveal.js](/examples/revealjs-speakerview.png "Speaker View")
+
+### Customisation
+
+- List of default [reveal.js styles]
+- Simple customisation with CSS:
+  <https://gist.github.com/jsoma/629b9564af5b1e7fa62d0a3a0a47c296#styling> see
+  <https://github.com/hakimel/reveal.js/blob/master/css/theme/template/exposer.scss>
+  as well for exposed variables.
+- However, in standalone mode, changing the font does not work well…
+- Create custom theme: <https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md>
+  - <https://github.com/Chouhartem/reveal.js/tree/cryptpad-theme>
+
+# Presenting Slides {#presenting-slides}
+
+## wl-mirror
+
+## pdfpc
+
+[RSS feed]: /feeds/all.rss.xml
+[typst]: https://typst.app/
+[touying]: https://touying-typ.github.io/
+[typst article]: {filename}../software/typst.md
+[presenting slides]: #presenting-slides
+[LaTeX]: https://www.latex-project.org/
+[beamer]: https://ctan.org/pkg/beamer
+[vim setup for LaTeX]: {filename}../software/nvim-latex.md
+[overlay]: https://www.overleaf.com/learn/latex/Beamer_Presentations%3A_A_Tutorial_for_Beginners_(Part_4)%E2%80%94Overlay_Specifications
+[TikZ]: https://www.ctan.org/pkg/pgf
+[tikzpingus]: https://github.com/EagleoutIce/tikzpingus
+[reveal.js]: https://revealjs.com/
+[reveal.js styles]: https://revealjs.com/themes/
+[pandoc]: https://pandoc.org/
+[metropolis]: https://github.com/matze/mtheme
+[markdown]: https://en.wikipedia.org/wiki/Markdown
+[speaker view]: https://revealjs.com/speaker-view/

readme.md

@@ -1 +1,52 @@
+This repository contains the sources necessary to build the blog at:
 <https://blog.epheme.re>
+
+# Dependencies
+
+To use this repository as intended, you need, to build the blog, the following
+software:
+
+- `git`
+- `make`
+- `uv`
+- `gettext`
+
+To synchronise the blog remotely with its intended target, the synchronisation
+is done using `rsync` over `ssh`.
+
+# Install
+
+To install a local copy to work on this blog, you also need other components,
+such as the [theme](https://git.epheme.re/fmouhart/pelican-clean-blog) and
+[some](https://git.epheme.re/fmouhart/pelican-autopages)
+[plugins](https://git.epheme.re/fmouhart/pelican-clean-blog). Those are embedded
+in the repository as a git submodule. You can thus simply run git clone with the
+`--recurse-submodule` option:
+
+```sh
+git clone --recurse-submodule https://git.epheme.re/fmouhart/blog.git fmouhart-blog
+```
+
+This blog relies on [pelican](https://getpelican.com) as a static site
+generator. To manage the different python dependencies of this project, we are
+using [`uv`](https://github.com/astral-sh/uv) as a python project manager.
+
+Moreover, translations are managed with python `gettext` which requires
+compiling the translation file.
+
+Those two steps are performed with the following command:
+
+```sh
+make init
+```
+
+# Development
+
+When writing an article, you can run the blog with `livereload` enabled with the
+command:
+
+```sh
+make dev
+```
+
+It’ll span a local development server on port `8000`: <http://localhost:8000>