Fork me on GitHub

Started: 18 Sep 2011
github

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

htmlkup

bash $ htmlkup < file.html > file.coffee

Installation

bash $ npm install -g htmlkup

Command line usage:

Pipe it in, it pipes it out.

bash $ echo '<html></html>' | htmlkup

coffeescript html()

bash $ 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

coffeescript 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()

bash $ 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

“`coffeescript htmlkup = require ‘htmlkup’

html = ‘

Hi!

’ coffeekup = htmlkup(html)

=> p "Hi!” “`

Tests

bash $ vows

Big ol' test

html <!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>

”`coffeescript 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 “ › ” a href: “/blogs/20120112onlyafewyears.html”, “and it only took a few years!” li -> span “16 Jan 2012” text “ › ” a href: “/blogs/20120116ouraypictures.html”, “Ouray, 2012” h2 “Projects” ul “.posts”, -> li -> span “18 Sep 2011” text “ › ” a href: “/projects/20110918htmlkup.html”, “htmlkup” li -> span “21 Dec 2011” text “ › ” a href: “/projects/20111221movetext.html”, “MoveText” li -> span “21 Dec 2011” text “ › ” a href: “/projects/20111221transposecharacter.html”, “TransposeCharacter” li -> span “22 Dec 2011” text “ › ” a href: “/projects/20111222bracketeer.html”, “Bracketeer” li -> span “01 Jan 2012” text “ › ” a href: “/projects/20120101quickfind.html”, “QuickFind” li -> span “03 Jan 2012” text “ › ” a href: “/projects/20120103filediffs.html”, “FileDiffs” li -> span “03 Jan 2012” text “ › ” a href: “/projects/20120103simplemovements.html”, “SimpleMovements” li -> span “03 Jan 2012” text “ › ” a href: “/projects/20120103stringencode.html”, “StringEncode” li -> span “04 Jan 2012” text “ › ” a href: “/projects/20120104markandmove.html”, “MarkAndMove” li -> span “10 Jan 2012” text “ › ” a href: “/projects/20120110clipboardmanager.html”, “ClipboardManager” li -> span “14 Jan 2012” text “ › ” a href: “/projects/20120114changequotes.html”, “ChangeQuotes” li -> span “16 Jan 2012” text “ › ” a href: “/projects/20120116StrangeCase.html”, “StrangeCase” li -> span “19 Jan 2012” text “ › ” a href: “/projects/20120119calculate.html”, “Calculate” footer -> p “© Colin T.A. Gray” p -> text “Powered by ” a href: “/projects/20120116StrangeCase.html”, “StrangeCase” text “.” comment “/container” script type: “text/javascript”, “”“ $(document).ready(prettyPrint);

    """

”`