mdeck 3.1.0 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/assets/base.css +24 -0
- package/assets/extensions/themes/academic/styles.css +15 -0
- package/docs/reference/authoring.md +75 -2
- package/docs/reference/extensions.md +3 -1
- package/docs/site/content/audience.md +6 -0
- package/docs/site/content/commands.md +28 -4
- package/docs/site/content/drawing.md +1 -1
- package/docs/site/content/more-content.md +22 -0
- package/docs/site/content/sharing.md +1 -0
- package/docs/site/content/troubleshooting.md +1 -1
- package/docs/site/content/views.md +3 -1
- package/examples/citations/refs.bib +30 -0
- package/examples/citations/refs.yml +21 -0
- package/examples/citations/slides.md +43 -0
- package/examples/citations/slides.pdf +0 -0
- package/package.json +5 -1
- package/skills/write-slides/SKILL.md +6 -2
- package/src/build/bibliography.js +289 -0
- package/src/build/check.js +12 -0
- package/src/build/renderCheck.js +98 -0
- package/src/build/slidesPlugin.js +47 -7
- package/src/build/themeCheck.js +18 -6
- package/src/cli/args.js +20 -4
- package/src/cli/index.js +39 -10
- package/src/cli/themes.js +9 -3
- package/src/components/Bibliography.jsx +23 -0
- package/src/components/Poll.jsx +25 -2
- package/src/components/QrCodeTag.jsx +11 -2
- package/src/components/VideoPlayer.jsx +16 -0
- package/src/components/activity.jsx +2 -2
- package/src/components/citation.css +28 -0
- package/src/components/poll.css +12 -2
- package/src/core/citations.js +108 -0
- package/src/core/editDeck.js +43 -0
- package/src/core/ink.js +16 -0
- package/src/core/labels.js +16 -0
- package/src/core/parseSlides.js +1 -1
- package/src/core/urls.js +2 -2
- package/src/core/validateDeck.js +7 -1
- package/src/layouts/layoutApi.jsx +13 -3
- package/src/live/answer/answer.css +1 -0
- package/src/live/answer/answer.js +2 -0
- package/src/live/client.js +25 -2
- package/src/runtime/ReaderView.jsx +2 -1
- package/src/runtime/citations.js +60 -0
- package/src/runtime/deck-stage.js +5 -2
- package/src/runtime/editorBridge.js +7 -1
- package/src/runtime/follow.js +89 -0
- package/src/runtime/ink/bus.js +7 -0
- package/src/runtime/ink/room.js +8 -0
- package/src/runtime/ink/select.js +4 -2
- package/src/runtime/main.jsx +19 -7
- package/src/runtime/markedSetup.js +7 -0
- package/src/runtime/registry.jsx +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 3.3.0 — 2026-10-08
|
|
4
|
+
|
|
5
|
+
- Citations and references: `bibliography: refs.bib` in the deck settings, then cite in Pandoc's syntax, `[@smith2020, p. 12]`, `[see @a; @b]`, `[-@a]` or `@smith2020` in a sentence. Each citation shows in the style's short form, each slide lists the full references of the works it cites above its footer (`show.citations: false` leaves them out), and `<bibliography />` lists them all on a slide (`part="1/2"` splits a long list). Reference files may be BibTeX (`.bib`), CSL-JSON (`.json`) or Hayagriva (`.yml`, Typst's format), several at once. `csl:` picks the style, `apa` by default, `vancouver`, `harvard1` or any `.csl` file; the style's words follow `lang`. `nocite:` lists works without citing them. Formatting happens at build time, so a deck carries only the finished text. Unknown keys are marked on the slide and reported by `mdeck check`.
|
|
6
|
+
- `mdeck check --render` looks at the deck in Chrome: it builds it, shows every slide with all steps revealed, and reports content that does not fit, text cut off at the slide's edge or hard to read on what is behind it, and errors the page reports, each with the slide's number, heading and line. `mdeck snapshot` saves slides as PNG files (`--slide 3,5-7`, `--dark`, `--light`, `-o`; by default in `.mdeck-snapshots/`), so a person or an assistant can look at them. The slide-writing skill uses both.
|
|
7
|
+
- New view `?view=follow`: people in the room follow the talk on their phone or laptop. It shows the slide the presenter shows, step by step, and their drawing, read from the stage room without sending anything; people can page back and return with **Back to live**, and never see a slide or step before the presenter shows it. `<qrcode follow />` shows its link on a slide, the phones' answer page links to it (**Follow the slides**), and `mdeck run --network` prints it. It works on the same network with `mdeck run --network`, and anywhere for a deck hosted with a `server` setting. Followers count as phones in the presenter's overview of who is connected.
|
|
8
|
+
- Fixed: a web video (YouTube, Vimeo, SwitchTube) in `<videoplayer>`'s click mode went on playing, with sound, after leaving its slide. Leaving the slide now stops it; coming back shows it ready to play.
|
|
9
|
+
- Straight lines snap to steps of 15° (horizontal, vertical, 45° …) when they are within 4° of one, both when a held stroke straightens and when an end point is dragged; further off they stay as drawn.
|
|
10
|
+
- Polls have a button with an eye that shows or hides the results (bars and counts), also in the audience window and on paired devices. `results="hidden"` starts with them hidden, e.g. for peer instruction; the audience then sees no bars, the presenter's own screens show them faint.
|
|
11
|
+
- `--no-polls` leaves slides with a poll, question, word cloud, scale or join code (`<qrcode join />`) out of `mdeck send`, `mdeck build --reader` and `mdeck pdf`. By default they stay as a record of the talk. Drawings stay on their slides.
|
|
12
|
+
|
|
13
|
+
## 3.2.0 — 2026-10-07
|
|
14
|
+
|
|
15
|
+
- Pictures written in the text fit on the slide in every theme: a paragraph of nothing but pictures shrinks into the room below the heading instead of running off the slide, keeping its proportions (small pictures keep their size), and several pictures in one paragraph sit side by side. Such paragraphs have the class `pictures`, for themes that set them their own way; a picture in a sentence is left alone.
|
|
16
|
+
- Tables have room below them in every theme, so a sentence after a table no longer sits right against it.
|
|
17
|
+
- `mdeck themes build` also renders an icon for each theme: its title slide at 96×54 (drawn at twice that, about 3 KB), listed as `icon` in `catalogue.json` and `looks.json`. The theme repository's gallery shows it in its list instead of the palette's colours, which said little about a theme.
|
|
18
|
+
|
|
3
19
|
## 3.1.0 — 2026-10-07
|
|
4
20
|
|
|
5
21
|
- Packs are gone: every theme and palette is installed on its own. `mdeck themes install duet` installs the theme with its default palette (`cobalt`), and `mdeck palettes install solarized` a palette; both have `search`, `remove`, `update` and `list`. A palette made for one theme (FHNW's `brand`) brings that theme along and goes with it. A palette an installed theme uses by default is not removed while that theme is there. Installs go into `themes/<id>/` and `palettes/<id>/` of the extensions folder, so a theme and a palette may share a name.
|
package/assets/base.css
CHANGED
|
@@ -162,11 +162,35 @@ deck-stage[data-ink-hidden] .slide-ink { display: none; }
|
|
|
162
162
|
/* ── Code blocks ─────────────────────────────────────────────────────────── */
|
|
163
163
|
.code-block { white-space: pre-wrap; overflow-x: hidden; }
|
|
164
164
|
|
|
165
|
+
/* ── Pictures written in the text ───────────────────────────────────────── */
|
|
166
|
+
/* A paragraph of nothing but pictures (marked in markedSetup.js) fits into
|
|
167
|
+
the room the slide has left: a large picture shrinks, keeping its
|
|
168
|
+
proportions, and never runs off the slide; a small one keeps its size.
|
|
169
|
+
Several sit side by side. Themes may set them differently (a grid, cropped
|
|
170
|
+
to fill); a picture in a sentence is left alone. */
|
|
171
|
+
.slide-body p.pictures {
|
|
172
|
+
display: flex;
|
|
173
|
+
align-items: center;
|
|
174
|
+
gap: 16px;
|
|
175
|
+
flex: 0 1 auto;
|
|
176
|
+
min-height: 0;
|
|
177
|
+
}
|
|
178
|
+
.slide-body p.pictures > :is(img, .themed-picture) {
|
|
179
|
+
flex: 0 1 auto;
|
|
180
|
+
min-width: 0;
|
|
181
|
+
min-height: 0;
|
|
182
|
+
max-width: 100%;
|
|
183
|
+
max-height: 100%;
|
|
184
|
+
object-fit: contain;
|
|
185
|
+
}
|
|
186
|
+
|
|
165
187
|
/* ── Tables ──────────────────────────────────────────────────────────────── */
|
|
166
188
|
.slide-body table {
|
|
167
189
|
border-collapse: collapse;
|
|
168
190
|
width: 100%;
|
|
169
191
|
font-size: var(--fs-body);
|
|
192
|
+
/* Room before what follows, such as a sentence about the numbers. */
|
|
193
|
+
margin-bottom: calc(var(--gap-item, 24px) * 1.5);
|
|
170
194
|
}
|
|
171
195
|
.slide-body th,
|
|
172
196
|
.slide-body td {
|
|
@@ -579,6 +579,21 @@ strong { color: var(--ink); font-weight: 700; }
|
|
|
579
579
|
}
|
|
580
580
|
.slide-footnotes li { line-height: 1.4; }
|
|
581
581
|
.slide-body sup { color: var(--accent); font-weight: 600; }
|
|
582
|
+
.slide-citations { font-family: var(--font-body); }
|
|
583
|
+
.slide-citations:not(.slide-footnotes + .slide-citations) {
|
|
584
|
+
border-top: 0;
|
|
585
|
+
position: relative;
|
|
586
|
+
padding-top: 14px;
|
|
587
|
+
}
|
|
588
|
+
.slide-citations:not(.slide-footnotes + .slide-citations)::before {
|
|
589
|
+
content: '';
|
|
590
|
+
position: absolute;
|
|
591
|
+
top: 0;
|
|
592
|
+
left: 0;
|
|
593
|
+
width: 280px;
|
|
594
|
+
height: 1px;
|
|
595
|
+
background: var(--ink-soft);
|
|
596
|
+
}
|
|
582
597
|
|
|
583
598
|
/* ─────────────────────────────────────────────
|
|
584
599
|
CODE — a listing on the surface, a rule at its side
|
|
@@ -63,6 +63,10 @@ Each `---` line starts a new slide. Frontmatter is only needed when you want a s
|
|
|
63
63
|
| `params` | — | Theme-specific color/font overrides (see below) |
|
|
64
64
|
| `reader.themes` | `true` | Whether the reader view offers a switch between light and dark (see below) |
|
|
65
65
|
| `reader.notes` | `false` | Whether the reader view shows speaker notes under each slide in Read mode |
|
|
66
|
+
| `bibliography` | — | Reference file, or a list of them, relative to the deck: `.bib`, `.json` (CSL-JSON) or `.yml` (Hayagriva) (see [Citations](#citations-and-references)) |
|
|
67
|
+
| `csl` | `apa` | Citation style: `apa`, `vancouver`, `harvard1`, or a `.csl` file |
|
|
68
|
+
| `nocite` | — | References to list without citing them; `['*']` lists the whole file |
|
|
69
|
+
| `show.citations` | `true` | `false` leaves out each slide's own references above the footer |
|
|
66
70
|
|
|
67
71
|
### Theme params
|
|
68
72
|
|
|
@@ -87,7 +91,8 @@ reader:
|
|
|
87
91
|
```
|
|
88
92
|
|
|
89
93
|
Views are chosen with one address parameter: `?view=deck`, `?view=reader`,
|
|
90
|
-
`?view=presenter` or `?view=
|
|
94
|
+
`?view=presenter`, `?view=audience` or `?view=follow` (the presenter's slide and
|
|
95
|
+
ink on another device, read from the stage room; never ahead of the presenter). `mdeck send` produces a file that opens
|
|
91
96
|
in the reader view (outline, Read mode, a light/dark switch, PDF download).
|
|
92
97
|
The file carries only the deck's own theme and palette, with that theme's
|
|
93
98
|
fonts, so readers see the deck as it was made; they can switch between its
|
|
@@ -376,6 +381,52 @@ This claim needs a source.[^1]
|
|
|
376
381
|
[^1]: The source citation goes here.
|
|
377
382
|
```
|
|
378
383
|
|
|
384
|
+
### Citations and references
|
|
385
|
+
|
|
386
|
+
Name a reference file in the deck frontmatter and cite its entries by key, in the syntax Pandoc and Quarto use:
|
|
387
|
+
|
|
388
|
+
```markdown
|
|
389
|
+
---
|
|
390
|
+
bibliography: refs.bib
|
|
391
|
+
csl: apa
|
|
392
|
+
---
|
|
393
|
+
# Results
|
|
394
|
+
|
|
395
|
+
As @smith2020 showed, it works [see @smith2020, p. 12; @doe2019].
|
|
396
|
+
|
|
397
|
+
---
|
|
398
|
+
# References
|
|
399
|
+
|
|
400
|
+
<bibliography />
|
|
401
|
+
```
|
|
402
|
+
|
|
403
|
+
| Written | APA | Vancouver |
|
|
404
|
+
|---|---|---|
|
|
405
|
+
| `[@smith2020]` | (Smith et al., 2020) | (1) |
|
|
406
|
+
| `[@smith2020, p. 12]` | (Smith et al., 2020, p. 12) | (1) |
|
|
407
|
+
| `[see @smith2020; @doe2019]` | (see Smith et al., 2020; Doe, 2019) | (1,2) |
|
|
408
|
+
| `[-@smith2020]` | (2020) | (1) |
|
|
409
|
+
| `@smith2020` | Smith et al. (2020) | Smith et al. (1) |
|
|
410
|
+
| `@smith2020 [chap. 3]` | Smith et al. (2020, Chapter 3) | Smith et al. (1) |
|
|
411
|
+
|
|
412
|
+
- **On the slide** each citation shows in the style's short form, and the full reference of every work the slide cites stands in small type above the footer, after any footnotes. `show.citations: false` leaves those out.
|
|
413
|
+
- **`<bibliography />`** lists every cited work, plus those named in `nocite`, in the style's order. A list too long for one slide goes on several: `<bibliography part="1/2" />` on one and `<bibliography part="2/2" />` on the next split it in halves.
|
|
414
|
+
- **Locators** after a comma: `p.`/`pp.`, `chap.`, `sec.`, `fig.`, `vol.`, `para.`, `no.`, `l.`, `eq.` and the German `S.`, `Kap.`, `Abb.`, `Bd.`, `Nr.`; a bare number is a page.
|
|
415
|
+
- **`@key` without brackets** is a citation only when the key is in the reference file, so e-mail addresses and `@handles` stay text. Citations in code, in links' addresses and in `:::notes` blocks work as in slide text, except that notes show no reference footer.
|
|
416
|
+
- **A key that is not in the file** shows as `@key?`, marked, and `mdeck check` and `mdeck build` warn about it.
|
|
417
|
+
|
|
418
|
+
**Reference files.** `bibliography` takes one file or a list:
|
|
419
|
+
|
|
420
|
+
| Extension | Format | Comes from |
|
|
421
|
+
|---|---|---|
|
|
422
|
+
| `.bib` | BibTeX / BibLaTeX | Zotero, JabRef, Google Scholar, most journals |
|
|
423
|
+
| `.json` | CSL-JSON | Zotero ("CSL JSON"), Pandoc |
|
|
424
|
+
| `.yml`, `.yaml` | Hayagriva (Typst), or CSL-YAML when the file is a list | Typst projects |
|
|
425
|
+
|
|
426
|
+
**Styles.** `apa`, `vancouver` and `harvard1` are built in. Any other style from the [CSL style repository](https://www.zotero.org/styles) works as a file next to the deck: `csl: nature.csl`. The style's words (`p.`/`S.`, `and`/`und`, `et al.`/`u. a.`) follow the deck's `lang`; English, German, French, Spanish and Dutch are included, other languages fall back to English. Note styles (such as Chicago notes-bibliography) are written for footnotes; on slides an author-date or numeric style reads better.
|
|
427
|
+
|
|
428
|
+
The references are formatted when the deck is built, so the deck carries only the finished text and works offline; the dev server reformats them when the deck or a reference file changes.
|
|
429
|
+
|
|
379
430
|
---
|
|
380
431
|
|
|
381
432
|
## Code blocks
|
|
@@ -533,6 +584,12 @@ labels:
|
|
|
533
584
|
| `respond.send` | Send | Senden |
|
|
534
585
|
| `respond.sent` | Sent. Thank you! | Gesendet. Danke! |
|
|
535
586
|
| `join.scan` | Scan to join | Scannen und mitmachen |
|
|
587
|
+
| `follow.scan` | Scan to follow the slides | Scannen und Folien mitverfolgen |
|
|
588
|
+
| `follow.open` | Follow the slides | Folien mitverfolgen |
|
|
589
|
+
| `follow.live` | Live | Live |
|
|
590
|
+
| `follow.back` | Back to live | Zur aktuellen Folie |
|
|
591
|
+
| `follow.waiting` | The talk has not started yet. | Der Vortrag hat noch nicht begonnen. |
|
|
592
|
+
| `follow.tryHere` | Try following here | Mitverfolgen hier ausprobieren |
|
|
536
593
|
| `question.empty` | Answers appear here. | Hier erscheinen die Antworten. |
|
|
537
594
|
| `scale.average` | Average {n} | Durchschnitt {n} |
|
|
538
595
|
|
|
@@ -594,6 +651,19 @@ Reference images with standard Markdown syntax or the `image:` frontmatter field
|
|
|
594
651
|

|
|
595
652
|
```
|
|
596
653
|
|
|
654
|
+
A paragraph of nothing but pictures fits into the room the slide has left: a
|
|
655
|
+
large picture shrinks, keeping its proportions, and a small one keeps its
|
|
656
|
+
size. Several pictures in one paragraph sit side by side:
|
|
657
|
+
|
|
658
|
+
```markdown
|
|
659
|
+
# Three mornings
|
|
660
|
+
|
|
661
|
+
  
|
|
662
|
+
```
|
|
663
|
+
|
|
664
|
+
A picture inside a sentence stays in the sentence. Themes may set picture
|
|
665
|
+
paragraphs their own way (Lightbox fills a grid edge to edge).
|
|
666
|
+
|
|
597
667
|
A local SVG whose source contains `var(--…)` is drawn inline instead of as an
|
|
598
668
|
`<img>`, both in slide text (`` or `<img src>`) and as a
|
|
599
669
|
layout's `image` (`title`, `chapter`, `image-text`, `full-bleed-image`, and
|
|
@@ -676,6 +746,7 @@ For `play="auto"` the video pauses and resets to the beginning when you navigate
|
|
|
676
746
|
| `question` | — | Question text; phones fall back to the slide heading |
|
|
677
747
|
| `qr` | `true` | `false` leaves out the QR code (shown earlier with `<qrcode join />`) |
|
|
678
748
|
| `answer` | — | The right answer (several separated by `\|`): a button with a tick outlines its label, bar and count in green, also in the audience window and on paired devices. `--poll-correct` sets the colour |
|
|
749
|
+
| `results` | — | `hidden` starts with the results hidden, e.g. for peer instruction. A button with an eye shows or hides them (bars and counts) at any time, also in the audience window and on paired devices. Hidden, the audience window shows no bars; the presenter's own screens show them faint |
|
|
679
750
|
|
|
680
751
|
Three more activities take the same `room`, `question` and `qr`:
|
|
681
752
|
|
|
@@ -685,10 +756,12 @@ Three more activities take the same `room`, `question` and `qr`:
|
|
|
685
756
|
| `<wordcloud>` | `placeholder`, `limit` (60), `height` (520) | Text field, up to 40 characters, repeatable | A packed word cloud (d3-cloud): size by frequency, some words upright, case-insensitive |
|
|
686
757
|
| `<question>` | `placeholder`, `limit` (8) | Text field, up to 200 characters, repeatable | The newest answers as cards |
|
|
687
758
|
|
|
688
|
-
`<qrcode join />` shows the deck's join code large with its link (`size`, default 420), for a slide that invites everyone once; activities after it can use `qr="false"`. QR codes (`<qrcode>`, activities) are SVG in the slide's `--ink` on a transparent background; `--qr-ink` and `--qr-bg` override the colours.
|
|
759
|
+
`<qrcode follow />` shows the link for following the slides on phones and laptops (`?view=follow`), with `mdeck run --network` or a hosted deck with a `server` setting; the phones' answer page links to it as well. `<qrcode join />` shows the deck's join code large with its link (`size`, default 420), for a slide that invites everyone once; activities after it can use `qr="false"`. QR codes (`<qrcode>`, activities) are SVG in the slide's `--ink` on a transparent background; `--qr-ink` and `--qr-bg` override the colours.
|
|
689
760
|
|
|
690
761
|
The slide shows live bars, the number of answers, a QR code and a short link. Phones never load the deck: they open the server's own answer page at `<server>/<code>`, where the six-digit session code is the same for every poll in the deck. The presenter's screen (the presenter view or a full deck window, never an embedded preview) announces the poll on the current slide with what the phones should show and the deck's look; the server only accepts that from the presenter. Between polls the phones wait. Each device's latest vote counts. The presenter can reset the room (hover over the results).
|
|
691
762
|
|
|
763
|
+
`--no-polls` leaves slides with an activity or a join code (`<qrcode join />`) out of `mdeck send`, `mdeck build --reader` and `mdeck pdf`; without it they show as a record of the talk. Saved drawings follow the remaining slides.
|
|
764
|
+
|
|
692
765
|
Rooms run inside `mdeck run` (add `--network` so phones can reach it) or on a server started with `mdeck server`, set in the deck:
|
|
693
766
|
|
|
694
767
|
```yaml
|
|
@@ -246,7 +246,9 @@ touch files changed since then unless given `--force`.
|
|
|
246
246
|
|
|
247
247
|
The repository serves `catalogue.json` (`{ schema: 2, themes: [...],
|
|
248
248
|
palettes: [...] }`, each with its id, version, default palette or theme,
|
|
249
|
-
`url`, `sha256`, `preview`,
|
|
249
|
+
`url`, `sha256`, `preview`, for a theme an `icon` (its title slide at
|
|
250
|
+
96×54, drawn at twice that for sharp screens), and `builtIn` for those that
|
|
251
|
+
come with mdeck) and
|
|
250
252
|
one JSON file per version holding the text of its files.
|
|
251
253
|
`mdeck themes build <repository> -o <out> [--check]` writes both from a
|
|
252
254
|
folder with `themes/` and `palettes/`; `MDECK_THEMES_URL` points mdeck at
|
|
@@ -73,6 +73,12 @@ Each question shows the QR code unless you say otherwise. To invite everybody on
|
|
|
73
73
|
|
|
74
74
|
The code is drawn in the slide's colours, so it fits the theme; phone cameras also read light codes on dark slides.
|
|
75
75
|
|
|
76
|
+
### Follow the slides on a phone
|
|
77
|
+
|
|
78
|
+
`<qrcode follow />` shows a code that opens your slides on people's phones and laptops, following you: the slide you show, step by step, and what you draw. They can page back to read something again and return with **Back to live**; slides you have not shown yet stay hidden. The phones' answer page links to it too (**Follow the slides**), so one join code can do both.
|
|
79
|
+
|
|
80
|
+
It needs their devices to reach your slides: present with `mdeck run --network` when everyone is on the same Wi-Fi (it prints the **Follow** address), or host the built deck with a `server` setting for people anywhere.
|
|
81
|
+
|
|
76
82
|
Hover over the results to see **Reset**, which clears the answers, for example before the real session. Only the presenter can reset.
|
|
77
83
|
|
|
78
84
|
## How phones and slides meet
|
|
@@ -16,7 +16,8 @@ For how the commands, the views and the servers fit together, see [Views, comman
|
|
|
16
16
|
| `mdeck palettes search`, `install <palette>`, … | The same for palettes |
|
|
17
17
|
| `mdeck design [my-talk.md or folder]` | Look at themes and palettes on a sample deck and fine-tune them; saves to `extensions/` |
|
|
18
18
|
| `mdeck migrate my-talk.md --dry-run` | Preview the changes needed for API 2.0 |
|
|
19
|
-
| `mdeck check my-talk.md` | Check settings and look for missing local files |
|
|
19
|
+
| `mdeck check my-talk.md` | Check settings and look for missing local files; `--render` also finds slides whose content does not fit |
|
|
20
|
+
| `mdeck snapshot my-talk.md` | Save pictures of the slides as PNG files, for you or your assistant to look at |
|
|
20
21
|
| `mdeck send my-talk.md` | Make one file to send to readers, with a PDF inside |
|
|
21
22
|
| `mdeck build my-talk.md` | Make a folder to host in `dist` |
|
|
22
23
|
| `mdeck pdf my-talk.md` | Make a PDF |
|
|
@@ -86,14 +87,15 @@ The design page shows themes and palettes on a sample deck with every kind of sl
|
|
|
86
87
|
| Command | Result |
|
|
87
88
|
|---|---|
|
|
88
89
|
| `mdeck build my-talk.md` | A folder in `dist` with every view, to host or copy |
|
|
89
|
-
| `mdeck build my-talk.md --reader` | A hosted reader folder with speaker notes removed; add `--notes` to retain them |
|
|
90
|
+
| `mdeck build my-talk.md --reader` | A hosted reader folder with speaker notes removed; add `--notes` to retain them, `--no-polls` to leave out the slides with polls and their join codes |
|
|
90
91
|
| `mdeck build my-talk.md -o talk.html` | Choose the output filename; local media stays alongside it |
|
|
91
92
|
| `mdeck build my-talk.md --single-file -o talk.html` | Embed local images and media in one HTML file of the presentation |
|
|
92
93
|
| `mdeck build my-talk.md --launchers` | Include presenter launchers in the folder build |
|
|
93
94
|
| `mdeck send my-talk.md` | One file for readers: the reader view, speaker notes removed, a PDF inside |
|
|
94
95
|
| `mdeck send my-talk.md --notes` | The same, keeping the speaker notes |
|
|
96
|
+
| `mdeck send my-talk.md --no-polls` | The same, leaving out the slides with polls and their join codes |
|
|
95
97
|
| `mdeck send my-talk.md --no-pdf` | The same, without rendering the PDF |
|
|
96
|
-
| `mdeck pdf my-talk.md -o talk.pdf` | Render the slides to a PDF file |
|
|
98
|
+
| `mdeck pdf my-talk.md -o talk.pdf` | Render the slides to a PDF file (`--no-polls` leaves out the slides with polls) |
|
|
97
99
|
| `--no-drawings` | Leave out the drawings from `my-talk.drawings.json`, for `build`, `send` and `pdf` |
|
|
98
100
|
|
|
99
101
|
See [Send, host or print your slides](sharing.html) for help choosing between them. Unknown options, missing option values and extra filenames stop the command before it changes any output. `--output=path` and `-o path` are both accepted. `mdeck preview --no-open --port 4200` previews without opening a browser and chooses a port.
|
|
@@ -117,7 +119,29 @@ mdeck check my-talk.md --strict
|
|
|
117
119
|
|
|
118
120
|
The ordinary check fails when it finds an error. The strict check also fails when it finds a warning, such as a layout name it does not recognize.
|
|
119
121
|
|
|
120
|
-
|
|
122
|
+
## Check how the slides look
|
|
123
|
+
|
|
124
|
+
```sh
|
|
125
|
+
mdeck check my-talk.md --render
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
This builds the deck and shows every slide in Chrome, with all steps revealed as in a PDF. It reports, by slide, heading and line:
|
|
129
|
+
|
|
130
|
+
- content that is taller than the slide's room for it;
|
|
131
|
+
- text that is cut off at the slide's edge;
|
|
132
|
+
- text that is hard to read on a plain background behind it;
|
|
133
|
+
- errors the page reports, such as a component that fails.
|
|
134
|
+
|
|
135
|
+
The check takes a few seconds and needs Chrome or Chromium; set `MDECK_CHROME` to its path if it is not found. It checks the deck in its own appearance. A slide with a problem it cannot measure, such as text on a photo, still needs a look in the preview.
|
|
136
|
+
|
|
137
|
+
## Pictures of the slides
|
|
138
|
+
|
|
139
|
+
```sh
|
|
140
|
+
mdeck snapshot my-talk.md
|
|
141
|
+
mdeck snapshot my-talk.md --slide 3,5-7 --dark
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
This saves each slide, with all steps revealed, as a 1280×720 PNG file in `.mdeck-snapshots/` beside the deck (`-o` for another folder), named `my-talk-03.png` and so on, and prints the paths. `--slide` picks slides by number; `--dark` and `--light` show that appearance instead of the deck's own. An AI assistant that reads pictures can use them to look at what it wrote. If you keep your slides in Git, add `.mdeck-snapshots/` to your `.gitignore`.
|
|
121
145
|
|
|
122
146
|
## Layouts, themes and palettes
|
|
123
147
|
|
|
@@ -16,7 +16,7 @@ Press **D** in standalone slides or in the presenter view, or use the pen button
|
|
|
16
16
|
|
|
17
17
|
**Zoom**: two fingers zoom into the slide and move around it, one finger moves a zoomed slide, and Ctrl + scroll (a trackpad pinch) zooms on a laptop. Only the slide grows; the bars and the toolbar keep their size. The audience window shows the same part of the slide. **1:1** at the top left shows the whole slide again, as does the next slide.
|
|
18
18
|
|
|
19
|
-
On a touch screen such as an iPad, drawing is on as soon as the presenter view opens, and in the deck as soon as the pencil touches it, with the toolbar folded into its button in the bottom right corner (↘ folds it again). Until then, a tap on the right third of the screen goes forward, on the left third back, and a swipe does the same. Drawing starts with the laser pointer; choose the pen or the highlighter to write. The pen and the highlighter each have colours and three sizes, and each keeps its own; one pen colour is **Accent**, the accent colour of the theme and palette: a drawing in it changes with them. The other pen colours follow light and dark: on dark slides red, blue and green are lighter, and the text colour is white instead of black. The toolbar also has undo and redo (also Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z), **Clear this slide**, and **×** to stop drawing; **D** and **Escape** do the same. While you draw, the pencil and the mouse draw; fingers keep working: a swipe to the left goes forward, to the right back, a tap on a stroke selects it, and buttons and polls on the slide still respond. Turn slides with the arrow keys or the presenter view's arrows, as always. Holding the pen still for half a second at the end of a stroke makes it a straight line.
|
|
19
|
+
On a touch screen such as an iPad, drawing is on as soon as the presenter view opens, and in the deck as soon as the pencil touches it, with the toolbar folded into its button in the bottom right corner (↘ folds it again). Until then, a tap on the right third of the screen goes forward, on the left third back, and a swipe does the same. Drawing starts with the laser pointer; choose the pen or the highlighter to write. The pen and the highlighter each have colours and three sizes, and each keeps its own; one pen colour is **Accent**, the accent colour of the theme and palette: a drawing in it changes with them. The other pen colours follow light and dark: on dark slides red, blue and green are lighter, and the text colour is white instead of black. The toolbar also has undo and redo (also Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z), **Clear this slide**, and **×** to stop drawing; **D** and **Escape** do the same. While you draw, the pencil and the mouse draw; fingers keep working: a swipe to the left goes forward, to the right back, a tap on a stroke selects it, and buttons and polls on the slide still respond. Turn slides with the arrow keys or the presenter view's arrows, as always. Holding the pen still for half a second at the end of a stroke makes it a straight line; near a multiple of 15° (horizontal, vertical, 45° …) it snaps to that angle.
|
|
20
20
|
|
|
21
21
|
**I** hides and shows what was drawn before, for example when a slide should look clean again. The toolbar has the same switch.
|
|
22
22
|
|
|
@@ -81,6 +81,28 @@ This finding comes from our neighborhood survey.[^survey]
|
|
|
81
81
|
|
|
82
82
|
The name inside the brackets connects the sentence to its source. Give each source a different name.
|
|
83
83
|
|
|
84
|
+
If you keep your sources in Zotero or another reference manager, export them as a `.bib` file next to the deck and cite them by their keys. The slide shows a short citation and lists the full reference at its bottom; a slide with `<bibliography />` lists them all:
|
|
85
|
+
|
|
86
|
+
```markdown
|
|
87
|
+
---
|
|
88
|
+
bibliography: refs.bib
|
|
89
|
+
---
|
|
90
|
+
# Results
|
|
91
|
+
|
|
92
|
+
Gardens cool the street [@smith2020, p. 12].
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
# Sources
|
|
96
|
+
|
|
97
|
+
<bibliography />
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
- `[@smith2020, p. 12]` adds a page, `[see @smith2020; @doe2019]` cites two works at once, and `@smith2020` in a sentence reads "Smith et al. (2020)".
|
|
101
|
+
- `csl: vancouver` numbers the works instead; `harvard1` is built in too, and any style from the [Zotero style repository](https://www.zotero.org/styles) works as a `.csl` file next to the deck. Words such as "p." follow the deck's `lang`.
|
|
102
|
+
- Besides `.bib`, a CSL-JSON file (`.json`) or a Typst Hayagriva file (`.yml`) works, and `bibliography:` takes a list of several.
|
|
103
|
+
- A long list goes over two slides with `<bibliography part="1/2" />` and `<bibliography part="2/2" />`.
|
|
104
|
+
- A key that is not in the file shows as `@key?`, and `mdeck check` names it.
|
|
105
|
+
|
|
84
106
|
## Add a QR code
|
|
85
107
|
|
|
86
108
|
A QR code lets people open a link on their phones. Replace the address below with your own:
|
|
@@ -20,6 +20,7 @@ Send `my-talk.html` by email. It opens in a **reader view**: an outline of all s
|
|
|
20
20
|
|
|
21
21
|
- Drawings from `my-talk.drawings.json` are part of every build and PDF; `--no-drawings` leaves them out. See [Draw on your slides](drawing.html).
|
|
22
22
|
- Your speaker notes are removed. Add `--notes` to keep them in the file, for example when you also present from the same file. Readers only see notes if you put `reader:` with `notes: true` in the settings at the top of your slide file.
|
|
23
|
+
- Slides with a poll, question, word cloud or scale stay as a record of the talk: the question and its options, marked as answered live. Add `--no-polls` to leave them out of the file and its PDF, together with slides showing the join code (`<qrcode join />`).
|
|
23
24
|
- The PDF is made while sending, using Chrome or Chromium on your computer. If neither is found, the button offers the browser's own "Save as PDF" dialog instead. Set `MDECK_CHROME` to the browser's path if it is installed somewhere unusual. `--no-pdf` skips it.
|
|
24
25
|
- `-o` chooses the name: `mdeck send my-talk.md -o handout.html`.
|
|
25
26
|
- The file keeps your theme and colours; readers can only switch between light and dark. To keep that fixed too, put `reader:` with `themes: false` in the settings at the top of your slide file.
|
|
@@ -61,7 +61,7 @@ For new slides, a settings block should begin with `:::meta` and end with `:::`.
|
|
|
61
61
|
|
|
62
62
|
## Text is missing or does not fit
|
|
63
63
|
|
|
64
|
-
A slide has a fixed amount of space. Split a long explanation over two slides, shorten a paragraph, or try a simpler layout.
|
|
64
|
+
A slide has a fixed amount of space. Split a long explanation over two slides, shorten a paragraph, or try a simpler layout. `mdeck check my-talk.md --render` lists the slides whose content does not fit, with the line each starts on.
|
|
65
65
|
|
|
66
66
|
If you see an “unknown region” error, check that the layout supports the named area you used. For example, `left` and `right` work with `split`, but not with `title`.
|
|
67
67
|
|
|
@@ -11,12 +11,14 @@ Every build and every preview contains all views. The address picks one with `?v
|
|
|
11
11
|
| `?view=deck` | Standalone slides with drawing controls | Slides opened from the reader view or a built file |
|
|
12
12
|
| `?view=presenter` | Current and next slide, notes and timer, and a button that opens the audience window | You, while presenting |
|
|
13
13
|
| `?view=audience` | Slides without notes, with navigation synced to the presenter view | The projector |
|
|
14
|
-
| `?view=reader` | The reader view: an outline, **Slides** and **Read** modes,
|
|
14
|
+
| `?view=reader` | The reader view: an outline, **Slides** and **Read** modes, light or dark, and a PDF | People you send the talk to |
|
|
15
|
+
| `?view=follow` | The slide you are showing and your drawing, live; people can page back and return with **Back to live**, but never see a slide before you show it | People in the room, on their phone or laptop |
|
|
15
16
|
|
|
16
17
|
Ways to switch between them:
|
|
17
18
|
|
|
18
19
|
- The **Overview** link in the corner of the deck opens the reader view. Its outline is the overview of all slides.
|
|
19
20
|
- **Present** in the reader view opens standalone slides at the current slide.
|
|
21
|
+
- People in the room open the follow view with `<qrcode follow />` on a slide, with the **Follow the slides** link on the phones' answer page, or with the **Follow** address `mdeck run --network` prints. It works where their devices reach both the slides and your stage room: on the same network with `mdeck run --network`, or anywhere for a deck hosted with a `server` setting.
|
|
20
22
|
- The presenter view's audience-window button opens the audience view in a new window. Navigation in either window updates the other, in the same browser or on a paired iPad: see [Draw on your slides](drawing.html#present-from-an-ipad).
|
|
21
23
|
- The launch page of `mdeck run`, at the preview's plain address, offers Presenter, Audience and Reader. Its presenter and audience buttons belong together.
|
|
22
24
|
- Fullscreen is a control inside a view (**F** or its fullscreen button). For a single screen, use the presenter view's slide-only layout.
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
@article{sweller1988,
|
|
2
|
+
author = {Sweller, John},
|
|
3
|
+
title = {Cognitive Load During Problem Solving: Effects on Learning},
|
|
4
|
+
journal = {Cognitive Science},
|
|
5
|
+
year = {1988},
|
|
6
|
+
volume = {12},
|
|
7
|
+
number = {2},
|
|
8
|
+
pages = {257--285},
|
|
9
|
+
doi = {10.1207/s15516709cog1202_4}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@article{roediger2006,
|
|
13
|
+
author = {Roediger, Henry L. and Karpicke, Jeffrey D.},
|
|
14
|
+
title = {Test-Enhanced Learning: Taking Memory Tests Improves Long-Term Retention},
|
|
15
|
+
journal = {Psychological Science},
|
|
16
|
+
year = {2006},
|
|
17
|
+
volume = {17},
|
|
18
|
+
number = {3},
|
|
19
|
+
pages = {249--255},
|
|
20
|
+
doi = {10.1111/j.1467-9280.2006.01693.x}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@book{mayer2009,
|
|
24
|
+
author = {Mayer, Richard E.},
|
|
25
|
+
title = {Multimedia Learning},
|
|
26
|
+
edition = {2},
|
|
27
|
+
publisher = {Cambridge University Press},
|
|
28
|
+
address = {Cambridge},
|
|
29
|
+
year = {2009}
|
|
30
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# The same deck can draw on a Typst (Hayagriva) file as well.
|
|
2
|
+
freeman2014:
|
|
3
|
+
type: Article
|
|
4
|
+
title: Active learning increases student performance in science, engineering, and mathematics
|
|
5
|
+
author:
|
|
6
|
+
- Freeman, Scott
|
|
7
|
+
- Eddy, Sarah L.
|
|
8
|
+
- McDonough, Miles
|
|
9
|
+
- Smith, Michelle K.
|
|
10
|
+
- Okoroafor, Nnadozie
|
|
11
|
+
- Jordt, Hannah
|
|
12
|
+
- Wenderoth, Mary Pat
|
|
13
|
+
date: 2014
|
|
14
|
+
page-range: 8410-8415
|
|
15
|
+
serial-number:
|
|
16
|
+
doi: 10.1073/pnas.1319030111
|
|
17
|
+
parent:
|
|
18
|
+
type: Periodical
|
|
19
|
+
title: Proceedings of the National Academy of Sciences
|
|
20
|
+
volume: 111
|
|
21
|
+
issue: 23
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
---
|
|
2
|
+
theme: academic
|
|
3
|
+
meta:
|
|
4
|
+
title: "What helps people learn"
|
|
5
|
+
author: "Tilman Schieber"
|
|
6
|
+
organization: "FHNW"
|
|
7
|
+
bibliography: [refs.bib, refs.yml]
|
|
8
|
+
csl: apa
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
:::meta
|
|
13
|
+
layout: title
|
|
14
|
+
:::
|
|
15
|
+
# What helps people learn
|
|
16
|
+
## Citations from a reference file
|
|
17
|
+
|
|
18
|
+
:::notes
|
|
19
|
+
The references come from `refs.bib` (BibTeX, as Zotero exports it) and `refs.yml` (Hayagriva, Typst's format). Try `csl: vancouver` or `lang: de` in the deck settings.
|
|
20
|
+
:::
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
# Less on the slide
|
|
24
|
+
|
|
25
|
+
Working memory holds only a few things at once, so a slide that makes people search wastes it [@sweller1988].
|
|
26
|
+
|
|
27
|
+
Words spoken alongside a picture beat the same words printed on it [@mayer2009, chap. 11].
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
# Ask, don't tell
|
|
31
|
+
|
|
32
|
+
As @roediger2006 showed, recalling something fixes it better than reading it again.
|
|
33
|
+
|
|
34
|
+
Lectures with active learning cut failure rates by about a third [@freeman2014; see also @roediger2006].
|
|
35
|
+
|
|
36
|
+
:::notes
|
|
37
|
+
Freeman et al. pooled 225 studies [-@freeman2014].
|
|
38
|
+
:::
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
# References
|
|
42
|
+
|
|
43
|
+
<bibliography />
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mdeck",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Write slides as a plain text file, present them in the browser, share them as one HTML file or PDF.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -57,7 +57,11 @@
|
|
|
57
57
|
"theme-images": "node tools/theme-images.mjs"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
+
"@citation-js/core": "^0.9.0",
|
|
61
|
+
"@citation-js/plugin-bibtex": "^0.9.0",
|
|
62
|
+
"@citation-js/plugin-csl": "^0.9.0",
|
|
60
63
|
"@preact/preset-vite": "^2.10.6",
|
|
64
|
+
"citeproc": "^2.4.63",
|
|
61
65
|
"d3-cloud": "^1.2.9",
|
|
62
66
|
"js-yaml": "^4.3.2",
|
|
63
67
|
"katex": "^0.18.9",
|
|
@@ -41,6 +41,8 @@ meta:
|
|
|
41
41
|
author: "Name"
|
|
42
42
|
organization: "FHNW"
|
|
43
43
|
date: "2026-09-16"
|
|
44
|
+
bibliography: refs.bib # optional: .bib, CSL-JSON or Hayagriva; cite [@key, p. 3] or @key, list with <bibliography />
|
|
45
|
+
csl: apa # optional: apa, vancouver, harvard1 or a .csl file
|
|
44
46
|
---
|
|
45
47
|
|
|
46
48
|
---
|
|
@@ -128,10 +130,12 @@ The request is the message that invoked this skill: usually source material to t
|
|
|
128
130
|
Save the deck as a `.md` file named after the topic (for example `enzyme-kinetics.md`), then run:
|
|
129
131
|
|
|
130
132
|
```sh
|
|
131
|
-
mdeck check <deck>.md
|
|
133
|
+
mdeck check <deck>.md --render
|
|
132
134
|
```
|
|
133
135
|
|
|
134
|
-
Fix anything it reports.
|
|
136
|
+
Fix anything it reports. `--render` builds the deck and shows every slide in Chrome with all steps revealed; it names each slide whose content does not fit, whose text is cut off at the edge or hard to read, with the line the slide starts on. Shorten or split those slides, or pick another layout, and check again. If Chrome is missing, run the check without `--render` and tell the user.
|
|
137
|
+
|
|
138
|
+
To see slides yourself, if you can read pictures, run `mdeck snapshot <deck>.md --slide 3,5-7`: it saves PNG files to `.mdeck-snapshots/` beside the deck and prints their paths (`--dark` shows the dark appearance). Look at slides you were unsure about, such as diagrams, pictures and columns. When you worked from source material, list what you left out or moved to notes, and anything you added that is not in the material. Finish by telling the user the two commands they will want next: `mdeck run <deck>.md` for the launch page (preview, presenting, editor, builds and checks), and `mdeck send <deck>.md` for a file to send around (a reader view with a PDF; notes are removed unless `--notes` is added).
|
|
135
139
|
|
|
136
140
|
## 5. A new look: themes and palettes
|
|
137
141
|
|