deploy-template.pug

html
  head
    style.
      * {
        box-sizing: border-box;
      }
      body {
        background-color: #111;
        color: #e9e9e9;
      }
      body:before {
        content: '';
        box-sizing: border-box;
        display: inline-block;
        height: 40px;
        width : 40px;
        border: solid 20px #333;
        border-right-color: #e9e9e9;
        border-left-color: #e9e9e9;
        border-radius: 100%;
        left: 50%;
        top: 50%;
        position: absolute;
        margin-left: -20px;
        margin-top: -100px;
        animation: rotate .75s infinite linear;
      }
      body:after {
        content: "POSTing to Codepen!";
        display: block;
        font-size: 20px;
        line-height: 20px;
        height: 20px;
        width: 100%;
        position: absolute;
        top: 50%;
        margin-top: -10px;
        left: 0;
        right: 0;
        text-align: center;
      }
      pre,
      [type=submit] {
        display: none;
      }
      @keyframes rotate {
        to {
          transform: rotate(360deg);
        }
      }
  body
    form(action='http://codepen.io/pen/define', method='POST')
      input(type='hidden', name="data")
      pre(id='markup')= SOURCE.MARKUP
      pre(id='script')= SOURCE.SCRIPT
      pre(id='style')= SOURCE.STYLE
      input(type='submit')
    script.
      (function(){
        var input = document.querySelector('[name=data]');
        var submit = document.querySelector('[type=submit]');
        var data = {
          title: 'New pen!',
          description: 'A cool new pen!',
          html_pre_processor: 'jade',
          css_pre_processor: 'stylus',
          js_pre_processor: 'babel',
          html: document.querySelector('#markup').innerHTML,
          css: document.querySelector('#style').innerHTML,
          js: document.querySelector('#script').innerHTML
        };
        var json = JSON.stringify(data)
          .replace(/"/g, """)
          .replace(/'/g, "'");
        input.setAttribute('value', json);
        submit.click();
      })();