Link to playground from examples

example/1-hello/README.md

@@ -24,7 +24,8 @@ point your browser. Your terminal probably makes the link clickable.
 </code></pre>
 
 If you go to [http://localhost:8080](http://localhost:8080), you will, of
-course, see `Good morning, world!`.
+course, see `Good morning, world!`. You can also try it in the [Dream
+Playground](http://dream.as/1-hello).
 
 <br>
 

example/2-middleware/README.md

@@ -33,7 +33,8 @@ let () =
 <br>
 
 When you run this server and visit
-[http://localhost:8080](http://localhost:8080), you get much more interesting
+[http://localhost:8080](http://localhost:8080)
+[[playground](http://dream.as/2-middleware)], you get much more interesting
 (and colorful!) output:
 
 ![Dream log example](https://raw.githubusercontent.com/aantron/dream/master/docs/asset/log-sanitized.png)

example/3-router/README.md

@@ -33,8 +33,11 @@ let () =
 <br>
 
 This is also our first dynamic site! A request to `/echo/foo` gets the response
-`foo`, and a request to `/echo/bar` gets `bar`! The syntax `:word` in a route
-creates a path parameter, which can be read with
+`foo`, and a request to `/echo/bar` gets `bar`! Try it in the
+[playground](http://dream.as/3-router) &mdash; once the server loads, edit the
+URL in the right pane to visit `/echo/bar`.
+
+The syntax `:word` in a route creates a path parameter, which can be read with
 [`Dream.param`](https://aantron.github.io/dream/#val-param).
 
 <!-- TODO hyperlink Dream.param to docsc, also Dream.logger. -->

example/4-counter/README.md

@@ -4,7 +4,8 @@
 
 This example shows how easy it is to define a custom middleware,
 `count_requests`. It exposes the request count at
-[http://localhost:8080/](http://localhost:8080/) in a sort of dashboard:
+[http://localhost:8080/](http://localhost:8080/)
+[[playground](http://dream.as/4-counter)], in a sort of dashboard:
 
 ```ocaml
 let count = ref 0

example/5-promise/README.md

@@ -34,7 +34,7 @@ let () =
 
     Dream.get "/" (fun _ ->
       Dream.html (Printf.sprintf
-        "%3i request(s) successful\n%3i request(s) failed"
+        "%3i request(s) successful<br>%3i request(s) failed"
         !successful !failed));
 
   ]
@@ -45,6 +45,8 @@ let () =
 <b>$ npm install esy && npx esy</b>
 <b>$ npx esy start</b></code></pre>
 
+Try it in the [playground](http://dream.as/5-promise).
+
 <br>
 
 As you can see, the

example/5-promise/promise.ml

@@ -23,7 +23,7 @@ let () =
 
     Dream.get "/" (fun _ ->
       Dream.html (Printf.sprintf
-        "%3i request(s) successful\n%3i request(s) failed"
+        "%3i request(s) successful<br>%3i request(s) failed"
         !successful !failed));
 
   ]

example/6-echo/README.md

@@ -25,6 +25,8 @@ let () =
 <b>$ npm install esy && npx esy</b>
 <b>$ npx esy start</b></code></pre>
 
+...or run it in the [playground](http://dream.as/6-echo).
+
 <br>
 
 You can test it with curl:

example/7-template/README.md

@@ -85,11 +85,14 @@ already escaped, or if it is safe for some other reason. But be careful!
 To show the danger, let's launch a **script injection (XSS) attack** against
 this tiny Web app! First, go to
 [`template.eml.ml`](https://github.com/aantron/dream/blob/master/example/7-template/template.eml.ml#L4),
-change the substitution to `<%s! param %>`, and restart the app. Then, visit
+change the substitution to `<%s! param %>`, and restart the app. You can also
+make the edit in the [playground](http://dream.as/7-template). Then, visit
 this highly questionable URL:
 
 [http://localhost:8080/%3Cscript%3Ealert(%22Impossible!%22)%3C%2Fscript%3E](http://localhost:8080/%3Cscript%3Ealert(%22Impossible!%22)%3C%2Fscript%3E)
 
+If you are using the playground, change the host and port accordingly.
+
 This URL will cause our Web app to display an alert box, which we, as the
 developers, did not intend!
 

example/8-debug/README.md

@@ -31,10 +31,10 @@ let () =
 
 The rest of the app just adds two routes for triggering two kinds of
 failures that the debugger will detail. Visit
-[http://localhost:8080/bad](http://localhost:8080/bad) to trigger a
-`400 Bad Request` response, and
-[http://localhost:8080/fail](http://localhost:8080/fail) to trigger an
-exception. The debugger will show reports like this:
+[http://localhost:8080/bad](http://localhost:8080/bad)
+[[playground](http://dream.as/8-debug)] to trigger a `400 Bad Request`
+response, and [http://localhost:8080/fail](http://localhost:8080/fail) to
+trigger an exception. The debugger will show reports like this:
 
 ```
 (Failure "The Web app failed!")

example/9-error/README.md

@@ -43,6 +43,8 @@ let () =
 <b>$ npm install esy && npx esy</b>
 <b>$ npx esy start</b></code></pre>
 
+Try it in the [playground](http://dream.as/9-error).
+
 <br>
 
 We kept the error template simple for the sake of the example, but this is

example/a-log/README.md

@@ -31,7 +31,8 @@ let () =
 
 <br>
 
-If you visit [http://localhost:8080](http://localhost:8080) and then
+If you visit [http://localhost:8080](http://localhost:8080)
+[[playground](http://dream.as/a-log)] and then
 [http://localhost:8080/fail](http://localhost:8080/fail), you will find these
 messages in the log, between the others:
 

example/b-session/README.md

@@ -28,8 +28,8 @@ let () =
 
 <br>
 
-The first time you access the app, it “logs you in” by saving you user name in a
-session. The session manager,
+The first time you access the app [[playground](http://dream.as/b-session)], it
+“logs you in” by saving you user name in a session. The session manager,
 [`Dream.memory_sessions`](https://aantron.github.io/dream/#val-memory_sessions),
 a middleware, adds a `dream.session` cookie to the response, containing the
 session key. The next time you access the app, the session is looked up again

example/c-cookie/README.md

@@ -28,9 +28,10 @@ let () =
 
 <br>
 
-The first time you access this app, it sets up a language preference, `ut-OP`.
-This string is sent to the client in a `ui.language` cookie. On the next
-request, the client sends it back. The app retrieves and displays it.
+The first time you access this app [[playground](http://dream.as/c-cookie)], it
+sets up a language preference, `ut-OP`. This string is sent to the client in a
+`ui.language` cookie. On the next request, the client sends it back. The app
+retrieves and displays it.
 
 <br>
 

example/d-form/README.md

@@ -49,6 +49,8 @@ let () =
 <b>$ npm install esy && npx esy</b>
 <b>$ npx esy start</b></code></pre>
 
+Try it in the [playground](http://dream.as/d-form).
+
 <br>
 
 We didn't write a literal `<form>` tag in the template. Instead, we used

example/e-json/README.md

@@ -51,6 +51,8 @@ let () =
 <b>$ npm install esy && npx esy</b>
 <b>$ npx esy start</b></code></pre>
 
+Try it in the [playground](http://dream.as/e-json).
+
 <br>
 
 This example expects JSON of the form `{"message": "some-message"}`, and echoes

example/g-upload/README.md

@@ -51,7 +51,8 @@ let () =
 
 <br>
 
-The page shown after uploading looks like this:
+The page shown after uploading looks like this
+[[playground](http://dream.as/g-upload)]:
 
 ```
 foo.png, 663959 bytes

example/i-graphql/README.md

@@ -61,8 +61,8 @@ let () =
 
 <br>
 
-Visit [http://localhost:8080/graphiql](http://localhost:8080/graphiql), and you
-can interact with the schema:
+Visit [http://localhost:8080/graphiql](http://localhost:8080/graphiql)
+[[playground](http://dream.as/i-graphql)], and you can interact with the schema:
 
 ![GraphiQL](https://raw.githubusercontent.com/aantron/dream/master/docs/asset/graphiql.png)
 

example/j-stream/README.md

@@ -37,6 +37,8 @@ let () =
 <b>$ npm install esy && npx esy</b>
 <b>$ npx esy start</b></code></pre>
 
+Try running it in the [playground](http://dream.as/j-stream).
+
 <br>
 
 You can test it by running

example/k-websocket/README.md

@@ -56,8 +56,8 @@ let () =
 
 <br>
 
-Visit [http://localhost:8080](http://localhost:8080) to get the whole exchange
-started!
+Visit [http://localhost:8080](http://localhost:8080)
+[[playground](http://dream.as/k-websocket)] to get the whole exchange started!
 
 ![WebSocket alert](https://raw.githubusercontent.com/aantron/dream/master/docs/asset/websocket.png)
 

example/r-hello/README.md

@@ -19,8 +19,9 @@ let () =
 
 <br>
 
-After starting it, visit [http://localhost:8080](http://localhost:8080), and it
-will respond with its friendly greeting!
+After starting it, visit [http://localhost:8080](http://localhost:8080), or use
+the [playground](http://dream.as/r-hello), and it will respond with its friendly
+greeting!
 
 <br>
 

example/r-template-stream/README.md

@@ -38,7 +38,8 @@ let () =
 
 <br>
 
-Visit [http://localhost:8080](http://localhost:8080) to see it in action.
+Visit [http://localhost:8080](http://localhost:8080)
+[[playground](http://dream.as/r-template-stream)] to see it in action.
 
 The important differences with regular usage of templates are:
 

example/r-template/README.md

@@ -31,6 +31,8 @@ let () =
 <b>$ npm install esy && npx esy</b>
 <b>$ npx esy start</b></code></pre>
 
+Try it in the [playground](http://dream.as/r-template).
+
 <br>
 
 To use the templater, we need to add a stanza to our

example/w-graphql-subscription/README.md

@@ -54,7 +54,8 @@ let () =
 
 <br>
 
-Visit [http://localhost:8080/graphiql](http://localhost:8080/graphiql), and run
+Visit [http://localhost:8080/graphiql](http://localhost:8080/graphiql) or the
+[playground](http://dream.as/w-graphql-subscription), and run
 
 ```graphql
 subscription {

example/w-long-polling/README.md

@@ -42,6 +42,8 @@ the client immediately. If a client sends the next request before any more
 messages are generated, the server waits to respond — hence, “long
 polling.”
 
+Try it in the [playground](http://dream.as/w-long-polling).
+
 <br>
 
 **See also:**

example/w-multipart-dump/README.md

@@ -3,7 +3,8 @@
 <br>
 
 This app serves a file upload form at
-[http://localhost:8080](http://localhost:8080). When the form is submitted, it
+[http://localhost:8080](http://localhost:8080)
+[[playground](http://dream.as/w-multipart-dump)]. When the form is submitted, it
 echoes the POST request's body back to the client. It is useful for inspecting
 the `multipart/form-data` bodies generated by browsers and other clients.
 Typical output looks like this:

example/w-query/README.md

@@ -21,9 +21,10 @@ let () =
 
 <br>
 
-Visit [http://localhost:8080?echo=foo](http://localhost:8080?echo=foo) and you
-will see `foo` printed! Since we are inserting untrusted client-sent data into
-an HTML response, we have to escape it with
+Visit [http://localhost:8080?echo=foo](http://localhost:8080?echo=foo)
+[[playground](http://dream.as/w-query)] and you will see `foo` printed! Since
+we are inserting untrusted client-sent data into an HTML response, we have to
+escape it with
 [`Dream.html_escape`](https://aantron.github.io/dream/#val-html_escape). See
 *Security* in example [**`7-template`**](../7-template#security) for a
 discussion. Perhaps you can even launch an XSS attack against an unsafe version

example/w-server-sent-events/README.md

@@ -27,8 +27,9 @@ let rec message_loop () =
 <br>
 
 When a client connects to the example's server-sent events endpoint at
-[http://localhost:8080/push](http://localhost:8080/push), the server first sends
-any messages that have already accumulated, and then gradually
+[http://localhost:8080/push](http://localhost:8080/push)
+[[playground](http://dream.as/w-server-sent-events)], the server first sends any
+messages that have already accumulated, and then gradually
 [streams](https://aantron.github.io/dream/#streaming) more messages as they are
 created.
 

example/w-template-stream/README.md

@@ -35,6 +35,8 @@ let () =
 <b>$ npm install esy && npx esy</b>
 <b>$ npx esy start</b></code></pre>
 
+Try it in the [playground](http://dream.as/w-template-stream).
+
 <br>
 
 Most uses of streaming don't need

example/z-playground/client/playground.css

@@ -24,11 +24,11 @@ body {
 }
 
 #textarea .CodeMirror {
-  height: calc(100% - 168px);
+  height: calc(100vh - 168px);
 }
 
 #client iframe {
-  height: calc(100% - 63px)
+  height: calc(100vh - 63px)
 }
 
 

example/z-playground/server/playground.ml

@@ -343,6 +343,7 @@ let listen session =
 
 let rec gc () =
   Lwt_mutex.with_lock global_lock begin fun () ->
+    Dream.log "Running playground GC";
     Sys.command
       ("docker rmi " ^
         "$(docker images | grep -v base | grep -v ubuntu | " ^