first commit

frank/dynamic/css/site.sass

@@ -0,0 +1,83 @@
+//variables
+!main = #666666
+
+
+//mixins
+=borderRadius(!radius = 5px)	
+  -moz-border-radius = !radius
+  -webkit-border-radius = !radius
+  -khtml-border-radius = !radius
+  border-radius = !radius
+
+html
+  height: 100%
+
+body
+  margin: 0
+  padding: 2em 5em
+  background: white
+  color= !main
+  font: 100%/1.5 Verdana, sans-serif
+
+#header h1
+  font-size: 30px
+  line-height: 14px
+
+#header h2
+  font-size: 20px
+  line-height: 10px
+
+a img
+  border: 0px
+  color: #551A8B
+
+form
+  margin: 0px
+  padding: 0px
+  display: inline
+
+#header
+  margin-bottom: 10px
+  padding-top: 30px
+  padding-bottom: 20px
+
+#wrapper
+  width: 750px
+  margin-left: auto
+  margin-right: auto
+
+.button
+  background-color: #551A8B
+  display: inline
+  color: white
+  font-weight: bold
+  +borderRadius(5px)
+  padding: 10px
+  font-size: 14px
+
+.button:hover
+  background-color= !main
+  cursor: pointer
+
+#posturl
+  background-color: #FEFFE5
+  border: 2px solid #EBBA95
+  color: #C98660
+  +borderRadius(5px)
+  margin-top: 20px
+  padding: 20px
+
+#posturl h2
+  line-height: 12px
+  font-size: 12px
+  font-weight: bold
+  margin: 0px
+
+.copyable
+  font: 12px monaco
+  border: 1px solid #cccccc
+  background-color: white
+  padding: 7px
+  margin-top: 10px
+  margin-bottom: 10px
+

frank/dynamic/index.haml

@@ -0,0 +1,27 @@
+#header
+  %h1 The Real Time Internet Machine
+  %p The Real Time Internet Machine provides a quick way to create a real time data feed of any information on your website. This service provides you with 2 things:
+  %ol
+    %li A url too which you will POST feed updates
+    %li A bit of javascript that to include in your web pages that will pull in the real time feed.
+
+#creator
+  %div{:class=>'button'}= 'Create a Machine'
+
+#posturl
+  %h2= 'Post to url:'
+  %div{:class=>'copyable'}= 'http://realtimeinternetmachine.com/98u3498rjdskfhsdf3983osidfkjlsfl'
+  %p= 'Each time you post to this url it will create a new item in the real time feed. You can post items to this url with up to 5 properties. Each property can be 300 characters long.'
+  %h2= 'Client Side Javascript:'
+
+  <div class='copyable'>
+  &lt;script type="text/javascript"&gt;document.write(unescape("%3Cscript src='http://realtimeinternetmachine/client/08kljsd02lkjsdf.js' type='text/javascript'%3E%3C/script%3E"));&lt;/script&gt; 
+  &lt;script type="text/javascript"&gt; try {<br />
+  var rtm = realtimemachine(function(item){<br />
+  &nbsp;&nbsp;&nbsp;&nbsp;<strong>//Put your code here to insert your item into the DOM</strong><br />
+  });} catch(err) {}&lt;/script&gt;
+  </div>
+
+  %h2= 'Try it out:'
+  %p= 'NEED TO PUT A FULL LIVE WORKING DEMO HERE.'
+

frank/dynamic/layout.haml

@@ -0,0 +1,9 @@
+!!! Strict
+%html
+  %head
+    %title The Real Time Internet Machine.
+    %link{:rel=>'stylesheet', :type=>'text/css', :href=>'/css/site.css'}
+    %script{:type=>'text/javascript', :src=>'/js/site.js'}
+  %body
+    #wrapper
+      = yield

frank/helpers.rb

@@ -0,0 +1,3 @@
+module FrankHelpers
+  # helpers go here
+end

frank/prod-buildout/css/site.css

@@ -0,0 +1,77 @@
+html {
+  height: 100%; }
+
+body {
+  margin: 0;
+  padding: 2em 5em;
+  background: white;
+  color: #666666;
+  font: 100%/1.5 Verdana, sans-serif; }
+
+#header h1 {
+  font-size: 30px;
+  line-height: 14px; }
+
+#header h2 {
+  font-size: 20px;
+  line-height: 10px; }
+
+a img {
+  border: 0px;
+  color: #551A8B; }
+
+form {
+  margin: 0px;
+  padding: 0px;
+  display: inline; }
+
+#header {
+  margin-bottom: 10px;
+  padding-top: 30px;
+  padding-bottom: 20px; }
+
+#wrapper {
+  width: 750px;
+  margin-left: auto;
+  margin-right: auto; }
+
+.button {
+  background-color: #551A8B;
+  display: inline;
+  color: white;
+  font-weight: bold;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  padding: 10px;
+  font-size: 14px; }
+
+.button:hover {
+  background-color: #666666;
+  cursor: pointer; }
+
+#posturl {
+  background-color: #FEFFE5;
+  border: 2px solid #EBBA95;
+  color: #C98660;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  margin-top: 20px;
+  padding: 20px; }
+
+#posturl h2 {
+  line-height: 12px;
+  font-size: 12px;
+  font-weight: bold;
+  margin: 0px; }
+
+.copyable {
+  font: 12px monaco;
+  border: 1px solid #cccccc;
+  background-color: white;
+  padding: 7px;
+  margin-top: 10px;
+  margin-bottom: 10px; }

frank/prod-buildout/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+  <head>
+    <title>The Real Time Internet Machine.</title>
+    <link href='/css/site.css' rel='stylesheet' type='text/css' />
+    <script src='/js/site.js' type='text/javascript'></script>
+  </head>
+  <body>
+    <div id='wrapper'>
+      <div id='header'>
+        <h1>The Real Time Internet Machine</h1>
+        <p>The Real Time Internet Machine provides a quick way to create a real time data feed of any information on your website. This service provides you with 2 things:</p>
+        <ol>
+          <li>A url too which you will POST feed updates</li>
+          <li>A bit of javascript that to include in your web pages that will pull in the real time feed.</li>
+        </ol>
+      </div>
+      <div id='creator'>
+        <div class='button'>Create a Machine</div>
+      </div>
+      <div id='posturl'>
+        <h2>Post to url:</h2>
+        <div class='copyable'>http://realtimeinternetmachine.com/98u3498rjdskfhsdf3983osidfkjlsfl</div>
+        <p>Each time you post to this url it will create a new item in the real time feed. You can post items to this url with up to 5 properties. Each property can be 300 characters long.</p>
+        <h2>Client Side Javascript:</h2>
+        <div class='copyable'>
+        &lt;script type="text/javascript"&gt;document.write(unescape("%3Cscript src='http://realtimeinternetmachine/client/08kljsd02lkjsdf.js' type='text/javascript'%3E%3C/script%3E"));&lt;/script&gt;
+        &lt;script type="text/javascript"&gt; try {<br />
+        var rtm = realtimemachine(function(item){<br />
+        &nbsp;&nbsp;&nbsp;&nbsp;<strong>//Put your code here to insert your item into the DOM</strong><br />
+        });} catch(err) {}&lt;/script&gt;
+        </div>
+        <h2>Try it out:</h2>
+        <p>NEED TO PUT A FULL LIVE WORKING DEMO HERE.</p>
+      </div>
+    </div>
+  </body>
+</html>

frank/prod-buildout/js/frank.js

@@ -0,0 +1,48 @@
+(function(){
+  var collapse, easeInOutQuad, expand, expanded, expanding, init, slide, toggle;
+  // -----------------------------------------------
+  //
+  //  This is pretty gross; Gotta love what those
+  //  JS libraries do for you
+  //
+  //  -
+  // Easing function borrowed from jQuery.easing
+  easeInOutQuad = function easeInOutQuad(t, b, c, d) {
+    return ((t /= d / 2) < 1) && (c / 2 * t * t + b) || (-c / 2 * ((--t) * (t - 2) - 1) + b);
+  };
+  // Expand / Collapse help info
+  expanded = false;
+  expanding = false;
+  slide = function slide(el, end, duration, start, now) {
+    now = now || 0.001;
+    start = start || parseInt(document.defaultView.getComputedStyle(el, null).getPropertyValue('left'));
+    el.style.left = Math.round(start + (end - start) * easeInOutQuad(now, 0, 1, duration)) + 'px';
+    now += 30;
+    return now < duration ? setTimeout(function() {
+      return slide(el, end, duration, start, now);
+    }, 30) : expanding = false;
+  };
+  expand = function expand() {
+    document.getElementById('tooltip').style.display = 'none';
+    slide(document.getElementById('header'), 75, 600);
+    return slide(document.getElementById('help'), 525, 600);
+  };
+  collapse = function collapse() {
+    document.getElementById('tooltip').style.display = 'block';
+    slide(document.getElementById('header'), 300, 600);
+    return slide(document.getElementById('help'), 300, 600);
+  };
+  toggle = function toggle(e) {
+    if (expanding) {
+      return false;
+    }
+    expanded = !expanded;
+    expanding = true;
+    expanded ? expand() : collapse();
+    return false;
+  };
+  init = function init() {
+    return document.addEventListener('click', toggle, false);
+  };
+  window.onload = init;
+})();

frank/prod-buildout/layout.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+  <head>
+    <title>The Real Time Internet Machine.</title>
+    <link href='/css/site.css' rel='stylesheet' type='text/css' />
+    <script src='/js/site.js' type='text/javascript'></script>
+  </head>
+  <body>
+    <div id='wrapper'>
+      CONTENT
+    </div>
+  </body>
+</html>

frank/settings.yml

@@ -0,0 +1,57 @@
+# -----------------------------------------------
+#  Frank settings:
+#
+#  These settings will apply to this project only.
+#  If you would like to use this project as a
+#  template for new projects, just copy this
+#  project folder to `~/.frank` and it will be
+#  duplicated for you every time you run the
+# `frank` command.
+#
+#  Feel free to trash all these comments, too.
+#
+
+
+# ----------------------
+#  Server settings:
+#
+#  Change the server host/port to bind rack to.
+# 'server' can be any Rack-supported server, e.g.
+#  Mongrel, Thin, WEBrick
+#
+server:
+  handler: mongrel
+  hostname: 0.0.0.0
+  port: 3601
+
+# ----------------------
+#  Static folder:
+#
+#  All files in this folder will be served up
+#  directly, without interpretation
+#
+static_folder: static
+
+# ----------------------
+#  Dynamic folder:
+#
+#  Frank will try to interpret any of the files
+#  in this folder based on their extension
+#
+dynamic_folder: dynamic
+
+# ----------------------
+#  Templates:
+#
+# 'layouts' is a list of layouts to use, where
+# 'name' is the filename (without extension).
+#  You can also use multiple layouts, and limit
+#  their scopes like so:
+#      - name: blog_layout
+#        only: [blog]
+#      - name: normal
+#        not: [blog, ajax]
+templates:
+    layouts:
+        - name: layout
+