init YAML template

Gruntfile.js

-module.exports = function(grunt) {
-
-    require('load-grunt-tasks')(grunt);
-    require('time-grunt')(grunt);
-
-    grunt.initConfig({
-        pkg: grunt.file.readJSON('package.json'),
-
-        htmlhint: {
-            options: {
-                'attr-lower-case': true,
-                'attr-value-not-empty': false,
-                'tag-pair': true,
-                'tag-self-close': false,
-                'tagname-lowercase': true,
-                'id-class-value': true,
-                'id-unique': true,
-                'img-alt-require': true,
-                'img-alt-not-empty': true
-            },
-            main: {
-                src: ['public/**.html']
-            }
-        },
-
-        jshint: {
-            main: {
-                files: [{
-                    src: ['Gruntfile.js', 'js/**/*.js']
-                }]
-            },
-            options: {
-                globals: {
-                    'jQuery': true,
-                    'console': true
-                }
-            }
-        },
-
-        pug: {
-            options: {
-                pretty: true,
-                data: {
-                    debug: true
-                }
-            },
-            pages: {
-                files: [{
-                    expand: true,
-                    cwd: 'pug/pages',
-                    src: '*.pug',
-                    dest: 'public/',
-                    ext: '.html'
-                }]
-            }
-        },
-
-        copy: {
-            iejs: {
-                expand: true,
-                files: [{
-                        expand: true,
-                        cwd: 'node_modules/html5shiv/dist',
-                        src: "**",
-                        dest: 'public/js'
-                    },
-                    {
-                        expand: true,
-                        cwd: 'node_modules/Respond.js/src',
-                        src: "**",
-                        dest: 'public/js'
-                    }
-                ]
-            },
-            lfltcss: {
-                expand: true,
-                files: [{
-                    expand: true,
-                    cwd: 'node_modules/leaflet/dist/images',
-                    src: "**",
-                    dest: 'public/img'
-                }]
-            },
-            fonts: {
-                expand: true,
-                files: [{
-                    expand: true,
-                    cwd: 'fonts',
-                    src: "**",
-                    dest: 'public/fonts'
-                }]
-            },
-            imgrsrc: {
-                expand: true,
-                files: [{
-                    expand: true,
-                    cwd: 'img',
-                    src: "**",
-                    dest: 'public/img'
-                }]
-            }
-        },
-
-        uglify: {
-            compress: {
-                files: {
-                    'public/js/index.js': [
-                        //'node_modules/jquery/dist/jquery.min.js',
-                        //'node_modules/bootstrap/dist/js/bootstrap.min.js',
-                        'node_modules/leaflet/dist/leaflet.js',
-                        'js/*.js'
-                    ]
-                },
-                options: {
-                    mangle: true,
-                    unused: true
-                }
-            }
-        },
-
-        cssmin: {
-            options: {
-                sourceMap: true
-            },
-            compress: {
-                files: {
-                    'public/css/index.css': [
-                        'node_modules/bootstrap/dist/css/bootstrap.min.css',
-                        //'node_modules/font-awesome/css/font-awesome.min.css',
-                        //'node_modules/normalize.css/normalize.css',
-                        'node_modules/leaflet/dist/leaflet.css',
-                        'css/*.css'
-                    ]
-                }
-            }
-        },
-
-        watch: {
-            grunt: {
-                files: ['Gruntfile.js'],
-                options: {
-                    nospawn: true,
-                    keepalive: true,
-                    livereload: true
-                },
-                tasks: ['public:dev']
-            },
-            html: {
-                files: ['public/*.html'],
-                options: {
-                    nospawn: true,
-                    keepalive: true,
-                    livereload: true
-                },
-                tasks: ['htmlhint']
-            },
-            js: {
-                files: 'js/**',
-                options: {
-                    nospawn: true,
-                    livereload: true
-                },
-                tasks: ['jshint', 'uglify']
-            },
-            pug: {
-                files: ['pug/**'],
-                options: {
-                    nospawn: true,
-                    livereload: true
-                },
-                tasks: ['pug']
-            },
-           css: {
-               files: 'css/**',
-               options: {
-                   nospawn: true,
-                   livereload: true
-               },
-               tasks: ['cssmin']
-           }
-        },
-
-        connect: {
-            server: {
-                options: {
-                    port: 8080,
-                    base: 'public',
-                    hostname: 'localhost',
-                    livereload: true
-                }
-            }
-        }
-
-    });
-
-    grunt.registerTask('public:dev', function(target) {
-        grunt.task.run([
-            'pug',
-            'htmlhint',
-            'jshint',
-            'copy',
-            'uglify',
-            'cssmin'
-        ]);
-    });
-
-    grunt.registerTask('serve', function(target) {
-        grunt.task.run([
-            'public:dev',
-            'connect',
-            'watch'
-        ]);
-    });
-
-};

css/main.css

@@ -8,12 +8,6 @@
   src: url(../fonts/Roboto-Thin.ttf);
 }
 
-#wrapper {
-  max-width: 968px;
-  margin: auto;
-  color: #454545;
-}
-
 #main {
   text-align: center;
   margin: 8px;
@@ -32,3 +26,9 @@
 #main p {
   text-align: justify;
 }
+
+#wrapper {
+  max-width: 968px;
+  margin: auto;
+  color: #454545;
+}

events/TheRealEvents/0.yaml

+id: "0"
+name: "dummy1"
+lat: "dummy"
+lng: "dummy"
+locationame: "dummy"
+organizedby: "dummy"
+when: "2017-06-11 12:30:33"
+description: "Lorem ipsum dolor sit amet consectetur adipiscing elit, sociosqu proin a senectus risus mauris dignissim, gravida aliquam hac ut porttitor fermentum. Justo conubia odio netus etiam tempus sapien curae ullamcorper, inceptos fames cursus ridiculus orci sociosqu platea, aptent gravida natoque at tempor per pulvinar. Orci duis habitant nisi lacus congue, platea ullamcorper euismod sociosqu mauris, porttitor interdum blandit aenean."
+contactinfo: "dummy"
+imgurl: "https://placehold.it/150x150"

events/TheRealEvents/1.yaml

+id: "1"
+name: "dummy2"
+lat: "dummy"
+lng: "dummy"
+locationame: "dummy"
+organizedby: "dummy"
+when: "2017-06-11 12:30:33"
+description: "Lorem ipsum dolor sit amet consectetur adipiscing elit, sociosqu proin a senectus risus mauris dignissim, gravida aliquam hac ut porttitor fermentum. Justo conubia odio netus etiam tempus sapien curae ullamcorper, inceptos fames cursus ridiculus orci sociosqu platea, aptent gravida natoque at tempor per pulvinar. Orci duis habitant nisi lacus congue, platea ullamcorper euismod sociosqu mauris, porttitor interdum blandit aenean."
+contactinfo: "dummy"
+imgurl: "https://placehold.it/150x150"

events/TheRealEvents/2.yaml

+id: "2"
+name: "dummy3"
+lat: "dummy"
+lng: "dummy"
+locationame: "dummy"
+organizedby: "dummy"
+when: "2017-06-11 12:30:33"
+description: "Lorem ipsum dolor sit amet consectetur adipiscing elit, sociosqu proin a senectus risus mauris dignissim, gravida aliquam hac ut porttitor fermentum. Justo conubia odio netus etiam tempus sapien curae ullamcorper, inceptos fames cursus ridiculus orci sociosqu platea, aptent gravida natoque at tempor per pulvinar. Orci duis habitant nisi lacus congue, platea ullamcorper euismod sociosqu mauris, porttitor interdum blandit aenean."
+contactinfo: "dummy"
+imgurl: "https://placehold.it/150x150"

events/index.yaml

+version: "1.0"
+## i do not know how to avoid this!
+totalevents: 3
+events: !!inc/dir [ 'TheRealEvents' , { ignoreTopLevelDir: true, ignoreIndicator: '-', excludeTopLevelDirSeparator: true } ]

gulpfile.js

+var gulp = require('gulp');
+var htmlhint = require('gulp-htmlhint');
+var jshint = require('gulp-jshint');
+var csslint = require('gulp-csslint');
+var pug = require('gulp-pug');
+var concat = require('gulp-concat');
+var cssmin = require('gulp-cssmin');
+var uglify = require('gulp-uglify');
+
+var connect = require('gulp-connect');
+var connectProxy = require('gulp-connect-proxy');
+
+var yamlinc = require("gulp-yaml-include");
+var readYaml = require('read-yaml');
+var glob = require("glob");
+
+gulp.task('assetscopy', function() {
+  gulp.src([
+    'node_modules/bootstrap/fonts/*.{ttf,woff,eot,svg, woff2}',
+    'node_modules/font-awesome/fonts/*.{ttf,woff,eot,svg,woff2,otf}',
+    'fonts/*.{ttf,woff,woff2}',
+    'node_modules/bootcards/dist/fonts/*.{ttf,woff,eot,svg,woff2,otf}'
+  ]).pipe(gulp.dest('public/fonts'));
+  gulp.src([
+    'node_modules/leaflet/dist/images/**',
+    'img/**'
+  ]).pipe(gulp.dest('public/img'));
+});
+
+gulp.task('htmllint', function() {
+  gulp.src("public/*.html")
+    .pipe(htmlhint());
+});
+
+gulp.task('csslint', function() {
+  gulp.src('css/*.css')
+    .pipe(csslint({
+      'shorthand': false
+    }))
+    .pipe(csslint.formatter());
+});
+
+gulp.task('jslint', function() {
+  gulp.src(["gulpfile.js", "js/*.js"])
+    .pipe(jshint())
+    .pipe(jshint.reporter('default'));
+});
+
+gulp.task('pughtml', function() {
+  gulp.src('pug/pages/*.pug')
+    .pipe(pug({
+      pretty: true,
+      data: {
+        debug: true
+      }
+    }))
+    .pipe(gulp.dest('public'));
+  var yamlData = gulp.src("events/index.yaml")
+        .pipe(yamlinc())
+        .pipe(gulp.dest('public/events'));
+
+  readYaml('public/events/index.yaml', function(err, ydata) {
+    // if (err) throw err;
+    gulp.src('pug/templates/events.pug')
+      .pipe(pug({
+        pretty: true,
+        data: {
+          debug: true,
+          events: ydata
+        }
+      }))
+      .pipe(concat('index' + '.html'))
+      .pipe(gulp.dest('public/events'));
+  });
+  // options is optional
+  glob("events/TheRealEvents/*.yaml", {}, function (er, files) {
+    // files is an array of filenames.
+    // If the `nonull` option is set, and nothing
+    // was found, then files is ["**/*.js"]
+    // er is an error object or null.
+    var nooffiles = files.length;
+    for(var i = 0; i < nooffiles; i++){
+      readYaml(files[i], function(err, ydata) {
+        if (err) throw err;
+        var id = ydata.id;
+        gulp.src('pug/templates/individual_event_page.pug')
+          .pipe(pug({
+            pretty: true,
+            data: {
+              debug: true,
+              evt: ydata
+            }
+          }))
+          .pipe(concat(id + '.html'))
+          .pipe(gulp.dest('public/events'));
+      });
+
+    }
+  });
+});
+
+gulp.task('cssmin', function() {
+  gulp.src([
+    'node_modules/bootstrap/dist/css/bootstrap.min.css',
+    //'node_modules/font-awesome/css/font-awesome.min.css',
+    //'node_modules/normalize.css/normalize.css',
+    'node_modules/leaflet/dist/leaflet.css',
+    'node_modules/bootcards/dist/css/bootcards-desktop.min.css',
+    // 'node_modules/bootcards/dist/css/bootcards-android.min.css',
+    // 'node_modules/bootcards/dist/css/bootcards-ios.min.css',
+    'css/*.css'
+  ])
+    .pipe(concat('index.css'))
+    .pipe(cssmin())
+    .pipe(gulp.dest('public/css'));
+});
+
+gulp.task('jsuglify', function() {
+  gulp.src([
+    'node_modules/jquery/dist/jquery.min.js',
+    'node_modules/bootstrap/dist/js/bootstrap.min.js',
+    'node_modules/leaflet/dist/leaflet.js',
+    'node_modules/bootcards/dist/js/bootcards.min.js',
+    'js/*.js'
+  ])
+    .pipe(concat('index.js'))
+    .pipe(uglify())
+    .pipe(gulp.dest('public/js'));
+  gulp.src([
+      'node_modules/html5shiv/dist/html5shiv.js',
+      'node_modules/Respond.js/src/respond.js'
+    ])
+    .pipe(uglify())
+    .pipe(gulp.dest('public/js'));
+});
+
+gulp.task('public', [
+  'assetscopy',
+  'pughtml',
+  'htmllint',
+  'jslint',
+  'jsuglify',
+  // 'csslint',
+  'cssmin'
+]);
+
+gulp.task('connect', function() {
+  connect.server({
+    root: 'public',
+    port: 8080,
+    livereload: true
+  });
+});
+
+gulp.task('watch', function() {
+  gulp.watch([
+    './pug/**/*.pug'
+  ], [
+    'pughtml',
+    'htmllint',
+  ]);
+  gulp.watch([
+    'css/*.css',
+    'bower.json'
+  ], [
+    // 'csslint',
+    'cssmin'
+  ]);
+  gulp.watch([
+    'js/*.js',
+    'bower.json'
+  ], [
+    'jslint',
+    'jsuglify',
+  ]);
+});
+
+gulp.task('serve', [
+  'public',
+  'connect',
+  'watch'
+]);
+
+gulp.task('default', [
+  'serve'
+]);

package.json

@@ -3,41 +3,38 @@
   "description": "Free Software User Groups in India",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@gitlab.com:fsug/fsug.gitlab.io.git"
+    "url": "git+ssh://git@gitlab.com:fsci/fsci.org.in.git"
   },
   "bugs": {
-    "url": "https://gitlab.com/fsug/fsug.gitlab.io/issues"
+    "url": "https://gitlab.com/fsci/fsci.org.in/issues"
   },
   "homepage": "https://fsug.in",
   "devDependencies": {
     "connect-livereload": "^0.5.4",
-    "grunt": "^1.0.1",
-    "grunt-cli": "^1.2.0",
-    "grunt-connect-proxy": "^0.2.0",
-    "grunt-contrib-concat": "^1.0.1",
-    "grunt-contrib-connect": "^1.0.2",
-    "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-cssmin": "^1.0.1",
-    "grunt-contrib-jshint": "^1.1.0",
-    "grunt-contrib-nodeunit": "^0.4.1",
-    "grunt-contrib-pug": "^1.0.0",
-    "grunt-contrib-uglify": "^0.5.0",
-    "grunt-contrib-watch": "^1.0.0",
-    "grunt-htmlhint": "^0.9.13",
-    "grunt-preprocess": "^5.1.0",
-    "jshint-stylish": "^2.2.1",
-    "jstransformer-markdown-it": "^2.0.0",
-    "load-grunt-tasks": "^3.5.0",
-    "time-grunt": "^1.3.0"
+    "glob": "^7.1.2",
+    "gulp": "^3.9.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-connect": "^5.0.0",
+    "gulp-connect-proxy": "^0.3.1",
+    "gulp-csslint": "^1.0.0",
+    "gulp-cssmin": "^0.2.0",
+    "gulp-htmlhint": "^0.3.1",
+    "gulp-jshint": "^2.0.4",
+    "gulp-pug": "^3.3.0",
+    "gulp-uglify": "^3.0.0",
+    "gulp-yaml-data": "^0.2.0",
+    "gulp-yaml-include": "^0.2.0",
+    "read-yaml": "^1.1.0"
   },
   "dependencies": {
-    "html5shiv": "^3.7.0",
     "Respond.js": "git+https://github.com/scottjehl/Respond.git#1.4.0",
-    "jquery": "2.2.4",
+    "bootcards": "^1.1.2",
     "bootstrap": "^3.3.7",
-    "normalize.css": "^7.0.0",
     "font-awesome": "^4.7.0",
-    "leaflet": "^1.0.3"
+    "html5shiv": "^3.7.0",
+    "jquery": "2.2.4",
+    "leaflet": "^1.0.3",
+    "normalize.css": "^7.0.0"
   },
   "author": "FSCI - Free Software Community of India <fosscommunity.in@disroot.org>",
   "license": "GPL-3.0"

pug/pages/index.pug

 extends ../layout.pug
 
 block head
-  title= $vars.title 
+  title= "FSCI (Free Software Community of India)"
 
 block content
   #wrapper.container

pug/settings/variables.pug

 -
   var $vars = {}; //funky name to hold all global variables in templates.
 
-  $vars.title = "FSCI (Free Software Community of India)";
-
   $vars.preamblelist = [
     "Free Software Community of India is a collective of Free Software (sometimes also called as Open Source Software) users, advocates and developers.",
     "We maintain communication and collaboration infrastructure for everyone that respects their freedom and privacy. We maintain a list of Free Software communities and offer sub domains of fsug.in or fosscommunity.in. We depend on donations and community manpower to run the infrastructure.",

pug/templates/css.pug

@@ -2,10 +2,10 @@
 // HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries
 // WARNING: Respond.js doesn't work if you view the page via file://
 <!--[if lt IE 9]>
-  +script('js/html5shiv.js')
-  +script('js/respond.js')
+  +script('/js/html5shiv.js')
+  +script('/js/respond.js')
 <![endif]-->
 
 //- Compiled CSS
 //- the files in the css directory are added here on grunt serve
-+link('stylesheet', 'css/index.css')(type='text/css')
++link('stylesheet', '/css/index.css')(type='text/css')

pug/templates/events.pug

+extends ../layout.pug
+
+block head
+  title= "FSCI Events"
+
+block content
+  .container.bootcards-container.push-right
+    // This is where you come in...
+    // I've added some sample data below so you can get a feel for the required markup
+    .row
+      // left list column
+      #list.col-sm-12.bootcards-list(data-title='Contacts')
+        .panel.panel-default
+          .panel-body
+            .search-form
+              .row
+                .col-xs-9
+                  |  
+                  //-.form-group
+                    input.form-control(type='text', placeholder='Search Contacts...')
+                    i.fa.fa-search
+                .col-xs-3
+                  a.btn.btn-primary.btn-block(href='#')
+                    i.fa.fa-plus
+                    span Add
+          // panel body
+          .list-group
+            // list of sample data
+            for event in events.events
+              a.list-group-item(href='/events/' + event.id + '.html')
+                img.img-rounded.pull-left(src=event.imgurl)
+                h4.list-group-item-heading= event.name
+                p.list-group-item-text!= event.locationame 

pug/templates/individual_event_page.pug

+extends ../layout.pug
+
+block head
+  title= "FSCI Events"
+
+block content
+  .container.bootcards-container.push-right
+    .row
+      // left list column
+      //-#list.col-sm-5.bootcards-list(data-title='Contacts')
+        .panel.panel-default
+          .panel-body
+            .search-form
+              .row
+                //-.col-xs-9
+                  .form-group
+                    input.form-control(type='text', placeholder='Search Contacts...')
+                    i.fa.fa-search
+                .col-xs-3
+                  a.btn.btn-primary.btn-block(href='#')
+                    i.fa.fa-plus
+                    span Add
+          // panel body
+          .list-group
+            // list of sample data
+            for event in events.events
+              a.list-group-item(href='/events/' + event.lat + '.' + event.lng + '.html')
+                img.img-rounded.pull-left(src=event.imgurl)
+                h4.list-group-item-heading= event.name
+                p.list-group-item-text!= event.locationame
+      .col-sm-7.bootcards-cards.hidden-xs
+        // contact details
+        #contactCard
+          .panel.panel-default
+            .panel-heading.clearfix
+              h3.panel-title.pull-left Contact Details
+              .btn-group.pull-right.visible-xs
+                a.btn.btn-primary(href='#', data-toggle='modal', data-target='#editModal')
+                  i.fa.fa-pencil
+                  span Edit
+            .list-group
+              .list-group-item
+                label= "NAME" 
+                h4.list-group-item-heading= evt.name
+              .list-group-item
+                label= "LOCATION"
+                a(href="http://www.openstreetmap.org/?mlat=" + evt.lat + "&mlon=" + evt.lng + "&ref=FSCI") 
+                  h4.list-group-item-heading= evt.locationname
+              .list-group-item
+                label= "ORGANIZED BY" 
+                h4.list-group-item-heading= evt.organizedby
+              .list-group-item
+                label= "DATETIME" 
+                h4.list-group-item-heading= evt.when
+              .list-group-item
+                label= "CONTACT INFO" 
+                h4.list-group-item-heading= evt.contactinfo
+
+        .panel.panel-default.bootcards-richtext
+          .panel-heading
+            h3.panel-title Description
+          .panel-body
+            | evt.description
+            p.lead
+              img(src=evt.imgurl, alt=evt.name)

pug/templates/js.pug

 //- Compile JavaScript
-+script('js/index.js')
++script('/js/index.js')