Getting Started

A work in progress...

Markups

Source File Result File
LessCSS to CSS
less-to-css.css.less
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  @val: @x @y @blur rgba(0, 0, 0, @alpha);

  box-shadow:         @val;
  -webkit-box-shadow: @val;
  -moz-box-shadow:    @val;
}
.box { @base: #f938ab;
  color:        saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0, 0, 5px, 0.4) }
}
less-to-css.css
.box{color:#fe33ac;border-color:#fdcdea;}.box div{box-shadow:0 0 5px rgba(0, 0, 0, 0.4);-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.4);-moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.4);}
CoffeeKup to HTML
coffeekup-to-html.html.ck
div class:'awesome', ->
    h1 'CoffeeKup Example'
    p 'This page was coded with coffeekup'
coffeekup-to-html.html
<div class="awesome">
  <h1>CoffeeKup Example</h1>
  <p>This page was coded with coffeekup</p>
</div>
CoffeeScript to JavaScript
coffeescript-to-javascript.js.coffee
# Type here!

math =
  root:   Math.sqrt
  square: square
  cube:   (x) -> x * square x

alert "Three cubed is #{math.cube 3}"
coffeescript-to-javascript.js
(function() {
  var math;

  math = {
    root: Math.sqrt,
    square: square,
    cube: function(x) {
      return x * square(x);
    }
  };

  alert("Three cubed is " + (math.cube(3)));

}).call(this);
HAML to HTML
haml-to-html.html.haml
%div.awesome
  %h1 HAML Example
  %p This page was coded with HAML.
haml-to-html.html
<div class="awesome"><h1>HAML Example</h1><p>This page was coded with HAML.</p></div>
HTML to CoffeeKup
html-to-coffeekup-example.ck.html
<div class="awesome">
    <h1>HTML to CoffeeKup Example</h1>
    <p>This page was coded with HTML</p>
</div>
html-to-coffeekup-example.ck
div '.awesome', ->
  h1 'HTML to CoffeeKup Example'
  p 'This page was coded with HTML'
Jade to HTML
jade-to-html.html.jade
div.awesome
    h1 Jade Example
    p This page was coded with jade.
jade-to-html.html
<div class="awesome"><h1>Jade Example</h1><p>This page was coded with jade.</p></div>
JavaScript to CoffeeScript
javascript-to-coffeescript.coffee.js
/* Type here! */

(function ($) {
    $.fn.highlight = function () {
        $(this).css({ color: 'red', background: 'yellow' });
        $(this).fadeIn();
    };
})(jQuery);
javascript-to-coffeescript.coffee
(($) ->
  $.fn.highlight = ->
    $(this).css 
      color: "red"
      background: "yellow"
    
    $(this).fadeIn()
) jQuery
Markdown to HTML
markdown-to-html.html.md
# Markdown Example

This page was coded with _markdown_.
markdown-to-html.html
<h1>Markdown Example</h1>

<p>This page was coded with <em>markdown</em>.</p>
Roy to JavaScript
roy-to-javascript.js.roy
let gcd a b =
  if b == 0 then
    a
  else
    gcd b (a % b)

console.log (gcd 49 35)
roy-to-javascript.js
var gcd = function(a, b) {
    return (function() {
        if(b == 0) {
            return a;
        } else {
            return gcd(b, (a % b));
        }
    })();
}
console.log((gcd(49, 35)))
SASS to CSS
sass-to-css.css.sass
a
  :color #fff
  &:hover
    :color #000
  &.active
    :background #888
    &:hover
      :color #fff
sass-to-css.css
a {
  color: #fff;}
a:hover {
  color: #000;}
a.active {
  background: #888;}
a.active:hover {
  color: #fff;}
Stylus to CSS
stylus-to-css.css.stylus
border-radius()
    -webkit-border-radius arguments
    -moz-border-radius arguments
    border-radius arguments

body a
    font 12px/1.4 "Lucida Grande", Arial, sans-serif
    background black
    color #ccc

form input
    padding 5px
    border 1px solid
    border-radius 5px
stylus-to-css.css
body a{font:12px/1.4 "Lucida Grande",Arial,sans-serif;background:#000;color:#ccc}
form input{padding:5px;border:1px solid;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
HTML to Jade
html-to-jade-example.jade.html
<div class="awesome">
    <h1>HTML to Jade Example</h1>
    <p>This page was coded with HTML</p>
</div>
html-to-jade-example.jade
<div class="awesome">
    <h1>HTML to Jade Example</h1>
    <p>This page was coded with HTML</p>
</div>

Example Blog Posts

Nifties

Click to view this page's source

src/pages/getting-started.html.eco
---
layout: 'default'
title: 'Getting Started'
---

<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
    <h1>Getting Started</h1>
    <p>A work in progress...</p>
</div>

<h2>Markups</h2>
<table class="bordered-table zebra-striped">
    <thead>
        <tr>
            <th style="width: 50%;">Source File</th>
            <th style="width: 50%;">Result File</th>
        </tr>
    </thead>
    <tbody>
        <% for document in @database.sort('title':1): %>
            <% if document.url.indexOf('/markups') == 0: %>
            <tr typeof="sioc:Page" about="<%= document.url %>">
                <td colspan="2">
                    <strong><%= document.title %></strong>
                <td>
            </tr>
            <tr typeof="sioc:Page" about="<%= document.url %>">
                <td>
                    <%= document.filename %>
                    <pre class="prettyprint lang-<%= document.filename.replace(/^.*\./,'') %>"><%= (document.body or '').replace(/^\s+/,'') %></pre>
                </td>
                <td>
                    <a href="<%= document.url %>">
                        <%= document.url.replace(/^.*\//,'') %>
                    </a>
                    <pre class="prettyprint lang-<%= document.extension %>"><%= (document.contentRenderedWithoutLayouts or '').replace(/^\s+/,'') %></pre>
                </td>
            </tr>
            <% end %>
        <% end %>
    </tbody>
</table>

<h2>Example Blog Posts</h2>
<ul>
    <% for document in @documents: %>
        <% if document.url.indexOf('/posts') == 0: %>
        <li typeof="sioc:Page" about="<%= document.url %>" class="<%= 'active'    if @document.url is document.url %>">
            <a href="<%= document.url %>" property="dc:title"><%= document.title %></a>
        </li>
        <% end %>
    <% end %>
</ul>

<h2>Nifties</h2>
<ul>
    <% for document in @documents: %>
        <% if document.url.indexOf('/nifty') == 0: %>
        <li typeof="sioc:Page" about="<%= document.url %>" class="<%= 'active'    if @document.url is document.url %>">
            <a href="<%= document.url %>" property="dc:title"><%= document.title %></a>
        </li>
        <% end %>
    <% end %>
    <li><a href="/search?query=coffee">A dynamic search page for <em>"coffee"</em></a></li>
</ul>