Fiddling with Gists

1_readme.md

Running Gists like a JsFiddle

TL;DR: This page (html, css, javascript, markdown) is being served from this gist using this server.

After working with AngularJS, which is totally awesome, I wanted a better way to share code snippets with the community. Something where the header declarations aren't hidden, so it's clear which version of angular you're using and whether zepto/jquery/underscore are loaded. I also wanted to use CoffeeScript, HAML and SCSS because that's what I use to write Goodfilms (my day job).

This HTML is being rendered from HAML, the CSS is being compiled from SCSS, the JS code is written in Coffeescript and even this here text is being compiled (in the browser) from a gist-hosted Markdown file.

The code that's wiring this together github.com/geelen/run-a-gist. The main logic is a 56-line Sinatra app. <3 Sinatra. The gist itself is located at gist.github.com/gists/2879097, and you simply prepend the gist ID (2879097) to the url to serve it: 2879097.run-a-gist.herokuapp.com

by @glenmaddern

application.coffee

app = angular.module("my-app", [])
app.directive "markdown", ($http) ->
  showdown = new Showdown.converter()

  restrict: "E"
  compile: (tElement, tAttrs) ->
    tElement.html "<article class='markdown' ng-bind-html-unsafe='markdown(#{tAttrs.model})'></article>"
    (scope, element, attrs) ->
      scope[tAttrs.model] = ''
      $http.get(attrs['src']).success (data) -> scope[tAttrs.model] = data
      scope.markdown = showdown.makeHtml

@MyCtrl = ($scope) ->

index.haml

!!! 5
%html(ng-app='my-app')
  %head
    %title Running Gists
    %script(src='https://raw.github.com/coreyti/showdown/master/src/showdown.js')
    %script(src='http://code.angularjs.org/angular-1.0.0rc10.min.js')
    %script(src='/application.js')
    %link(href="/screen.css" media="screen" rel="stylesheet" type="text/css")
  %body(ng-controller='MyCtrl')
    %markdown(src="/1_readme.md" model="content")
    %label Oh, and since this was the AngularJS demo I wanted to play around with when I decided to build this, the textarea below will live-update the rendered Markdown above. You can't save it yet though.
    %textarea(ng-model='content')
  
    :javascript
      var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-32408977-1']);
        _gaq.push(['_setAllowLinker', true]);
        _gaq.push(['_trackPageview']);
  
        (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

screen.scss

body {
  background-color: #CCC;
max-width: 640px;
margin: 0 auto;
font-family: Georgia;
color: hsl(0, 0%, 10%);
text-shadow: 0 1px 0 hsl(0, 0%, 80%);
background: -webkit-linear-gradient(left, hsla(0, 0%, 0%, 0.25), hsla(0, 0%, 0%, 0.3), hsla(0, 0%, 0%, 0.2));
}

header {
  h1 {
    text-decoration: underline;
    font-size: 1.5em;
  }
}  

.markdown {
  padding: 20px;
  
  >article {
    padding: 0 20px;
    margin: 20px;
    border: 1px dotted #444;
  }
}  

label {
    display: block;
    font-weight: bold;
  }
textarea {
margin: 20px auto;
width: 60%;
height: 400px;
display: block;
border: 1px solid black;
padding: 20px;
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.5);
  }