$ 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
Last active
September 3, 2015 18:35
-
-
Save vmagamedov/256bcfd64e47b27507d7 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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']); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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 | |
| } | |
| } | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .thumbnail {margin-bottom: 10px} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment