vmagamedov/a KinkoExample.md

## a KinkoExample.md

      
    Raw
  

              a KinkoExample.md
            
          
    Setup

$ git clone https://gist.github.com/256bcfd64e47b27507d7.git
$ cd 256bcfd64e47b27507d7
$ virtualenv env && source env/bin/activate
$ pip install https://github.com/vmagamedov/kinko/archive/master.zip
$ npm install --save-dev browser-sync gulp gulp-stylus
$ gulp


## gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var exec = require('child_process').exec;
var stylus = require('gulp-stylus');

gulp.task('ki', function() {
    exec('./env/bin/python -m kinko index.ki b-products-list index.json index.html', function(err) {
        if (err !== null) {
            console.log(err.message);
        }
    });
});

gulp.task('styl', function() {
    gulp.src(['style.styl'])
        .pipe(stylus())
        .pipe(gulp.dest('./'))
        .pipe(browserSync.stream());
});

gulp.task('default', ['ki', 'styl'], function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
    gulp.watch("index.ki", ['ki']);
    gulp.watch("index.json", ['ki']);
    gulp.watch("index.html").on('change', browserSync.reload);
    gulp.watch("style.styl", ['styl']);
});

## index.json
{
  "products": [
    {
      "id": 124,
      "name": "Apple MacBook Pro 13\" with Retina display 2015 (MF841), Киев",
      "catalog-price": "45 000 грн.",
      "main-image-url": "http://images.ua.prom.st/163683047_w200_h200_cid275653_pid81051459-66a3bfa0.jpg",
      "company": {
        "id": 345,
        "name": "ACME",
        "opinions-count": 25,
        "positive-opinions-percent": 99
      }
    },
    {
      "id": 125,
      "name": "Apple MacBook Pro 15\" with Retina display 2015 (MF842), Киев",
      "catalog-price": "43 000 грн.",
      "main-image-url": "http://images.ua.prom.st/163683047_w200_h200_cid275653_pid81051459-66a3bfa0.jpg",
      "company": {
        "id": 345,
        "name": "ACME",
        "opinions-count": 25,
        "positive-opinions-percent": 95
      }
    }
  ]
}

## index.ki
def b-layout
  "<!DOCTYPE html>"
  html
    head
      meta :charset "utf-8"
      meta :name "viewport" :content "width=device-width, initial-scale=1"
      title "Kinko Sandbox"
      link :rel "stylesheet"
        :href "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
      link :rel "stylesheet"
        :href "style.css"
      script
        :src "//code.jquery.com/jquery-1.11.3.min.js"
      script
        :src "//code.jquery.com/jquery-migrate-1.2.1.min.js"
    body
      #body
      script
        :src "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"


def b-product-row
  div :class "col-md-3"
    a :href "#" :class "thumbnail"
      img :src #product.main-image-url

  div :class "col-md-9"
    h5
      a :href "#" #product.name
    p
      "От компании "
      a :href "#" #product.company.name
      " "
      span :class "glyphicon glyphicon-ok-sign"
      span :class "glyphicon glyphicon-star-empty"
      span :class "glyphicon glyphicon-star-empty"
      span :class "glyphicon glyphicon-star-empty"
      ", "
      #product.company.opinions-count
      " отзывов"
      ", "
      #product.company.positive-opinions-percent
      "% положительных"

    h4
      #product.catalog-price
    p (span :style "color: green" "В наличии") ", " (strong "бесплатная доставка")


def b-products-list
  ./b-layout
    :body
      nav :class "navbar navbar-default navbar-static-top"
        div :class "container"
          div :class "navbar-header"
            a :class "navbar-brand" :href "/" "Prom.ua"
          form :class "navbar-form navbar-left" :role "search"
            div :class "input-group"
              input :type "text" :class "form-control" :placeholder "Поиск"
              span :class "input-group-btn"
                button :type "button" :class "btn btn-default"
                  span :class "glyphicon glyphicon-search"
          ul :class "nav navbar-nav navbar-right"
            li :class "dropdown"
              a :href "#" :class "dropdown-toggle" :data-toggle "dropdown" "Кабинет"
                span :class "caret"
              ul :class "dropdown-menu"
                li
                  a :href "#" "Войти"
                  a :href "#" "Зарегистрироваться"
            li
              a :href "/cart" "Корзина " (span :class "badge" 0)
            li
              a :href "/favorites" "Избранное " (span :class "badge" 0)
      div :class "container"
        div :class "row"
          div :class "col-md-3" "Filters"
          div :class "col-md-9"
            div :class "row"
              div :class "col-md-6 pull-left"
                "Найден 1 результат"
              div :class "col-md-6 pull-right text-right"
                "Сортировать "
                select
                  option "по релевантности"
                  option "по популярности"
                  option "от дешевых до дорогих"
                  option "от дорогих к дешевым"
                  option "по отзывам о компании"
                  option "по отзывам о товаре"
                " "
                div :class "btn-group"
                  button :type "button" :class "btn btn-default active"
                    span :class "glyphicon glyphicon-th-list"
                  button :type "button" :class "btn btn-default"
                    span :class "glyphicon glyphicon-th"
            each product products
              div :class "row" (./b-product-row :product product)

## style.styl
.thumbnail {margin-bottom: 10px}
	var gulp = require('gulp');
	var browserSync = require('browser-sync').create();
	var exec = require('child_process').exec;
	var stylus = require('gulp-stylus');

	gulp.task('ki', function() {
	exec('./env/bin/python -m kinko index.ki b-products-list index.json index.html', function(err) {
	if (err !== null) {
	console.log(err.message);
	}
	});
	});

	gulp.task('styl', function() {
	gulp.src(['style.styl'])
	.pipe(stylus())
	.pipe(gulp.dest('./'))
	.pipe(browserSync.stream());
	});

	gulp.task('default', ['ki', 'styl'], function() {
	browserSync.init({
	server: {
	baseDir: "./"
	}
	});
	gulp.watch("index.ki", ['ki']);
	gulp.watch("index.json", ['ki']);
	gulp.watch("index.html").on('change', browserSync.reload);
	gulp.watch("style.styl", ['styl']);
	});
	{
	"products": [
	{
	"id": 124,
	"name": "Apple MacBook Pro 13\" with Retina display 2015 (MF841), Киев",
	"catalog-price": "45 000 грн.",
	"main-image-url": "http://images.ua.prom.st/163683047_w200_h200_cid275653_pid81051459-66a3bfa0.jpg",
	"company": {
	"id": 345,
	"name": "ACME",
	"opinions-count": 25,
	"positive-opinions-percent": 99
	}
	},
	{
	"id": 125,
	"name": "Apple MacBook Pro 15\" with Retina display 2015 (MF842), Киев",
	"catalog-price": "43 000 грн.",
	"main-image-url": "http://images.ua.prom.st/163683047_w200_h200_cid275653_pid81051459-66a3bfa0.jpg",
	"company": {
	"id": 345,
	"name": "ACME",
	"opinions-count": 25,
	"positive-opinions-percent": 95
	}
	}
	]
	}
	def b-layout
	"<!DOCTYPE html>"
	html
	head
	meta :charset "utf-8"
	meta :name "viewport" :content "width=device-width, initial-scale=1"
	title "Kinko Sandbox"
	link :rel "stylesheet"
	:href "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
	link :rel "stylesheet"
	:href "style.css"
	script
	:src "//code.jquery.com/jquery-1.11.3.min.js"
	script
	:src "//code.jquery.com/jquery-migrate-1.2.1.min.js"
	body
	#body
	script
	:src "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"


	def b-product-row
	div :class "col-md-3"
	a :href "#" :class "thumbnail"
	img :src #product.main-image-url

	div :class "col-md-9"
	h5
	a :href "#" #product.name
	p
	"От компании "
	a :href "#" #product.company.name
	" "
	span :class "glyphicon glyphicon-ok-sign"
	span :class "glyphicon glyphicon-star-empty"
	span :class "glyphicon glyphicon-star-empty"
	span :class "glyphicon glyphicon-star-empty"
	", "
	#product.company.opinions-count
	" отзывов"
	", "
	#product.company.positive-opinions-percent
	"% положительных"

	h4
	#product.catalog-price
	p (span :style "color: green" "В наличии") ", " (strong "бесплатная доставка")


	def b-products-list
	./b-layout
	:body
	nav :class "navbar navbar-default navbar-static-top"
	div :class "container"
	div :class "navbar-header"
	a :class "navbar-brand" :href "/" "Prom.ua"
	form :class "navbar-form navbar-left" :role "search"
	div :class "input-group"
	input :type "text" :class "form-control" :placeholder "Поиск"
	span :class "input-group-btn"
	button :type "button" :class "btn btn-default"
	span :class "glyphicon glyphicon-search"
	ul :class "nav navbar-nav navbar-right"
	li :class "dropdown"
	a :href "#" :class "dropdown-toggle" :data-toggle "dropdown" "Кабинет"
	span :class "caret"
	ul :class "dropdown-menu"
	li
	a :href "#" "Войти"
	a :href "#" "Зарегистрироваться"
	li
	a :href "/cart" "Корзина " (span :class "badge" 0)
	li
	a :href "/favorites" "Избранное " (span :class "badge" 0)
	div :class "container"
	div :class "row"
	div :class "col-md-3" "Filters"
	div :class "col-md-9"
	div :class "row"
	div :class "col-md-6 pull-left"
	"Найден 1 результат"
	div :class "col-md-6 pull-right text-right"
	"Сортировать "
	select
	option "по релевантности"
	option "по популярности"
	option "от дешевых до дорогих"
	option "от дорогих к дешевым"
	option "по отзывам о компании"
	option "по отзывам о товаре"
	" "
	div :class "btn-group"
	button :type "button" :class "btn btn-default active"
	span :class "glyphicon glyphicon-th-list"
	button :type "button" :class "btn btn-default"
	span :class "glyphicon glyphicon-th"
	each product products
	div :class "row" (./b-product-row :product product)