Adicionar ESLint e Stylelint

.editorconfig

@@ -0,0 +1,23 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.js]
+indent_style = space
+indent_size = 2
+
+[*.scss]
+indent_style = space
+indent_size = 2
+
+[Makefile]
+indent_style = tab
+
+[package.json]
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1 @@
+dist/

.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  'extends': 'airbnb-base',
+  'globals': {
+    'window': true,
+  },
+};

.githooks/pre-push

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+ESLINT="$(git rev-parse --show-toplevel)/node_modules/.bin/eslint"
+STYLELINT="$(git rev-parse --show-toplevel)/node_modules/.bin/stylelint"
+
+# Check if dependencies are installed
+if [[ ! -x "$ESLINT" ]] || [[ ! -x "$STYLELINT" ]]; then
+  printf "\033[41mPlease install dependencies\033[0m (npm install)\n"
+  exit 1
+fi
+
+npm run lint
+
+exit $?

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

README.md

@@ -27,19 +27,27 @@ Os arquivos devem ser organizados na pasta SRC ou na pasta padrão de conteúdo
 
 ## Instruções de como utilizar o projeto
 
-1 - Para baixar as dependências de frontend.:
+1 - Configurar caminho dos Git Hooks:
+
+Importante para que antes do push seu código passe por uma validação em nossos linters.
+
+```sh
+git config core.hooksPath .githooks
+```
+
+2 - Para baixar as dependências de frontend.:
 
 ```sh
 npm install
 ```
 
-2 - Para rodar o projeto em [http://localhost:8080](http://localhost:8080):
+3 - Para rodar o projeto em [http://localhost:8080](http://localhost:8080):
 
 ```sh
 npm start
 ```
 
-3 - Para rodar o projecto em um container [http://localhost:8080]
+4 - Para rodar o projecto em um container [http://localhost:8080]
 ```sh
 docker run --rm -dt -p 8080:80 --name afropython afropython/afropython-site:1.0.0
 ```
@@ -76,4 +84,4 @@ Leia a versão integral do nosso [Código de conduta](https://github.com/AfroPyt
 
 ---------------------------------------
 
-Abraços de toda equipe do AfroPython :yellow_heart:
+Abraços de toda equipe do AfroPython :yellow_heart:

gulpfile.js

@@ -1,7 +1,7 @@
-var gulp            = require('gulp');
-var ghpages         = require('gh-pages');
-var path            = require('path');
+const gulp = require('gulp');
+const ghpages = require('gh-pages');
+const path = require('path');
 
-gulp.task('deploy', function (cb) {
-  ghpages.publish(path.join(process.cwd(), 'dist'), {message: 'Publicado em: ' + new Date()}, cb);
+gulp.task('deploy', (cb) => {
+  ghpages.publish(path.join(process.cwd(), 'dist'), { message: `Publicado em: ${new Date()}` }, cb);
 });

package.json

@@ -9,14 +9,18 @@
   "scripts": {
     "start": "webpack-dev-server --open --mode development",
     "build": "webpack --mode production",
-    "deploy": "npm run build && gulp deploy"
+    "deploy": "npm run build && gulp deploy",
+    "lint": "eslint '**/*.js' && stylelint '**/*.scss'"
   },
   "license": "UNLICENSED",
   "dependencies": {},
   "devDependencies": {
     "autoprefixer": "^9.3.1",
     "cname-webpack-plugin": "^1.0.3",
     "css-loader": "^1.0.0",
+    "eslint": "^5.8.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-plugin-import": "^2.14.0",
     "expose-loader": "^0.7.5",
     "file-loader": "^2.0.0",
     "gh-pages": "^2.0.1",
@@ -32,6 +36,8 @@
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
+    "stylelint": "^9.7.1",
+    "stylelint-config-standard": "^18.2.0",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.16.5",

src/_scss/1.config/_variables.scss

@@ -2,36 +2,34 @@
 $brand-primary: #913a0d;
 $brand-secondary: #da691a;
 
-
 $gray-light: #f6f3f3;
-$gray-medium: #dddddd;
+$gray-medium: #ddd;
 $gray-dark: #5e5e5e;
 
-$black:                     #000;
-$white:                     #fff;
+$black: #000;
+$white: #fff;
 
 // Objects
-$text-color:                $gray-dark;
-$link-color:                $brand-primary;
-$link-hover-color:          $brand-secondary;
+$text-color: $gray-dark;
+$link-color: $brand-primary;
+$link-hover-color: $brand-secondary;
 
-$selection-bg-color:        $link-color;
+$selection-bg-color: $link-color;
 $selection-text-color:      $text-color;
 
-$border-radius:             10px;
+$border-radius: 10px;
 
 // Typography
-$font-family-base:          'Roboto', sans-serif;
-
-$font-weight-light:       300;
-$font-weight-default:     400;
-$font-weight-bold:        700;
+$font-family-base: 'Roboto', sans-serif;
 
+$font-weight-light: 300;
+$font-weight-default: 400;
+$font-weight-bold: 700;
 
 // Screen Sizes
 $screen-xs-max: 767px;
-$screen-sm:     768px;
+$screen-sm: 768px;
 $screen-sm-max: 940px;
-$screen-md:     941px;
+$screen-md: 941px;
 $screen-md-max: 1199px;
-$screen-lg:     1200px;
+$screen-lg: 1200px;

src/_scss/2.base/_links.scss

@@ -1,7 +1,7 @@
 a {
   color: $link-color;
   text-decoration: none;
-  transition: all .2s ease-out;
+  transition: all 0.2s ease-out;
 
   &:hover,
   &:focus {
@@ -13,6 +13,7 @@ a {
   }
 
   &:visited {
+    /* stylelint-disable-line */
     // Filling this one is good UX.
   }
 }

src/_scss/2.base/_scaffold.scss

@@ -5,10 +5,10 @@ html {
   box-sizing: border-box;
 }
 
-body{
-    margin: 0;
-    height: 100%;
-    background-color: $gray-light;
+body {
+  margin: 0;
+  height: 100%;
+  background-color: $gray-light;
 }
 
 *,
@@ -31,6 +31,6 @@ p {
   font-size: 1rem;
 }
 
-figure{
+figure {
   margin: 0;
 }

src/_scss/3.objects/_button.scss

@@ -4,15 +4,15 @@
   text-align: center;
   cursor: pointer;
   margin: 20px 0 25px 0;
-  transition: all .2s ease-out;
+  transition: all 0.2s ease-out;
   border-radius: $border-radius;
   padding: 1em;
   color: $white;
   background-color: $brand-primary;
   font-size: 15px;
   text-transform: uppercase;
 
-  &.center-block{
+  &.center-block {
     margin: auto;
     display: block;
   }
@@ -24,5 +24,4 @@
     text-decoration: none;
     background-color: $brand-secondary;
   }
-
 }

src/_scss/3.objects/_content-block.scss

@@ -6,6 +6,4 @@
     padding-left: 5%;
     padding-right: 5%;
   }
-
-
 }

src/_scss/3.objects/_grid.scss

@@ -1,75 +1,76 @@
 @media (min-width: 48em) {
-	.o-row {
-		width: 100%;
-		display: table;
-		table-layout: fixed;
-	}
+  .o-row {
+    width: 100%;
+    display: table;
+    table-layout: fixed;
+  }
 
-	.o-col {
-		display: table-cell;
-		vertical-align: top;
+  .o-col {
+    display: table-cell;
+    vertical-align: top;
 
-		@media(max-width: $screen-sm){
-			width: 100%;
-			display: initial;
-		}
+    @media (max-width: $screen-sm) {
+      width: 100%;
+      display: initial;
+    }
 
-		&--middle {
-			vertical-align: middle;
-		}
+    &--middle {
+      vertical-align: middle;
+    }
 
-		&--bottom {
-			vertical-align: bottom;
-		}
+    &--bottom {
+      vertical-align: bottom;
+    }
 
-		&--45{
-			width: 45%;
-			float: left;
-		}
+    &--45 {
+      width: 45%;
+      float: left;
+    }
 
-		&-6{
-			width: calc(100% / 2);
-			float: left;
-			padding: 0 1%;
+    &-6 {
+      width: calc(100% / 2);
+      float: left;
+      padding: 0 1%;
 
-			@media(max-width: $screen-sm){
-				width: 100%;
-			}
-		}
+      @media (max-width: $screen-sm) {
+        width: 100%;
+      }
+    }
 
-		&-4{
-			width: calc(100% / 3);
-			float: left;
-			padding: 0 1%;
+    &-4 {
+      width: calc(100% / 3);
+      float: left;
+      padding: 0 1%;
 
-			@media(max-width: $screen-sm){
-				width: 100%;
-			}
-		}
+      @media (max-width: $screen-sm) {
+        width: 100%;
+      }
+    }
 
-		&-3{
-			width: calc(100% / 4);
-			float: left;
-			padding: 0 1%;
+    &-3 {
+      width: calc(100% / 4);
+      float: left;
+      padding: 0 1%;
 
-			@media(max-width: $screen-sm){
-				width: 50%;
-			}
-		}
+      @media (max-width: $screen-sm) {
+        width: 50%;
+      }
+    }
 
-		&--add-padding-right{
-			padding-right: 30px;
-		}
+    &--add-padding-right {
+      padding-right: 30px;
+    }
 
-		&--small{
-			width: 4%;
-		}
+    &--small {
+      width: 4%;
+    }
 
-		&--display-table{
-			display: table;
-		}
-	}
-	.o-row-inline-block{
-		display: inline-block;
-	}
+    &--display-table {
+      display: table;
+    }
+  }
+
+  .o-row-inline-block {
+    display: inline-block;
+  }
 }