kwand-stack/src/client/pages/index.jade

Koa + WebSockets + Angular + Node + Dokku

doctype html

// remove anything you don't need

html(ng-app)
  head
    meta(charset='utf-8')
    title KWAND Stack Sample Boilerplate (webapp)
    meta(name='description', content='')
    meta(name='keywords', content='')
    meta(name='viewport', content='width=device-width')
    script(src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js')
    script(src='scripts/before.min.js')

    meta(property='fb:admins' content='')
    meta(property='og:url' content='')
    meta(property='og:title' content='')
    meta(property='og:site_name' content='')
    meta(property='og:description' content='')
    meta(property='og:image' content='')
    meta(property='og:image:width' content='')
    meta(property='og:image:height' content='')
    meta(property='og:type' content='website')
    link(rel='image_src' href='')
    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')

  body
    .container
      img(src="http://kwand.io/images/kwand-icon-500.png")
      section#intro
        h1 KWAND Stack Boilerplate
        :markdown
          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
          [kwand.io](http://kwand.io).

        aside#wip
          :markdown
            This is an ongoing, ever-evolving ***work in progress***
            currently used primarily to introduce advanced mobile+web
            app development concepts and workflows to those learning at
            [SkilStak Coding Arts](http://skilstak.com). 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.

      section#examples

        article#locals
          h2 Compile Time Locals
          :markdown
            If you know [Jade](http://jade-lang.com) (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
            [`locals.js`](https://github.com/kwand/kwand-stack/blob/master/locals.js)
            file, which gets executed once for all the jade page builds.

            This let's us do things like
            
            `last-updated: #{lastBuildDateLong} when the weather in #{weather.name} was '#{weather.weather[0].description}' and #{weather.main.temp} F`

        article#posting
          h2 Posting Form Data
          :markdown
            This form demonstrates how easy it is to post form data to
            KOA middleware components. See [`src/server/server.js`](https://github.com/kwand/kwand-stack/blob/master/server/server.js) to see
            what is going on.

          form(action='/post', method='POST')
            input(name='myvalue' placeholder='type something')
            input(type='submit')

        article#highlight
          h2 Syntax Highlighting
          :markdown
            Uses the amazing
            [`gulp-highlight`](https://github.com/johannestroeger/gulp-highlight)
            to provide automatic [highlight.js](http://highlightjs.org)
            syntax.

            ```javascript
            var message = 'Nothing special';
            console.log(message);
            ```

          aside#stylus-highlighting
            :markdown
              Unfortunately Stylus and Jade are not among the highlight.js
              included list, but there are many out there (and we'll
              add soon).


      include _includes/credits
      script(src='scripts/after.min.js')
      include _includes/google-analytics