asciidoctor-revealjs 4.0.1 → 4.1.0.rc2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/README.adoc +75 -35
  3. data/Rakefile +18 -3
  4. data/asciidoctor-revealjs.gemspec +1 -1
  5. data/examples/a11y-dark.css +99 -0
  6. data/examples/autoslide.adoc +22 -0
  7. data/examples/custom-layout.adoc +10 -0
  8. data/examples/data-attributes.adoc +245 -0
  9. data/examples/font-awesome-specific-version.adoc +11 -0
  10. data/examples/font-awesome.adoc +16 -2
  11. data/examples/footnotes.adoc +46 -0
  12. data/examples/fragments.adoc +12 -0
  13. data/examples/grid-layout-3x2.adoc +50 -0
  14. data/examples/grid-layout-docinfo-revealjs.html +1 -1
  15. data/examples/grid-layout.adoc +21 -1
  16. data/examples/images/cute-cat-1.jpg +0 -0
  17. data/examples/images/cute-cat-2.jpg +0 -0
  18. data/examples/images/cute-cat-3.jpg +0 -0
  19. data/examples/images/flock-of-seagulls_daniel-simion.mp3 +0 -0
  20. data/examples/issue-grid-layout-images.adoc +25 -0
  21. data/examples/mathjax-cdn.adoc +21 -0
  22. data/examples/mathjax.adoc +20 -0
  23. data/examples/release-4.0.adoc +2 -5
  24. data/examples/release-4.1.adoc +133 -0
  25. data/examples/release-4.1.css +50 -0
  26. data/examples/revealjs-custom-theme.adoc +10 -0
  27. data/examples/steps.adoc +87 -0
  28. data/examples/text-alignments.adoc +44 -0
  29. data/examples/video.adoc +19 -6
  30. data/lib/asciidoctor-revealjs/converter.rb +754 -647
  31. data/lib/asciidoctor-revealjs/version.rb +1 -1
  32. data/templates/admonition.html.slim +1 -1
  33. data/templates/asciidoctor-compatibility.css +303 -54
  34. data/templates/audio.html.slim +1 -1
  35. data/templates/colist.html.slim +1 -1
  36. data/templates/dlist.html.slim +3 -3
  37. data/templates/document.html.slim +12 -7
  38. data/templates/example.html.slim +1 -1
  39. data/templates/helpers.rb +80 -7
  40. data/templates/image.html.slim +2 -2
  41. data/templates/inline_anchor.html.slim +5 -4
  42. data/templates/inline_button.html.slim +2 -1
  43. data/templates/inline_footnote.html.slim +11 -4
  44. data/templates/inline_image.html.slim +2 -5
  45. data/templates/inline_kbd.html.slim +3 -2
  46. data/templates/inline_menu.html.slim +4 -3
  47. data/templates/inline_quoted.html.slim +13 -21
  48. data/templates/listing.html.slim +14 -9
  49. data/templates/literal.html.slim +1 -1
  50. data/templates/olist.html.slim +2 -2
  51. data/templates/open.html.slim +3 -3
  52. data/templates/paragraph.html.slim +1 -1
  53. data/templates/quote.html.slim +1 -1
  54. data/templates/section.html.slim +18 -1
  55. data/templates/sidebar.html.slim +1 -1
  56. data/templates/stem.html.slim +1 -1
  57. data/templates/table.html.slim +3 -2
  58. data/templates/ulist.html.slim +3 -3
  59. data/templates/verse.html.slim +1 -1
  60. data/templates/video.html.slim +14 -8
  61. metadata +26 -10
  62. data/CHANGELOG.adoc +0 -546
  63. data/HACKING.adoc +0 -412
@@ -0,0 +1,10 @@
1
+ // .custom-layout
2
+ // The three different ways to hide slide titles
3
+ // :include: //body/script | //div[@class="slides"]
4
+ // :header_footer:
5
+ = Custom Layout
6
+ :revealjs_disablelayout: true
7
+
8
+ == Layout Disabled!
9
+
10
+ Hello 👋
@@ -0,0 +1,245 @@
1
+ // :include: //div[@class="slides"]
2
+ // :header_footer:
3
+ = Data attributes
4
+ :stem:
5
+ :icons: font
6
+ :source-highlighter: highlight.js
7
+ :revealjs_hash: true
8
+ :experimental:
9
+
10
+ == Reference
11
+
12
+ https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
13
+
14
+ // .paragraphs
15
+ == Paragraphs
16
+
17
+ [.fragment.highlight-blue,data-fragment-index=0]
18
+ blue
19
+
20
+ [.fragment,data-fragment-index=1]
21
+ white
22
+
23
+ [.fragment.highlight-red,data-fragment-index=0]
24
+ red
25
+
26
+ // .inline-images
27
+ == Inline images
28
+ :imagesdir: images
29
+
30
+ image:cute-cat-1.jpg[cute-cat-laying,role="fragment fade-in",data-fragment-index=3]
31
+ image:cute-cat-2.jpg[cute-cat-yawning,role="fragment fade-in",data-fragment-index=1]
32
+ image:cute-cat-3.jpg[cute-cat-melting,role="fragment fade-in",data-fragment-index=2]
33
+
34
+ == Admonitions
35
+
36
+ [TIP,role="fragment fade-in",data-fragment-index=3]
37
+ ====
38
+ Pro tip...
39
+ ====
40
+
41
+ [WARNING,role="fragment fade-in",data-fragment-index=1]
42
+ ====
43
+ Watch out for...
44
+ ====
45
+
46
+ [IMPORTANT,role="fragment fade-in",data-fragment-index=2]
47
+ ====
48
+ Don't forget...
49
+ ====
50
+
51
+ == Callout numbers
52
+
53
+ [source,js]
54
+ ----
55
+ console.log('Hello'); // <1>
56
+
57
+ console.log('Bonjour'); // <2>
58
+
59
+ console.log('Bye'); // <3>
60
+ ----
61
+ [role="fragment fade-in",data-state="explanation"]
62
+ <1> Display `Hello`
63
+ <2> Display `Bonjour`
64
+ <3> Display `Bye`
65
+
66
+ == FAQ
67
+
68
+ [qanda,data-count="3"]
69
+ What's the deal with this converter?::
70
+ This is the official reveal.js converter for Asciidoctor.
71
+ Is it safe to put my credit card number into this presentation?::
72
+ Probably not.
73
+ I need all the Powerpoint features::
74
+ No you don’t.
75
+
76
+ [[horizontal-list]]
77
+ == Horizontal list
78
+
79
+ [horizontal,data-style="horizontal"]
80
+ Hard drive:: Permanent storage for operating system and/or user files.
81
+ RAM:: Temporarily stores information the CPU uses during operation.
82
+
83
+ == Description list
84
+
85
+ [.operating-systems,data-id="1234"]
86
+ Operating Systems::
87
+ * Linux
88
+ * macOS
89
+ * Windows
90
+
91
+ == Example
92
+
93
+ [#lorem.ipsum,data-style="lorem ipsum"]
94
+ ====
95
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
96
+ incididunt ut labore et dolore magna aliqua.
97
+ ====
98
+
99
+ [[images]]
100
+ == Images
101
+
102
+ :imagesdir: images
103
+
104
+ image::cute-cat-1.jpg[cute-cat-laying,height="100px",role="fragment fade-in",data-fragment-index=3]
105
+
106
+ image::cute-cat-2.jpg[cute-cat-yawning,height="100px",role="fragment fade-in",data-fragment-index=1]
107
+
108
+ image::cute-cat-3.jpg[cute-cat-melting,height="100px",role="fragment fade-in",data-fragment-index=2]
109
+
110
+ == Inline links
111
+
112
+ Learn how to use xref:images[images,role=fragment,data-fragment-index=1],
113
+ xref:horizontal-list[horizontal lists,role=fragment,data-fragment-index=2]
114
+ and link:https://duckduckgo.com/[duckduckgo.com,role=fragment,data-fragment-index=3].
115
+
116
+ == Source blocks
117
+
118
+ [source,javascript,role=fragment,data-fragment-index=2,data-lang-family=interpreted]
119
+ ----
120
+ console.log('Hello world')
121
+ ----
122
+
123
+ [source,kotlin,role=fragment,data-fragment-index=1,data-lang-family=compiled]
124
+ ----
125
+ println("Hello world")
126
+ ----
127
+
128
+ == Literal
129
+
130
+ Open a terminal and type:
131
+
132
+ [data-program-type=bash,data-program-version=1.2.3]
133
+ ./forgotten-realms.sh
134
+
135
+ [data-output-type=error,data-prompt=y/n]
136
+ ....
137
+ error: The requested operation returned error: 1954 Forbidden search for defensive operations manual
138
+ absolutely fatal: operation initiation lost in the dodecahedron of doom
139
+ would you like to die again? y/n
140
+ ....
141
+
142
+ == Atom podium
143
+
144
+ [role=fragment,data-fragment-index=2,data-medal=gold]
145
+ . Protons
146
+
147
+ [start=2,role=fragment,data-fragment-index=1,data-medal=silver]
148
+ . Electrons
149
+
150
+ [start=3,role=fragment,data-fragment-index=0,data-medal=bronze]
151
+ . Neutrons
152
+
153
+ [.columns.wrap]
154
+ == Colors
155
+
156
+ [.column.fragment,data-fragment-index=1]
157
+ --
158
+ image::data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle fill='blue' cx='50' cy='50' r='50'/%3E%3C/svg%3E[width=40%]
159
+
160
+ image::data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle fill='yellow' cx='50' cy='50' r='50'/%3E%3C/svg%3E[width=40%]
161
+ --
162
+
163
+ [.column.fragment.fade-in-out,data-fragment-index=0]
164
+ --
165
+ image::data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle fill='green' cx='50' cy='50' r='50'/%3E%3C/svg%3E[width=40%]
166
+ --
167
+
168
+ == Abstract
169
+
170
+ [abstract,data-block-type=abstract]
171
+ .Abstract
172
+ Documentation is a distillation of many long, squiggly adventures.
173
+
174
+ == Quote
175
+
176
+ [data-context=civil-rights,data-event=speech,data-date=28/08/1963]
177
+ > I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin, but by the content of their character. I have a dream today!
178
+ > -- Martin Luther King Jr. delivering the speech at the 1963 Washington D.C. Civil Rights March.
179
+
180
+ == Math!
181
+
182
+ [stem,data-algebra-concept=square-root]
183
+ ++++
184
+ \sqrt{37} = \sqrt{\frac{73^2-1}{12^2}} \approx \frac{73}{12} (1 - \frac{1}{2\cdot73^2})
185
+ ++++
186
+
187
+ == Tables
188
+
189
+ [cols="1,1",options=header,role=fragment,data-fragment-index=1]
190
+ .App
191
+ |===
192
+ |Name
193
+ |Category
194
+
195
+ |Firefox
196
+ |Browser
197
+ |===
198
+
199
+ [%header,format=csv,role=fragment,data-fragment-index=0]
200
+ .Music
201
+ |===
202
+ Artist,Track,Genre
203
+ The Lumineers,Ho Hey,Folk Rock
204
+ |===
205
+
206
+ == TODO
207
+
208
+ [%interactive,data-state=in-progress]
209
+ - [ ] Dig
210
+ - [x] Plant
211
+ - [ ] Hose
212
+
213
+ == Seagulls
214
+
215
+ // Title: Flock Seagulls
216
+ // License: Attribution CC 3.0
217
+ // Recorded by Daniel Simion
218
+ audio::flock-of-seagulls_daniel-simion.mp3[options="autoplay,loop",data-license="cc-3.0"]
219
+
220
+ == Verse
221
+
222
+ [verse, Carl Sandburg, two lines from the poem Fog, data-verse-type=poem]
223
+ The fog comes
224
+ on little cat feet.
225
+
226
+ == Video
227
+
228
+ video::kZH9JtPBq7k[youtube,start=34,data-video-id=kZH9JtPBq7k]
229
+
230
+ == Inline quoted
231
+
232
+ I can't believe it, we *won*!
233
+
234
+ Type the word [.userinput]#asciidoc# into the search bar.
235
+
236
+ Word with an [#bookmark-a]#explicit# id.
237
+
238
+ Let's put some [#bookmark-b.concept.word]_emphasis_.
239
+
240
+ == Sidebar
241
+
242
+ [data-visiblity=visible,data-position=left]
243
+ ****
244
+ Sidebars are used to visually separate auxiliary bits of content that supplement the main text.
245
+ ****
@@ -0,0 +1,11 @@
1
+ // .font-awesome-specific-version
2
+ // Testing font-awesome icons
3
+ // :include: //head//link[@rel="stylesheet"] | //div[@class="slides"]
4
+ // :header_footer:
5
+ = Font Awesome Tests
6
+ :icons: font
7
+ :font-awesome-version: 5.14.0
8
+
9
+ == Updated in Version 5.14.0
10
+
11
+ icon:rust[2x,set=fab]
@@ -16,14 +16,28 @@ icon:heart[size=5x]
16
16
 
17
17
  == !
18
18
 
19
- // TODO
20
19
  [.red]
21
20
  icon:heart[size=5x]
22
21
 
23
22
  == !
24
23
 
25
- icon:stackpath[size=5x]
24
+ icon:stackpath[size=5x,set=fab]
26
25
 
27
26
  == !
28
27
 
29
28
  icon:twitter[size=5x]
29
+
30
+ == Added in 5.15.0
31
+
32
+ icon:vest[size=2x]
33
+
34
+ == Sets
35
+
36
+ .Brand
37
+ icon:creative-commons[size=2x,set=fab]
38
+
39
+ .Regular
40
+ icon:address-book[size=2x,set=far]
41
+
42
+ .Solid
43
+ icon:address-book[size=2x,set=fas]
@@ -0,0 +1,46 @@
1
+ // .footnotes
2
+ // :include: //div[@class="slides"]
3
+ // :header_footer:
4
+ = Presentation
5
+ Author Name
6
+ :revealjs_theme: simple
7
+ :revealjs_transition: none
8
+ :revealjs_hash: true
9
+
10
+ == Introductionfootnote:[A footnote on introduction?!]
11
+
12
+ This is some text.footnote:[An example footnote.]
13
+
14
+ == Footnotesfootnote:[A footnote on footnotes?!]footnote:[Another one!]
15
+
16
+ A statement.footnote:[Some text.]
17
+
18
+ == Press Release
19
+
20
+ A statement.footnote:[Clarification about this statement.]
21
+
22
+ A bold statement!footnote:disclaimer[Opinions are my own.]
23
+
24
+ == Externalized Footnotes
25
+
26
+ :fn-hail-and-rainbow: footnote:[The double hail-and-rainbow level makes my toes tingle.]
27
+ :fn-disclaimer: footnote:disclaimer[Opinions are my own.]
28
+
29
+ The hail-and-rainbow protocol can be initiated at five levels:
30
+ double, tertiary, supernumerary, supermassive, and apocalyptic party.{fn-hail-and-rainbow}
31
+ A bold statement!{fn-disclaimer}
32
+ Another outrageous statement.{fn-disclaimer}
33
+
34
+ === Nestedfootnote:[A footnote on nested?!]
35
+
36
+ A statement.footnote:[No need to explain.]
37
+
38
+ A statement.footnote:[Might need some clarification...]
39
+
40
+ === Another One
41
+
42
+ A statement.footnote:[Do you even...?]
43
+
44
+ == Next Topic
45
+
46
+ A statement.footnote:[Still here?]
@@ -30,3 +30,15 @@
30
30
  * CSS Things
31
31
  * With Fragments
32
32
  * See `fragments.css`
33
+
34
+ == Fragments on paragraphs
35
+
36
+ [%step]
37
+ This is step one!
38
+
39
+ [%step]
40
+ --
41
+ This is step two:
42
+
43
+ $ echo 'hello world'
44
+ --
@@ -0,0 +1,50 @@
1
+ :revealjs_transition: none
2
+ :icons: font
3
+ :revealjs_theme: white
4
+ :revealjs_slideNumber: true
5
+ :revealjs_center: false
6
+ //:customcss: customcss.css
7
+ :revealjs_width: 1680
8
+ :revealjs_height: 1050
9
+ :revealjs_hash: true
10
+
11
+ [.columns.wrap]
12
+ == Different Colors
13
+
14
+ [.column.is-one-third]
15
+ [.fragment]
16
+ .Title
17
+ --
18
+ .Blue
19
+ image::https://upload.wikimedia.org/wikipedia/commons/f/ff/Solid_blue.svg[width=40%]
20
+ --
21
+ [.column.is-one-third]
22
+ [.fragment]
23
+ --
24
+ .Solid green but with longer caption
25
+ image::https://upload.wikimedia.org/wikipedia/commons/2/29/Solid_green.svg[width=40%]
26
+ --
27
+ [.column.is-one-third]
28
+ [.fragment]
29
+ --
30
+ .Solid red
31
+ image::https://upload.wikimedia.org/wikipedia/commons/2/25/Red.svg[width=40%]
32
+ --
33
+ [.column.is-one-third]
34
+ [.fragment]
35
+ --
36
+ .Solid blue
37
+ image::https://upload.wikimedia.org/wikipedia/commons/f/ff/Solid_blue.svg[width=40%]
38
+ --
39
+ [.column.is-one-third]
40
+ [.fragment]
41
+ --
42
+ .Blue
43
+ image::https://upload.wikimedia.org/wikipedia/commons/f/ff/Solid_blue.svg[width=40%]
44
+ --
45
+ [.column.is-one-third]
46
+ [.fragment]
47
+ --
48
+ .Solid green but with longer caption
49
+ image::https://upload.wikimedia.org/wikipedia/commons/2/29/Solid_green.svg[width=40%]
50
+ --
@@ -1,5 +1,5 @@
1
1
  <style>
2
- .slide-background.is-half.left.green > .slide-background-content::before {
2
+ .slide-background.is-half.left.sunrise > .slide-background-content::before {
3
3
  position: absolute;
4
4
  content: "";
5
5
  height: 100%;
@@ -93,7 +93,7 @@ and data science. Open source forever Github.
93
93
  * **Crystal**
94
94
 
95
95
 
96
- [.columns.is-half.green.left]
96
+ [.columns.is-half.sunrise.left]
97
97
  == !
98
98
 
99
99
  [.column.is-half]
@@ -172,3 +172,23 @@ fun main() {
172
172
  [...]
173
173
  ....
174
174
  --
175
+
176
+ [.columns]
177
+ == Column Text Alignment
178
+
179
+ [.column.has-text-left]
180
+ --
181
+ Something Short
182
+
183
+ Something So Long That We Need It Aligned
184
+ --
185
+
186
+ [.column.has-text-justified]
187
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
188
+
189
+ [.column.has-text-right]
190
+ --
191
+ Something Short
192
+
193
+ Something So Long That We Need It Aligned
194
+ --