Skip to content

Commit 8d4232c

Browse files
10-seconds10-seconds
authored
Merge pull request #9 from luizbaldi/feature/create-eslint-and-git-hooks
Feature/create eslint and git hooks
2 parents dbc9ae2 + 66f0739 commit 8d4232c

File tree

8 files changed

+9545
-149
lines changed

8 files changed

+9545
-149
lines changed

‎.eslintrc.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
extends: "airbnb",
3+
env: {
4+
browser: true
5+
},
6+
rules: {
7+
'react/jsx-filename-extension': 'off',
8+
'jsx-a11y/anchor-is-valid': 'off' // temporary solution (while we don't have a router)
9+
}
10+
}

‎package.json‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
"build": "webpack --mode production --output ./dist/leaf.js",
1111
"docs-build": "gitbook build docs/ dist/docs",
1212
"predeploy": "npm run build",
13-
"deploy": "gh-pages -d dist"
13+
"deploy": "gh-pages -d dist",
14+
"lint": "eslint src/**/*.js",
15+
"lint:fix": "eslint src/**/*.js --fix"
1416
},
1517
"repository": {
1618
"type": "git",
@@ -34,14 +36,18 @@
3436
"babel-loader": "^8.0.2",
3537
"css-loader": "^1.0.0",
3638
"docpress": "0.7.4",
39+
"eslint": "^5.12.0",
40+
"eslint-config-airbnb": "^17.1.0",
41+
"eslint-plugin-import": "^2.14.0",
42+
"eslint-plugin-jsx-a11y": "^6.1.2",
43+
"eslint-plugin-react": "^7.12.4",
3744
"file-loader": "^3.0.1",
3845
"gh-pages": "^2.0.1",
3946
"html-loader": "^0.5.5",
4047
"html-webpack-plugin": "^3.2.0",
48+
"husky": "^1.3.1",
4149
"json-loader": "^0.5.7",
4250
"mini-css-extract-plugin": "^0.4.2",
43-
"react": "^16.6.0",
44-
"react-dom": "^16.6.0",
4551
"webpack": "^4.17.2",
4652
"webpack-cli": "^3.1.0",
4753
"webpack-dev-server": "^3.1.8"
@@ -51,9 +57,16 @@
5157
"front-matter-loader": "^0.2.0",
5258
"jquery": "^3.3.1",
5359
"markdown-loader": "^4.0.0",
60+
"react": "^16.6.0",
61+
"react-dom": "^16.6.0",
5462
"react-markdown": "^4.0.6",
5563
"reactstrap": "^6.5.0"
5664
},
65+
"husky": {
66+
"hooks": {
67+
"pre-commit": "npm run lint"
68+
}
69+
},
5770
"docpress": {
5871
"github": "10secondsofcode/10secondsofcode"
5972
}

‎src/Components/Herocontent.js‎

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,35 @@
1-
21
import React from 'react';
32

4-
class Herocontent extends React.Component {
5-
render() {
6-
return (
7-
<div className="main thememain-blue">
8-
<div className="container main hero-content-main ">
9-
<div className="col-12">
10-
<h1 className="theme-text">The Modern ReactJS Tutorial</h1>
11-
<p className="theme-text" >How it's done now. From the basics to advanced topics with simple, but detailed explanations.
12-
<a className="button button--big" href="#">Download for Linux</a>
13-
</p>
14-
<div className="theme-text" >
15-
<a className="button button--big" href="#">View on github</a>
16-
<a className="button button--big" href="#">twitter</a>
17-
<a className="button button--big" href="#">fb</a>
18-
</div>
19-
<div className="">
20-
<div className="search-content">
21-
<form className="theme-search form-inline my-2 my-lg-0 theme-text">
22-
<input className=" theme-search-input form-control mr-sm-2" type="search" placeholder="Search"></input>
23-
<button className="theme-search-btn btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
24-
</form>
25-
</div>
26-
</div>
27-
<div className="theme-text banner-text">
28-
<h2>Table of contents</h2>
29-
<p>Main course contains 2 parts which cover reactjs and interview fundamentals.</p>
30-
</div>
31-
</div>
32-
</div>
3+
const Herocontent = () => (
4+
<div className="main thememain-blue">
5+
<div className="container main hero-content-main">
6+
<div className="col-12">
7+
<h1 className="theme-text">The Modern ReactJS Tutorial</h1>
8+
<p className="theme-text">
9+
How it&apos;s done now. From the basics to advanced topics with simple,
10+
but detailed explanations.
11+
<a className="button button--big" href="#">Download for Linux</a>
12+
</p>
13+
<div className="theme-text">
14+
<a className="button button--big" href="#">View on github</a>
15+
<a className="button button--big" href="#">twitter</a>
16+
<a className="button button--big" href="#">fb</a>
17+
</div>
18+
<div className="">
19+
<div className="search-content">
20+
<form className="theme-search form-inline my-2 my-lg-0 theme-text">
21+
<input className=" theme-search-input form-control mr-sm-2" type="search" placeholder="Search" />
22+
<button className="theme-search-btn btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
23+
</form>
24+
</div>
25+
</div>
26+
<div className="theme-text banner-text">
27+
<h2>Table of contents</h2>
28+
<p>Main course contains 2 parts which cover reactjs and interview fundamentals.</p>
3329
</div>
34-
)
35-
}
36-
}
30+
</div>
31+
</div>
32+
</div>
33+
);
3734

3835
export default Herocontent;

‎src/Components/Main.js‎

Lines changed: 69 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,75 @@
11

22
import React from 'react';
33

4-
class Main extends React.Component {
5-
render() {
6-
return (
7-
<div className="main thememain-white">
8-
<div className="container content-main">
9-
<div className="row">
10-
<div className="col-12">
11-
<h3>An introduction : </h3>
12-
</div>
13-
</div>
14-
<div className="row">
15-
<div className="col-sm">
16-
<ul>
17-
<li><a href="#">Introduction Of ReactJs</a></li>
18-
<li><a href="#">Introduction Of ReactJs</a></li>
19-
<li><a href="#">Introduction Of ReactJs</a></li>
20-
<li><a href="#">Introduction Of ReactJs</a></li>
21-
</ul>
22-
</div>
23-
<div className="col-sm">
24-
<ul>
25-
<li><a href="#">Code Editors</a></li>
26-
<li><a href="#">Code Editors</a></li>
27-
<li><a href="#">Code Editors</a></li>
28-
<li><a href="#">Code Editors</a></li>
29-
</ul>
30-
</div>
31-
<div className="col-sm">
32-
<ul>
33-
<li><a href="#">Developer console</a></li>
34-
<li><a href="#">Developer console</a></li>
35-
<li><a href="#">Developer console</a></li>
36-
<li><a href="#">Developer console</a></li>
37-
</ul>
38-
</div>
39-
</div>
40-
41-
<div className="row">
42-
<div className="col-12">
43-
<h3>ReactJs Fundamentals : </h3>
44-
</div>
45-
</div>
46-
<div className="row">
47-
<div className="col-sm">
48-
<ul>
49-
<li><a href="#">Introduction Of ReactJs</a></li>
50-
<li><a href="#">Introduction Of ReactJs</a></li>
51-
<li><a href="#">Introduction Of ReactJs</a></li>
52-
<li><a href="#">Introduction Of ReactJs</a></li>
53-
</ul>
54-
</div>
55-
<div className="col-sm">
56-
<ul>
57-
<li><a href="#">Code Editors</a></li>
58-
<li><a href="#">Code Editors</a></li>
59-
<li><a href="#">Code Editors</a></li>
60-
<li><a href="#">Code Editors</a></li>
61-
</ul>
62-
</div>
63-
<div className="col-sm">
64-
<ul>
65-
<li><a href="#">Developer console</a></li>
66-
<li><a href="#">Developer console</a></li>
67-
<li><a href="#">Developer console</a></li>
68-
<li><a href="#">Developer console</a></li>
69-
</ul>
70-
</div>
71-
</div>
4+
const Main = () => (
5+
<div className="main thememain-white">
6+
<div className="container content-main">
7+
<div className="row">
8+
<div className="col-12">
9+
<h3>An introduction : </h3>
10+
</div>
11+
</div>
12+
<div className="row">
13+
<div className="col-sm">
14+
<ul>
15+
<li><a href="#">Introduction Of ReactJs</a></li>
16+
<li><a href="#">Introduction Of ReactJs</a></li>
17+
<li><a href="#">Introduction Of ReactJs</a></li>
18+
<li><a href="#">Introduction Of ReactJs</a></li>
19+
</ul>
20+
</div>
21+
<div className="col-sm">
22+
<ul>
23+
<li><a href="#">Code Editors</a></li>
24+
<li><a href="#">Code Editors</a></li>
25+
<li><a href="#">Code Editors</a></li>
26+
<li><a href="#">Code Editors</a></li>
27+
</ul>
28+
</div>
29+
<div className="col-sm">
30+
<ul>
31+
<li><a href="#">Developer console</a></li>
32+
<li><a href="#">Developer console</a></li>
33+
<li><a href="#">Developer console</a></li>
34+
<li><a href="#">Developer console</a></li>
35+
</ul>
36+
</div>
37+
</div>
7238

73-
</div>
39+
<div className="row">
40+
<div className="col-12">
41+
<h3>ReactJs Fundamentals : </h3>
7442
</div>
75-
)
76-
}
77-
}
43+
</div>
44+
<div className="row">
45+
<div className="col-sm">
46+
<ul>
47+
<li><a href="#">Introduction Of ReactJs</a></li>
48+
<li><a href="#">Introduction Of ReactJs</a></li>
49+
<li><a href="#">Introduction Of ReactJs</a></li>
50+
<li><a href="#">Introduction Of ReactJs</a></li>
51+
</ul>
52+
</div>
53+
<div className="col-sm">
54+
<ul>
55+
<li><a href="#">Code Editors</a></li>
56+
<li><a href="#">Code Editors</a></li>
57+
<li><a href="#">Code Editors</a></li>
58+
<li><a href="#">Code Editors</a></li>
59+
</ul>
60+
</div>
61+
<div className="col-sm">
62+
<ul>
63+
<li><a href="#">Developer console</a></li>
64+
<li><a href="#">Developer console</a></li>
65+
<li><a href="#">Developer console</a></li>
66+
<li><a href="#">Developer console</a></li>
67+
</ul>
68+
</div>
69+
</div>
70+
71+
</div>
72+
</div>
73+
);
7874

79-
export default Main;
75+
export default Main;

‎src/Components/Navigation.js‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,37 @@
1-
21
import React from 'react';
32

4-
class Navigation extends React.Component {
5-
render() {
6-
return (
7-
<div className="main thememain-header">
8-
<div className="container">
9-
<nav className="navbar navbar-expand-lg navbar-light bg-light thememain-header">
10-
<a className="navbar-brand" href="#" title="10secondsofcode" >10secondsofcode</a>
11-
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
12-
<span className="navbar-toggler-icon"></span>
13-
</button>
3+
const Navigation = () => (
4+
<div className="main thememain-header">
5+
<div className="container">
6+
<nav className="navbar navbar-expand-lg navbar-light bg-light thememain-header">
7+
<a className="navbar-brand" href="#" title="10secondsofcode">10secondsofcode</a>
8+
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
9+
<span className="navbar-toggler-icon" />
10+
</button>
1411

15-
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
16-
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
17-
<li className="nav-item active">
18-
<a className="nav-link" href="#" title="10secondsofcode">Home <span className="sr-only">(current)</span></a>
19-
</li>
20-
<li className="nav-item">
21-
<a className="nav-link" href="#" title="ReactJs Tutorial">ReactJs</a>
22-
</li>
23-
<li className="nav-item">
24-
<a className="nav-link disabled" href="#" title="Javascript Tutorial" >Javascript</a>
25-
</li>
26-
</ul>
27-
<form className="form-inline my-2 my-lg-0">
28-
<input className="form-control mr-sm-2" type="search" placeholder="Search"></input>
29-
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
30-
</form>
31-
</div>
32-
</nav>
12+
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
13+
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
14+
<li className="nav-item active">
15+
<a className="nav-link" href="#" title="10secondsofcode">
16+
Home
17+
<span className="sr-only">(current)</span>
18+
</a>
19+
</li>
20+
<li className="nav-item">
21+
<a className="nav-link" href="#" title="ReactJs Tutorial">ReactJs</a>
22+
</li>
23+
<li className="nav-item">
24+
<a className="nav-link disabled" href="#" title="Javascript Tutorial">Javascript</a>
25+
</li>
26+
</ul>
27+
<form className="form-inline my-2 my-lg-0">
28+
<input className="form-control mr-sm-2" type="search" placeholder="Search" />
29+
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
30+
</form>
3331
</div>
34-
</div>
35-
)
36-
}
37-
}
32+
</nav>
33+
</div>
34+
</div>
35+
);
3836

3937
export default Navigation;

‎src/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11

2-
import React from "react";
3-
import ReactDOM from "react-dom";
4-
import App from "./App";
2+
import React from 'react';
3+
import ReactDOM from 'react-dom';
4+
import App from './App';
55
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
66
import './style.css';
7-
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';
7+
import '../node_modules/bootstrap/dist/js/bootstrap.min';
88
import 'jquery';
99
import registerServiceWorker from './serviceWorker';
1010

11-
ReactDOM.render(<App />, document.getElementById("app"));
12-
registerServiceWorker();
11+
ReactDOM.render(<App />, document.getElementById('app'));
12+
registerServiceWorker();

‎webpack.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const HtmlWebPackPlugin = require("html-webpack-plugin");
22
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3+
const marked = require("marked");
34

45
module.exports = {
56
module: {
@@ -30,7 +31,7 @@ module.exports = {
3031
loader: "markdown-loader",
3132
options: {
3233
pedantic: true,
33-
renderer
34+
renderer: new marked.Renderer()
3435
}
3536
}
3637
]

0 commit comments

Comments
 (0)