-
Notifications
You must be signed in to change notification settings - Fork 4
/
demos.html
153 lines (127 loc) · 5.77 KB
/
demos.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
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<title>ShareJS Examples</title>
<style>
body {
padding-top: 60px;
}
div .row {
padding-bottom: 30px;
padding-top: 30px;
}
.demo {
}
</style>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="/">ShareJS</a>
<ul class="nav">
<!-- <li class="active"><a href="#">Intro</a></li>-->
</ul>
<ul class="nav secondary-nav">
<li class="active"><a href="demos.html">Demos</a></li>
<li><a href="https://github.com/josephg/ShareJS/wiki">Documentation</a></li>
<li><a href="https://github.com/josephg/ShareJS">Github</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<section id="intro">
<div class="page-header"><h1>Demo Gallery</h1></div>
<p>Demos. Lots of demos. <b>*neo glasses*</b></p>
<p>View source on all these demos to see what they're made of. All the demos live in <a href="https://github.com/josephg/ShareJS/tree/master/examples">examples</a> in the source tree.</p>
<div class="row">
<div class="page-header"><h2>Simple demos</h2></div>
<div class="span6 demo">
<h2>Simple ace editor</h2>
<p>Use the ace editor to edit the <code>'hello'</code> document</p>
<p><a class="btn primary" href="hello-ace.html">Edit 'hello' »</a></p>
</div>
<div class="span5 demo">
<h2>Simple textarea</h2>
<p>Use a plain textarea to edit the <code>'hello'</code> document</p>
<p><a class="btn primary" href="textarea.html">Edit 'hello' »</a></p>
</div>
<div class="span5 demo">
<h2>Simple broadcast</h2>
<p>Use the shout functionality to broadcast non-persistent messages</p>
<p><a class="btn primary" href="shout.html">Start Shouting »</a></p>
</div>
</div>
<div class="row">
<div class="page-header"><h2>Read only examples</h2></div>
<div class="span6 demo">
<h2>Edit HTML content</h2>
<p>Use the <code>'hello'</code> document contents as the text for a webpage</p>
<p><a class="btn primary" href="hello-readonly.html">View 'hello' »</a></p>
</div>
<div class="span5 demo">
<h2>HTML viewer</h2>
<p>The <code>'html'</code> document is used as the innerHTML on the page. (You can edit it using the
general editor, below.)</p>
<p><a class="btn primary" href="readonly/html.html">View 'html' »</a></p>
</div>
<div class="span5 demo">
<h2>Markdown viewer</h2>
<p>View the <code>'markdown'</code> document, rendered to HTML using showdown. Edit the document using the editor.</p>
<p><a class="btn primary" href="readonly/markdown.html">View 'markdown' »</a></p>
</div>
</div>
<div class="row">
<div class="page-header"><h2>More complex examples</h2></div>
<div class="span6 demo">
<h2>Static renderer</h2>
<p>This example statically renders documents on the server. The page is
completely static - there's no javascript at all. You can append document names
to the URL to render them. The code for this demo is in
<a href="https://github.com/josephg/ShareJS/tree/master/examples/_static">examples/_static</a>.</p>
<p><a class="btn primary" href="static/html">View 'html' »</a></p>
</div>
<div class="span5 demo">
<h2>General Editor</h2>
<p>This example shows the use of an Ace editor which can edit any ShareJS document. Documents
are named with a string. Edit any of the documents which the demos above show.</p>
<p><a class="btn primary" href="ace/">Edit anything »</a></p>
</div>
<div class="span5 demo">
<h2>Wiki</h2>
<p>This example demonstrates using ShareJS to implement a wiki. You can create documents on the fly by
browsing to wiki/Anything. The code for this demo is in
<a href="https://github.com/josephg/ShareJS/tree/master/examples/_wiki">examples/_wiki</a></p>
<p><a class="btn primary" href="wiki/">Explore the wiki »</a></p>
</div>
</div>
<div class="row">
<div class="span6 offset2 demo">
<h2>Pad</h2>
<p>When you open this page, it creates a new empty editing pad with a random name (pad:XXXX).
You can share the URL with someone else and edit with them.
</p>
<p><a class="btn primary" href="pad/">Edit a new pad »</a></p>
</div>
<div class="span6 demo">
<h2>Pair programming editor</h2>
<p>This is the same as the pad example (left), except ace has coffeescript styling on.</p>
<p><a class="btn primary" href="code.html">Pair program »</a></p>
</div>
</div>
<div class="row">
<div class="page-header"><h2>JSON demos</h2></div>
<p>ShareJS also supports concurrently editing JSON objects. The JSON OT spec is documented
<a href="https://github.com/josephg/ShareJS/wiki/JSON-Operations">here</a> and you can
read about the client API <a href="https://github.com/josephg/ShareJS/wiki/JSON-Client-API">here</a></p>
<div class="span6 offset5 demo">
<h2>Hex game</h2>
<p>This is a complex game example. The game's state is stored in a JSON document.</p>
<p><a class="btn primary" href="hex.html">Play the hex game »</a></p>
</div>
</div>
</div>
</body>
</html>