Opa Hello World examples

chat_room.opa

type message = {author: string
               ; text: string}

room = Network.cloud("room"): Network.network(message)

user_update(x: message) =
  line = <div class="line">
            <div class="user">{x.author}:</div>
            <div class="message">{x.text}</div>
         </div>
  do Dom.transform([#conversation +<- line ])
  Dom.scroll_to_bottom(#conversation)

broadcast(author) =
   do Network.broadcast({~author text=Dom.get_value(#entry)}, room)
   Dom.clear_value(#entry)

start() =
   author = Random.string(8)
   <div id=#header><div id=#logo></div></div>
   <div id=#conversation onready={_ -> Network.add_callback(user_update, room)}></div>
   <div id=#footer>
        <input id=#entry  onnewline={_ -> broadcast(author)}/>
        <div class="button" onclick={_ -> broadcast(author)}>Post</div>
   </div>

server = Server.one_page_bundle("Chat",
       [@static_resource_directory("resources")],
       ["resources/css.css"], start)

example.js

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(1337, "127.0.0.1"); console.log('Server running at http://127.0.0.1:1337/');

example.opa

server = Server.one_page_server("Hello", ( -> <>Hello world</>))

example2.opa

page() = <>Hello world</>
server = Server.one_page_server("Hello", page)

example3.opa

mk_entry(css_class, header, content) =
<div class="{css_class}">
  <span class="header">{header}</>
  <span class="content">{content}</>
</>
page() = mk_entry("main", <>Hello</>, <>world</>)
server = Server.one_page_server("Hello", page)

example4.opa

mk_entry(css_class, header, content) =
<div class="{css_class}">
  <span class="header">{header}</>
  <span class="content">{content}</>
</>
page() = mk_entry("main", <>Hello</>, <>world</>)
server = Server.one_page_bundle("Hello",
       [@static_resource_directory("resources")],
       ["resources/main.css"], page)

main.css

* {
     margin: 0;
     padding: 0;
}

html {
     background: none repeat scroll 0% 0% #F2F2ED;
}

body {
     background: none repeat scroll 0% 0% #F2F2ED;
     color: #252525;
     font-family: Georgia,"Times New Roman",Times,serif;
     font-size: 95%;
     font-weight: normal;
     line-height: 1.4em;
     text-align: center;
     text-shadow: 0 1px 0 white;
}

.main {
     color: #000000;
     font-size: 2em;
     line-height: 1.5em;
     margin: 0 0 0.7em;
}

.header {
     color: #B30A0A;
     font-size: 1.7em;
     line-height: 1.4em;
     margin: 0.5em 0;
}

.content {
     color: #000000;
     font-size: 1.5em;
     line-height: 1em;
     margin: 1em 0;
}