Skip to content

Commit 347a732

Browse files
cdervcderv
authored
Merge pull request #10361 from quarto-dev/revealjs/update-v5
2 parents 522b595 + f9b9514 commit 347a732

File tree

78 files changed

+2643
-497
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+2643
-497
lines changed

‎configuration

+4-3
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,11 @@ export POPPER_JS=2.11.7
3535
export CLIPBOARD_JS=2.0.11
3636
export TIPPY_JS=6.3.7
3737
export PDF_JS=2.8.335
38-
# Using commit to fix https://github.com/quarto-dev/quarto-cli/issues/2430 - revert to using a release tag when included
39-
export REVEAL_JS=e281b3234e7991283ce4dcca705dd9a6a9ebe5d2
38+
export REVEAL_JS=5.1.0
4039
export REVEAL_JS_MENU=2.1.0
41-
export REVEAL_JS_CHALKBOARD=a88c134e2cf3c7780448db003e7329c3cbd8cfb4
40+
# unrelease version needed for a fix with Reveal.js 5
41+
# https://github.com/rajgoel/reveal.js-plugins/pull/180
42+
export REVEAL_JS_CHALKBOARD=8408d5a265abf74a042122520bbb4fd0d31feaed
4243
export REVEAL_JS_PDFEXPORT=2.0.1
4344
export LIST_JS=2.3.1
4445
export DAY_JS=1.11.7

‎dev-docs/update-revealjs.md

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# Step to update revealjs
2+
3+
- [ ] Update version of REVEALJS and plugins in [`configuration`](../configuration)
4+
- [ ] Run the update once (`package\src\quarto-bld.cmd update-html-dependencies`) and fix potential issue in theme patching
5+
- [ ] Manually check that [`settings.scss`](../src/resources/formats/revealjs/reveal/css/theme/template\settings.scss) does not have new item to add to [`quarto.scss`](../src/resources/formats/revealjs/quarto.scss). Look for `// -- START setting.scss --` and `// -- END setting.scss --`
6+
- [ ] Check that defaults value did not change in SASS variable mapping (e.g. `$backgroundColor` default in Revealjs is set to `$body-color` in Quarto) in the same files
7+
8+
## Patching Themes
9+
10+
It happens in [`update-html-dependencies.ts`](../package/src/common/update-html-dependencies.ts)
11+
12+
- `sassVarsMap` contains the mapping between SASS variables in revealjs and quarto
13+
- `revealjsThemePatches` has the variables used to patch the specific theme
14+
15+
### Quarto specifics
16+
17+
- `default` theme is a custom quarto theme (`default.scss`)
18+
- `dark` theme is a cusom quarto theme (`dark.scss`)
19+
- Default value are the one in the `quarto.scss` layer
20+
- `white` is aliased to `default`, so use `default.scss` - `white.scss` from reveal is ignored
21+
- `black` is aliased to `dark.scss`, so use `dark.scss` - `black.scss` from reveal is ignored
22+
23+
#### About settings.scss
24+
25+
- `settings.scss` is a file that contains the default value for the themes
26+
- However, `quarto.scss` contains some defaults for Quarto.
27+
- So part of settings.scss is inside the Quarto default, and others are in the revealjs theme ported to quarto theme
28+
29+
#### About adaptation of theme files
30+
31+
- Variables name are changed to match the quarto theme - this is done automatically through a mapping
32+
- Files are patched using git for more manual modification.
33+
34+
- Imports are removed
35+
- `template/mixins.scss` will be added as part of framework layer
36+
- `template/settings.scss` is manually inlined
37+
- `template/theme.scss` will be added as part of framework layer
38+
- `@include dark-bg-text-color` is removed as it is inlined in quarto.scss and `$dark-bg-text-color` allows to set it
39+
- `@include light-bg-text-color` is removed as it is inlined in quarto.scss and `$light-bg-text-color` allows to set it
40+
41+
- some defaults from `settings.scss` are hand picked, and other are inline changed in `quarto.scss`
42+
43+
- For dark themes
44+
45+
- Check that the dark theme is correctly patched with
46+
```scss
47+
$input-panel-bg: rgba(233, 236, 239, 0.2) !default;
48+
```
49+
- Some themes have
50+
```scss
51+
// code blocks
52+
$code-block-bg: transparent !default;
53+
```
54+
to avoid quarto default value which is body-bg
55+
56+
- Ignored default from settings.scss are
57+
- `$presentation-h2-font-size:`
58+
- `$presentation-h3-font-size:`
59+
- `$presentation-h4-font-size:`
60+
- `$font-family-monospace:`
61+
- `$presentation-block-margin:`
62+
- Values from `quarto.scss` are used even for ported themes
63+
64+
- `$presentation-heading-font`
65+
- We remove Impact font if present as fallback

‎news/changelog-1.6.md

+4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ All changes included in 1.6:
1212
- ([#10328](https://github.com/quarto-dev/quarto-cli/issues/10328)): Interpret subcells as subfloats when subcap count matches subcell count.
1313
- ([#10624](https://github.com/quarto-dev/quarto-cli/issues/10624)): Don't crash when proof environments are empty in `pdf`.
1414

15+
## `revealjs` Format
16+
17+
- Update to Reveal JS 5.1.0.
18+
1519
## `typst` Format
1620

1721
- ([#10168](https://github.com/quarto-dev/quarto-cli/issues/10168)): Support `csl` bibliography style.

‎package/src/common/patches/0001-Patch-PdfExport-RevealJS-plugin-to-export-toggle-fun.patch

-27
This file was deleted.

‎package/src/common/patches/revealjs-plugin-0001-pdfexport-to-export-toggle-fun.patch

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
diff --git a/src/resources/formats/revealjs/plugins/pdfexport/pdfexport.js b/src/resources/formats/revealjs/plugins/pdfexport/pdfexport.js
2+
index c399fa9de..bf9104c8e 100644
3+
--- a/src/resources/formats/revealjs/plugins/pdfexport/pdfexport.js
4+
+++ b/src/resources/formats/revealjs/plugins/pdfexport/pdfexport.js
5+
@@ -100,6 +100,9 @@ var PdfExport = ( function( _Reveal ){
6+
Plugin.init = function( _Reveal ){
7+
Reveal = _Reveal;
8+
install();
9+
+ };
10+
+ Plugin.togglePdfExport = function () {
11+
+ togglePdfExport();
12+
};
13+
}
14+

‎package/src/common/patches/revealjs-theme-0001-beige.patch

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
diff --git a/src/resources/formats/revealjs/themes/beige.scss b/src/resources/formats/revealjs/themes/beige.scss
2+
index 06957c42d..193eac567 100644
3+
--- a/src/resources/formats/revealjs/themes/beige.scss
4+
+++ b/src/resources/formats/revealjs/themes/beige.scss
5+
@@ -2,43 +2,40 @@
6+
* Beige theme for reveal.js.
7+
*
8+
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
9+
+ *
10+
+ * Adapted for Quarto by Posit, PBC
11+
+ * Copyright (C) 2024 Posit, PBC
12+
*/
13+
14+
-
15+
-// Default mixins and settings -----------------
16+
-@import "../template/mixins";
17+
-@import "../template/settings";
18+
-// ---------------------------------------------
19+
-
20+
-
21+
+/*-- scss:defaults --*/
22+
23+
// Include theme-specific fonts
24+
@import url(./fonts/league-gothic/league-gothic.css);
25+
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
26+
27+
+// fonts
28+
+$font-family-sans-serif: Lato, sans-serif !default;
29+
30+
-// Override theme settings (see ../template/settings.scss)
31+
-$body-color: #333;
32+
-$presentation-heading-color: #333;
33+
-$presentation-heading-text-shadow: none;
34+
-$body-bg: #f7f3de;
35+
-$link-color: #8b743d;
36+
-$link-color-hover: lighten( $linkColor, 20% );
37+
-$selection-bg: rgba(79, 64, 28, 0.99);
38+
-$presentation-h1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
39+
-
40+
-$overlayElementBgColor: 0, 0, 0;
41+
-$overlayElementFgColor: 240, 240, 240;
42+
+// Override theme settings
43+
+$body-color: #333 !default;
44+
+$body-bg: #f7f3de !default;
45+
+$link-color: #8b743d !default;
46+
+$selection-bg: rgba(79, 64, 28, 0.99) !default;
47+
48+
-// Background generator
49+
-@mixin bodyBackground() {
50+
- @include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
51+
-}
52+
+$presentation-heading-font: "League Gothic", sans-serif !default;
53+
+$presentation-heading-text-transform: uppercase !default;
54+
+$presentation-h1-font-size: 3.77em !default;
55+
+$presentation-h1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
56+
+ 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1),
57+
+ 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
58+
+ 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
59+
+ 0 20px 20px rgba(0, 0, 0, 0.15) !default;
60+
61+
-// Change text colors against dark slide backgrounds
62+
-@include dark-bg-text-color(#fff);
63+
+$overlayElementBgColor: 0, 0, 0 !default;
64+
+$overlayElementFgColor: 240, 240, 240 !default;
65+
66+
+/*-- scss:mixins --*/
67+
68+
-// Theme template ------------------------------
69+
-@import "../template/theme";
70+
-// ---------------------------------------------
71+
+@mixin bodyBackground() {
72+
+ @include radial-gradient(rgba(247, 242, 211, 1), rgba(255, 255, 255, 1));
73+
+}

‎package/src/common/patches/revealjs-theme-0001-blood.patch

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
diff --git a/src/resources/formats/revealjs/themes/blood.scss b/src/resources/formats/revealjs/themes/blood.scss
2+
index c64acd1b7..fe4addaf4 100644
3+
--- a/src/resources/formats/revealjs/themes/blood.scss
4+
+++ b/src/resources/formats/revealjs/themes/blood.scss
5+
@@ -6,82 +6,73 @@
6+
* "monokai_sublime.css" available from
7+
* https://github.com/isagalaev/highlight.js/
8+
*
9+
- * For other themes, change $code-bg accordingly.
10+
+ * For other themes, change $codeBackground accordingly.
11+
*
12+
+ * Adapted for Quarto by Posit, PBC
13+
+ * Copyright (C) 2024 Posit, PBC
14+
*/
15+
16+
- // Default mixins and settings -----------------
17+
-@import "../template/mixins";
18+
-@import "../template/settings";
19+
-// ---------------------------------------------
20+
+/*-- scss:defaults --*/
21+
22+
// Include theme-specific fonts
23+
-
24+
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
25+
26+
// Colors used in the theme
27+
$blood: #a23;
28+
$coal: #222;
29+
-$codeBackground: #23241f;
30+
+$code-bg: #23241f !default;
31+
32+
-$body-bg: $coal;
33+
+$body-bg: $coal !default;
34+
35+
// Main text
36+
-$font-family-sans-serif: Ubuntu, 'sans-serif';
37+
-$body-color: #eee;
38+
+$font-family-sans-serif: Ubuntu, "sans-serif" !default;
39+
+$body-color: #eee !default;
40+
41+
// Headings
42+
-$presentation-heading-font: Ubuntu, 'sans-serif';
43+
-$presentation-heading-text-shadow: 2px 2px 2px $coal;
44+
+$presentation-heading-font: Ubuntu, "sans-serif" !default;
45+
+$presentation-heading-text-shadow: 2px 2px 2px $body-bg !default;
46+
+$presentation-heading-font-weight: 700 !default;
47+
+$presentation-h1-font-size: 3.77em !default;
48+
49+
-// h1 shadow, borrowed humbly from
50+
+// h1 shadow, borrowed humbly from
51+
// (c) Default theme by Hakim El Hattab
52+
-$presentation-h1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
53+
+$presentation-h1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
54+
+ 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1),
55+
+ 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
56+
+ 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
57+
+ 0 20px 20px rgba(0, 0, 0, 0.15) !default;
58+
+$presentation-heading-text-transform: uppercase !default;
59+
60+
// Links
61+
-$link-color: $blood;
62+
-$link-color-hover: lighten( $linkColor, 20% );
63+
+$link-color: $blood !default;
64+
65+
// Text selection
66+
-$selection-bg: $blood;
67+
-$selection-color: #fff;
68+
-
69+
-// Change text colors against dark slide backgrounds
70+
-@include light-bg-text-color(#222);
71+
-
72+
-
73+
-// Theme template ------------------------------
74+
-@import "../template/theme";
75+
-// ---------------------------------------------
76+
+$selection-bg: $link-color !default;
77+
+$selection-color: #fff !default;
78+
79+
-// some overrides after theme template import
80+
+/*-- scss:rules --*/
81+
82+
.reveal p {
83+
- font-weight: 300;
84+
- text-shadow: 1px 1px $coal;
85+
+ font-weight: 300;
86+
+ text-shadow: 1px 1px $body-bg;
87+
}
88+
89+
section.has-light-background {
90+
- p, h1, h2, h3, h4 {
91+
- text-shadow: none;
92+
- }
93+
-}
94+
-
95+
-.reveal h1,
96+
-.reveal h2,
97+
-.reveal h3,
98+
-.reveal h4,
99+
-.reveal h5,
100+
-.reveal h6 {
101+
- font-weight: 700;
102+
+ p,
103+
+ h1,
104+
+ h2,
105+
+ h3,
106+
+ h4 {
107+
+ text-shadow: none;
108+
+ }
109+
}
110+
111+
.reveal p code {
112+
- background-color: $codeBackground;
113+
- display: inline-block;
114+
- border-radius: 7px;
115+
+ background-color: $code-bg;
116+
+ display: inline-block;
117+
+ border-radius: 7px;
118+
}
119+
120+
.reveal small code {
121+
- vertical-align: baseline;
122+
-}
123+
\ No newline at end of file
124+
+ vertical-align: baseline;
125+
+}

0 commit comments

Comments
 (0)