Added some example code and moved some stuff around. Fixed some bugs /

ommissions in the client code.

.gitignore

@@ -1,4 +1,5 @@
 *.swp
 .DS_Store
-*.js
-lib/**/*.js
+lib/*
+test/*.js
+test/**/*.js

Cakefile

@@ -9,10 +9,14 @@ task 'build', 'Build the .js files', (options) ->
 	#	console.log options
 #	options.watch ||= no
 #	exec "coffee --compile #{if options.watch then '--watch' else ''} --output lib/ src/", (err, stdout, stderr) ->
-	exec "coffee --compile --output lib/ src/", (err, stdout, stderr) ->
+	exec "coffee --compile --bare --output lib/ src/", (err, stdout, stderr) ->
 		throw err if err
 		console.log stdout + stderr
 
+lib = [
+	'thirdparty/microevent.js/microevent.js'
+]
+
 client = [
 	'types/text'
 	'client/opstream'
@@ -26,6 +30,7 @@ e = (str, callback) ->
 		callback() if callback?
 
 task 'webclient', 'Assemble the web client into one file', ->
-	clientfiles = ("src/#{c}.coffee" for c in client).join(' ')
+	clientfiles = ("src/#{c}.coffee" for c in client).join ' '
 	e "coffee -cj #{clientfiles}", ->
-		e 'mv concatenation.js webclient.js'
+		e "cat #{lib.join ' '} concatenation.js >share.js", ->
+			e 'rm concatenation.js'

bin/exampleserver

@@ -0,0 +1,37 @@
+#!/usr/bin/env coffee
+
+connect = require 'connect'
+sharejs = require '../lib/server'
+sys = require 'sys'
+fs = require 'fs'
+renderer = require '../examples/_static'
+wiki = require '../examples/_wiki'
+
+server = connect(
+	connect.logger(),
+	connect.static(__dirname + '/../examples'),
+	connect.router (app) ->
+		app.get '/share.js', (req, res) ->
+			clientsrc = fs.readFileSync __dirname + '/../share.js', 'utf8'
+			res.setHeader 'content-type', 'application/javascript'
+			res.end clientsrc
+
+		app.get '/static/:docName', (req, res, next) ->
+			docName = req.params.docName
+			renderer docName, server.model, res, next
+
+		app.get '/wiki/:docName', (req, res, next) ->
+			docName = "wiki:#{req.params.docName}"
+			wiki docName, server.model, res, next
+
+)
+
+# Maybe... don't use the real config here?
+config = fs.readFileSync require.resolve('./sharejs.json'), 'utf8'
+options = JSON.parse config
+
+# Attach the sharejs REST and Socket.io interfaces to the server
+sharejs.attach server, options
+
+server.listen 8000
+sys.puts 'Server running at http://127.0.0.1:8000/'

bin/sharejs

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+
+var connect = require('connect'),
+	sharejs = require('../lib/server'),
+	sys = require('sys'),
+	fs = require('fs'),
+	server;
+
+server = connect(connect.logger());
+
+config = fs.readFileSync(require.resolve('./sharejs.json'), 'utf8'); 
+options = JSON.parse(config);
+
+// Attach the sharejs REST and Socket.io interfaces to the server
+sharejs.attach(server, options);
+
+server.listen(8000);
+sys.puts('Server running at http://127.0.0.1:8000/');

bin/sharejs.json

@@ -0,0 +1 @@
+{}

examples/README.md

@@ -0,0 +1,50 @@
+This is a bunch of little demo apps using Share.js.
+
+Launch the example sharejs server with
+
+    % bin/exampleserver
+
+
+readonly
+--------
+
+Two little demos of live viewers for sharejs documents.
+
+Browse to http://localhost:8000/readonly/html.html
+and http://localhost:8000/readonly/markdown.html
+
+### html
+
+Dynamically update html content as a document changes
+
+### markdown
+
+Dynamically render markdown as a document is edited.
+
+
+ace
+---
+
+The ace editor live editing a sharejs document.
+
+Browse to http://localhost:8000/ace/
+
+
+staticrender
+------------
+
+This directory has a little mustache template rendering engine to do server-side rendering of documents.
+
+Access the rendered documents at http://localhost:8000/static/DOCNAME
+
+Eg: http://localhost:8000/static/html
+
+Some of the logic to wire this demo up is in `bin/exampleserver`. You should have a read.
+
+The documents are rendered statically on the server, so they don't update when as you edit them. You could obviously mix in the code from the html demo to make this also re-render as the document changes.
+
+
+wiki
+----
+
+A more complicated demo showing a wiki.

examples/_static/README.md

@@ -0,0 +1,8 @@
+This is a simple static renderer which uses mustache to render out an HTML page
+from the document named on the URL path.
+
+Access this demo by browsing to:
+/static/DOCNAME
+from your server.
+
+(Eg, try /static/html)

examples/_static/index.coffee

@@ -0,0 +1,20 @@
+# This statically renders the document.
+
+fs = require 'fs'
+Mustache = try
+	require 'mustache'
+catch e
+	{to_html: -> "<body><pre>% npm install mustache</pre> to use this demo."}
+
+template = fs.readFileSync "#{__dirname}/template.html.mu", 'utf8'
+
+module.exports = (docName, model, res, next) ->
+	model.getSnapshot docName, (data) ->
+		if data.v == 0
+			# The document does not exist
+			next()
+		else
+			html = Mustache.to_html template, {content:data.snapshot, docName}
+			res.writeHead 200, {'content-type': 'text/html'}
+			res.end html
+

examples/_static/template.html.mu

@@ -0,0 +1,11 @@
+<html>
+	<head>
+		<title>{{docName}}</title>
+		<link href="/style.css" rel="stylesheet" type="text/css">
+	</head>
+	<body>
+		<div id="container">
+			<div id='text' class='content'>{{{content}}}</div>
+		</div>
+	</body>
+</html>

examples/_wiki/index.coffee

@@ -0,0 +1,42 @@
+# This statically renders the wiki.
+
+fs = require 'fs'
+Mustache = try
+	require 'mustache'
+catch e
+	{to_html: -> "<body><pre>% npm install mustache</pre> to use this demo."}
+
+showdown = new (require('../lib/markdown/showdown').converter)()
+
+template = fs.readFileSync "#{__dirname}/wiki.html.mu", 'utf8'
+
+defaultContent = '''
+# Wowsers
+
+This wiki page is currently empty.
+
+You can put some content in it with the editor on the right. As you do so, the document will update live on the left, and live for everyone else editing at the same time as you. Isn't that cool?
+
+The text on the left is being rendered with markdown, so you can do all the usual markdown stuff like:
+
+- Bullet
+  - Points
+
+[links](http://google.com)
+
+[Go back to the main page](Main)
+'''
+
+module.exports = (docName, model, res) ->
+	model.getSnapshot docName, (data) ->
+		if data.v == 0
+			model.applyOp docName, {op:{type:'text'}, v:0}
+			model.applyOp docName, {op:[{i:defaultContent, p:0}], v:1}
+
+		content = data.snapshot || ''
+		markdown = showdown.makeHtml content
+		console.log markdown
+		html = Mustache.to_html template, {content, markdown, docName}
+		res.writeHead 200, {'content-type': 'text/html'}
+		res.end html
+

examples/_wiki/wiki.html.mu

@@ -0,0 +1,81 @@
+<html>
+	<head>
+		<style type="text/css" media="screen">
+			body {
+				overflow: hidden;
+			}
+
+			#left {
+				margin: 0;
+				position: fixed;
+				overflow: scroll;
+				float: left;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				width: 50%;
+			}
+
+			#view {
+				padding-left: 30px;
+			}
+
+			#editor { 
+				margin: 0;
+				position: fixed;
+				top: 0;
+				bottom: 0;
+				left: 50%;
+				width: 50%;
+				right: 0;
+			}
+		</style>
+		<link href="/style.css" rel="stylesheet" type="text/css">
+	</head>
+
+	<body>
+		<div id="left">
+			<div id="view" class="content">{{{markdown}}}</div>
+		</div>
+		<div id="editor">{{{content}}}</div>
+		<script src="/lib/markdown/showdown.js" type="text/javascript"></script>
+		<script src="/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
+		<script src="/socket.io/socket.io.js"></script>
+		<script src="/share.js"></script>
+		<script src="../lib/ace.js"></script>
+		<script>
+
+    window.onload = function() {
+		var converter = new Showdown.converter();
+		var view = document.getElementById('view');
+
+        var editor = ace.edit("editor");
+		editor.setReadOnly(true);
+		editor.session.setUseWrapMode(true);
+		editor.setShowPrintMargin(false);
+
+		var connection = new sharejs.Connection(window.location.hostname, 8000);
+
+		connection.getOrCreate('{{{docName}}}', function(doc, error) {
+			if (error) {
+				console.error(error);
+				return;
+			}
+			doc.attach_ace(editor);
+			editor.setReadOnly(false);
+
+			var render = function() {
+				view.innerHTML = converter.makeHtml(doc.snapshot);
+			};
+
+			window.doc = doc;
+
+			render();
+			doc.subscribe('change', render);
+		});
+    };
+		</script>
+	</body>
+</html>	
+

examples/ace.html → examples/ace/index.html

@@ -17,31 +17,30 @@
 	</head>
 
 	<body>
-		<div id="editor">Loading...</div>
-		<script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
-		<script src="ace/mode-coffee.js" type="text/javascript" charset="utf-8"></script>
+		<div id="editor">Connecting...</div>
+		<script src="../lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
+		<script src="../lib/ace/mode-coffee.js" type="text/javascript" charset="utf-8"></script>
 		<script src="/socket.io/socket.io.js"></script>
-		<script src="share.js"></script>
-		<script src="ace.js"></script>
+		<script src="/share.js"></script>
+		<script src="../lib/ace.js"></script>
 		<script>
 
     window.onload = function() {
         var editor = ace.edit("editor");
-//		var editorDoc = editor.getSession().getDocument();
-//		editorDoc.setNewLineMode('unix');
-//		window.doc = editorDoc;
-//		var convert = aceDeltaToSharejsOp(editorDoc);
-
-		var connection = new whatnot.Connection('sephsmac.local', 8000);
+		editor.setReadOnly(true);
+		var connection = new sharejs.Connection(window.location.hostname, 8000);
+
 		connection.getOrCreate('acetest2', function(doc, error) {
 			if (error) {
 				console.error(error);
 				return;
 			}
 			doc.attach_ace(editor);
-			console.log('attached');
+			console.log("I'm so attached right now.");
+			editor.setReadOnly(false);
 		});
 
+		// For fun, we'll go into coffeescript syntax mode.
 		var CoffeeScriptMode = require("ace/mode/coffee").Mode;
 		editor.getSession().setMode(new CoffeeScriptMode());
     };