This repository has been archived by the owner on May 30, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
executable file
·125 lines (119 loc) · 4.65 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Upstage</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=1024, user-scalable=no">
<meta name="author" content="Reid Burke">
<meta name="copyright" content="© 2014">
<meta name="description" content="Welcome!">
<link rel="stylesheet" href="build/upstage-deck-core/upstage-deck-core-min.css">
</head>
<body>
<div id="bd" class="deck-container">
<section id="title" class="slide">
<h2>Welcome to Upstage</h2>
<p class="author">Reid Burke</p>
<p>Left arrow or swipe left to continue!</p>
</section>
<section id="how-it-works" class="slide">
<h2>How Does It Work?</h2><p>Upstage is a library for making web presentations built on <a href="http://yuilibrary.com">YUI</a>.</p>
<ol>
<li>
<h3>Create Slides</h3>
<p>Slides are plain old HTML.</p>
</li>
<li>
<h3>Tweak Styles</h3>
<p>Upstage can be used with deck.js themes.</p>
</li>
<li>
<h3>Extend and Enjoy</h3>
<p>Build on YUI's rock-solid architecture.</p>
</li>
</ol>
<div id="getting-started" class="slide"><h3>Getting Started</h3>
<ul><li>Get the <a href="https://github.com/reid/upstage">Upstage</a> repo.</li><li>Copy <code>index.html</code> and the <code>build</code> directory to another directory.</li><li>Start writing!</li></ul>
</div>
</section>
<section id="architecture" class="slide">
<h2>Architecture</h2>
<p>The Upstage core provides the architecture for the presentation. Make it useful by plugging in some of these:</p>
<ul>
<li id="architecture-keyboard" class="slide"><p><strong>UpstageKeyboard</strong>: Keyboard navigation.</p>
</li>
<li id="architecture-gesture" class="slide"><p><strong>UpstageGesture</strong>: Gesture navigation.</p>
</li>
<li id="architecture-blanker" class="slide"><p><strong>UpstageBlanker</strong>: Blank the screen.</p>
</li>
<li id="architecture-permalink" class="slide"><p><strong>UpstagePermalink</strong>: Permalinks to each slide.</p>
</li>
</ul>
</section>
</div>
<script src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
<script>
if (!window.YUI) {
// Retry with a local URL.
document.write('<script src="yui3/build/yui/yui.js"><\/script>');
// Don't autodetect the base path (the CDN path didn't work).
document.write('<script>YUI.config.base = "yui3/build/";<\/script>');
}
</script>
<script>
YUI({
base: "build/",
modules: {
"upstage": {},
"upstage-deck-crossfade": {
type: "css"
},
"upstage-prettify": {},
"upstage-prettify-css": {
type: "css"
},
"upstage-test-pattern": {},
"upstage-test-pattern-css": {
type: "css"
}
},
debug: true,
filter: "min"
}).use(
"upstage",
"upstage-prettify",
"upstage-deck-crossfade",
function (Y) {
prettyPrint();
// Upstage is a YUI widget.
var deck = new Y.Upstage({
srcNode: "#bd" // Where to find .slide elements.
});
// Upstage does not do much without plugins.
// They are all optional. Use only what you need.
deck.plug([
Y.Plugin.UpstageKeyboard,
Y.Plugin.UpstageGesture,
Y.Plugin.UpstagePermalink
// UpstageTextFill takes the first child of div.textfill
// and expands its text size to fill the container,
// see src/upstage/js/text-fill.js for details
// Y.Plugin.UpstageTextFill
]);
if (/[?&]smpte=1/.test(Y.config.win.location.search)) {
Y.use("upstage-test-pattern", function (Y) {
deck.plug(Y.Plugin.UpstageTestPattern);
});
} else {
deck.plug(Y.Plugin.UpstageBlank);
}
deck.render();
if ("function" === typeof window.deckReady) {
window.deckReady(deck, Y);
}
}
);
</script>
</body>
</html>