structure de templates refacored Qualy-org#8

README.md

@@ -44,9 +44,12 @@ With the commands above, you have everything to start.
 │   ├── index.html
 │   └── js
 │       └── main.js
-├── gulpfile.babel.js
+├── gulpfile.js
 ├── package.json
 └── src
+    ├── data
+    │   └── config.yml
+    │   └── tech.yml
     ├── img
     │   └── qualy.png
     │   └── favicon.png

gulpfile.js

@@ -13,20 +13,24 @@ const prefixer = require('autoprefixer-stylus');
 const rollup = require('gulp-rollup');
 const uglify = require('gulp-uglify');
 const pug = require('gulp-pug');
+const data = require('gulp-data');
+const yaml = require('js-yaml');
 const imagemin = require('gulp-imagemin');
 const browserSync = require('browser-sync');
 const ghPages = require('gulp-gh-pages');
 const sitespeedio = require('gulp-sitespeedio');
 const plato = require('gulp-plato');
 const rollupConfig = require('./rollup.config');
 const eslintConfig = require('./.eslintrc');
+const fs = require('fs');
 
 const srcPaths = {
     js: 'src/js/main.js',
     css: 'src/styl/**/*.styl',
     mainStyl: 'src/styl/main.styl',
     pug: 'src/templates/**/!(_)*.pug',
-    img: 'src/img/**/*'
+    img: 'src/img/**/*',
+    data: 'src/data/'
 };
 
 const buildPaths = {
@@ -41,6 +45,20 @@ const buildPaths = {
     }
 };
 
+let dataJson = {}
+let files = []
+
+gulp.task('read:data', () => {
+    fs.readdir(srcPaths.data, (err, items) => {
+        for (var i = 0; i < items.length; i++) {
+            files.push(items[i].split('.')[0]);
+        }
+        for (var i = 0; i < files.length; i++) {
+            dataJson[files[i]] = yaml.safeLoad(fs.readFileSync(srcPaths.data + '/' + files[i] + '.yml', 'utf-8'));
+        }
+    });
+});
+
 gulp.task('css', () => {
     gulp.src(srcPaths.mainStyl)
         .pipe(plumber())
@@ -66,7 +84,10 @@ gulp.task('js', () => {
 gulp.task('pug', () => {
     gulp.src(srcPaths.pug)
         .pipe(plumber())
-        .pipe(pug())
+        .pipe(data(dataJson))
+        .pipe(pug({
+            pretty: true
+        }))
         .pipe(gulp.dest(buildPaths.pug));
 });
 
@@ -82,7 +103,8 @@ gulp.task('images', () => {
 });
 
 gulp.task('watch', () => {
-    gulp.watch(srcPaths.pug, ['pug']);
+    gulp.watch(srcPaths.pug, { debounceDelay: 300 }, ['pug']);
+    gulp.watch(srcPaths.data + '**/*', { debounceDelay: 300 }, ['read:data', 'pug']);
     gulp.watch(srcPaths.css, ['css']);
     gulp.watch(srcPaths.js, ['js']);
     gulp.watch(srcPaths.img, ['images']);
@@ -124,6 +146,6 @@ gulp.task('test:complexity', () => gulp.src(srcPaths.js)
         }
 })));
 
-gulp.task('default', ['css', 'pug', 'js', 'images', 'watch', 'browser-sync']);
+gulp.task('default', ['css', 'pug', 'read:data', 'js', 'images', 'watch', 'browser-sync']);
 gulp.task('test', ['browser-sync', 'test:perf', 'test:complexity']);
-gulp.task('deploy', ['css', 'pug', 'js', 'images', 'pages']);
+gulp.task('deploy', ['css', 'pug', 'read:data', 'js', 'images', 'pages']);

package.json

@@ -32,6 +32,7 @@
     "gulp": "^3.9.1",
     "gulp-concat": "^2.6.0",
     "gulp-cssnano": "^2.1.1",
+    "gulp-data": "^1.2.1",
     "gulp-gh-pages": "^0.5.4",
     "gulp-group-css-media-queries": "^1.1.0",
     "gulp-imagemin": "^2.4.0",
@@ -49,6 +50,7 @@
     "rollup-plugin-babel": "^2.4.0",
     "rollup-plugin-commonjs": "^2.2.1",
     "rollup-plugin-node-resolve": "^1.5.0",
-    "rupture": "^0.6.1"
+    "rupture": "^0.6.1",
+    "yaml-js": "^0.1.4"
   }
 }

src/data/config.yml

@@ -0,0 +1,4 @@
+title: "Qualy Boilerplate"
+description: "A simple boilerplate with ES6, Gulp, Pug, Stylus and Browsersync."
+analytics:
+  ga: "UA-000000-0"

src/data/tech.yml

@@ -0,0 +1,28 @@
+-
+  name: ES6
+  href: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Suporte_ao_ECMAScript_6_na_Mozilla
+  external: true
+-
+  name: Gulp
+  href: https://github.com/pugjs/pug
+  external: true
+-
+  name: Stylus
+  href: http://stylus-lang.com/
+  external: true
+-
+  name: Pug
+  href: https://github.com/pugjs/pug
+  external: true
+-
+  name: Browsersync
+  href: https://www.browsersync.io/
+  external: true
+-
+  name: Husky Hooks
+  href: https://github.com/typicode/husky
+  external: true
+-
+  name: JSCS
+  href: http://jscs.info/
+  external: true

src/styl/main.styl

@@ -9,6 +9,7 @@
 @import "kouto-swiss"
 @import "jeet"
 normalize()
+// edit()
 
 main-color = red
 

src/templates/index.pug

@@ -1,26 +1,9 @@
-doctype html
-html
-    head
-        title Qualy Boilerplate
-        meta(charset='UTF-8')
-        meta(http-equiv='X-UA-Compatible', content='IE=edge')
-        meta(name='description' content="meta desc")
-        meta(name='viewport' content='width=device-width, initial-scale=1.0')
-        link(rel="icon", type="image/png", href="img/favicon.png")
-        link(rel="stylesheet", type="text/css", href="css/main.css")
-
-    body
-        .container
-            //- put your content here
-            h1 Qualy Boilerplate
-            img(src="img/qualy.png", alt="Qualy Boilerplate")
-
-            - var tech = ['ES6', 'Gulp', 'Stylus', 'Pug', 'Browsersync', 'Husky Hooks', 'JSCS']
-
-            h2 Technologies:
-
-            ul
-                each val in tech
-                    li= val
-
-        script(type="text/javascript", src="js/main.js")
+extends layouts/_default
+
+block content
+    .container
+        h2 Technologies:
+        ul
+            each val in tech
+                li
+                    a(href=val.href, target=val.external ? '_blank' : '')= val.name

src/templates/layouts/_default.pug

@@ -0,0 +1,9 @@
+doctype html
+html
+    include inc/_head
+    body
+        include inc/_header
+        main(class="main", id="main", role="main")
+            block content
+        include inc/_footer
+        include inc/_scripts

src/templates/layouts/inc/_footer.pug

@@ -0,0 +1,3 @@
+footer(class="footer", role="contentinfo")
+    .container
+        p © 2016 #{config.title}.

src/templates/layouts/inc/_head.pug

@@ -0,0 +1,38 @@
+head
+    title #{config.title} - #{config.description}
+    meta(charset='UTF-8')
+    meta(http-equiv='X-UA-Compatible', content='IE=edge')
+    meta(name='description' content="meta desc")
+    meta(name='viewport' content='width=device-width, initial-scale=1.0')
+    link(rel="icon", type="image/png", href="img/favicon.png")
+
+    //- ==================================================
+    //- Essential Meta Tags for Social Media
+    //- ==================================================
+    meta(property='og:title' content='')
+    meta(property='og:description' content='')
+    meta(property='og:image' content='')
+    meta(property='og:url' content='')
+    meta(name='twitter:card' content='photo')
+    meta(name='twitter:site' content='')
+    meta(name='twitter:title' content='')
+    meta(name='twitter:image' content='')
+    meta(name='twitter:url' content='')
+
+    //- ==================================================
+    //- Stylesheets
+    //- ==================================================
+    link(rel="stylesheet", type="text/css", href="css/main.css")
+
+    //- ==================================================
+    //- GA
+    //- ==================================================
+    if ((config) && (config.analytics) && (config.analytics.ga))
+      script.
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        ga('create', '#{config.analytics.ga}', 'auto');
+        ga('send', 'pageview');
+

src/templates/layouts/inc/_header.pug

@@ -0,0 +1,4 @@
+header(class="header", role="banner")
+    .container
+        img(src="img/qualy.png", alt="Qualy Boilerplate")
+        p #{config.description}

src/templates/layouts/inc/_scripts.pug

@@ -0,0 +1 @@
+script(type="text/javascript", src="js/main.js")