-
Notifications
You must be signed in to change notification settings - Fork 254
/
index.html
executable file
·245 lines (212 loc) · 9.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Inspire.js: A brief introduction</title>
<link href="inspire.css" rel="stylesheet" />
<link href="theme.css" rel="stylesheet" />
<link href="talk.css" rel="stylesheet" />
</head>
<body class="language-markup" data-prism-plugins="normalize-whitespace">
<header id="intro" class="slide">
<h1>
Inspire.js
</h1>
<h2>
Lean, hackable, extensible slide deck framework
</h2>
<p class="attribution">By <a href="http://lea.verou.me">Lea Verou</a> and <a href="https://github.com/LeaVerou/inspire.js/graphs/contributors">contributors</a></p>
</header>
<section>
<header class="slide">
<h1>Introduction</h1>
</header>
<article class="slide" title="Inspire.js: Introduction">
<h1>Main idea</h1>
<ul class="delayed-children">
<li>An HTML file contains the whole presentation</li>
<li>Themes as CSS files</li>
<li>Plugins for extra functionality, autoloaded when used</li>
<li>Nice JavaScript API for really custom things</li>
</ul>
</article>
<article class="slide">
<h1>History</h1>
<ul>
<li>Originally created in 2010 for my first talk, at <a href="http://front-trends.com">Front Trends 2010</a></li>
<li>By popular demand, it was released shortly after, named CSSS</li>
<li>Huge refactor and renaming to Inspire.js in Sep 2018</li>
</ul>
</article>
<article class="slide">
<h1>Syntax</h1>
<ul>
<li>Slides are defined by adding the <code>slide</code> class to any elements.</li>
<li><code><header class="slide"></code> is a header slide (relevant for the <a href="#overview">Overview</a>)</li>
</ul>
</article>
<article class="slide" id="navigation">
<h1>Keyboard Navigation</h1>
<ul>
<li><kbd>→</kbd> or <kbd>↓</kbd> to advance to the next slide or incrementally displayed item</li>
<li><kbd>←</kbd> or <kbd>↑</kbd> to go to the previous slide or incrementally displayed item</li>
<li><kbd>Ctrl</kbd><kbd>→</kbd> or <kbd>Ctrl</kbd><kbd>↓</kbd> to jump to the next slide</li>
<li><kbd>Ctrl</kbd><kbd>←</kbd> or <kbd>Ctrl</kbd><kbd>↑</kbd> to jump to the previous slide</li>
<li>Home to go to the first slide, End to go to the last</li>
<li><kbd>Ctrl</kbd><kbd>G</kbd> to jump to an arbitrary slide (by slide number or identifier)</li>
<li class="delayed">
Note that if a slide contains an <code><iframe></code>, when the content in the iframe is focused, Inspire.js shortcuts will not work.
There is no way around that, you need to click on something from the actual slide to get focus out of the iframe before you use any Inspire.js keyboard shortcuts.
Some plugins (e.g. live demo) add on-screen "Next" buttons for this reason.
</li>
</ul>
</article>
</section>
<section>
<header class="slide">
<h1>Features</h1>
</header>
<article class="slide" id="data-insert">
<h1>Repeated slides</h1>
<ul>
<li>Use attribute <code>data-insert="#id"</code> on an empty slide to re-insert it later in the slideshow</li>
<li>Notice how this slide will also be re-inserted after the next one!</li>
</ul>
</article>
<article class="slide">
<h1>IDs and titles</h1>
<ul>
<li>IDs are dynamically assigned by JavaScript, but you can also use your own</li>
<li>Slide titles (used in the browser tab when the slide is active, and in the <a href="#overview">Overview</a>) via the <code>title</code> or <code>data-title</code> attributes or headings in the slide.</li>
<li>If only an id or only a title is provided, the other is extracted from it.</li>
</ul>
</article>
<article class="slide" data-insert="#data-insert"></article>
<article class="slide">
<h1>Incremental display</h1>
<ul class="delayed-children">
<li>Incremental display of slide contents (just add <code>class="delayed"</code>)</li>
<li>Use selector <code>.delayed.future</code> to change the style of undisplayed items</li>
<li>Use selector <code>.delayed.displayed</code> to change the style of displayed items</li>
<li>Use selector <code>.delayed.current</code> to change the style of current items</li>
<li>Use <code>class="delayed-children"</code> to apply the <code>delayed</code> class to all of an element’s children</li>
<li>
Nested delayed items <strong class="delayed">are possible</strong>!
</li>
</ul>
</article>
</section>
<section>
<header class="slide">
<h1>Plugins</h1>
</header>
<article class="slide" id="overview">
<h1>Overview</h1>
<ul>
<li>Loaded automatically, use <code><code class="no-overview"></code> to prevent this.</li>
<li>Press <kbd>Ctrl</kbd>+<kbd>H</kbd> (or <kbd>Shift</kbd>+<kbd>H</kbd>) to trigger, <kbd>Esc</kbd> to close.</li>
<li class="delayed">Cool, huh? You can press <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>H</kbd> to see all slides</li>
</ul>
</article>
<article class="slide">
<h1>Syntax highlighting with PrismJS</h1>
<ul>
<li>Autoloads core & languages used</li>
<li>Load plugins by listing their ids in a <code>data-prism-plugins</code> attribute, on any element (first one will be used).</li>
<li>Automatically figures out dependencies & aliases</li>
<li>CSS is up to you!</li>
</ul>
<pre class="language-jsx"><code>var start = new Date().getTime();
setInterval(function() {
React.render(
<ExampleApplication elapsed={new Date().getTime() - start} />,
document.getElementById('container')
);
}, 50);</code></pre>
</article>
<article class="slide" data-video="https://mavo.io/demos/eshop/video.mp4" style="--url: 'https://mavo.io/demos/eshop'" id="media-plugin">
<div>
<h1>Annotated videos</h1>
<ul>
<li><code>data-video</code> for URL</li>
<li><code>class="annotation"</code> for annotations</li>
<li><code>data-time</code> and <code>data-pause</code> on annotations</li>
</ul>
</div>
<span class="annotation top-pointer" style="top: 44%; left: 59.5%; --pointer-left: 4em;" data-time="3000 to 3500" data-pause>Click to dismiss & resume</span>
<span class="annotation top-pointer" style="top: 26%; left: 67.1%" data-time="5200 to 5700" data-pause="2000">Auto-resume after 2sec</span>
</article>
<article class="demo slide" id="livedemo">
<textarea class="language-html"><p>Live demo!</p></textarea>
<textarea class="language-css">
p {
font-size: 250%;
color: #f06;
}
</textarea>
</article>
<article class="isolated demo slide" id="isolated-livedemo">
<textarea class="language-html"><p>Live demo in iframe!</p></textarea>
<textarea class="language-css">
p {
font-size: 250%;
color: #f06;
}
</textarea>
</article>
<article class="slide">
<h1>Timer</h1>
<ul>
<li>Define the talk duration with the attribute <code>data-duration</code> on the <code>body</code>.</li>
<li>Timer in the form of a progress bar on the top</li>
<li>Style the timer and the end state with the selectors <code>#timer</code> and <code>#timer.end</code> respectively.</li>
</ul>
</article>
<article class="slide" data-resolution="1024 768">
<h1>Resolution</h1>
<ul>
<li>Design for a specific resolution, and have slides scale up and down based on the viewport.</li>
<li>Define with the attribute <code>data-resolution</code> on the <code><body></code> for all slides, a grouping element, or individual slides (like this one!).</li>
<li>Try resizing the viewport, note how the slide size adapts!</li>
</ul>
</article>
<article class="slide">
<h1>Presenter View & Notes plugins</h1>
<ul>
<li><code><details class="notes"></code> for collapsible slide notes.</li>
<li>Any slide notes load the presenter view plugin as well.</li>
<li>Split current window into presenter and audience view with <kbd>Ctrl</kbd><kbd>P</kbd> (or <kbd>Shift</kbd><kbd>P</kbd>)</li>
<li>
The presenter view includes:
<ul>
<li>Timer</li>
<li>Upcoming slide</li>
<li>Notes that are expanded by default (collapsed notes are visible in audience view too).</li>
</ul>
</li>
<li>Both-way synchronization of slide status between the two windows.</li>
</ul>
<details class="notes">
Sample notes here.
This works quite nicely with the Markdown plugin, just use <code>data-markdown-elements="details.notes"</code> and all notes will support Markdown!
</details>
</article>
<article class="slide" id="slidestyle">
<style data-slide>
.slide {
background: rebeccapurple;
}
</style>
<h1>Slide-specific CSS</h1>
<p>You can use the <code>data-slide</code> attribute on <code><style></code> elements in slides, to only style the current slide or inside sections that include multiple slides to style all of them and nothing else.</p>
<p>For example, run <code class="language-js">$('#slidestyle style').sheet.cssRules[0].selectorText</code> in the console to see how the original selector gets changed.</p>
</article>
</section>
<footer class="slide" title="The End">
<h1>Thank you!</h1>
<p>Get it or contribute at <a href="https://github.com/LeaVerou/inspire.js">github.com/LeaVerou/inspire.js</a></p>
</footer>
<script src="inspire.mjs" type="module"></script>
</body>
</html>