mdeck 3.6.1 → 3.7.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 +11 -0
- package/README.md +44 -2
- package/assets/extensions/palettes/cobalt/extension.toml +2 -0
- package/assets/extensions/palettes/greyscale/extension.toml +4 -12
- package/assets/extensions/palettes/lagoon/extension.toml +2 -0
- package/assets/extensions/palettes/nordic/extension.toml +2 -0
- package/assets/extensions/palettes/paper/extension.toml +2 -0
- package/assets/extensions/palettes/swiss/extension.toml +2 -0
- package/assets/extensions/themes/academic/styles.css +2 -4
- package/assets/extensions/themes/glass/styles.css +2 -6
- package/assets/extensions/themes/minimal/styles.css +2 -5
- package/assets/extensions/themes/neue/styles.css +2 -5
- package/assets/extensions/themes/plain/styles.css +1 -2
- package/assets/extensions/themes/work/styles.css +2 -5
- package/docs/reference/authoring.md +1 -1
- package/docs/reference/extensions.md +2 -0
- package/docs/reference/palettes.md +7 -4
- package/docs/site/assets/site.css +21 -0
- package/docs/site/assets/site.js +17 -7
- package/docs/site/build.js +15 -6
- package/docs/site/content/drawing.md +1 -1
- package/docs/site/content/sharing.md +1 -1
- package/docs/site/content/theme-authoring.md +6 -3
- package/docs/site/content/welcome.md +70 -6
- package/docs/site/examples/chart.svg +5 -0
- package/docs/site/examples/contours.jpg +0 -0
- package/docs/site/examples/first-talk.drawings.json +1 -0
- package/docs/site/examples/first-talk.md +125 -35
- package/docs/site/examples/first-talk.results.json +171 -0
- package/docs/site/examples/mdeck.svg +66 -0
- package/docs/site/examples/references.bib +23 -0
- package/docs/site/images/features/citations.webp +0 -0
- package/docs/site/images/features/code.webp +0 -0
- package/docs/site/images/features/drawing.webp +0 -0
- package/docs/site/images/features/polls.webp +0 -0
- package/docs/site/images/features/reader.webp +0 -0
- package/docs/site/images/features/themes.webp +0 -0
- package/docs/site/images/themes/academic-thumb.webp +0 -0
- package/docs/site/images/themes/glass-thumb.webp +0 -0
- package/docs/site/images/themes/minimal-thumb.webp +0 -0
- package/docs/site/images/themes/neue-thumb.webp +0 -0
- package/docs/site/images/themes/plain-thumb.webp +0 -0
- package/docs/site/images/themes/work-thumb.webp +0 -0
- package/package.json +3 -2
- package/skills/write-slides/SKILL.md +1 -1
- package/src/build/check.js +1 -0
- package/src/cli/themes.js +1 -1
- package/src/components/callout.css +11 -21
- package/src/core/labels.js +6 -0
- package/src/editor/components/PalettePicker.jsx +1 -1
- package/src/editor/extensions.js +2 -2
- package/src/extensions/contrast.js +3 -1
- package/src/extensions/manifest.js +7 -3
- package/src/extensions/packages.js +3 -0
- package/src/extensions/tokens.js +10 -2
- package/src/live/client.js +1 -1
- package/src/runtime/ReaderView.jsx +21 -12
- package/src/runtime/chrome.jsx +1 -1
- package/src/runtime/deck-stage.js +5 -1
- package/src/runtime/reader.css +2 -0
- package/docs/site/examples/notebook.svg +0 -58
|
@@ -6,6 +6,74 @@ The content stays yours. The assistant works from your material, not from its ow
|
|
|
6
6
|
|
|
7
7
|
[Make your first presentation](getting-started.html)
|
|
8
8
|
|
|
9
|
+
## What you can do with it
|
|
10
|
+
|
|
11
|
+
<div class="features">
|
|
12
|
+
|
|
13
|
+
<section>
|
|
14
|
+
|
|
15
|
+
[](images/features/drawing.webp)
|
|
16
|
+
|
|
17
|
+
### Draw on your slides, from an iPad if you like
|
|
18
|
+
|
|
19
|
+
Circle a number, underline a phrase, point with a laser. Pair an iPad by scanning a code, and it becomes your presenter screen and drawing pad while the laptop drives the projector: every stroke shows on the big screen as you draw. Drawings are kept with the talk, in its PDF too. [Draw on your slides](drawing.html)
|
|
20
|
+
|
|
21
|
+
</section>
|
|
22
|
+
|
|
23
|
+
<section>
|
|
24
|
+
|
|
25
|
+
[](images/features/polls.webp)
|
|
26
|
+
|
|
27
|
+
### Ask the room, and show the answers on the slide
|
|
28
|
+
|
|
29
|
+
Polls, scales, word clouds, open questions and numbers to guess. People scan the code and answer on their phones, no app needed, and the bars grow as votes come in. Close the vote, discuss, reveal the right answer. The answers are kept with the talk. [Ask your audience](audience.html)
|
|
30
|
+
|
|
31
|
+
</section>
|
|
32
|
+
|
|
33
|
+
<section>
|
|
34
|
+
|
|
35
|
+
[](images/features/citations.webp)
|
|
36
|
+
|
|
37
|
+
### Cite your sources properly
|
|
38
|
+
|
|
39
|
+
Cite as in a paper, `[@knuth1984, p. 97]`, from the BibTeX, CSL-JSON or Hayagriva file you already keep. Each slide lists what it cites at its foot, and a references slide lists everything, in APA, Vancouver, Harvard or any CSL style. [Cite a source](more-content.html#cite-a-source)
|
|
40
|
+
|
|
41
|
+
</section>
|
|
42
|
+
|
|
43
|
+
<section>
|
|
44
|
+
|
|
45
|
+
[](images/features/themes.webp)
|
|
46
|
+
|
|
47
|
+
### Write the content once, change the look anytime
|
|
48
|
+
|
|
49
|
+
The file holds what you say; a theme and a palette decide how it looks. One line changes every slide, light or dark, and your text never moves. Six themes come with mdeck, more are one command away in the [theme repository](https://gh.tschieber.de/mdeck-themes/). [Change the look](appearance.html)
|
|
50
|
+
|
|
51
|
+
</section>
|
|
52
|
+
|
|
53
|
+
<section>
|
|
54
|
+
|
|
55
|
+
[](images/features/code.webp)
|
|
56
|
+
|
|
57
|
+
### Run code on the slide
|
|
58
|
+
|
|
59
|
+
Give a Python or JavaScript example a Run button, change it in front of the audience and run it again. Python runs right in the browser, with packages such as NumPy and pandas, so nothing needs installing. [Show a code example](more-content.html#show-a-code-example)
|
|
60
|
+
|
|
61
|
+
</section>
|
|
62
|
+
|
|
63
|
+
<section>
|
|
64
|
+
|
|
65
|
+
[](images/features/reader.webp)
|
|
66
|
+
|
|
67
|
+
### Send one file that anyone can open
|
|
68
|
+
|
|
69
|
+
`mdeck send` makes a single HTML file for the people you send the talk to: an outline, a reading mode for phones, light and dark, and the PDF inside. It opens in any browser, also offline, and your speaker notes stay out. [Send, host or print](sharing.html)
|
|
70
|
+
|
|
71
|
+
</section>
|
|
72
|
+
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
Also: a presenter view with notes, timer and the next slide; points revealed one at a time; pictures, videos and formulas; a browser editor for those who prefer clicking; and a launch page (`mdeck run`) that gathers it all, with a check for missing pictures and slides that do not fit.
|
|
76
|
+
|
|
9
77
|
<!-- preview -->
|
|
10
78
|
|
|
11
79
|
## Bring your material, then shape it
|
|
@@ -52,13 +120,9 @@ The `#` makes a heading. The line with `---` starts another slide. A dash before
|
|
|
52
120
|
- **Which view or server do I need?** See [Views, commands and servers](views.html).
|
|
53
121
|
- **Something looks wrong?** Try [the troubleshooting guide](troubleshooting.html).
|
|
54
122
|
|
|
55
|
-
##
|
|
56
|
-
|
|
57
|
-
mdeck gives you ready-made slide layouts, different visual themes, speaker notes, pictures, videos, a separate presenter view, drawing on slides (also from an iPad), polls and other questions your audience answers on their phones, and a reader view with a PDF for people you send the slides to. It can also use layouts, themes and colors made for your team, and your assistant can make new ones for a single talk.
|
|
58
|
-
|
|
59
|
-
`mdeck run` opens a launch page for your talk with all of this in one place: the presenter view, the editor, these guides, buttons that make the files to share, and a check for missing pictures.
|
|
123
|
+
## Your file, whoever edits it
|
|
60
124
|
|
|
61
|
-
Whoever writes the slides, your assistant, a text editor, or the built-in browser editor (`mdeck edit`), the file stays the single copy, and the preview updates as it changes.
|
|
125
|
+
Whoever writes the slides, your assistant, a text editor, or the built-in browser editor (`mdeck edit`), the file stays the single copy, and the preview updates as it changes. mdeck can also use layouts, themes and colours made for your team, and your assistant can make new ones for a single talk.
|
|
62
126
|
|
|
63
127
|
## Keep this guide nearby
|
|
64
128
|
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 820 900"><rect width="820" height="900" fill="var(--surface, #f2f2f2)"/>
|
|
2
|
+
<g stroke="var(--rule, #ddd)" stroke-width="2"><path d="M60 760H780"/><path d="M60 585H780"/><path d="M60 410H780"/><path d="M60 235H780"/></g>
|
|
3
|
+
<rect x="90" y="550" width="70" height="210" rx="5" fill="var(--muted, #888)"/><rect x="205" y="480" width="70" height="280" rx="5" fill="var(--muted, #888)"/><rect x="320" y="130" width="70" height="630" rx="5" fill="var(--accent, #888)"/><rect x="435" y="410" width="70" height="350" rx="5" fill="var(--muted, #888)"/><rect x="550" y="550" width="70" height="210" rx="5" fill="var(--muted, #888)"/><rect x="665" y="620" width="70" height="140" rx="5" fill="var(--muted, #888)"/>
|
|
4
|
+
<g fill="var(--muted, #666)" font-family="sans-serif" font-size="30" text-anchor="middle"><text x="125" y="815">A</text><text x="240" y="815">B</text><text x="355" y="815">C</text><text x="470" y="815">D</text><text x="585" y="815">E</text><text x="700" y="815">F</text></g>
|
|
5
|
+
</svg>
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":1,"width":1920,"height":1080,"slides":{"draw":[{"id":"peak","tool":"pen","color":"#e11d48","size":7,"points":[[427,193,0.45],[434,188,0.47],[443,182,0.48],[453,178,0.5],[464,175,0.52],[476,174,0.54],[487,173,0.55],[499,175,0.57],[510,177,0.59],[520,181,0.6],[530,186,0.62],[538,191,0.63],[546,197,0.65],[553,203,0.66],[559,209,0.67],[564,216,0.69],[569,223,0.7],[573,230,0.71],[577,237,0.72],[580,245,0.73],[581,252,0.74],[582,261,0.75],[581,269,0.76],[579,277,0.77],[575,285,0.78],[569,293,0.78],[561,299,0.79],[553,305,0.79],[543,309,0.79],[533,312,0.8],[522,314,0.8],[511,315,0.8],[501,315,0.8],[491,315,0.8],[481,314,0.8],[471,312,0.79],[461,311,0.79],[452,309,0.79],[443,307,0.78],[433,304,0.78],[424,301,0.77],[415,297,0.76],[407,292,0.75],[400,286,0.74],[394,280,0.73],[389,272,0.72],[386,265,0.71],[385,257,0.7],[386,249,0.69],[388,241,0.67],[391,233,0.66],[396,226,0.65],[401,220,0.63],[407,214,0.62],[414,209,0.6],[421,204,0.59],[428,199,0.57],[436,194,0.55],[444,190,0.54],[453,186,0.52],[463,182,0.5],[473,179,0.48],[484,177,0.47],[496,176,0.45]]},{"id":"arrow","tool":"pen","color":"#e11d48","size":7,"points":[[600,215,0.45],[615,215,0.49],[630,215,0.53],[644,215,0.57],[659,215,0.61],[674,216,0.64],[689,218,0.67],[704,220,0.7],[719,223,0.73],[733,226,0.75],[748,230,0.77],[763,236,0.79],[778,242,0.79],[793,249,0.8],[807,257,0.8],[822,266,0.79],[837,275,0.79],[852,286,0.77],[867,298,0.75],[881,310,0.73],[896,323,0.7],[911,337,0.67],[926,352,0.64],[941,367,0.61],[956,382,0.57],[970,398,0.53],[985,414,0.49],[1000,430,0.45]]},{"id":"arrow-head","tool":"pen","color":"#e11d48","size":7,"points":[[967,421,0.45],[1000,430,0.8],[993,397,0.45]]}]}}
|
|
@@ -1,20 +1,41 @@
|
|
|
1
1
|
---
|
|
2
|
-
theme:
|
|
2
|
+
theme: neue
|
|
3
|
+
meta:
|
|
4
|
+
title: "A short tour of mdeck"
|
|
3
5
|
show:
|
|
4
6
|
organization: none
|
|
5
7
|
author: none
|
|
6
|
-
|
|
7
|
-
|
|
8
|
+
bibliography: references.bib
|
|
8
9
|
---
|
|
9
10
|
:::meta
|
|
10
11
|
layout: title
|
|
12
|
+
image: ./mdeck.svg
|
|
13
|
+
fit: contain
|
|
14
|
+
alt: "A Markdown file turning into a stack of slides"
|
|
11
15
|
id: hello
|
|
12
16
|
:::
|
|
13
|
-
#
|
|
14
|
-
##
|
|
17
|
+
# Slides from a text file.
|
|
18
|
+
## A short tour of mdeck
|
|
19
|
+
|
|
20
|
+
:::notes
|
|
21
|
+
These notes are only for you: they show in the presenter view.
|
|
22
|
+
:::
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
:::meta
|
|
26
|
+
id: how-it-works
|
|
27
|
+
:::
|
|
28
|
+
# From your material to a talk
|
|
29
|
+
|
|
30
|
+
:::steps
|
|
31
|
+
- Hand your slides, papers or notes to an AI assistant
|
|
32
|
+
- It writes one Markdown file with your content
|
|
33
|
+
- mdeck presents it in the browser
|
|
34
|
+
- Send it as one file, or as a PDF
|
|
35
|
+
:::
|
|
15
36
|
|
|
16
37
|
:::notes
|
|
17
|
-
|
|
38
|
+
Press Next: the points appear one at a time.
|
|
18
39
|
:::
|
|
19
40
|
|
|
20
41
|
---
|
|
@@ -22,67 +43,136 @@ Ask who has ever repeated an experiment because nobody remembered how it was don
|
|
|
22
43
|
layout: split
|
|
23
44
|
props:
|
|
24
45
|
ratio: [1, 1]
|
|
46
|
+
id: write-this
|
|
25
47
|
:::
|
|
26
|
-
#
|
|
48
|
+
# Write this, get a slide
|
|
49
|
+
|
|
50
|
+
:::slot left
|
|
51
|
+
```markdown
|
|
52
|
+
# Three ideas
|
|
27
53
|
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
-
|
|
54
|
+
- Start small
|
|
55
|
+
- Show an example
|
|
56
|
+
- Ask a question
|
|
57
|
+
```
|
|
58
|
+
:::
|
|
31
59
|
|
|
32
|
-
:::
|
|
33
|
-
|
|
60
|
+
:::slot right
|
|
61
|
+
A `#` makes the heading, a dash a point, and `---` starts the next slide. Your assistant writes it; you can read and change every word.
|
|
34
62
|
:::
|
|
35
63
|
|
|
36
64
|
---
|
|
37
65
|
:::meta
|
|
38
66
|
layout: focus
|
|
39
|
-
attribution: "A saying in many labs"
|
|
40
67
|
:::
|
|
41
|
-
#
|
|
68
|
+
# Your talk is a text file: you can read it, change it and keep it.
|
|
42
69
|
|
|
43
70
|
---
|
|
71
|
+
|
|
44
72
|
:::meta
|
|
45
73
|
layout: chapter
|
|
46
74
|
number: 1
|
|
47
|
-
part: "
|
|
75
|
+
part: "In the room"
|
|
48
76
|
:::
|
|
49
|
-
#
|
|
77
|
+
# Present it, live.
|
|
50
78
|
|
|
51
|
-
|
|
79
|
+
Draw, ask the room, cite and run code, right on the slides.
|
|
52
80
|
|
|
53
81
|
---
|
|
54
82
|
:::meta
|
|
55
|
-
layout:
|
|
56
|
-
|
|
57
|
-
|
|
83
|
+
layout: image-text
|
|
84
|
+
image: ./chart.svg
|
|
85
|
+
alt: "A bar chart with one bar much taller than the others"
|
|
86
|
+
id: draw
|
|
58
87
|
:::
|
|
59
|
-
#
|
|
88
|
+
# Draw while you talk
|
|
60
89
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
90
|
+
- Circle, underline, point with a laser
|
|
91
|
+
- From an iPad paired with the laptop
|
|
92
|
+
- Saved with the slide, also in the PDF
|
|
93
|
+
|
|
94
|
+
:::notes
|
|
95
|
+
The circle and the arrow were drawn on this slide and stay with it.
|
|
64
96
|
:::
|
|
65
97
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
98
|
+
---
|
|
99
|
+
:::meta
|
|
100
|
+
id: first
|
|
101
|
+
:::
|
|
102
|
+
# Which will you try first?
|
|
103
|
+
|
|
104
|
+
<poll room="first" options="Drawing on slides|Polls from phones|Citations|A new theme" />
|
|
105
|
+
|
|
106
|
+
:::notes
|
|
107
|
+
People answer on their phones and the bars grow live. These answers are kept from a talk.
|
|
69
108
|
:::
|
|
70
109
|
|
|
71
110
|
---
|
|
72
111
|
:::meta
|
|
73
|
-
|
|
74
|
-
image: ./notebook.svg
|
|
75
|
-
alt: "An open lab notebook with written steps, a results table and a plot"
|
|
112
|
+
id: cite
|
|
76
113
|
:::
|
|
77
|
-
#
|
|
114
|
+
# Cite like in a paper
|
|
78
115
|
|
|
79
|
-
|
|
116
|
+
Slides are Markdown, a plain text format meant to read well as it is [@gruber2004]. Text and code kept together is an old idea [@knuth1984].
|
|
117
|
+
|
|
118
|
+
Citations use Pandoc's syntax [@pandoc] and any citation style; each slide lists its references at its foot.
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
:::meta
|
|
122
|
+
id: references
|
|
123
|
+
:::
|
|
124
|
+
# References
|
|
125
|
+
|
|
126
|
+
<bibliography />
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
:::meta
|
|
130
|
+
id: run
|
|
131
|
+
:::
|
|
132
|
+
# Run code on the slide
|
|
133
|
+
|
|
134
|
+
```python live editable
|
|
135
|
+
features = ["drawing", "polls", "citations", "themes"]
|
|
136
|
+
print(", ".join(name.capitalize() for name in features))
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
:::tip
|
|
140
|
+
Press Run, change the list, run it again.
|
|
141
|
+
:::
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
:::meta
|
|
145
|
+
layout: chapter
|
|
146
|
+
number: 2
|
|
147
|
+
part: "The look"
|
|
148
|
+
:::
|
|
149
|
+
# Content and style, apart.
|
|
150
|
+
|
|
151
|
+
The file holds what you say. A theme decides how it looks.
|
|
152
|
+
|
|
153
|
+
---
|
|
154
|
+
:::meta
|
|
155
|
+
layout: split
|
|
156
|
+
props:
|
|
157
|
+
ratio: [1, 1]
|
|
158
|
+
:::
|
|
159
|
+
# One file, many looks
|
|
160
|
+
|
|
161
|
+
:::slot left
|
|
162
|
+
## Themes
|
|
163
|
+
Six come with mdeck, more are one command away. Try the pictures below this deck.
|
|
164
|
+
:::
|
|
165
|
+
|
|
166
|
+
:::slot right
|
|
167
|
+
## Light or dark
|
|
168
|
+
Every palette has both. Switch while presenting, without touching the file.
|
|
169
|
+
:::
|
|
80
170
|
|
|
81
171
|
---
|
|
82
172
|
:::meta
|
|
83
173
|
layout: full-bleed-image
|
|
84
|
-
image: ./
|
|
85
|
-
alt: "
|
|
174
|
+
image: ./contours.jpg
|
|
175
|
+
alt: "Contour lines like those on a map"
|
|
86
176
|
overlay: true
|
|
87
177
|
:::
|
|
88
|
-
#
|
|
178
|
+
# Make your next presentation.
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 1,
|
|
3
|
+
"rooms": {
|
|
4
|
+
"first": {
|
|
5
|
+
"savedAt": "2026-10-09T09:13:00.000Z",
|
|
6
|
+
"closed": false,
|
|
7
|
+
"answers": [
|
|
8
|
+
{
|
|
9
|
+
"phone": 1,
|
|
10
|
+
"at": "2026-10-09T09:12:00.000Z",
|
|
11
|
+
"value": "Drawing on slides"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"phone": 2,
|
|
15
|
+
"at": "2026-10-09T09:12:01.700Z",
|
|
16
|
+
"value": "A new theme"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"phone": 3,
|
|
20
|
+
"at": "2026-10-09T09:12:03.400Z",
|
|
21
|
+
"value": "Citations"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"phone": 4,
|
|
25
|
+
"at": "2026-10-09T09:12:05.100Z",
|
|
26
|
+
"value": "Drawing on slides"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"phone": 5,
|
|
30
|
+
"at": "2026-10-09T09:12:06.800Z",
|
|
31
|
+
"value": "A new theme"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"phone": 6,
|
|
35
|
+
"at": "2026-10-09T09:12:08.500Z",
|
|
36
|
+
"value": "Polls from phones"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
"phone": 7,
|
|
40
|
+
"at": "2026-10-09T09:12:10.200Z",
|
|
41
|
+
"value": "Drawing on slides"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"phone": 8,
|
|
45
|
+
"at": "2026-10-09T09:12:11.900Z",
|
|
46
|
+
"value": "A new theme"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"phone": 9,
|
|
50
|
+
"at": "2026-10-09T09:12:13.600Z",
|
|
51
|
+
"value": "Polls from phones"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"phone": 10,
|
|
55
|
+
"at": "2026-10-09T09:12:15.300Z",
|
|
56
|
+
"value": "Drawing on slides"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"phone": 11,
|
|
60
|
+
"at": "2026-10-09T09:12:17.000Z",
|
|
61
|
+
"value": "A new theme"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"phone": 12,
|
|
65
|
+
"at": "2026-10-09T09:12:18.700Z",
|
|
66
|
+
"value": "Polls from phones"
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"phone": 13,
|
|
70
|
+
"at": "2026-10-09T09:12:20.400Z",
|
|
71
|
+
"value": "Drawing on slides"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"phone": 14,
|
|
75
|
+
"at": "2026-10-09T09:12:22.100Z",
|
|
76
|
+
"value": "Citations"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"phone": 15,
|
|
80
|
+
"at": "2026-10-09T09:12:23.800Z",
|
|
81
|
+
"value": "Polls from phones"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"phone": 16,
|
|
85
|
+
"at": "2026-10-09T09:12:25.500Z",
|
|
86
|
+
"value": "Drawing on slides"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"phone": 17,
|
|
90
|
+
"at": "2026-10-09T09:12:27.200Z",
|
|
91
|
+
"value": "Citations"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"phone": 18,
|
|
95
|
+
"at": "2026-10-09T09:12:28.900Z",
|
|
96
|
+
"value": "Drawing on slides"
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"phone": 19,
|
|
100
|
+
"at": "2026-10-09T09:12:30.600Z",
|
|
101
|
+
"value": "A new theme"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"phone": 20,
|
|
105
|
+
"at": "2026-10-09T09:12:32.300Z",
|
|
106
|
+
"value": "Polls from phones"
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"phone": 21,
|
|
110
|
+
"at": "2026-10-09T09:12:34.000Z",
|
|
111
|
+
"value": "Drawing on slides"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"phone": 22,
|
|
115
|
+
"at": "2026-10-09T09:12:35.700Z",
|
|
116
|
+
"value": "A new theme"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"phone": 23,
|
|
120
|
+
"at": "2026-10-09T09:12:37.400Z",
|
|
121
|
+
"value": "Polls from phones"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"phone": 24,
|
|
125
|
+
"at": "2026-10-09T09:12:39.100Z",
|
|
126
|
+
"value": "Drawing on slides"
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"phone": 25,
|
|
130
|
+
"at": "2026-10-09T09:12:40.800Z",
|
|
131
|
+
"value": "A new theme"
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"phone": 26,
|
|
135
|
+
"at": "2026-10-09T09:12:42.500Z",
|
|
136
|
+
"value": "Polls from phones"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"phone": 27,
|
|
140
|
+
"at": "2026-10-09T09:12:44.200Z",
|
|
141
|
+
"value": "Drawing on slides"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"phone": 28,
|
|
145
|
+
"at": "2026-10-09T09:12:45.900Z",
|
|
146
|
+
"value": "Citations"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"phone": 29,
|
|
150
|
+
"at": "2026-10-09T09:12:47.600Z",
|
|
151
|
+
"value": "Polls from phones"
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"phone": 30,
|
|
155
|
+
"at": "2026-10-09T09:12:49.300Z",
|
|
156
|
+
"value": "Drawing on slides"
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"phone": 31,
|
|
160
|
+
"at": "2026-10-09T09:12:51.000Z",
|
|
161
|
+
"value": "Citations"
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"phone": 32,
|
|
165
|
+
"at": "2026-10-09T09:12:52.700Z",
|
|
166
|
+
"value": "Polls from phones"
|
|
167
|
+
}
|
|
168
|
+
]
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="800" viewBox="0 0 960 800">
|
|
2
|
+
<!-- A Markdown file becoming a stack of slides. The colours come from the
|
|
3
|
+
deck's palette (var(--accent) …), so the picture follows the theme;
|
|
4
|
+
the fallbacks apply where it is shown as a plain image. -->
|
|
5
|
+
<style>
|
|
6
|
+
.mdk-paper { fill: var(--surface, #eef1fb); stroke: var(--rule, #d5dbf0); stroke-width: 3; }
|
|
7
|
+
.mdk-fold { fill: var(--rule, #d5dbf0); }
|
|
8
|
+
.mdk-shadow { fill: var(--ink, #0c1033); opacity: .12; }
|
|
9
|
+
.mdk-code { font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; font-size: 30px; fill: var(--ink-soft, #2a2f55); }
|
|
10
|
+
.mdk-mark { fill: var(--accent, #1f3fd1); font-weight: 700; }
|
|
11
|
+
.mdk-quiet { fill: var(--muted, #5b6080); }
|
|
12
|
+
.mdk-slide { fill: var(--bg, #ffffff); stroke: var(--ink, #0c1033); stroke-width: 3; }
|
|
13
|
+
.mdk-accent { fill: var(--accent, #1f3fd1); }
|
|
14
|
+
.mdk-accent-2 { fill: var(--accent-2, #e8590c); }
|
|
15
|
+
.mdk-rule { fill: var(--rule, #d5dbf0); }
|
|
16
|
+
.mdk-on-accent { fill: var(--on-accent, #ffffff); font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 96px; }
|
|
17
|
+
.mdk-title { fill: var(--ink, #0c1033); font-family: var(--font-display, sans-serif); font-weight: 800; font-size: 46px; }
|
|
18
|
+
.mdk-arrow { fill: none; stroke: var(--accent-2, #e8590c); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
|
|
19
|
+
</style>
|
|
20
|
+
|
|
21
|
+
<!-- The text file -->
|
|
22
|
+
<g transform="rotate(-5 230 400)">
|
|
23
|
+
<rect class="mdk-shadow" x="56" y="146" width="370" height="510" rx="18"/>
|
|
24
|
+
<path class="mdk-paper" d="M58 130 h290 l62 62 v438 a18 18 0 0 1 -18 18 h-316 a18 18 0 0 1 -18 -18 v-482 a18 18 0 0 1 18 -18 z"/>
|
|
25
|
+
<path class="mdk-fold" d="M348 130 v44 a18 18 0 0 0 18 18 h44 z"/>
|
|
26
|
+
<text class="mdk-code" x="84" y="232"><tspan class="mdk-mark">#</tspan> A talk</text>
|
|
27
|
+
<text class="mdk-code" x="84" y="300"><tspan class="mdk-mark">-</tspan> one idea</text>
|
|
28
|
+
<text class="mdk-code" x="84" y="344"><tspan class="mdk-mark">-</tspan> an example</text>
|
|
29
|
+
<text class="mdk-code mdk-mark" x="84" y="412">---</text>
|
|
30
|
+
<text class="mdk-code mdk-quiet" x="84" y="480">:::notes</text>
|
|
31
|
+
<text class="mdk-code mdk-quiet" x="84" y="524">pause here</text>
|
|
32
|
+
<text class="mdk-code mdk-quiet" x="84" y="568">:::</text>
|
|
33
|
+
</g>
|
|
34
|
+
|
|
35
|
+
<!-- From text to slides -->
|
|
36
|
+
<path class="mdk-arrow" d="M300 112 C 380 20, 560 22, 640 150" stroke-dasharray="2 16"/>
|
|
37
|
+
<path class="mdk-arrow" d="M612 138 l30 16 l4 -34"/>
|
|
38
|
+
<path class="mdk-accent" d="M470 60 l7 17 l17 7 l-17 7 l-7 17 l-7 -17 l-17 -7 l17 -7 z"/>
|
|
39
|
+
<path class="mdk-accent-2" d="M760 210 l5 12 l12 5 l-12 5 l-5 12 l-5 -12 l-12 -5 l12 -5 z"/>
|
|
40
|
+
|
|
41
|
+
<!-- The slides: a chapter, a statement, and a content slide in front -->
|
|
42
|
+
<g transform="rotate(9 680 330)">
|
|
43
|
+
<rect class="mdk-accent-2" x="440" y="200" width="480" height="270" rx="14"/>
|
|
44
|
+
</g>
|
|
45
|
+
<g transform="rotate(3 660 420)">
|
|
46
|
+
<rect class="mdk-accent" x="420" y="290" width="480" height="270" rx="14"/>
|
|
47
|
+
<text class="mdk-on-accent" x="452" y="386">2</text>
|
|
48
|
+
<rect class="mdk-accent-2" x="512" y="350" width="80" height="10" rx="5"/>
|
|
49
|
+
</g>
|
|
50
|
+
<g transform="rotate(-3 640 540)">
|
|
51
|
+
<rect class="mdk-shadow" x="412" y="420" width="480" height="270" rx="14"/>
|
|
52
|
+
<rect class="mdk-slide" x="400" y="404" width="480" height="270" rx="14"/>
|
|
53
|
+
<text class="mdk-title" x="432" y="470">A talk</text>
|
|
54
|
+
<rect class="mdk-accent" x="432" y="486" width="88" height="8" rx="4"/>
|
|
55
|
+
<rect class="mdk-accent" x="432" y="524" width="14" height="14" rx="3"/>
|
|
56
|
+
<rect class="mdk-rule" x="458" y="525" width="150" height="12" rx="6"/>
|
|
57
|
+
<rect class="mdk-accent" x="432" y="562" width="14" height="14" rx="3"/>
|
|
58
|
+
<rect class="mdk-rule" x="458" y="563" width="120" height="12" rx="6"/>
|
|
59
|
+
<rect class="mdk-accent" x="432" y="600" width="14" height="14" rx="3"/>
|
|
60
|
+
<rect class="mdk-rule" x="458" y="601" width="136" height="12" rx="6"/>
|
|
61
|
+
<rect class="mdk-accent-2" x="682" y="580" width="34" height="62" rx="4"/>
|
|
62
|
+
<rect class="mdk-accent" x="726" y="530" width="34" height="112" rx="4"/>
|
|
63
|
+
<rect class="mdk-accent-2" x="770" y="556" width="34" height="86" rx="4"/>
|
|
64
|
+
<rect class="mdk-accent" x="814" y="500" width="34" height="142" rx="4"/>
|
|
65
|
+
</g>
|
|
66
|
+
</svg>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@misc{gruber2004,
|
|
2
|
+
author = {Gruber, John},
|
|
3
|
+
title = {Markdown},
|
|
4
|
+
howpublished = {Daring Fireball},
|
|
5
|
+
year = {2004},
|
|
6
|
+
url = {https://daringfireball.net/projects/markdown/}
|
|
7
|
+
}
|
|
8
|
+
@article{knuth1984,
|
|
9
|
+
author = {Knuth, Donald E.},
|
|
10
|
+
title = {Literate Programming},
|
|
11
|
+
journal = {The Computer Journal},
|
|
12
|
+
volume = {27},
|
|
13
|
+
number = {2},
|
|
14
|
+
pages = {97--111},
|
|
15
|
+
year = {1984},
|
|
16
|
+
doi = {10.1093/comjnl/27.2.97}
|
|
17
|
+
}
|
|
18
|
+
@misc{pandoc,
|
|
19
|
+
author = {MacFarlane, John},
|
|
20
|
+
title = {Pandoc: A Universal Document Converter},
|
|
21
|
+
year = {2006},
|
|
22
|
+
url = {https://pandoc.org/}
|
|
23
|
+
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mdeck",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.7.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",
|
|
@@ -54,7 +54,8 @@
|
|
|
54
54
|
"playground": "vite --config playground/vite.config.js",
|
|
55
55
|
"playground:build": "vite build --config playground/vite.config.js",
|
|
56
56
|
"readme-images": "node tools/readme-images.mjs",
|
|
57
|
-
"theme-images": "node tools/theme-images.mjs"
|
|
57
|
+
"theme-images": "node tools/theme-images.mjs",
|
|
58
|
+
"feature-images": "node tools/feature-images.mjs"
|
|
58
59
|
},
|
|
59
60
|
"dependencies": {
|
|
60
61
|
"@citation-js/core": "^0.9.0",
|
|
@@ -142,7 +142,7 @@ To see slides yourself, if you can read pictures, run `mdeck snapshot <deck>.md
|
|
|
142
142
|
|
|
143
143
|
When the user wants a look the built-in themes and palettes do not give (their institute's colours, a font, the style of a poster or picture), first run `mdeck themes search` or `mdeck palettes search` (with a word or two): someone may have shared it, and `mdeck themes install <theme> <deck>.md` (with its palette) or `mdeck palettes install <palette> <deck>.md` puts it beside the deck, so the slide folder carries it. Otherwise make it as an extension in `extensions/` beside the deck, never as styling on single slides. Read `extensions.md` from the reference folder first; it lists every setting.
|
|
144
144
|
|
|
145
|
-
- **Colours only: a palette.** `extensions/<id>/extension.toml` with `kind = "palette"`, and every colour role (`--bg`, `--surface`, `--ink`, `--ink-soft`, `--muted`, `--rule`, `--accent`, `--accent-2`, `--on-accent`) in both `[light]` and `[dark]
|
|
145
|
+
- **Colours only: a palette.** `extensions/<id>/extension.toml` with `kind = "palette"`, and every colour role (`--bg`, `--surface`, `--ink`, `--ink-soft`, `--muted`, `--rule`, `--accent`, `--accent-2`, `--accent-3`, `--on-accent`) in both `[light]` and `[dark]`: `--accent` is emphasis, `--accent-2` its companion, `--accent-3` attention (warnings; it may be too light for text, such as a yellow). Set all of them. Text colours must stay readable on `--bg` and `--surface` in both variants, because themes use the other variant for inverted slides.
|
|
146
146
|
- **Fonts, sizes, spacing or arrangement: a theme.** Copy the folder of the closest built-in theme (`assets/extensions/themes/<id>/` in the mdeck repository or in `$(npm root -g)/mdeck/`) to `extensions/<new-id>/`, change `id` and `title`, then its tokens and `styles.css`. A theme takes no colours of its own: it names its default `palette`, and the colours come from palettes.
|
|
147
147
|
- **Use it:** set `theme:` and `palette:` in the deck settings. `mdeck list <deck>.md` must show it as local, and `mdeck check <deck>.md` reports any mistake in its `extension.toml`.
|
|
148
148
|
- **Hand over:** tell the user to run `mdeck design <deck>.md` (or `mdeck design <folder>` when there is no deck yet). It shows the look on a sample deck with every kind of slide, light and dark, and lets them fine-tune colours, fonts and sizes there.
|
package/src/build/check.js
CHANGED
|
@@ -26,6 +26,7 @@ export function checkDeck(slidesPath, registry, source = readFileSync(slidesPath
|
|
|
26
26
|
for (const record of Object.values(registry.palettes)) {
|
|
27
27
|
if (record.source !== 'local') continue
|
|
28
28
|
for (const problem of paletteProblems(record.manifest)) diagnostics.push({ severity: 'warning', code: 'palette-contrast', message: `Palette "${record.id}", ${problem}`, line: 1, column: 1 })
|
|
29
|
+
for (const role of record.manifest.fallbacks ?? []) diagnostics.push({ severity: 'warning', code: 'palette-fallback', message: `Palette "${record.id}" sets no ${role}, so it gets mdeck's amber; give it a colour of its own in [light] and [dark]`, line: 1, column: 1 })
|
|
29
30
|
}
|
|
30
31
|
// The deck's drawings file: readable, and only for slides that still exist.
|
|
31
32
|
const inkPath = inkFileFor(resolve(slidesPath))
|