♻️ Move website to Next.js (#368)

This commit updates the stack of the gitmoji website to Next.js. This was a thing I wanted to do a long time ago.

Our current stack was a little bit outdated and had issues with the Developer UX. The concept is the same, the whole site is built into a Static HTML site.

Also we can benefit from using React ⚛️ ❤️

The current stack will be:

Next.js
React
Flow
Scss
Prettier
Jest

.editorconfig

@@ -2,8 +2,8 @@
 root = true
 
 [*]
-indent_style = tab
-tab_width = 4
+indent_style = spaces
+tab_width = 2
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

.flowconfig

@@ -0,0 +1,12 @@
+[ignore]
+.*/node_modules/jsonlint/.*
+
+[include]
+
+[libs]
+
+[lints]
+
+[options]
+
+[strict]

.github/CONTRIBUTING.md

@@ -30,13 +30,14 @@ If you would like to add a new emoji to gitmoji, fill the provided `ISSUE_TEMPLA
   "name": "code (same as code but without ':' replace underscores for dashes _ => - )"
 }
 ```
+
 If you want to find the hexadecimal entity of icon, search for it in this site: <a>http://graphemica.com/</a>
 
 Then, after that you'll need to add a new color to [the vars.scss](https://github.com/carloscuesta/gitmoji/blob/master/src/styles/_includes/_vars.scss) file.
 
 You must follow the convention of adding a new item to the `$gitmojis array`. That matches the name that you added at the json file.
 
-## How to start gitmoji and update
+## How to start gitmoji
 
 If you want to make changes to the site, follow the next steps:
 
@@ -50,24 +51,7 @@ $ cd gitmoji
 2. Install the dependencies and start the development task.
 
 ```bash
-$ npm i && gulp
-```
-
-3. Make sure the styles are using a link instead of being inlined.
-
-_If you are updating the SCSS files and the styles doesn't get updated, go to the `index.pug` and `about.pug` paste the following code_
-
-```jade
-link(href="css/style.css", type="text/css", rel="stylesheet")
+$ yarn install && yarn run dev
 ```
 
-_Remove this one_
-
-```jade
-style
-  include ../../dist/css/style.css
-```
-
-**After making your changes, inline the styles as before.**
-
-The project is built with [Pug](http://pugjs.org) and [SCSS](http://sass-lang.com)
+The project is built with [Next.js](http://nextjs.org) and [SCSS](http://sass-lang.com)

.gitignore

@@ -2,3 +2,6 @@
 dist/
 node_modules/
 .publish/
+.next
+out/
+coverage/

.travis.yml

@@ -1,13 +1,18 @@
 language: node_js
-node_js:
-- 6
+node_js: lts/*
 cache:
   directories:
     - node_modules
-script: npm test
+script:
+  - yarn run lint
+  - yarn run flow
+  - yarn run test
+before_deploy:
+  - yarn run build
+  - yarn run export
 deploy:
   provider: pages
-  local-dir: dist
+  local-dir: out
   skip-cleanup: true
   github-token: $GITHUB_PAGES_DEPLOY_TOKEN
   keep-history: true
@@ -18,3 +23,4 @@ deploy:
 notifications:
   slack:
     secure: oTOAM8T5Qo3sZ+oB54OfwRA/F1IFrt3J2TFGobYqSk5GZFBJZ/idlSFmKsMCfqVYTMzNhWlYj4H+isdAVzVh/TgbFKY88/GcbtNG8QYCJcFaWOanIp38XQ2RiSImt5T4aMquq/pFj1cE+CNTIWRoieDteukq/bIT3Z1I8hpz5QCSxAFr0suPSwCv1MLXR0ytVldF16eeTVQ0BR8l4L/K5IBt6ZfnpkebZMS0Q3MCobUosAgE1hIHFYxdXYugfmnG0cO2wtLvXwQWQ6VoRGJdc0iAL4CFJxKORX43Y//T0P5e0dBiGfek7QP5gJk+8qeFd5D2O34pB/POUy2vtFvBKTSsgOhz94fmS5v5M4X60oHsNWYt8AUU9CMicYQ2U2pbYAlttTGN3tguC/usdJRS9kWdn6MbI8T6cjk2BCyriFXXXumLEINiHYexcb0PdAm2Lwc//5QSxCdFPGr5UfdhAfwpNOy21QhvcioGUJbtLuyEMP+F9+ZMYWypfacD507yqtr5Z+rtInp4qOuKwZFSir7IzTBbuEUuxJLagbwUTbT302sYarOPvpAjgzPbPWFuUVigZ1y/SPbdObbolOh2yGEfYwIIIPT8ijKPN+sgDFOr0TJ1ZkB59Kb5zW/pDAykWqf2kmLHCFQGcatPzg1ROrrR5CH6/+LVQKhxUEaGLaE=
+  email: false

next.config.js

@@ -0,0 +1,19 @@
+const withSass = require('@zeit/next-sass')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+
+module.exports = withSass({
+  exportPathMap: function() {
+    return {
+      '/': { page: '/' },
+      '/about': { page: '/about' },
+      '/contributors': { page: '/contributors' }
+    }
+  },
+  webpack: (config, { dev, isServer }) => {
+    if (isServer) return config
+
+    config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}))
+
+    return config
+  }
+})

package.json

@@ -1,53 +1,68 @@
 {
   "name": "gitmoji",
   "version": "1.0.0",
-  "description": "An emoji guide for your commit messages",
-  "main": "index.js",
+  "private": true,
   "scripts": {
-    "jsonvalidate": "jsonlint ./src/data/gitmojis.json -V ./src/data/schema.json",
-    "contributors": "curl https://api.github.com/repos/carloscuesta/gitmoji/contributors -o ./src/data/contributors.json",
-    "build": "gulp build",
-    "deploy": "gulp deploy",
-    "start": "npm run contributors && gulp",
-    "test": "npm run jsonvalidate && gulp build"
+    "build": "next build",
+    "dev": "next dev",
+    "export": "next export && touch out/.nojekyll",
+    "flow": "flow",
+    "lint": "prettier --check src/**/*.{js,json,scss}",
+    "start": "next start",
+    "test": "jest --coverage",
+    "validate:gitmojis": "jsonlint ./src/data/gitmojis.json -V ./src/data/schema.json"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/carloscuesta/gitmoji.git"
+  "dependencies": {
+    "@babel/preset-flow": "^7.0.0",
+    "@zeit/next-sass": "^1.0.1",
+    "next": "9.1.1",
+    "node-sass": "^4.13.0",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
+    "react-test-renderer": "^16.11.0"
+  },
+  "devDependencies": {
+    "flow-bin": "^0.110.1",
+    "husky": "^3.0.9",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^24.9.0",
+    "jsonlint": "^1.6.3",
+    "lint-staged": "^10.0.0-1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "prettier": "1.18.2"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "arrowParens": "always"
   },
-  "author": "Carlos Cuesta",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/carloscuesta/gitmoji/issues"
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "prettier --write src/**/*.{js,json,scss}",
+      "git add"
+    ]
   },
-  "pugLintConfig": {
-    "disallowHtmlText": true,
-    "disallowDuplicateAttributes": true,
-    "disallowClassAttributeWithStaticValue": true,
-    "disallowIdAttributeWithStaticValue": true,
-    "requireLowerCaseAttributes": true
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "pre-push": "npm run flow && npm run test"
+    }
   },
   "babel": {
     "presets": [
-      "es2015"
+      "next/babel",
+      "@babel/preset-flow"
     ]
   },
-  "homepage": "https://github.com/carloscuesta/gitmoji#readme",
-  "dependencies": {
-    "async": "^2.1.2",
-    "gulp": "^3.9.1",
-    "gulp-plumber": "^1.1.0",
-    "gulp-pug": "^3.3.0",
-    "gulp-pug-lint": "^0.1.6",
-    "gulp-sass": "^3.1.0",
-    "pdfkit": "^0.8.0",
-    "request": "^2.79.0"
-  },
-  "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "browser-sync": "^2.18.13",
-    "gulp-gh-pages": "^0.5.4",
-    "jsonlint": "^1.6.2"
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}"
+    ],
+    "testMatch": [
+      "**/*.(spec).(js)"
+    ],
+    "moduleNameMapper": {
+      "\\.(scss)$": "identity-obj-proxy"
+    }
   }
 }