-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
190 lines (155 loc) · 5.91 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
<!DOCTYPE HTML>
<html>
<head>
<title>Shower Ribbon + Cleaver = Bochar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=792, user-scalable=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="http://shwr.me/shower/themes/ribbon/styles/screen.css">
<style type="text/css">
</style>
</head>
<body class="list">
<header class="caption">
<h1>Shower Ribbon + Cleaver = Bochar</h1>
</header>
<section class="slide"><div>
<h2>Bochar</h2>
<h3>30-second slideshows for hackers with blackjack and hookers. In fact, forget the slideshows!</h3>
</div></section>
<section class="slide"><div>
<h2>What is Bochar?</h2>
<p>Bochar <span class="font-family: monospace;">[bɔʧar]</span> is a <a href="http://jdan.github.io/cleaver/">Cleaver</a> wrapped in <a href="https://github.com/shower/shower">Shower</a> <a href="http://shwr.me/shower/themes/ribbon/">Ribbon</a>.</p>
</div></section>
<section class="slide"><div>
<h2>What is Bochar?</h2>
<p>So let's talk about <em>Cleaver</em>.</p>
</div></section>
<section class="slide"><div>
<h2>What is Cleaver?</h2>
<p>Cleaver turns the following:</p>
<pre><code>title: My Slideshow
output: slideshow.html
--
## Hello, world!
### This is my slideshow
</code></pre>
</div></section>
<section class="slide"><div>
<h2>What is Cleaver?</h2>
<p><strong>Into a slideshow like this slideshow</strong>.</p>
<p>Cleaver uses a simple <a href="http://daringfireball.net/projects/markdown/">Markdown</a>
format.</p>
<ul>
<li>Simply write your slides in Markdown</li>
<li>… and separate them with <code>--</code></li>
</ul>
</div></section>
<section class="slide"><div>
<h2>What is Cleaver?</h2>
<p>Cleaver comes with a stylesheet that looks good by default, but that you
can extend at your heart's desire.</p>
</div></section>
<section class="slide"><div>
<h2>Return to Bochar</h2>
</div></section>
<section class="slide"><div>
<h2>Getting Bochar</h2>
<p>Get Bochar from NPM</p>
<p><code>npm install -g bochar</code></p>
</div></section>
<section class="slide"><div>
<h2>Generation with Bochar</h2>
<p>And run it against your shiny new presentation</p>
<p><code>bochar path/to/presentation.md</code></p>
</div></section>
<section class="slide"><div>
<h2>Continuous generation with Bochar</h2>
<p>If you want watching your md-file and regenerate presentation, just add watch command:</p>
<p><code>bochar watch path/to/presentation.md</code></p>
<p>Next we'll talk about setting up a quick presentation.</p>
</div></section>
<section class="slide"><div>
<h2>Metadata</h2>
<p>Each presentation contains metadata, for example:</p>
<pre><code>title: Shower Ribbon + Cleaver = Bochar
author:
name: "Vladimir Starkov"
twitter: "@matmuchrapna"
url: "http://vstarkov.com"
output: index.html
</code></pre>
<p>Let's break this chunk down on the next slide.</p>
</div></section>
<section class="slide"><div>
<h2>Metadata Fields</h2>
<ul>
<li><strong>title</strong>: The title of your presentation</li>
<li><strong>author</strong>: Some fields to populate an optional author slide at the end</li>
<li><strong>style</strong>: An optional external stylesheet to load</li>
<li><strong>output</strong>: Where to save your file (<em>default: FILENAME-cleaver.html</em>)</li>
</ul>
</div></section>
<section class="slide"><div>
<h2>Metadata Fields</h2>
<ul>
<li><strong>controls</strong>: Option to render navigation buttons (<em>default: true</em>)</li>
<li><strong>agenda</strong>: Option whether or not to insert an agenda slide (similar to a table of contents) after the title (<em>default: false</em>)</li>
<li><strong>encoding</strong>: A specified content encoding (<em>default: utf-8</em>)</li>
</ul>
</div></section>
<section class="slide"><div>
<h2>Metadata Fields (Advanced)</h2>
<ul>
<li><strong>template</strong>: Location of the template used to render the slides (default:
<em>default.mustache</em>)</li>
<li><strong>layout</strong>: Location of the layout template used to render everything (default:
<em>layout.mustache</em>)</li>
</ul>
</div></section>
<section class="slide"><div>
<h2>Other Slides</h2>
<p>Slides are separated by <code>--</code> and are written in markdown.</p>
<p>Use <code>h2</code> to define slide's title (denoted <strong>##</strong>)</p>
</div></section>
<section class="slide"><div>
<h2>Author Slide</h2>
<p>If your metadata contains author information (name, url, twitter), an author
slide will be inserted at the end of your presentation.</p>
</div></section>
<section class="slide"><div>
<h2>That's all, folks!</h2>
<p>Seriously, that's it. Bochar is perfect for quick slideshows that you can
create using a comfortable format with Shower ribbon template.
No extra software or text boxes required.</p>
<p>Check us out <a href="http://github.com/matmuchrapna/bochar">on GitHub</a>.</p>
<p><img src="https://secure.gaug.es/track.gif?h[site_id]=524f5b6cf5a1f577a2000180&h[resource]=https%3A%2F%2Fgithub.com%2Fmatmuchrapna%2Fbochar%2FREADME.md" alt="" title="" /></p>
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '524f5b6cf5a1f577a2000180');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</div></section>
<section class="slide"><div>
<div class="author">
<h1 class="name">Vladimir Starkov</h1>
<h3 class="twitter">
<a href="http://twitter.com/@matmuchrapna" tabindex="-1">@matmuchrapna</a>
</h3>
<h3 class="url">
<a href="http://vstarkov.com" tabindex="-1">http://vstarkov.com</a>
</h3>
</div>
</div></section>
<div class="progress"><div></div></div>
<script src="http://shwr.me/shower/shower.min.js"></script>
</body>
</html>