kwand-stack
Version:
Koa + WebSockets + Angular + Node + Dokku
3 lines • 4.38 kB
HTML
<html><head><meta charset=utf-8><title>KWAND Stack Sample Boilerplate (webapp)</title><meta name=description><meta name=keywords><meta name=viewport content="width=device-width"><script src=//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js></script><script src=scripts/before.min.js></script><meta property=fb:admins><meta property=og:url><meta property=og:title><meta property=og:site_name><meta property=og:description><meta property=og:image><meta property=og:image:width><meta property=og:image:height><meta property=og:type content=website><link rel=image_src><link rel="shortcut icon" href=http://kwand.io/favicon.ico><link href=styles/fonts/fonts.css rel=stylesheet type=text/css><link href=styles/main.min.css rel=stylesheet type=text/css></head><body><div class=container><img src=http://kwand.io/images/kwand-icon-500.png><section id=intro><h1>KWAND Stack Boilerplate</h1><p>Hey congrats! Looks like you got your boilerplate working. Time to rip it up and customize the way you like. But first a few examples to get you started. For docs, news, and stuff try <a href=http://kwand.io>kwand.io</a>.</p><aside id=wip><p>This is an ongoing, ever-evolving <strong><em>work in progress</em></strong> currently used primarily to introduce advanced mobile+web app development concepts and workflows to those learning at <a href=http://skilstak.com>SkilStak Coding Arts</a>. Even if you never use this boilerplate in your own projects hopefully this live demo will give you a good idea of what is available now as well as what is coming to mainstream web development in the near future.</p></aside></section><section id=examples><article id=locals><h2>Compile Time Locals</h2><p>If you know <a href=http://jade-lang.com>Jade</a> (and you should, it's really amazing) you know it allows you to include all sorts of stuff by passing in a locals parameter (variables, functions, etc.) We've consolidated this into the <a href=https://github.com/kwand/kwand-stack/blob/master/locals.js><code>locals<span class=hljs-preprocessor>.js</span></code></a> file, which gets executed once for all the jade page builds.</p><p>This let's us do things like</p><p><code><span class=hljs-keyword>last</span>-updated: May <span class=hljs-number>25</span>th <span class=hljs-number>2014</span>, <span class=hljs-number>11</span>:<span class=hljs-number>46</span>:<span class=hljs-number>40</span> pm when <span class=hljs-operator>the</span> weather <span class=hljs-operator>in</span> Cornelius was <span class=hljs-string>'few clouds'</span> <span class=hljs-operator>and</span> <span class=hljs-number>67.59</span> F</code></p></article><article id=posting><h2>Posting Form Data</h2><p>This form demonstrates how easy it is to post form data to KOA middleware components. See <a href=https://github.com/kwand/kwand-stack/blob/master/server/server.js><code>src/<span class=hljs-keyword>server</span>/<span class=hljs-keyword>server</span>.js</code></a> to see what is going on.</p><form action=/post method=POST><input name=myvalue placeholder="type something"><input type=submit></form></article><article id=highlight><h2>Syntax Highlighting</h2><p>Uses the amazing <a href=https://github.com/johannestroeger/gulp-highlight><code>gulp<span class=hljs-attribute>-highlight</span></code></a> to provide automatic <a href=http://highlightjs.org>highlight.js</a> syntax.</p><pre><code class=lang-javascript><span class=hljs-keyword>var</span> <span class=hljs-keyword>message</span> = <span class=hljs-string>'Nothing special'</span>;
console.log(<span class=hljs-keyword>message</span>);</code></pre><aside id=stylus-highlighting><p>Unfortunately Stylus and Jade are not among the highlight.js included list, but there are many out there (and we'll add soon).</p></aside></article></section><div class=credits><p>From <a href=http://robmuh.com>Rob Muhlestein</a> at <a href=http://skilstak.com>SkilStak Coding Arts</a></p></div><script src=scripts/after.min.js></script><script>!function(S,k,i,l,s,t,K){S.GoogleAnalyticsObject=s,S[s]=S[s]||function(){(S[s].q=S[s].q||[]).push(arguments)},S[s].l=+new Date,t=k.createElement(i),K=k.getElementsByTagName(i)[0],t.src=l,K.parentNode.insertBefore(t,K)}(this,document,"script","//www.google-analytics.com/analytics.js","ga");
ga("create","UA-XXXXX-X");ga("send","pageview");</script></div></body></html>