Fork me on GitHub

Started: 18 Sep 2011
github

A command line tool to convert html into a coffeekup template.

htmlkup

$ htmlkup < file.html > file.coffee

Installation

$ npm install -g htmlkup

Command line usage:

Pipe it in, it pipes it out.

$ echo '<html></html>' | htmlkup
html()
$ echo '<html>
  <head>
    <link type="text/css" href="/css/my.css" />
    <script type="text/javascript" src="/js/my.js"></script>
    <title>Title</title>
  </head>
  <body>
    <div>Text</div>
    <div>
      <a href="/">somewhere</a><br/>
    </div>
  </body>
</html>' | htmlkup
html ->
  head ->
    link type: "text/css", href: "/css/my.css"
    script type: "text/javascript", src: "/js/my.js"
    title "Title"
  body ->
    div "Text"
    div ->
      a href: "/", "somewhere"
      br()
$ htmlkup < your.html > your.coffee

Online usage:

You can paste in your HTML and it'll output coffeescript.

http://html2coffeekup.no.de/

Thanks to webjay for building this!

Module usage:

hmtlkup exports just one function. Pass in html, it returns coffeescript

htmlkup = require 'htmlkup'

html = '<p>Hi!</p>'
coffeekup = htmlkup(html)

=> p "Hi!"

Tests

$ vows

Big ol' test

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>colinta | stuff by colinta</title>
    <meta name="description" content="">
    <meta name="author" content="Colin T.A. Gray">
    <link rel="shortcut icon" href="/static/image/favicon.ico">
    <link rel="apple-touch-icon" href="/static/image/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/static/image/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/static/image/apple-touch-icon-114x114.png">
    <link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'>
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet" type="text/css" media="all">
    <link href="/static/css/colinta.css" rel="stylesheet" type="text/css" media="all">
    <link href="/static/google-code-prettify/prettify.css" rel="stylesheet" type="text/css" media="all">
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script src="/static/google-code-prettify/prettify.js"></script>
    <script type="text/javascript">//<![CDATA[
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-15076738-1']);
      _gaq.push(['_trackPageview']);
      _gaq.push(['_trackPageLoadTime']);
        (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);
      })();
    //]]></script>
  </head>
  <body>
    <div class="topbar">
      <div class="fill">
        <div class="container">
          <img class="minime" src="/static/image/minime.png" />
          <a class="brand" href="/">stuff by colinta</a>
          <ul class="nav">
            <li><a href="/blogs/">Blogs</a></li>
            <li><a href="/projects/">Projects</a></li>
            <li><a href="/categories/">Categories</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="content">
        <div class="page-header">
          <h1>
            colinta
            <small>projects, blogs, and whatnot</small>
          </h1>
        </div>
        <h2>Blog</h2>
        <ul class="posts">
          <li><span>12 Jan 2012</span> &rsaquo; <a href="/blogs/2012_01_12_only_a_few_years.html">and it only took a few years!</a></li>
          <li><span>16 Jan 2012</span> &rsaquo; <a href="/blogs/2012_01_16_ouray_pictures.html">Ouray, 2012</a></li>
        </ul>
        <h2>Projects</h2>
        <ul class="posts">
          <li><span>18 Sep 2011</span> &rsaquo; <a href="/projects/2011_09_18_htmlkup.html">htmlkup</a></li>
          <li><span>21 Dec 2011</span> &rsaquo; <a href="/projects/2011_12_21_move_text.html">MoveText</a></li>
          <li><span>21 Dec 2011</span> &rsaquo; <a href="/projects/2011_12_21_transpose_character.html">TransposeCharacter</a></li>
          <li><span>22 Dec 2011</span> &rsaquo; <a href="/projects/2011_12_22_bracketeer.html">Bracketeer</a></li>
          <li><span>01 Jan 2012</span> &rsaquo; <a href="/projects/2012_01_01_quick_find.html">QuickFind</a></li>
          <li><span>03 Jan 2012</span> &rsaquo; <a href="/projects/2012_01_03_file_diffs.html">FileDiffs</a></li>
          <li><span>03 Jan 2012</span> &rsaquo; <a href="/projects/2012_01_03_simple_movements.html">SimpleMovements</a></li>
          <li><span>03 Jan 2012</span> &rsaquo; <a href="/projects/2012_01_03_string_encode.html">StringEncode</a></li>
          <li><span>04 Jan 2012</span> &rsaquo; <a href="/projects/2012_01_04_mark_and_move.html">MarkAndMove</a></li>
          <li><span>10 Jan 2012</span> &rsaquo; <a href="/projects/2012_01_10_clipboard_manager.html">ClipboardManager</a></li>
          <li><span>14 Jan 2012</span> &rsaquo; <a href="/projects/2012_01_14_change_quotes.html">ChangeQuotes</a></li>
          <li><span>16 Jan 2012</span> &rsaquo; <a href="/projects/2012_01_16_StrangeCase.html">StrangeCase</a></li>
          <li><span>19 Jan 2012</span> &rsaquo; <a href="/projects/2012_01_19_calculate.html">Calculate</a></li>
        </ul>
      </div>
      <footer>
        <p>&copy; Colin T.A. Gray</p>
        <p>Powered by <a href="/projects/2012_01_16_StrangeCase.html">StrangeCase</a>.</p>
      </footer>
    </div> <!-- /container -->
      <script type="text/javascript">
      $(document).ready(prettyPrint);
      </script>
  </body>
</html>
doctype 5
html lang: "en", ->
  head ->
    meta charset: "utf-8"
    title "colinta | stuff by colinta"
    meta name: "description", content: ""
    meta name: "author", content: "Colin T.A. Gray"
    link rel: "shortcut icon", href: "/static/image/favicon.ico"
    link rel: "apple-touch-icon", href: "/static/image/apple-touch-icon.png"
    link rel: "apple-touch-icon", sizes: "72x72", href: "/static/image/apple-touch-icon-72x72.png"
    link rel: "apple-touch-icon", sizes: "114x114", href: "/static/image/apple-touch-icon-114x114.png"
    link href: "http://fonts.googleapis.com/css?family=Wire+One", rel: "stylesheet", type: "text/css"
    link href: "/static/css/bootstrap.css", rel: "stylesheet"
    link href: "/static/css/style.css", rel: "stylesheet", type: "text/css", media: "all"
    link href: "/static/css/colinta.css", rel: "stylesheet", type: "text/css", media: "all"
    link href: "/static/google-code-prettify/prettify.css", rel: "stylesheet", type: "text/css", media: "all"
    ie "lt IE 9", ->
      script src: "http://html5shim.googlecode.com/svn/trunk/html5.js"
      script src: "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"
      script src: "/static/google-code-prettify/prettify.js"
      script type: "text/javascript", """
        //<![CDATA[
              var _gaq = _gaq || [];
              _gaq.push(['_setAccount', 'UA-15076738-1']);
              _gaq.push(['_trackPageview']);
              _gaq.push(['_trackPageLoadTime']);
                (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);
              })();
            //]]>
        """
    body ->
      div ".topbar", ->
        div ".fill", ->
          div ".container", ->
            img ".minime", src: "/static/image/minime.png"
            a ".brand", href: "/", "stuff by colinta"
            ul ".nav", ->
              li ->
                a href: "/blogs/", "Blogs"
              li ->
                a href: "/projects/", "Projects"
              li ->
                a href: "/categories/", "Categories"
      div ".container", ->
        div ".content", ->
          div ".page-header", ->
            h1 ->
              text " colinta "
              small "projects, blogs, and whatnot"
          h2 "Blog"
          ul ".posts", ->
            li ->
              span "12 Jan 2012"
              text " &rsaquo; "
              a href: "/blogs/2012_01_12_only_a_few_years.html", "and it only took a few years!"
            li ->
              span "16 Jan 2012"
              text " &rsaquo; "
              a href: "/blogs/2012_01_16_ouray_pictures.html", "Ouray, 2012"
          h2 "Projects"
          ul ".posts", ->
            li ->
              span "18 Sep 2011"
              text " &rsaquo; "
              a href: "/projects/2011_09_18_htmlkup.html", "htmlkup"
            li ->
              span "21 Dec 2011"
              text " &rsaquo; "
              a href: "/projects/2011_12_21_move_text.html", "MoveText"
            li ->
              span "21 Dec 2011"
              text " &rsaquo; "
              a href: "/projects/2011_12_21_transpose_character.html", "TransposeCharacter"
            li ->
              span "22 Dec 2011"
              text " &rsaquo; "
              a href: "/projects/2011_12_22_bracketeer.html", "Bracketeer"
            li ->
              span "01 Jan 2012"
              text " &rsaquo; "
              a href: "/projects/2012_01_01_quick_find.html", "QuickFind"
            li ->
              span "03 Jan 2012"
              text " &rsaquo; "
              a href: "/projects/2012_01_03_file_diffs.html", "FileDiffs"
            li ->
              span "03 Jan 2012"
              text " &rsaquo; "
              a href: "/projects/2012_01_03_simple_movements.html", "SimpleMovements"
            li ->
              span "03 Jan 2012"
              text " &rsaquo; "
              a href: "/projects/2012_01_03_string_encode.html", "StringEncode"
            li ->
              span "04 Jan 2012"
              text " &rsaquo; "
              a href: "/projects/2012_01_04_mark_and_move.html", "MarkAndMove"
            li ->
              span "10 Jan 2012"
              text " &rsaquo; "
              a href: "/projects/2012_01_10_clipboard_manager.html", "ClipboardManager"
            li ->
              span "14 Jan 2012"
              text " &rsaquo; "
              a href: "/projects/2012_01_14_change_quotes.html", "ChangeQuotes"
            li ->
              span "16 Jan 2012"
              text " &rsaquo; "
              a href: "/projects/2012_01_16_StrangeCase.html", "StrangeCase"
            li ->
              span "19 Jan 2012"
              text " &rsaquo; "
              a href: "/projects/2012_01_19_calculate.html", "Calculate"
        footer ->
          p "&copy; Colin T.A. Gray"
          p ->
            text "Powered by "
            a href: "/projects/2012_01_16_StrangeCase.html", "StrangeCase"
            text "."
      comment "/container"
      script type: "text/javascript", """
              $(document).ready(prettyPrint);

        """