Compare commits
2 Commits
presentati
...
84a05fb809
Author | SHA1 | Date | |
---|---|---|---|
84a05fb809
|
|||
38895bd4d7
|
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,4 +1,5 @@
|
|||||||
output
|
output
|
||||||
__pycache__
|
__pycache__
|
||||||
*.pid
|
*.pid
|
||||||
|
plugins
|
||||||
cache
|
cache
|
||||||
|
8
.gitmodules
vendored
8
.gitmodules
vendored
@ -1,9 +1,3 @@
|
|||||||
[submodule "themes/clean-blog"]
|
[submodule "themes/clean-blog"]
|
||||||
path = themes/clean-blog
|
path = themes/clean-blog
|
||||||
url = https://git.epheme.re/fmouhart/pelican-clean-blog.git
|
url = ssh://gitea@git.epheme.re:2222/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
|
|
||||||
|
5
Makefile
5
Makefile
@ -12,10 +12,7 @@ publish:
|
|||||||
clean:
|
clean:
|
||||||
uv run invoke clean
|
uv run invoke clean
|
||||||
|
|
||||||
%.mo: %.po
|
init:
|
||||||
msgfmt "$^" -o "$@"
|
|
||||||
|
|
||||||
init: themes/clean-blog/translations/fr/LC_MESSAGES/messages.mo
|
|
||||||
uv sync
|
uv sync
|
||||||
|
|
||||||
.PHONY: clean build publish dev init
|
.PHONY: clean build publish dev init
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 381 KiB |
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
Before Width: | Height: | Size: 113 KiB |
@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
Title: Typesetting with Typst
|
Title: Typesetting with Typst
|
||||||
Date: 2024-10-19 18:00
|
Date: 2024-10-19 18:00
|
||||||
Modified: 2025-02-14 12:45
|
Modified: 2024-10-19 21:00
|
||||||
Lang: en
|
Lang: en
|
||||||
Author: Fabrice
|
Author: Fabrice
|
||||||
Category: software
|
Category: software
|
||||||
@ -126,7 +126,7 @@ at the outset of the file.
|
|||||||
```typst
|
```typst
|
||||||
#import "lettre.typ": *
|
#import "lettre.typ": *
|
||||||
|
|
||||||
#show: doc => lettre.with(
|
#show: doc => lettre(
|
||||||
de: [
|
de: [
|
||||||
Sender\
|
Sender\
|
||||||
Address
|
Address
|
||||||
@ -144,6 +144,7 @@ at the outset of the file.
|
|||||||
post: [
|
post: [
|
||||||
post-letter (e.g., post-scriptum)
|
post-letter (e.g., post-scriptum)
|
||||||
],
|
],
|
||||||
|
doc
|
||||||
)
|
)
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -1,218 +0,0 @@
|
|||||||
---
|
|
||||||
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:
|
|
||||||
|
|
||||||
{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.
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
### 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/
|
|
Submodule plugins/autopages deleted from 7ebe350704
Submodule plugins/i18n_subsites deleted from 5903058c97
51
readme.md
51
readme.md
@ -1,52 +1 @@
|
|||||||
This repository contains the sources necessary to build the blog at:
|
|
||||||
<https://blog.epheme.re>
|
<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>
|
|
||||||
|
Reference in New Issue
Block a user