♻️ 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
+$ yarn install && yarn run dev
 ```
 
-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")
-```
-
-_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

gulpfile.babel.js

@@ -1,77 +0,0 @@
-'use strict'
-
-import gulp from 'gulp'
-import sass from 'gulp-sass'
-import pug from 'gulp-pug'
-import pugLint from 'gulp-pug-lint'
-import browserSync from 'browser-sync'
-import plumber from 'gulp-plumber'
-import gitmojis from './src/data/gitmojis.json'
-import contributors from './src/data/contributors.json'
-import ghPages from 'gulp-gh-pages'
-
-const baseDirs = {
-  src: 'src/',
-  dist: 'dist/'
-}
-
-const routes = {
-  templates: {
-    pug: `${baseDirs.src}templates/*.pug`,
-    _pug: `${baseDirs.src}templates/_includes/*.pug`
-  },
-  styles: {
-    scss: `${baseDirs.src}styles/*.scss`,
-    _scss: `${baseDirs.src}styles/_includes/*.scss`
-  },
-  files: {
-    html: `${baseDirs.dist}`,
-    css: `${baseDirs.dist}css/`,
-    deploy: `${baseDirs.dist}**/*`,
-    staticSrc: `${baseDirs.src}static/**/*`,
-    staticDist: `${baseDirs.dist}static/`
-  }
-}
-
-gulp.task('templates', ['styles'], () => {
-  return gulp.src([routes.templates.pug, '!' + routes.templates._pug])
-    .pipe(pugLint())
-    .pipe(plumber({}))
-    .pipe(pug({
-      locals: { 'emojis': gitmojis, 'contributors': contributors }
-    }))
-    .pipe(gulp.dest(routes.files.html))
-    .pipe(browserSync.stream())
-})
-
-gulp.task('styles', () => {
-  return gulp.src(routes.styles.scss)
-    .pipe(plumber({}))
-    .pipe(sass({ outputStyle: 'compressed' }))
-    .pipe(gulp.dest(routes.files.css))
-    .pipe(browserSync.stream())
-})
-
-gulp.task('serve', ['styles', 'templates'], () => {
-  browserSync.init({
-    server: `${baseDirs.dist}`
-  })
-
-  gulp.watch([routes.templates.pug, routes.templates._pug], ['templates'])
-  gulp.watch([routes.styles.scss, routes.styles._scss], ['styles'])
-})
-
-gulp.task('build', ['templates', 'styles'], () => {
-  gulp.src([routes.files.staticSrc]).pipe(gulp.dest(routes.files.staticDist))
-})
-
-gulp.task('deploy', () => {
-  return gulp.src(routes.files.deploy)
-    .pipe(ghPages({ message: ':rocket: gitmoji website' }))
-})
-
-gulp.task('dev', ['serve'])
-
-gulp.task('default', () => {
-  gulp.start('dev')
-})

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"
   },
-  "author": "Carlos Cuesta",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/carloscuesta/gitmoji/issues"
+  "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"
   },
-  "pugLintConfig": {
-    "disallowHtmlText": true,
-    "disallowDuplicateAttributes": true,
-    "disallowClassAttributeWithStaticValue": true,
-    "disallowIdAttributeWithStaticValue": true,
-    "requireLowerCaseAttributes": true
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "arrowParens": "always"
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "prettier --write src/**/*.{js,json,scss}",
+      "git add"
+    ]
+  },
+  "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"
+    }
   }
 }

src/__tests__/pages.spec.js

@@ -0,0 +1,32 @@
+import renderer from 'react-test-renderer'
+
+import Index from '../pages/index'
+import About from '../pages/about'
+import Contributors from '../pages/contributors'
+
+describe('Pages', () => {
+  beforeAll(() => {
+    Math.random = jest.fn().mockReturnValue(1)
+  })
+
+  describe('Index', () => {
+    it('should render the page', () => {
+      const wrapper = renderer.create(<Index />)
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+
+  describe('About', () => {
+    it('should render the page', () => {
+      const wrapper = renderer.create(<About />)
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+
+  describe('Contributors', () => {
+    it('should render the page', () => {
+      const wrapper = renderer.create(<Contributors />)
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
+})

src/components/Button/__tests__/__snapshots__/button.spec.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button should render the component 1`] = `
+<a
+  className="btn btn-pink"
+  target="_blank"
+>
+  <svg
+    className="icon icon-star"
+  >
+    <use
+      xlinkHref="#icon-star"
+    />
+  </svg>
+  GitHub
+</a>
+`;

src/components/Button/__tests__/button.spec.js

@@ -0,0 +1,11 @@
+import renderer from 'react-test-renderer'
+
+import Button from '../index'
+import * as stubs from './stubs'
+
+describe('Button', () => {
+  it('should render the component', () => {
+    const wrapper = renderer.create(<Button {...stubs.props} />)
+    expect(wrapper).toMatchSnapshot()
+  })
+})

src/components/Button/__tests__/stubs.js

@@ -0,0 +1,5 @@
+export const props = {
+  target: '_blank',
+  icon: 'star',
+  text: 'GitHub'
+}

src/components/Button/index.js

@@ -0,0 +1,15 @@
+// @flow
+import React from 'react'
+
+import Icon from '../Icon'
+
+type Props = { target?: string, icon?: string, text: string }
+
+const Button = (props: Props) => (
+  <a className="btn btn-pink" target={props.target && props.target}>
+    {props.icon && <Icon name={props.icon} />}
+    {props.text}
+  </a>
+)
+
+export default Button

src/components/ContributorsList/Contributor/index.js

@@ -0,0 +1,14 @@
+// @flow
+import React from 'react'
+
+type Props = { profile: string, avatar: string }
+
+const Contributor = (props: Props) => (
+  <article className="contributor col-xs-3 col-sm-2">
+    <a href={props.profile}>
+      <img className="contributor-picture" src={props.avatar} />
+    </a>
+  </article>
+)
+
+export default Contributor

src/components/ContributorsList/__tests__/__snapshots__/contributorsList.spec.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContributorsList should match Contributor component 1`] = `
+<article
+  className="contributor col-xs-3 col-sm-2"
+>
+  <a
+    href="https://github.com/profile"
+  >
+    <img
+      className="contributor-picture"
+      src="https://github.com/avatar"
+    />
+  </a>
+</article>
+`;
+
+exports[`ContributorsList should render the component 1`] = `
+<div
+  className="row center-xs"
+/>
+`;

src/components/ContributorsList/__tests__/contributorsList.spec.js

@@ -0,0 +1,17 @@
+import renderer from 'react-test-renderer'
+
+import ContributorsList from '../index'
+import Contributor from '../Contributor'
+import * as stubs from './stubs'
+
+describe('ContributorsList', () => {
+  it('should render the component', () => {
+    const wrapper = renderer.create(<ContributorsList />)
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('should match Contributor component', () => {
+    const wrapper = renderer.create(<Contributor {...stubs.props} />)
+    expect(wrapper).toMatchSnapshot()
+  })
+})

src/components/ContributorsList/__tests__/stubs.js

@@ -0,0 +1,4 @@
+export const props = {
+  profile: 'https://github.com/profile',
+  avatar: 'https://github.com/avatar'
+}

src/components/ContributorsList/index.js

@@ -0,0 +1,37 @@
+// @flow
+import React from 'react'
+
+import Contributor from './Contributor'
+
+const ContributorsList = () => {
+  const [contributors, setContributors] = React.useState([])
+
+  React.useEffect(() => {
+    const fetchContributors = async () => {
+      const response = await fetch(
+        'https://api.github.com/repos/carloscuesta/gitmoji/contributors'
+      )
+      const contributors = await response.json()
+
+      setContributors(
+        contributors.filter((contributor) => !contributor.login.includes('bot'))
+      )
+    }
+
+    fetchContributors()
+  }, [])
+
+  return (
+    <div className="row center-xs">
+      {contributors.map((contributor) => (
+        <Contributor
+          key={contributor.id}
+          profile={contributor.html_url}
+          avatar={contributor.avatar_url}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default ContributorsList

src/components/GitmojiList/Gitmoji/index.js

@@ -0,0 +1,30 @@
+import React from 'react'
+
+type Props = {
+  code: string,
+  description: string,
+  emoji: string,
+  name: string
+}
+
+const Gitmoji = (props: Props) => (
+  <article className="emoji col-xs-12 col-sm-6 col-md-3">
+    <div className="emoji-card">
+      <header className={`${props.name} emoji-header`}>
+        <span
+          className="emoji-icon gitmoji"
+          data-clipboard-text={props.code}
+          onClick={() => alert(props.code)}
+        >
+          {props.emoji}
+        </span>
+      </header>
+      <div className="emoji-info">
+        <code>{props.code}</code>
+        <p>{props.description}</p>
+      </div>
+    </div>
+  </article>
+)
+
+export default Gitmoji

src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap

@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GitmojiList should render the component 1`] = `
+<div
+  className="row center-xs"
+  id="gitmoji-list"
+>
+  <article
+    className="emoji col-xs-12 col-sm-6 col-md-3"
+  >
+    <div
+      className="emoji-card"
+    >
+      <header
+        className="art emoji-header"
+      >
+        <span
+          className="emoji-icon gitmoji"
+          data-clipboard-text=":art:"
+          onClick={[Function]}
+        >
+          🎨
+        </span>
+      </header>
+      <div
+        className="emoji-info"
+      >
+        <code>
+          :art:
+        </code>
+        <p>
+          Improving structure / format of the code.
+        </p>
+      </div>
+    </div>
+  </article>
+  <article
+    className="emoji col-xs-12 col-sm-6 col-md-3"
+  >
+    <div
+      className="emoji-card"
+    >
+      <header
+        className="zap emoji-header"
+      >
+        <span
+          className="emoji-icon gitmoji"
+          data-clipboard-text=":zap:"
+          onClick={[Function]}
+        >
+          ⚡️
+        </span>
+      </header>
+      <div
+        className="emoji-info"
+      >
+        <code>
+          :zap:
+        </code>
+        <p>
+          Improving performance.
+        </p>
+      </div>
+    </div>
+  </article>
+  <article
+    className="emoji col-xs-12 col-sm-6 col-md-3"
+  >
+    <div
+      className="emoji-card"
+    >
+      <header
+        className="fire emoji-header"
+      >
+        <span
+          className="emoji-icon gitmoji"
+          data-clipboard-text=":fire:"
+          onClick={[Function]}
+        >
+          🔥
+        </span>
+      </header>
+      <div
+        className="emoji-info"
+      >
+        <code>
+          :fire:
+        </code>
+        <p>
+          Removing code or files.
+        </p>
+      </div>
+    </div>
+  </article>
+  <article
+    className="emoji col-xs-12 col-sm-6 col-md-3"
+  >
+    <div
+      className="emoji-card"
+    >
+      <header
+        className="bug emoji-header"
+      >
+        <span
+          className="emoji-icon gitmoji"
+          data-clipboard-text=":bug:"
+          onClick={[Function]}
+        >
+          🐛
+        </span>
+      </header>
+      <div
+        className="emoji-info"
+      >
+        <code>
+          :bug:
+        </code>
+        <p>
+          Fixing a bug.
+        </p>
+      </div>
+    </div>
+  </article>
+  <article
+    className="emoji col-xs-12 col-sm-6 col-md-3"
+  >
+    <div
+      className="emoji-card"
+    >
+      <header
+        className="ambulance emoji-header"
+      >
+        <span
+          className="emoji-icon gitmoji"
+          data-clipboard-text=":ambulance:"
+          onClick={[Function]}
+        >
+          🚑
+        </span>
+      </header>
+      <div
+        className="emoji-info"
+      >
+        <code>
+          :ambulance:
+        </code>
+        <p>
+          Critical hotfix.
+        </p>
+      </div>
+    </div>
+  </article>
+  <article
+    className="emoji col-xs-12 col-sm-6 col-md-3"
+  >
+    <div
+      className="emoji-card"
+    >
+      <header
+        className="sparkles emoji-header"
+      >
+        <span
+          className="emoji-icon gitmoji"
+          data-clipboard-text=":sparkles:"
+          onClick={[Function]}
+        >
+          ✨
+        </span>
+      </header>
+      <div
+        className="emoji-info"
+      >
+        <code>
+          :sparkles:
+        </code>
+        <p>
+          Introducing new features.
+        </p>
+      </div>
+    </div>
+  </article>
+</div>
+`;

src/components/GitmojiList/__tests__/gitmojiList.spec.js

@@ -0,0 +1,11 @@
+import renderer from 'react-test-renderer'
+
+import GitmojiList from '../index'
+import * as stubs from './stubs'
+
+describe('GitmojiList', () => {
+  it('should render the component', () => {
+    const wrapper = renderer.create(<GitmojiList {...stubs.props} />)
+    expect(wrapper).toMatchSnapshot()
+  })
+})

src/components/GitmojiList/__tests__/stubs.js

@@ -0,0 +1,5 @@
+import { gitmojis } from '../../../data/gitmojis.json'
+
+export const props = {
+  gitmojis: gitmojis.slice(0, 6)
+}

src/components/GitmojiList/index.js

@@ -0,0 +1,29 @@
+// @flow
+import React from 'react'
+
+import Gitmoji from './Gitmoji'
+
+type Props = {
+  gitmojis: Array<{
+    code: string,
+    description: string,
+    emoji: string,
+    name: string
+  }>
+}
+
+const GitmojiList = (props: Props) => (
+  <div className="row center-xs" id="gitmoji-list">
+    {props.gitmojis.map((gitmoji, index) => (
+      <Gitmoji
+        code={gitmoji.code}
+        description={gitmoji.description}
+        emoji={gitmoji.emoji}
+        key={index}
+        name={gitmoji.name}
+      />
+    ))}
+  </div>
+)
+
+export default GitmojiList

src/components/Icon/__tests__/__snapshots__/icon.spec.js.snap

@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon should match Definitions 1`] = `
+<svg
+  height={0}
+  style={
+    Object {
+      "height": 0,
+      "position": "absolute",
+      "width": 0,
+    }
+  }
+  version="1.1"
+  width={0}
+  xmlns="http://www.w3.org/2000/svg"
+  xmlnsXlink="http://www.w3.org/1999/xlink"
+>
+  <defs>
+    <symbol
+      id="icon-heart"
+      viewBox="0 0 64 64"
+    >
+      <title>
+        heart
+      </title>
+      <path
+        className="heart"
+        d="m61.1 18.2c-6.4-17-27.2-9.4-29.1-.9-2.6-9-22.9-15.7-29.1.9-6.9 18.5 26.7 35.1 29.1 37.8 2.4-2.2 36-19.6 29.1-37.8"
+        fill="#ff5a79"
+      />
+    </symbol>
+    <symbol
+      id="icon-star"
+      viewBox="0 0 64 64"
+    >
+      <title>
+        star
+      </title>
+      <path
+        className="twitter"
+        d="M62,25.2H39.1L32,3l-7.1,22.2H2l18.5,13.7l-7,22.1L32,47.3L50.5,61l-7.1-22.2L62,25.2z"
+        fill="#FFDD67"
+      />
+    </symbol>
+    <symbol
+      id="icon-twitter"
+      viewBox="0 0 64 64"
+    >
+      <title>
+        twitter
+      </title>
+      <g
+        fill="#42ade2"
+      >
+        <path
+          d="m59.8 24.3c0 0 1.1-6.2-3.5-3.4 0 0-.4-6.3-4.3-1.9 0 0-2.1-3.9-4.4-.3-3.1 4.8-5.2 12.4-3.2 25l3.8-2.5c2.7-7.9 12.4-8.8 13.7-13.1.9-3-2.1-3.8-2.1-3.8"
+        />
+        <path
+          d="m22.1 17.6l-9.9 3.6c2.2-12 16.6-11.2 16.6-11.2s-6.8 3.2-6.7 7.6"
+        />
+        <path
+          d="m23.7 19.8l-10.5 1.4c4.8-11.2 18.7-7.3 18.7-7.3s-7.3 1.6-8.2 5.9"
+        />
+      </g>
+      <g
+        fill="#ffd93b"
+      >
+        <path
+          d="m2 29l5.4-1.4v3.6c0-.1-3.3-.6-5.4-2.2"
+        />
+        <path
+          d="M7.4,27.5L2,24.8c3.6-2.8,7.7-1.9,7.7-1.9L7.4,27.5z"
+        />
+      </g>
+      <g
+        fill="#e08828"
+      >
+        <path
+          d="m33.8 53h-2.1v7.9c-.3.1-2.1-.1-2.9-.1-1.8 0-3.3 1.3-3.3 1.3h8.3v-9.1"
+        />
+        <path
+          d="m25 53h-2.1v7.9c-.3.1-2.1-.1-2.9-.1-1.8 0-3.3 1.3-3.3 1.3h8.3v-9.1"
+        />
+        <path
+          d="m54 36.2c3.9 0-4.1 17.5-23.3 17.5-13 0-23.9-5.2-23.9-21.5 0-10.1 6.4-18.3 19.5-15 13.3 3.5 6.5 19 27.7 19"
+          fill="#42ade2"
+        />
+        <path
+          d="m37.6 51.7c-15.6 0-14-12-27.9-11.2 5.1 15.8 27.9 11.2 27.9 11.2"
+          fill="#fff"
+        />
+        <path
+          d="m39.1 29.2c-10-9.8-20.2 6.2-7.9 12.6 12.1 6.2 20.4-4.8 20.4-4.8s-6.1-1.5-12.5-7.8"
+          fill="#297b9d"
+        />
+      </g>
+      <circle
+        cx="15.1"
+        cy="24.9"
+        fill="#3e4347"
+        r="2.5"
+      />
+    </symbol>
+  </defs>
+</svg>
+`;
+
+exports[`Icon should render the component 1`] = `
+<svg
+  className="icon icon-star"
+>
+  <use
+    xlinkHref="#icon-star"
+  />
+</svg>
+`;

src/components/Icon/__tests__/icon.spec.js

@@ -0,0 +1,16 @@
+import renderer from 'react-test-renderer'
+
+import Icon, { IconDefinitions } from '../index'
+import * as stubs from './stubs'
+
+describe('Icon', () => {
+  it('should render the component', () => {
+    const wrapper = renderer.create(<Icon {...stubs.props} />)
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('should match Definitions', () => {
+    const wrapper = renderer.create(<IconDefinitions />)
+    expect(wrapper).toMatchSnapshot()
+  })
+})

src/components/Icon/__tests__/stubs.js

@@ -0,0 +1,3 @@
+export const props = {
+  name: 'star'
+}

src/components/Icon/definitions.js

@@ -0,0 +1,61 @@
+// @flow
+import React from 'react'
+
+export const IconDefinitions = () => (
+  <svg
+    style={{ position: 'absolute', width: 0, height: 0 }}
+    width={0}
+    height={0}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <symbol id="icon-heart" viewBox="0 0 64 64">
+        <title>heart</title>
+        <path
+          className="heart"
+          d="m61.1 18.2c-6.4-17-27.2-9.4-29.1-.9-2.6-9-22.9-15.7-29.1.9-6.9 18.5 26.7 35.1 29.1 37.8 2.4-2.2 36-19.6 29.1-37.8"
+          fill="#ff5a79"
+        />
+      </symbol>
+      <symbol id="icon-star" viewBox="0 0 64 64">
+        <title>star</title>
+        <path
+          className="twitter"
+          d="M62,25.2H39.1L32,3l-7.1,22.2H2l18.5,13.7l-7,22.1L32,47.3L50.5,61l-7.1-22.2L62,25.2z"
+          fill="#FFDD67"
+        />
+      </symbol>
+      <symbol id="icon-twitter" viewBox="0 0 64 64">
+        <title>twitter</title>
+        <g fill="#42ade2">
+          <path d="m59.8 24.3c0 0 1.1-6.2-3.5-3.4 0 0-.4-6.3-4.3-1.9 0 0-2.1-3.9-4.4-.3-3.1 4.8-5.2 12.4-3.2 25l3.8-2.5c2.7-7.9 12.4-8.8 13.7-13.1.9-3-2.1-3.8-2.1-3.8" />
+          <path d="m22.1 17.6l-9.9 3.6c2.2-12 16.6-11.2 16.6-11.2s-6.8 3.2-6.7 7.6" />
+          <path d="m23.7 19.8l-10.5 1.4c4.8-11.2 18.7-7.3 18.7-7.3s-7.3 1.6-8.2 5.9" />
+        </g>
+        <g fill="#ffd93b">
+          <path d="m2 29l5.4-1.4v3.6c0-.1-3.3-.6-5.4-2.2" />
+          <path d="M7.4,27.5L2,24.8c3.6-2.8,7.7-1.9,7.7-1.9L7.4,27.5z" />
+        </g>
+        <g fill="#e08828">
+          <path d="m33.8 53h-2.1v7.9c-.3.1-2.1-.1-2.9-.1-1.8 0-3.3 1.3-3.3 1.3h8.3v-9.1" />
+          <path d="m25 53h-2.1v7.9c-.3.1-2.1-.1-2.9-.1-1.8 0-3.3 1.3-3.3 1.3h8.3v-9.1" />
+          <path
+            d="m54 36.2c3.9 0-4.1 17.5-23.3 17.5-13 0-23.9-5.2-23.9-21.5 0-10.1 6.4-18.3 19.5-15 13.3 3.5 6.5 19 27.7 19"
+            fill="#42ade2"
+          />
+          <path
+            d="m37.6 51.7c-15.6 0-14-12-27.9-11.2 5.1 15.8 27.9 11.2 27.9 11.2"
+            fill="#fff"
+          />
+          <path
+            d="m39.1 29.2c-10-9.8-20.2 6.2-7.9 12.6 12.1 6.2 20.4-4.8 20.4-4.8s-6.1-1.5-12.5-7.8"
+            fill="#297b9d"
+          />
+        </g>
+        <circle cx="15.1" cy="24.9" r="2.5" fill="#3e4347" />
+      </symbol>
+    </defs>
+  </svg>
+)

src/components/Icon/index.js

@@ -0,0 +1,14 @@
+// @flow
+import React from 'react'
+
+export { IconDefinitions } from './definitions'
+
+type Props = { name: string }
+
+const Icon = (props: Props) => (
+  <svg className={`icon icon-${props.name}`}>
+    <use xlinkHref={`#icon-${props.name}`} />
+  </svg>
+)
+
+export default Icon

src/components/Layout/Footer/index.js

@@ -0,0 +1,33 @@
+// @flow
+import React from 'react'
+import Link from 'next/link'
+
+import Icon from '../../Icon'
+
+const Footer = () => (
+  <footer className="footer">
+    <div className="wrap">
+      <div className="row middle-xs">
+        <div className="col-sm-6 made-with-love">
+          <h3>
+            Made with <Icon name="heart" /> by{' '}
+            <a href="https://carloscuesta.me">Carlos Cuesta</a>
+          </h3>
+        </div>
+        <div className="col-sm-6 footer-nav">
+          <nav>
+            <Link href="/about">
+              <a>About</a>
+            </Link>
+            <Link href="/contributors">
+              <a>Contributors</a>
+            </Link>
+            <a href="https://github.com/carloscuesta/gitmoji">GitHub</a>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </footer>
+)
+
+export default Footer

src/components/Layout/Header/index.js

@@ -0,0 +1,36 @@
+// @flow
+import React from 'react'
+
+import Button from '../../Button'
+import Logo from '../Logo'
+
+type Props = { withHeadline: boolean, withSocialButtons: boolean }
+
+const Header = (props: Props) => (
+  <header className="header">
+    <Logo />
+    {props.withHeadline && <h2>An emoji guide for your commit messages</h2>}
+    {props.withSocialButtons && (
+      <div className="header-buttons">
+        <Button
+          icon="star"
+          link="https://github.com/carloscuesta/gitmoji"
+          text="GitHub"
+        />
+        <Button
+          icon="twitter"
+          link={
+            'https://twitter.com/intent/tweet?text=gitmoji' +
+            '%20%E2%80%93%20An%20%23emoji%20guide%20for%20your%20commit' +
+            '%20messages%20by%20%40crloscuesta%20%F0%9F%98%8D%F0%9F%98%9C' +
+            '&url=https://gitmoji.carloscuesta.me'
+          }
+          target="_blank"
+          text="Tweet"
+        />
+      </div>
+    )}
+  </header>
+)
+
+export default Header

src/components/Layout/Logo/index.js

@@ -0,0 +1,65 @@
+// @flow
+import React from 'react'
+import LOGO_STATUSES, {
+  Joy,
+  Loved,
+  Sexy,
+  Smiling,
+  Sunglasses,
+  Tongue
+} from './statuses'
+
+export const getIconByStatus = (status: $Keys<typeof LOGO_STATUSES>) => {
+  switch (status) {
+    case LOGO_STATUSES.JOY:
+      return <Joy />
+    case LOGO_STATUSES.LOVED:
+      return <Loved />
+    case LOGO_STATUSES.SEXY:
+      return <Sexy />
+    case LOGO_STATUSES.SMILING:
+      return <Smiling />
+    case LOGO_STATUSES.SUNGLASSES:
+      return <Sunglasses />
+    case LOGO_STATUSES.TONGUE:
+      return <Tongue />
+  }
+}
+
+const Logo = () => {
+  const statuses: Array<Object> = Object.values(LOGO_STATUSES).map(
+    (status) => status
+  )
+  const [status, setStatus] = React.useState('')
+
+  React.useEffect(() => {
+    setStatus(statuses[Math.floor(Math.random() * statuses.length)])
+  }, [])
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="gitmoji-logo"
+      height="137px"
+      width="457px"
+      version="1.1"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 457 137"
+    >
+      <title>gitmoji</title>
+      <g id="gitmoji" fillRule="evenodd" fill="none">
+        <g id="Logo" transform="translate(-270 -430)">
+          <g id="gitmoji" transform="translate(270 430)">
+            <path
+              d="m17.5 106c0.6 4 2.4 7 5.3 10 2.9 2 6.6 4 11.2 4 6.1 0 10.7-2 14-5s4.9-8 4.9-15.1v-5.1c-1.5 2.3-3.8 4.4-7.1 6.2-3.2 2-7.5 3-12.6 3-4.7 0-9.1-1-13.1-3-4.1-1.5-7.6-3.9-10.5-7-2.91-3-5.22-6.7-6.9-10.8-1.68-4.2-2.52-8.8-2.52-13.8 0.004-4.7 0.82-9.1 2.45-13.3s3.89-7.9 6.77-11c2.9-3.2 6.3-5.7 10.4-7.5 4-1.8 8.5-2.7 13.4-2.7 5.6 0 10.1 1 13.4 3 3.2 2 5.5 4.2 6.7 6.6v-8.3h18.5v63.2c0 4.6-0.7 9.6-2.1 13.6-1.4 5-3.6 9-6.6 12-3 4-6.8 6-11.5 8s-10.4 4-17 4c-4.9 0-9.3-1-13.3-3-4-1-7.5-3-10.5-5-2.94-3-5.34-5-7.16-8-1.82-4-2.98-7-3.46-10l17.3-5zm19-18.6c4.9 0 8.9-1.6 12-4.9 3.1-3.2 4.7-7.6 4.7-13.1s-1.7-9.8-4.9-13c-3.3-3.2-7.2-4.8-11.8-4.8-2.4 0-4.7 0.4-6.7 1.2-2.1 0.8-3.9 2-5.4 3.6-1.6 1.6-2.8 3.5-3.6 5.7-0.9 2.2-1.3 4.6-1.3 7.3 0 5.6 1.6 10 4.7 13.2 3.2 3.2 7.3 4.8 12.3 4.8zm54.7 19.6v-70.8h18.8v70.8h-18.8zm-2.3-94c0-3.39 1.1-6.22 3.4-8.53 2.3-2.3 5.1-3.45 8.7-3.45 3 0 6 1.15 8 3.45 2 2.31 4 5.14 4 8.53 0 3.1-2 5.9-4 8.2s-5 3.4-8 3.4c-3.6 0-6.4-1.1-8.7-3.4s-3.4-5.1-3.4-8.2zm65.1 23.2h15v16.9h-15v29.7c0 3.1 1 5.2 2 6.4 2 1.2 4 1.8 7 1.8 1 0 2 0 3-0.1s2-0.3 3-0.5v15.6c-1 1-3 1-4 1-2 1-4 1-7 1-7 0-13-2-17-6-4-3.6-6-9-6-15.9v-33h-12v-16.9h3c4 0 7-1.1 8-3.3 2-2.1 3-4.8 3-8v-9.9h17v21.2zm30 70.8v-70.8h18v8.6c1-1.7 2-3.3 4-4.6 1-1.4 3-2.5 5-3.3 2-0.9 4-1.6 6-2 2-0.5 4-0.8 6-0.8 5 0 9 1 13 3.1 3 2 6 4.9 8 8.7 3-4.3 6-7.3 10-9.1s8-2.7 12-2.7 7 0.5 10 1.5c3 1.1 6 2.7 8 4.9 3 2.2 4 5 6 8.4 1 3.4 2 7.5 2 12.2v45.9h-19v-42c0-3.9 0-7.1-2-9.6-2-2.6-6-3.8-10-3.8s-7 1.3-10 4.1c-2 2.7-3 6-3 9.8v41.5h-19v-42c0-3.9-1-7.1-3-9.6-2-2.6-5-3.8-10-3.8-4 0-7 1.3-9 4-3 2.7-4 6-4 9.9v41.5h-19zm159-15.3c3 0 5-0.4 7-1.3 2-0.8 4-2.1 6-3.8 1-1.7 3-3.7 4-6.2s1-5.5 1-8.8c0-3.4 0-6.3-1-8.8s-3-4.6-4-6.3c-2-1.7-4-2.9-6-3.8s-4-1.3-7-1.3c-2 0-4 0.4-6 1.3-3 0.9-5 2.1-6 3.8-2 1.7-3 3.8-4 6.3s-2 5.4-2 8.8c0 3.3 1 6.3 2 8.8s2 4.5 4 6.2c1 1.7 3 3 6 3.8 2 0.9 4 1.3 6 1.3zm0-57.7c6 0 11 0.9 15 2.8 5 1.9 9 4.5 12 7.8s6 7.2 8 11.9c2 4.6 2 9.6 2 15.1 0 5.4 0 10.5-2 15-2 4.6-5 8.5-8 11.9-3 3.5-7 5.5-12 7.5-4 2-9 3-15 3-5 0-10-1-14-3-5-2-9-4-12-7.5-4-3.4-6-7.3-8-11.9-2-4.5-3-9.6-3-15 0-5.5 1-10.5 3-15.1 2-4.7 4-8.6 8-11.9 3-3.3 7-5.9 12-7.8 4-1.9 9-2.8 14-2.8zm53 2.2h19v76.8c0 4-1 7-2 10-1 2-2 5-4 7s-4 4-7 5-6 2-9 2-6-1-8-1c-2-1-3-1-3-1v-16h2c1 1 2 1 4 1 3 0 5-1 6-3 1-1 2-3 2-6v-74.8zm-3-23.4c0-3.34 1-6.17 4-8.47 2-2.31 5-3.46 8-3.46 3 0.002 6 1.15 9 3.46 2 2.3 3 5.13 3 8.47 0 3.3-1 6-3 8.3-3 2.3-6 3.4-9 3.4s-6-1.1-8-3.4c-3-2.3-4-5-4-8.3zm42 94.2v-70.8h19v70.8h-19zm-2-94c0-3.39 1-6.22 3-8.53 3-2.3 5-3.45 9-3.45 3 0 6 1.15 8 3.45 2 2.31 4 5.14 4 8.53 0 3.1-2 5.9-4 8.2s-5 3.4-8 3.4c-4 0-6-1.1-9-3.4-2-2.3-3-5.1-3-8.2z"
+              fill="#000"
+            />
+            {getIconByStatus(status)}
+          </g>
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+export default Logo

src/components/Layout/Logo/statuses/index.js

@@ -0,0 +1,216 @@
+// @flow
+import React from 'react'
+
+export const Tongue = () => (
+  <g id="tongue" transform="translate(304 32)">
+    <g id="Group">
+      <ellipse id="Oval" rx={39} ry={39} cy={39} cx={39} fill="#FFDD67" />
+      <path
+        id="Shape"
+        fill="#fff"
+        d="m38 29.4c0 7.1-5.8 13-13 13s-13-5.9-13-13c0-7.2 5.8-13 13-13s13 5.8 13 13z"
+      />
+      <ellipse id="Oval" rx="5.85" ry="5.85" cy="29.4" cx={25} fill="#664E27" />
+      <path
+        id="Shape"
+        fill="#664E27"
+        d="m63.7 35.3c-2.5-5.3-6.1-8-9.7-8-3.7 0-7.3 2.7-9.8 8-0.2 0.5 1 1.5 1.7 0.9 2.3-1.9 5.1-2.7 8.1-2.7 2.9 0 5.7 0.8 8 2.7 0.7 0.6 1.9-0.4 1.7-0.9z"
+      />
+      <g id="Shape" transform="translate(16.9 46.8)">
+        <path
+          d="m42.7 0h-41.2c-0.989 0-1.5 0.659-1.5 1.3 0.0013 9.5 7.75 19.5 22.1 19.5s22.1-10 22.1-19.5c0-0.641-0.5-1.3-1.5-1.3z"
+          fill="#664E27"
+        />
+        <path
+          d="m34 7.8h-11.9-11.9c-0.95 0-1.1 0.41-1.1 1.1v5.2c0 11.4 5.8 17.1 13 17.1s13-5.7 13-17.1v-5.2c0-0.69-0.1-1.1-1.1-1.1z"
+          fill="#FF717F"
+        />
+        <polygon points="24 7.8 22.1 25.7 20.2 7.8" fill="#E2596C" />
+      </g>
+    </g>
+  </g>
+)
+
+export const Sexy = () => (
+  <g id="sexy" transform="translate(304 32)">
+    <g id="Group">
+      <ellipse id="Oval" rx={39} ry={39} cy={39} cx={39} fill="#FFDD67" />
+      <ellipse
+        id="Oval"
+        rx="10.4"
+        ry="10.4"
+        cy="45.7"
+        cx="66.1"
+        fill="#FF717F"
+      />
+      <ellipse
+        id="Oval"
+        rx="10.4"
+        ry="10.4"
+        cy="45.7"
+        cx="11.9"
+        fill="#FF717F"
+      />
+      <path
+        id="Shape"
+        fill="#917524"
+        d="m68.4 24.2c-3.5-4.2-8.7-6.7-14.2-6.6-0.8 0-1-2.9 0-2.9 6.3 0 12.4 2.8 16.4 7.7 0.6 0.7-1.7 2.4-2.2 1.8zm-44.6-6.8c-5.5 0-10.7 2.4-14.2 6.6-0.52 0.6-2.81-1.1-2.23-1.8 4.03-4.9 10.1-7.7 16.4-7.7 1 0 0.8 2.9 0 2.9z"
+      />
+      <ellipse id="Oval" rx="5.85" ry="5.85" cy="61.7" cx={39} fill="#664E27" />
+      <path
+        id="Shape"
+        fill="#fff"
+        d="m35.8 35.3c0 6.4-5.3 11.7-11.8 11.7-6.4 0-11.6-5.3-11.6-11.7 0-6.5 5.2-11.7 11.6-11.7 6.5 0 11.8 5.2 11.8 11.7z"
+      />
+      <ellipse id="Oval" rx="5.85" ry="5.85" cy="35.3" cx={24} fill="#664E27" />
+      <g transform="translate(41.6 23.4)">
+        <path
+          id="Shape"
+          fill="#fff"
+          d="m24 11.9c0 6.4-5.2 11.7-11.6 11.7-6.51 0-11.8-5.3-11.8-11.7 0.05-6.48 5.29-11.7 11.8-11.7 6.4-0.022 11.6 5.22 11.6 11.7z"
+        />
+        <ellipse
+          id="Oval"
+          rx="5.85"
+          ry="5.85"
+          cy="11.9"
+          cx="12.4"
+          fill="#664E27"
+        />
+      </g>
+    </g>
+  </g>
+)
+
+export const Sunglasses = () => (
+  <g id="sunglasses" transform="translate(304 32)">
+    <g id="Group">
+      <path
+        id="Shape"
+        fill="#FFDD67"
+        d="m39 0c21.5 0 39 17.5 39 39s-17.5 39-39 39-39-17.5-39-39 17.5-39 39-39"
+      />
+      <path
+        id="Shape"
+        fill="#494949"
+        d="m44 24c-2.9 1.4-7.1 1.4-10 0-3.1-1.6-6.8-2.6-11.3-2.9-4.3-0.4-13.6-0.4-18.2 1.2-0.52 0.2-1.04 0.4-1.55 0.7-0.28 0.1-0.34 0.2-0.34 0.8v0.7c0 1.3-0.16 0.8 0.76 1.3 1.8 1 2.82 3.8 3.36 7.5 0.78 5.5 3.47 8.9 7.87 10.6 4 1.5 8.5 1.5 12.6-0.2 2.2-0.8 4.1-2.2 5.6-4.5 2.7-3.9 1.9-6.4 3.3-9.8 1.2-2.9 4.6-2.9 5.8 0 1.4 3.4 0.6 5.9 3.3 9.8 1.5 2.3 3.4 3.7 5.6 4.5 4.1 1.7 8.6 1.7 12.6 0.2 4.4-1.7 7.1-5.1 7.9-10.6 0.5-3.7 1.5-6.5 3.3-7.5 0.9-0.5 0.8 0 0.8-1.3v-0.7c0-0.6-0.1-0.7-0.4-0.8-0.5-0.3-1-0.5-1.5-0.7-4.6-1.6-13.9-1.6-18.2-1.2-4.5 0.3-8.2 1.3-11.3 2.9"
+      />
+      <path
+        id="Shape"
+        fill="#664E27"
+        d="m55.4 52.4c-10.6 7.3-22.3 7.3-32.8 0-1.2-0.9-2.4 0.6-1.5 2 3.2 5.3 9.6 10 17.9 10s14.7-4.7 17.9-10c0.9-1.4-0.3-2.9-1.5-2z"
+      />
+    </g>
+  </g>
+)
+
+export const Smiling = () => (
+  <g
+    id="haha"
+    className="single-emoji-logo emoji-visible"
+    transform="translate(304 32)"
+  >
+    <g id="Group">
+      <path
+        id="Oval"
+        fill="#FFDD67"
+        d="m39 78c21.5 0 39-17.5 39-39s-17.5-39-39-39-39 17.5-39 39 17.5 39 39 39z"
+      />
+      <g id="Shape" fill="#664E27" transform="translate(11.7 20.5)">
+        <path d="m52.9 2.09c0.3 0.15 0.4 0.47 0.4 0.79-0.1 0.32-0.3 0.57-0.6 0.63-3.5 0.52-7.3 1.12-10.8 3.07 5.2 0.87 9.4 3.52 11.7 6.32 0.5 0.6-0.1 1.4-0.7 1.2-6.2-2.3-12.6-3.5-20.6-2.6-0.6 0-1.2-0.3-1-0.9 2.1-9.39 14.2-12.9 21.6-8.51zm-51.2 0c-0.29 0.15-0.45 0.47-0.4 0.79s0.3 0.57 0.62 0.63c3.5 0.52 7.21 1.12 10.8 3.07-5.35 0.87-9.55 3.52-11.8 6.32-0.538 0.6 0.11 1.4 0.68 1.2 6.2-2.3 12.6-3.5 20.6-2.6 0.6 0 1.2-0.3 1-0.9-2.1-9.39-14.2-12.9-21.6-8.51h0.03z" />
+      </g>
+      <path
+        id="Shape"
+        fill="#664E27"
+        d="m62 42.2c-0.5-0.7-1.5-0.6-2.5-0.6h-41c-1 0-2-0.1-2.5 0.6-5.1 6.4 0.9 25.4 23 25.4s28.1-19 23-25.4z"
+      />
+      <path
+        id="Shape"
+        fill="#4C3526"
+        d="m41.4 51.7c-0.8-0.1-1.9 0.6-1.5 2.5 0.2 0.9 1.6 2.1 1.6 3.6 0 3.1-5 3.1-5 0 0-1.5 1.4-2.7 1.6-3.6 0.4-1.9-0.7-2.6-1.5-2.5-2 0-5.4 2.2-5.4 5.9 0 4.2 3.5 7.6 7.8 7.6s7.8-3.4 7.8-7.6c0-3.7-3.4-5.9-5.4-5.9z"
+      />
+      <path
+        id="Shape"
+        fill="#FF717F"
+        d="m29 63.3c2.9 1.2 6.2 1.9 10 1.9s7.1-0.7 10-1.9c-2.8-1.4-6.1-2.2-10-2.2s-7.2 0.8-10 2.2z"
+      />
+      <path
+        id="Shape"
+        fill="#fff"
+        d="m58.4 44.2h-38.8c-2.7 0-2.7 5.2-0.1 5.2h39c2.6 0 2.6-5.2-0.1-5.2z"
+      />
+    </g>
+  </g>
+)
+
+export const Loved = () => (
+  <g id="loved" transform="translate(304 32)">
+    <g id="Group">
+      <path
+        id="Shape"
+        fill="#FFDD67"
+        d="m78 39c0 21.5-17.5 39-39 39s-39-17.5-39-39 17.5-39 39-39 39 17.5 39 39z"
+      />
+      <path
+        id="Shape"
+        fill="#F46767"
+        d="m77.8 14.6c-0.6-3.5-2.6-6.37-5.8-7.23-3.4-0.95-6.6 0.41-9.7 3.53-1.7-4.74-4.3-8.24-8.4-10-4.3-1.89-8.4-0.645-11 2.64-2.7 3.42-3.8 8.66-0.9 15.6 2.7 6.5 14.9 19.5 15.2 19.9 0.5-0.3 14-8.7 17.3-12.9 3.2-4 3.9-8.1 3.3-11.5zm-42.7-11.1c-2.6-3.28-6.7-4.53-11-2.68-4.1 1.8-6.7 5.3-8.4 10-3.1-3.12-6.25-4.48-9.7-3.53-3.16 0.86-5.2 3.73-5.8 7.23-0.599 3.4 0.072 7.5 3.31 11.5 3.31 4.2 16.8 12.6 17.3 12.9 0.3-0.4 12.5-13.4 15.2-19.9 2.9-6.9 1.8-12.1-0.9-15.6v0.04z"
+      />
+      <path
+        id="Shape"
+        fill="#664E27"
+        d="m61.1 46.9c0-1.1-0.6-2.4-2.4-2.7-4.5-0.9-11.1-1.8-19.7-1.8s-15.2 0.9-19.7 1.8c-1.8 0.3-2.4 1.6-2.4 2.7 0 9.4 7.3 18.9 22.1 18.9s22.1-9.5 22.1-18.9z"
+      />
+      <path
+        id="Shape"
+        fill="#fff"
+        d="m55.5 47.2c-2.9-0.5-8.9-1.3-16.5-1.3s-13.6 0.8-16.5 1.3c-1.7 0.3-1.8 0.9-1.7 1.9 0.1 0.6 0.2 1.3 0.4 2 0.2 0.9 0.3 1.2 1.6 1.1 2.5-0.3 29.9-0.3 32.4 0 1.3 0.1 1.4-0.2 1.6-1.1 0.2-0.7 0.3-1.4 0.4-2 0.1-1 0-1.6-1.7-1.9z"
+      />
+    </g>
+  </g>
+)
+
+export const Joy = () => (
+  <g id="joy" transform="translate(304 32)">
+    <g id="Group">
+      <circle id="Oval" cy={39} cx={39} r={39} fill="#FFDD67" />
+      <path
+        id="Shape"
+        fill="#664E27"
+        d="m62 42.2c-0.5-0.7-1.5-0.6-2.5-0.6h-41c-1 0-2-0.1-2.5 0.6-5.1 6.4 0.9 25.4 23 25.4s28.1-19 23-25.4z"
+      />
+      <path
+        id="Shape"
+        fill="#4C3526"
+        d="m41.4 51.7c-0.8-0.1-1.9 0.6-1.5 2.5 0.2 0.9 1.6 2.1 1.6 3.6 0 3.1-5 3.1-5 0 0-1.5 1.4-2.7 1.6-3.6 0.4-1.9-0.7-2.6-1.5-2.5-2 0-5.4 2.2-5.4 5.9 0 4.2 3.5 7.6 7.8 7.6s7.8-3.4 7.8-7.6c0-3.7-3.4-5.9-5.4-5.9z"
+      />
+      <path
+        id="Shape"
+        fill="#FF717F"
+        d="m29 63.3c2.9 1.2 6.2 1.9 10 1.9s7.1-0.7 10-1.9c-2.8-1.4-6.1-2.2-10-2.2s-7.2 0.8-10 2.2z"
+      />
+      <path
+        id="Shape"
+        fill="#fff"
+        d="m58.4 44.2h-38.8c-2.7 0-2.7 5.2-0.1 5.2h39c2.6 0 2.6-5.2-0.1-5.2z"
+      />
+      <g id="Shape" fill="#65B1EF" transform="translate(0 37.7)">
+        <path d="m74.7 7.64c9.5 9.96-3.4 23.6-12.9 13.6-7-7.3-7.3-21.2-7.3-21.2 0 0.013 13.2 0.347 20.2 7.64zm-58.5 13.6c-9.46 10-22.4-3.6-12.9-13.6 7-7.25 20.2-7.59 20.2-7.59 0 0.003-0.3 13.9-7.3 21.2z" />
+      </g>
+      <g id="Shape" fill="#664E27" transform="translate(14.3 24.7)">
+        <path d="m20.2 9.97c-2.4-6.64-6.1-9.97-9.7-9.97-3.66 0-7.3 3.33-9.71 9.97-0.243 0.63 1 1.83 1.63 1.23 2.34-2.48 5.14-3.47 8.08-3.47 2.9 0 5.7 0.99 8.1 3.47 0.6 0.6 1.8-0.6 1.6-1.23zm28.4 0c-2.4-6.64-6-9.97-9.7-9.97-3.6 0-7.3 3.33-9.7 9.97-0.2 0.63 1 1.83 1.6 1.23 2.4-2.48 5.2-3.47 8.1-3.47s5.7 0.99 8.1 3.47c0.6 0.6 1.9-0.6 1.6-1.23z" />
+      </g>
+    </g>
+  </g>
+)
+
+const LOGO_STATUSES: Object = {
+  JOY: 'joy',
+  LOVED: 'loved',
+  SEXY: 'sexy',
+  SMILING: 'smiling',
+  SUNGLASSES: 'sunglasses',
+  TONGUE: 'tongue'
+}
+
+export default LOGO_STATUSES

src/components/Layout/Navigation/index.js

@@ -0,0 +1,59 @@
+// @flow
+import React from 'react'
+import Link from 'next/link'
+
+const Navigation = () => (
+  <nav className="nav row middle-xs">
+    <input className="c-hamburger__input" id="hamburger-menu" type="checkbox" />
+    <label className="c-hamburger c-hamburger--htx" htmlFor="hamburger-menu">
+      <span />
+    </label>
+    <div className="modal">
+      <div className="modal-content">
+        <ul className="navigation">
+          <li className="item">
+            <Link href="/">
+              <a
+                onMouseDown={() =>
+                  window.ga('send', 'event', 'Menu', 'Gitmoji')
+                }
+              >
+                Home
+              </a>
+            </Link>
+          </li>
+          <li className="item">
+            <Link href="/about">
+              <a
+                onMouseDown={() => window.ga('send', 'event', 'Menu', 'About')}
+              >
+                About
+              </a>
+            </Link>
+          </li>
+          <li className="item">
+            <Link href="/contributors">
+              <a
+                onMouseDown={() =>
+                  window.ga('send', 'event', 'Menu', 'Contributors')
+                }
+              >
+                Contributors
+              </a>
+            </Link>
+          </li>
+          <li className="item">
+            <a
+              href="https://github.com/carloscuesta/gitmoji"
+              onMouseDown={() => window.ga('send', 'event', 'Menu', 'GitHub')}
+            >
+              GitHub
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+)
+
+export default Navigation

src/components/Layout/__tests__/__snapshots__/layout.spec.js.snap

@@ -0,0 +1,612 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout Logo getIconByStatus should render component for status joy 1`] = `<Joy />`;
+
+exports[`Layout Logo getIconByStatus should render component for status loved 1`] = `<Loved />`;
+
+exports[`Layout Logo getIconByStatus should render component for status sexy 1`] = `<Sexy />`;
+
+exports[`Layout Logo getIconByStatus should render component for status smiling 1`] = `<Smiling />`;
+
+exports[`Layout Logo getIconByStatus should render component for status sunglasses 1`] = `<Sunglasses />`;
+
+exports[`Layout Logo getIconByStatus should render component for status tongue 1`] = `<Tongue />`;
+
+exports[`Layout should render the component with social buttons 1`] = `
+Array [
+  <svg
+    height={0}
+    style={
+      Object {
+        "height": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+    version="1.1"
+    width={0}
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <symbol
+        id="icon-heart"
+        viewBox="0 0 64 64"
+      >
+        <title>
+          heart
+        </title>
+        <path
+          className="heart"
+          d="m61.1 18.2c-6.4-17-27.2-9.4-29.1-.9-2.6-9-22.9-15.7-29.1.9-6.9 18.5 26.7 35.1 29.1 37.8 2.4-2.2 36-19.6 29.1-37.8"
+          fill="#ff5a79"
+        />
+      </symbol>
+      <symbol
+        id="icon-star"
+        viewBox="0 0 64 64"
+      >
+        <title>
+          star
+        </title>
+        <path
+          className="twitter"
+          d="M62,25.2H39.1L32,3l-7.1,22.2H2l18.5,13.7l-7,22.1L32,47.3L50.5,61l-7.1-22.2L62,25.2z"
+          fill="#FFDD67"
+        />
+      </symbol>
+      <symbol
+        id="icon-twitter"
+        viewBox="0 0 64 64"
+      >
+        <title>
+          twitter
+        </title>
+        <g
+          fill="#42ade2"
+        >
+          <path
+            d="m59.8 24.3c0 0 1.1-6.2-3.5-3.4 0 0-.4-6.3-4.3-1.9 0 0-2.1-3.9-4.4-.3-3.1 4.8-5.2 12.4-3.2 25l3.8-2.5c2.7-7.9 12.4-8.8 13.7-13.1.9-3-2.1-3.8-2.1-3.8"
+          />
+          <path
+            d="m22.1 17.6l-9.9 3.6c2.2-12 16.6-11.2 16.6-11.2s-6.8 3.2-6.7 7.6"
+          />
+          <path
+            d="m23.7 19.8l-10.5 1.4c4.8-11.2 18.7-7.3 18.7-7.3s-7.3 1.6-8.2 5.9"
+          />
+        </g>
+        <g
+          fill="#ffd93b"
+        >
+          <path
+            d="m2 29l5.4-1.4v3.6c0-.1-3.3-.6-5.4-2.2"
+          />
+          <path
+            d="M7.4,27.5L2,24.8c3.6-2.8,7.7-1.9,7.7-1.9L7.4,27.5z"
+          />
+        </g>
+        <g
+          fill="#e08828"
+        >
+          <path
+            d="m33.8 53h-2.1v7.9c-.3.1-2.1-.1-2.9-.1-1.8 0-3.3 1.3-3.3 1.3h8.3v-9.1"
+          />
+          <path
+            d="m25 53h-2.1v7.9c-.3.1-2.1-.1-2.9-.1-1.8 0-3.3 1.3-3.3 1.3h8.3v-9.1"
+          />
+          <path
+            d="m54 36.2c3.9 0-4.1 17.5-23.3 17.5-13 0-23.9-5.2-23.9-21.5 0-10.1 6.4-18.3 19.5-15 13.3 3.5 6.5 19 27.7 19"
+            fill="#42ade2"
+          />
+          <path
+            d="m37.6 51.7c-15.6 0-14-12-27.9-11.2 5.1 15.8 27.9 11.2 27.9 11.2"
+            fill="#fff"
+          />
+          <path
+            d="m39.1 29.2c-10-9.8-20.2 6.2-7.9 12.6 12.1 6.2 20.4-4.8 20.4-4.8s-6.1-1.5-12.5-7.8"
+            fill="#297b9d"
+          />
+        </g>
+        <circle
+          cx="15.1"
+          cy="24.9"
+          fill="#3e4347"
+          r="2.5"
+        />
+      </symbol>
+    </defs>
+  </svg>,
+  <nav
+    className="nav row middle-xs"
+  >
+    <input
+      className="c-hamburger__input"
+      id="hamburger-menu"
+      type="checkbox"
+    />
+    <label
+      className="c-hamburger c-hamburger--htx"
+      htmlFor="hamburger-menu"
+    >
+      <span />
+    </label>
+    <div
+      className="modal"
+    >
+      <div
+        className="modal-content"
+      >
+        <ul
+          className="navigation"
+        >
+          <li
+            className="item"
+          >
+            <a
+              href="/"
+              onClick={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+            >
+              Home
+            </a>
+          </li>
+          <li
+            className="item"
+          >
+            <a
+              href="/about"
+              onClick={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+            >
+              About
+            </a>
+          </li>
+          <li
+            className="item"
+          >
+            <a
+              href="/contributors"
+              onClick={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+            >
+              Contributors
+            </a>
+          </li>
+          <li
+            className="item"
+          >
+            <a
+              href="https://github.com/carloscuesta/gitmoji"
+              onMouseDown={[Function]}
+            >
+              GitHub
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>,
+  <header
+    className="header"
+  >
+    <svg
+      className="gitmoji-logo"
+      height="137px"
+      version="1.1"
+      viewBox="0 0 457 137"
+      width="457px"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <title>
+        gitmoji
+      </title>
+      <g
+        fill="none"
+        fillRule="evenodd"
+        id="gitmoji"
+      >
+        <g
+          id="Logo"
+          transform="translate(-270 -430)"
+        >
+          <g
+            id="gitmoji"
+            transform="translate(270 430)"
+          >
+            <path
+              d="m17.5 106c0.6 4 2.4 7 5.3 10 2.9 2 6.6 4 11.2 4 6.1 0 10.7-2 14-5s4.9-8 4.9-15.1v-5.1c-1.5 2.3-3.8 4.4-7.1 6.2-3.2 2-7.5 3-12.6 3-4.7 0-9.1-1-13.1-3-4.1-1.5-7.6-3.9-10.5-7-2.91-3-5.22-6.7-6.9-10.8-1.68-4.2-2.52-8.8-2.52-13.8 0.004-4.7 0.82-9.1 2.45-13.3s3.89-7.9 6.77-11c2.9-3.2 6.3-5.7 10.4-7.5 4-1.8 8.5-2.7 13.4-2.7 5.6 0 10.1 1 13.4 3 3.2 2 5.5 4.2 6.7 6.6v-8.3h18.5v63.2c0 4.6-0.7 9.6-2.1 13.6-1.4 5-3.6 9-6.6 12-3 4-6.8 6-11.5 8s-10.4 4-17 4c-4.9 0-9.3-1-13.3-3-4-1-7.5-3-10.5-5-2.94-3-5.34-5-7.16-8-1.82-4-2.98-7-3.46-10l17.3-5zm19-18.6c4.9 0 8.9-1.6 12-4.9 3.1-3.2 4.7-7.6 4.7-13.1s-1.7-9.8-4.9-13c-3.3-3.2-7.2-4.8-11.8-4.8-2.4 0-4.7 0.4-6.7 1.2-2.1 0.8-3.9 2-5.4 3.6-1.6 1.6-2.8 3.5-3.6 5.7-0.9 2.2-1.3 4.6-1.3 7.3 0 5.6 1.6 10 4.7 13.2 3.2 3.2 7.3 4.8 12.3 4.8zm54.7 19.6v-70.8h18.8v70.8h-18.8zm-2.3-94c0-3.39 1.1-6.22 3.4-8.53 2.3-2.3 5.1-3.45 8.7-3.45 3 0 6 1.15 8 3.45 2 2.31 4 5.14 4 8.53 0 3.1-2 5.9-4 8.2s-5 3.4-8 3.4c-3.6 0-6.4-1.1-8.7-3.4s-3.4-5.1-3.4-8.2zm65.1 23.2h15v16.9h-15v29.7c0 3.1 1 5.2 2 6.4 2 1.2 4 1.8 7 1.8 1 0 2 0 3-0.1s2-0.3 3-0.5v15.6c-1 1-3 1-4 1-2 1-4 1-7 1-7 0-13-2-17-6-4-3.6-6-9-6-15.9v-33h-12v-16.9h3c4 0 7-1.1 8-3.3 2-2.1 3-4.8 3-8v-9.9h17v21.2zm30 70.8v-70.8h18v8.6c1-1.7 2-3.3 4-4.6 1-1.4 3-2.5 5-3.3 2-0.9 4-1.6 6-2 2-0.5 4-0.8 6-0.8 5 0 9 1 13 3.1 3 2 6 4.9 8 8.7 3-4.3 6-7.3 10-9.1s8-2.7 12-2.7 7 0.5 10 1.5c3 1.1 6 2.7 8 4.9 3 2.2 4 5 6 8.4 1 3.4 2 7.5 2 12.2v45.9h-19v-42c0-3.9 0-7.1-2-9.6-2-2.6-6-3.8-10-3.8s-7 1.3-10 4.1c-2 2.7-3 6-3 9.8v41.5h-19v-42c0-3.9-1-7.1-3-9.6-2-2.6-5-3.8-10-3.8-4 0-7 1.3-9 4-3 2.7-4 6-4 9.9v41.5h-19zm159-15.3c3 0 5-0.4 7-1.3 2-0.8 4-2.1 6-3.8 1-1.7 3-3.7 4-6.2s1-5.5 1-8.8c0-3.4 0-6.3-1-8.8s-3-4.6-4-6.3c-2-1.7-4-2.9-6-3.8s-4-1.3-7-1.3c-2 0-4 0.4-6 1.3-3 0.9-5 2.1-6 3.8-2 1.7-3 3.8-4 6.3s-2 5.4-2 8.8c0 3.3 1 6.3 2 8.8s2 4.5 4 6.2c1 1.7 3 3 6 3.8 2 0.9 4 1.3 6 1.3zm0-57.7c6 0 11 0.9 15 2.8 5 1.9 9 4.5 12 7.8s6 7.2 8 11.9c2 4.6 2 9.6 2 15.1 0 5.4 0 10.5-2 15-2 4.6-5 8.5-8 11.9-3 3.5-7 5.5-12 7.5-4 2-9 3-15 3-5 0-10-1-14-3-5-2-9-4-12-7.5-4-3.4-6-7.3-8-11.9-2-4.5-3-9.6-3-15 0-5.5 1-10.5 3-15.1 2-4.7 4-8.6 8-11.9 3-3.3 7-5.9 12-7.8 4-1.9 9-2.8 14-2.8zm53 2.2h19v76.8c0 4-1 7-2 10-1 2-2 5-4 7s-4 4-7 5-6 2-9 2-6-1-8-1c-2-1-3-1-3-1v-16h2c1 1 2 1 4 1 3 0 5-1 6-3 1-1 2-3 2-6v-74.8zm-3-23.4c0-3.34 1-6.17 4-8.47 2-2.31 5-3.46 8-3.46 3 0.002 6 1.15 9 3.46 2 2.3 3 5.13 3 8.47 0 3.3-1 6-3 8.3-3 2.3-6 3.4-9 3.4s-6-1.1-8-3.4c-3-2.3-4-5-4-8.3zm42 94.2v-70.8h19v70.8h-19zm-2-94c0-3.39 1-6.22 3-8.53 3-2.3 5-3.45 9-3.45 3 0 6 1.15 8 3.45 2 2.31 4 5.14 4 8.53 0 3.1-2 5.9-4 8.2s-5 3.4-8 3.4c-4 0-6-1.1-9-3.4-2-2.3-3-5.1-3-8.2z"
+              fill="#000"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+    <h2>
+      An emoji guide for your commit messages
+    </h2>
+    <div
+      className="header-buttons"
+    >
+      <a
+        className="btn btn-pink"
+      >
+        <svg
+          className="icon icon-star"
+        >
+          <use
+            xlinkHref="#icon-star"
+          />
+        </svg>
+        GitHub
+      </a>
+      <a
+        className="btn btn-pink"
+        target="_blank"
+      >
+        <svg
+          className="icon icon-twitter"
+        >
+          <use
+            xlinkHref="#icon-twitter"
+          />
+        </svg>
+        Tweet
+      </a>
+    </div>
+  </header>,
+  <main
+    className="wrap"
+  >
+    <p>
+      Some children
+    </p>
+  </main>,
+  <footer
+    className="footer"
+  >
+    <div
+      className="wrap"
+    >
+      <div
+        className="row middle-xs"
+      >
+        <div
+          className="col-sm-6 made-with-love"
+        >
+          <h3>
+            Made with 
+            <svg
+              className="icon icon-heart"
+            >
+              <use
+                xlinkHref="#icon-heart"
+              />
+            </svg>
+             by
+             
+            <a
+              href="https://carloscuesta.me"
+            >
+              Carlos Cuesta
+            </a>
+          </h3>
+        </div>
+        <div
+          className="col-sm-6 footer-nav"
+        >
+          <nav>
+            <a
+              href="/about"
+              onClick={[Function]}
+              onMouseEnter={[Function]}
+            >
+              About
+            </a>
+            <a
+              href="/contributors"
+              onClick={[Function]}
+              onMouseEnter={[Function]}
+            >
+              Contributors
+            </a>
+            <a
+              href="https://github.com/carloscuesta/gitmoji"
+            >
+              GitHub
+            </a>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </footer>,
+]
+`;
+
+exports[`Layout should render the component without social buttons 1`] = `
+Array [
+  <svg
+    height={0}
+    style={
+      Object {
+        "height": 0,
+        "position": "absolute",
+        "width": 0,
+      }
+    }
+    version="1.1"
+    width={0}
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <symbol
+        id="icon-heart"
+        viewBox="0 0 64 64"
+      >
+        <title>
+          heart
+        </title>
+        <path
+          className="heart"
+          d="m61.1 18.2c-6.4-17-27.2-9.4-29.1-.9-2.6-9-22.9-15.7-29.1.9-6.9 18.5 26.7 35.1 29.1 37.8 2.4-2.2 36-19.6 29.1-37.8"
+          fill="#ff5a79"
+        />
+      </symbol>
+      <symbol
+        id="icon-star"
+        viewBox="0 0 64 64"
+      >
+        <title>
+          star
+        </title>
+        <path
+          className="twitter"
+          d="M62,25.2H39.1L32,3l-7.1,22.2H2l18.5,13.7l-7,22.1L32,47.3L50.5,61l-7.1-22.2L62,25.2z"
+          fill="#FFDD67"
+        />
+      </symbol>
+      <symbol
+        id="icon-twitter"
+        viewBox="0 0 64 64"
+      >
+        <title>
+          twitter
+        </title>
+        <g
+          fill="#42ade2"
+        >
+          <path
+            d="m59.8 24.3c0 0 1.1-6.2-3.5-3.4 0 0-.4-6.3-4.3-1.9 0 0-2.1-3.9-4.4-.3-3.1 4.8-5.2 12.4-3.2 25l3.8-2.5c2.7-7.9 12.4-8.8 13.7-13.1.9-3-2.1-3.8-2.1-3.8"
+          />
+          <path
+            d="m22.1 17.6l-9.9 3.6c2.2-12 16.6-11.2 16.6-11.2s-6.8 3.2-6.7 7.6"
+          />
+          <path
+            d="m23.7 19.8l-10.5 1.4c4.8-11.2 18.7-7.3 18.7-7.3s-7.3 1.6-8.2 5.9"
+          />
+        </g>
+        <g
+          fill="#ffd93b"
+        >
+          <path
+            d="m2 29l5.4-1.4v3.6c0-.1-3.3-.6-5.4-2.2"
+          />
+          <path
+            d="M7.4,27.5L2,24.8c3.6-2.8,7.7-1.9,7.7-1.9L7.4,27.5z"
+          />
+        </g>
+        <g
+          fill="#e08828"
+        >
+          <path
+            d="m33.8 53h-2.1v7.9c-.3.1-2.1-.1-2.9-.1-1.8 0-3.3 1.3-3.3 1.3h8.3v-9.1"
+          />
+          <path
+            d="m25 53h-2.1v7.9c-.3.1-2.1-.1-2.9-.1-1.8 0-3.3 1.3-3.3 1.3h8.3v-9.1"
+          />
+          <path
+            d="m54 36.2c3.9 0-4.1 17.5-23.3 17.5-13 0-23.9-5.2-23.9-21.5 0-10.1 6.4-18.3 19.5-15 13.3 3.5 6.5 19 27.7 19"
+            fill="#42ade2"
+          />
+          <path
+            d="m37.6 51.7c-15.6 0-14-12-27.9-11.2 5.1 15.8 27.9 11.2 27.9 11.2"
+            fill="#fff"
+          />
+          <path
+            d="m39.1 29.2c-10-9.8-20.2 6.2-7.9 12.6 12.1 6.2 20.4-4.8 20.4-4.8s-6.1-1.5-12.5-7.8"
+            fill="#297b9d"
+          />
+        </g>
+        <circle
+          cx="15.1"
+          cy="24.9"
+          fill="#3e4347"
+          r="2.5"
+        />
+      </symbol>
+    </defs>
+  </svg>,
+  <nav
+    className="nav row middle-xs"
+  >
+    <input
+      className="c-hamburger__input"
+      id="hamburger-menu"
+      type="checkbox"
+    />
+    <label
+      className="c-hamburger c-hamburger--htx"
+      htmlFor="hamburger-menu"
+    >
+      <span />
+    </label>
+    <div
+      className="modal"
+    >
+      <div
+        className="modal-content"
+      >
+        <ul
+          className="navigation"
+        >
+          <li
+            className="item"
+          >
+            <a
+              href="/"
+              onClick={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+            >
+              Home
+            </a>
+          </li>
+          <li
+            className="item"
+          >
+            <a
+              href="/about"
+              onClick={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+            >
+              About
+            </a>
+          </li>
+          <li
+            className="item"
+          >
+            <a
+              href="/contributors"
+              onClick={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+            >
+              Contributors
+            </a>
+          </li>
+          <li
+            className="item"
+          >
+            <a
+              href="https://github.com/carloscuesta/gitmoji"
+              onMouseDown={[Function]}
+            >
+              GitHub
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>,
+  <header
+    className="header"
+  >
+    <svg
+      className="gitmoji-logo"
+      height="137px"
+      version="1.1"
+      viewBox="0 0 457 137"
+      width="457px"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <title>
+        gitmoji
+      </title>
+      <g
+        fill="none"
+        fillRule="evenodd"
+        id="gitmoji"
+      >
+        <g
+          id="Logo"
+          transform="translate(-270 -430)"
+        >
+          <g
+            id="gitmoji"
+            transform="translate(270 430)"
+          >
+            <path
+              d="m17.5 106c0.6 4 2.4 7 5.3 10 2.9 2 6.6 4 11.2 4 6.1 0 10.7-2 14-5s4.9-8 4.9-15.1v-5.1c-1.5 2.3-3.8 4.4-7.1 6.2-3.2 2-7.5 3-12.6 3-4.7 0-9.1-1-13.1-3-4.1-1.5-7.6-3.9-10.5-7-2.91-3-5.22-6.7-6.9-10.8-1.68-4.2-2.52-8.8-2.52-13.8 0.004-4.7 0.82-9.1 2.45-13.3s3.89-7.9 6.77-11c2.9-3.2 6.3-5.7 10.4-7.5 4-1.8 8.5-2.7 13.4-2.7 5.6 0 10.1 1 13.4 3 3.2 2 5.5 4.2 6.7 6.6v-8.3h18.5v63.2c0 4.6-0.7 9.6-2.1 13.6-1.4 5-3.6 9-6.6 12-3 4-6.8 6-11.5 8s-10.4 4-17 4c-4.9 0-9.3-1-13.3-3-4-1-7.5-3-10.5-5-2.94-3-5.34-5-7.16-8-1.82-4-2.98-7-3.46-10l17.3-5zm19-18.6c4.9 0 8.9-1.6 12-4.9 3.1-3.2 4.7-7.6 4.7-13.1s-1.7-9.8-4.9-13c-3.3-3.2-7.2-4.8-11.8-4.8-2.4 0-4.7 0.4-6.7 1.2-2.1 0.8-3.9 2-5.4 3.6-1.6 1.6-2.8 3.5-3.6 5.7-0.9 2.2-1.3 4.6-1.3 7.3 0 5.6 1.6 10 4.7 13.2 3.2 3.2 7.3 4.8 12.3 4.8zm54.7 19.6v-70.8h18.8v70.8h-18.8zm-2.3-94c0-3.39 1.1-6.22 3.4-8.53 2.3-2.3 5.1-3.45 8.7-3.45 3 0 6 1.15 8 3.45 2 2.31 4 5.14 4 8.53 0 3.1-2 5.9-4 8.2s-5 3.4-8 3.4c-3.6 0-6.4-1.1-8.7-3.4s-3.4-5.1-3.4-8.2zm65.1 23.2h15v16.9h-15v29.7c0 3.1 1 5.2 2 6.4 2 1.2 4 1.8 7 1.8 1 0 2 0 3-0.1s2-0.3 3-0.5v15.6c-1 1-3 1-4 1-2 1-4 1-7 1-7 0-13-2-17-6-4-3.6-6-9-6-15.9v-33h-12v-16.9h3c4 0 7-1.1 8-3.3 2-2.1 3-4.8 3-8v-9.9h17v21.2zm30 70.8v-70.8h18v8.6c1-1.7 2-3.3 4-4.6 1-1.4 3-2.5 5-3.3 2-0.9 4-1.6 6-2 2-0.5 4-0.8 6-0.8 5 0 9 1 13 3.1 3 2 6 4.9 8 8.7 3-4.3 6-7.3 10-9.1s8-2.7 12-2.7 7 0.5 10 1.5c3 1.1 6 2.7 8 4.9 3 2.2 4 5 6 8.4 1 3.4 2 7.5 2 12.2v45.9h-19v-42c0-3.9 0-7.1-2-9.6-2-2.6-6-3.8-10-3.8s-7 1.3-10 4.1c-2 2.7-3 6-3 9.8v41.5h-19v-42c0-3.9-1-7.1-3-9.6-2-2.6-5-3.8-10-3.8-4 0-7 1.3-9 4-3 2.7-4 6-4 9.9v41.5h-19zm159-15.3c3 0 5-0.4 7-1.3 2-0.8 4-2.1 6-3.8 1-1.7 3-3.7 4-6.2s1-5.5 1-8.8c0-3.4 0-6.3-1-8.8s-3-4.6-4-6.3c-2-1.7-4-2.9-6-3.8s-4-1.3-7-1.3c-2 0-4 0.4-6 1.3-3 0.9-5 2.1-6 3.8-2 1.7-3 3.8-4 6.3s-2 5.4-2 8.8c0 3.3 1 6.3 2 8.8s2 4.5 4 6.2c1 1.7 3 3 6 3.8 2 0.9 4 1.3 6 1.3zm0-57.7c6 0 11 0.9 15 2.8 5 1.9 9 4.5 12 7.8s6 7.2 8 11.9c2 4.6 2 9.6 2 15.1 0 5.4 0 10.5-2 15-2 4.6-5 8.5-8 11.9-3 3.5-7 5.5-12 7.5-4 2-9 3-15 3-5 0-10-1-14-3-5-2-9-4-12-7.5-4-3.4-6-7.3-8-11.9-2-4.5-3-9.6-3-15 0-5.5 1-10.5 3-15.1 2-4.7 4-8.6 8-11.9 3-3.3 7-5.9 12-7.8 4-1.9 9-2.8 14-2.8zm53 2.2h19v76.8c0 4-1 7-2 10-1 2-2 5-4 7s-4 4-7 5-6 2-9 2-6-1-8-1c-2-1-3-1-3-1v-16h2c1 1 2 1 4 1 3 0 5-1 6-3 1-1 2-3 2-6v-74.8zm-3-23.4c0-3.34 1-6.17 4-8.47 2-2.31 5-3.46 8-3.46 3 0.002 6 1.15 9 3.46 2 2.3 3 5.13 3 8.47 0 3.3-1 6-3 8.3-3 2.3-6 3.4-9 3.4s-6-1.1-8-3.4c-3-2.3-4-5-4-8.3zm42 94.2v-70.8h19v70.8h-19zm-2-94c0-3.39 1-6.22 3-8.53 3-2.3 5-3.45 9-3.45 3 0 6 1.15 8 3.45 2 2.31 4 5.14 4 8.53 0 3.1-2 5.9-4 8.2s-5 3.4-8 3.4c-4 0-6-1.1-9-3.4-2-2.3-3-5.1-3-8.2z"
+              fill="#000"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+    <h2>
+      An emoji guide for your commit messages
+    </h2>
+  </header>,
+  <main
+    className="wrap"
+  >
+    <p>
+      Some children
+    </p>
+  </main>,
+  <footer
+    className="footer"
+  >
+    <div
+      className="wrap"
+    >
+      <div
+        className="row middle-xs"
+      >
+        <div
+          className="col-sm-6 made-with-love"
+        >
+          <h3>
+            Made with 
+            <svg
+              className="icon icon-heart"
+            >
+              <use
+                xlinkHref="#icon-heart"
+              />
+            </svg>
+             by
+             
+            <a
+              href="https://carloscuesta.me"
+            >
+              Carlos Cuesta
+            </a>
+          </h3>
+        </div>
+        <div
+          className="col-sm-6 footer-nav"
+        >
+          <nav>
+            <a
+              href="/about"
+              onClick={[Function]}
+              onMouseEnter={[Function]}
+            >
+              About
+            </a>
+            <a
+              href="/contributors"
+              onClick={[Function]}
+              onMouseEnter={[Function]}
+            >
+              Contributors
+            </a>
+            <a
+              href="https://github.com/carloscuesta/gitmoji"
+            >
+              GitHub
+            </a>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </footer>,
+]
+`;

src/components/Layout/__tests__/layout.spec.js

@@ -0,0 +1,42 @@
+import renderer from 'react-test-renderer'
+
+import Layout from '../index'
+import { getIconByStatus } from '../Logo'
+import LOGO_STATUSES from '../Logo/statuses'
+import * as stubs from './stubs'
+
+describe('Layout', () => {
+  beforeAll(() => {
+    Math.random = jest.fn().mockReturnValue(1)
+  })
+
+  it('should render the component with social buttons', () => {
+    const wrapper = renderer.create(
+      <Layout {...stubs.props}>
+        <p>Some children</p>
+      </Layout>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('should render the component without social buttons', () => {
+    const wrapper = renderer.create(
+      <Layout>
+        <p>Some children</p>
+      </Layout>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  describe('Logo', () => {
+    describe('getIconByStatus', () => {
+      const statuses = Object.values(LOGO_STATUSES).map((status) => status)
+
+      statuses.forEach((status) => {
+        it('should render component for status ' + status, () => {
+          expect(getIconByStatus(status)).toMatchSnapshot()
+        })
+      })
+    })
+  })
+})

src/components/Layout/__tests__/stubs.js

@@ -0,0 +1,3 @@
+export const props = {
+  headerWithSocialButtons: true
+}

src/components/Layout/index.js

@@ -0,0 +1,21 @@
+// @flow
+import * as React from 'react'
+
+import { IconDefinitions } from '../Icon'
+import Header from './Header'
+import Navigation from './Navigation'
+import Footer from './Footer'
+
+type Props = { headerWithSocialButtons: boolean, children: React.Node }
+
+const Layout = (props: Props) => (
+  <>
+    <IconDefinitions />
+    <Navigation />
+    <Header withHeadline withSocialButtons={props.headerWithSocialButtons} />
+    <main className="wrap">{props.children}</main>
+    <Footer />
+  </>
+)
+
+export default Layout

src/components/SEO/__tests__/__snapshots__/seo.spec.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button should render the component 1`] = `null`;
+
+exports[`Button should render the component with pageTitle and pageUrl 1`] = `null`;

src/components/SEO/__tests__/seo.spec.js

@@ -0,0 +1,16 @@
+import renderer from 'react-test-renderer'
+
+import SEO from '../index'
+import * as stubs from './stubs'
+
+describe('Button', () => {
+  it('should render the component with pageTitle and pageUrl', () => {
+    const wrapper = renderer.create(<SEO {...stubs.props} />)
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('should render the component', () => {
+    const wrapper = renderer.create(<SEO />)
+    expect(wrapper).toMatchSnapshot()
+  })
+})

src/components/SEO/__tests__/stubs.js

@@ -0,0 +1,4 @@
+export const props = {
+  pageUrl: '/about',
+  pageTitle: 'About'
+}

src/components/SEO/index.js

@@ -0,0 +1,127 @@
+// @flow
+import React from 'react'
+import Head from 'next/head'
+
+type Props = { pageTitle?: string, pageUrl: string }
+
+const SEO = (props: Props) => (
+  <Head>
+    <title>
+      {`gitmoji ${
+        props.pageTitle ? '| ' + props.pageTitle + ' |' : '|'
+      } An emoji guide for your commit messages`}
+    </title>
+    <link
+      rel="canonical"
+      href={`https://gitmoji.carloscuesta.me${props.pageUrl}`}
+    />
+    <meta name="author" content="Carlos Cuesta" />
+    <meta
+      name="description"
+      content="Gitmoji is an emoji guide for your commit messages. Aims to be a standarization cheatshee /t for using emojis on GitHub's commit messages."
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="gitmoji" />
+    <meta
+      name="twitter:description"
+      content="An emoji guide for your commit messages."
+    />
+    <meta
+      name="twitter:image"
+      content="https://gitmoji.carloscuesta.me/static/gitmoji.gif"
+    />
+    <meta name="twitter:creator" content="@crloscuesta" />
+    <meta name="twitter:url" content="https://gitmoji.carloscuesta.me" />
+    <meta property="og:title" content="gitmoji" />
+    <meta
+      name="og:description"
+      content="An emoji guide for your commit messages."
+    />
+    <meta
+      property="og:image"
+      content="https://gitmoji.carloscuesta.me/static/gitmoji.gif"
+    />
+    <meta name="og:url" content="https://gitmoji.carloscuesta.me" />
+    <meta name="robots" content="index, follow" />
+    <link
+      rel="apple-touch-icon"
+      sizes="57x57"
+      href="/static/apple-icon-57x57.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="60x60"
+      href="/static/apple-icon-60x60.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="72x72"
+      href="/static/apple-icon-72x72.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="76x76"
+      href="/static/apple-icon-76x76.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="/static/apple-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="/static/apple-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="/static/apple-icon-144x144.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="/static/apple-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/static/apple-icon-180x180.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="/static/android-icon-192x192.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/static/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="96x96"
+      href="/static/favicon-96x96.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/static/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/static/manifest.json" />
+    <meta name="msapplication-TileColor" content="#FFDD67" />
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
+    <meta name="theme-color" content="#FFDD67" />
+    <meta
+      name="google-site-verification"
+      content="78vmlhi_erc-UGybxcGwHyiUtf04wzYExTLa-4LoWio"
+    />
+  </Head>
+)
+
+export default SEO

src/data/contributors.json

@@ -1,542 +0,0 @@
-[
-  {
-    "login": "carloscuesta",
-    "id": 7629661,
-    "avatar_url": "https://avatars1.githubusercontent.com/u/7629661?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/carloscuesta",
-    "html_url": "https://github.com/carloscuesta",
-    "followers_url": "https://api.github.com/users/carloscuesta/followers",
-    "following_url": "https://api.github.com/users/carloscuesta/following{/other_user}",
-    "gists_url": "https://api.github.com/users/carloscuesta/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/carloscuesta/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/carloscuesta/subscriptions",
-    "organizations_url": "https://api.github.com/users/carloscuesta/orgs",
-    "repos_url": "https://api.github.com/users/carloscuesta/repos",
-    "events_url": "https://api.github.com/users/carloscuesta/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/carloscuesta/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 119
-  },
-  {
-    "login": "virzen",
-    "id": 13262428,
-    "avatar_url": "https://avatars1.githubusercontent.com/u/13262428?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/virzen",
-    "html_url": "https://github.com/virzen",
-    "followers_url": "https://api.github.com/users/virzen/followers",
-    "following_url": "https://api.github.com/users/virzen/following{/other_user}",
-    "gists_url": "https://api.github.com/users/virzen/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/virzen/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/virzen/subscriptions",
-    "organizations_url": "https://api.github.com/users/virzen/orgs",
-    "repos_url": "https://api.github.com/users/virzen/repos",
-    "events_url": "https://api.github.com/users/virzen/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/virzen/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 3
-  },
-  {
-    "login": "Spidersouris",
-    "id": 7102007,
-    "avatar_url": "https://avatars3.githubusercontent.com/u/7102007?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/Spidersouris",
-    "html_url": "https://github.com/Spidersouris",
-    "followers_url": "https://api.github.com/users/Spidersouris/followers",
-    "following_url": "https://api.github.com/users/Spidersouris/following{/other_user}",
-    "gists_url": "https://api.github.com/users/Spidersouris/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/Spidersouris/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/Spidersouris/subscriptions",
-    "organizations_url": "https://api.github.com/users/Spidersouris/orgs",
-    "repos_url": "https://api.github.com/users/Spidersouris/repos",
-    "events_url": "https://api.github.com/users/Spidersouris/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/Spidersouris/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 2
-  },
-  {
-    "login": "duivvv",
-    "id": 89046,
-    "avatar_url": "https://avatars3.githubusercontent.com/u/89046?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/duivvv",
-    "html_url": "https://github.com/duivvv",
-    "followers_url": "https://api.github.com/users/duivvv/followers",
-    "following_url": "https://api.github.com/users/duivvv/following{/other_user}",
-    "gists_url": "https://api.github.com/users/duivvv/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/duivvv/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/duivvv/subscriptions",
-    "organizations_url": "https://api.github.com/users/duivvv/orgs",
-    "repos_url": "https://api.github.com/users/duivvv/repos",
-    "events_url": "https://api.github.com/users/duivvv/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/duivvv/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 2
-  },
-  {
-    "login": "dasMulli",
-    "id": 6129250,
-    "avatar_url": "https://avatars1.githubusercontent.com/u/6129250?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/dasMulli",
-    "html_url": "https://github.com/dasMulli",
-    "followers_url": "https://api.github.com/users/dasMulli/followers",
-    "following_url": "https://api.github.com/users/dasMulli/following{/other_user}",
-    "gists_url": "https://api.github.com/users/dasMulli/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/dasMulli/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/dasMulli/subscriptions",
-    "organizations_url": "https://api.github.com/users/dasMulli/orgs",
-    "repos_url": "https://api.github.com/users/dasMulli/repos",
-    "events_url": "https://api.github.com/users/dasMulli/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/dasMulli/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 2
-  },
-  {
-    "login": "welcoMattic",
-    "id": 773875,
-    "avatar_url": "https://avatars3.githubusercontent.com/u/773875?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/welcoMattic",
-    "html_url": "https://github.com/welcoMattic",
-    "followers_url": "https://api.github.com/users/welcoMattic/followers",
-    "following_url": "https://api.github.com/users/welcoMattic/following{/other_user}",
-    "gists_url": "https://api.github.com/users/welcoMattic/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/welcoMattic/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/welcoMattic/subscriptions",
-    "organizations_url": "https://api.github.com/users/welcoMattic/orgs",
-    "repos_url": "https://api.github.com/users/welcoMattic/repos",
-    "events_url": "https://api.github.com/users/welcoMattic/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/welcoMattic/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 2
-  },
-  {
-    "login": "viktorstrate",
-    "id": 4233458,
-    "avatar_url": "https://avatars3.githubusercontent.com/u/4233458?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/viktorstrate",
-    "html_url": "https://github.com/viktorstrate",
-    "followers_url": "https://api.github.com/users/viktorstrate/followers",
-    "following_url": "https://api.github.com/users/viktorstrate/following{/other_user}",
-    "gists_url": "https://api.github.com/users/viktorstrate/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/viktorstrate/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/viktorstrate/subscriptions",
-    "organizations_url": "https://api.github.com/users/viktorstrate/orgs",
-    "repos_url": "https://api.github.com/users/viktorstrate/repos",
-    "events_url": "https://api.github.com/users/viktorstrate/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/viktorstrate/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 2
-  },
-  {
-    "login": "agea",
-    "id": 508115,
-    "avatar_url": "https://avatars3.githubusercontent.com/u/508115?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/agea",
-    "html_url": "https://github.com/agea",
-    "followers_url": "https://api.github.com/users/agea/followers",
-    "following_url": "https://api.github.com/users/agea/following{/other_user}",
-    "gists_url": "https://api.github.com/users/agea/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/agea/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/agea/subscriptions",
-    "organizations_url": "https://api.github.com/users/agea/orgs",
-    "repos_url": "https://api.github.com/users/agea/repos",
-    "events_url": "https://api.github.com/users/agea/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/agea/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "danieldafoe",
-    "id": 6425338,
-    "avatar_url": "https://avatars2.githubusercontent.com/u/6425338?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/danieldafoe",
-    "html_url": "https://github.com/danieldafoe",
-    "followers_url": "https://api.github.com/users/danieldafoe/followers",
-    "following_url": "https://api.github.com/users/danieldafoe/following{/other_user}",
-    "gists_url": "https://api.github.com/users/danieldafoe/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/danieldafoe/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/danieldafoe/subscriptions",
-    "organizations_url": "https://api.github.com/users/danieldafoe/orgs",
-    "repos_url": "https://api.github.com/users/danieldafoe/repos",
-    "events_url": "https://api.github.com/users/danieldafoe/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/danieldafoe/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "gglnx",
-    "id": 23519,
-    "avatar_url": "https://avatars0.githubusercontent.com/u/23519?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/gglnx",
-    "html_url": "https://github.com/gglnx",
-    "followers_url": "https://api.github.com/users/gglnx/followers",
-    "following_url": "https://api.github.com/users/gglnx/following{/other_user}",
-    "gists_url": "https://api.github.com/users/gglnx/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/gglnx/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/gglnx/subscriptions",
-    "organizations_url": "https://api.github.com/users/gglnx/orgs",
-    "repos_url": "https://api.github.com/users/gglnx/repos",
-    "events_url": "https://api.github.com/users/gglnx/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/gglnx/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "Deraw-",
-    "id": 10298932,
-    "avatar_url": "https://avatars1.githubusercontent.com/u/10298932?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/Deraw-",
-    "html_url": "https://github.com/Deraw-",
-    "followers_url": "https://api.github.com/users/Deraw-/followers",
-    "following_url": "https://api.github.com/users/Deraw-/following{/other_user}",
-    "gists_url": "https://api.github.com/users/Deraw-/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/Deraw-/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/Deraw-/subscriptions",
-    "organizations_url": "https://api.github.com/users/Deraw-/orgs",
-    "repos_url": "https://api.github.com/users/Deraw-/repos",
-    "events_url": "https://api.github.com/users/Deraw-/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/Deraw-/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "epilande",
-    "id": 3210082,
-    "avatar_url": "https://avatars1.githubusercontent.com/u/3210082?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/epilande",
-    "html_url": "https://github.com/epilande",
-    "followers_url": "https://api.github.com/users/epilande/followers",
-    "following_url": "https://api.github.com/users/epilande/following{/other_user}",
-    "gists_url": "https://api.github.com/users/epilande/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/epilande/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/epilande/subscriptions",
-    "organizations_url": "https://api.github.com/users/epilande/orgs",
-    "repos_url": "https://api.github.com/users/epilande/repos",
-    "events_url": "https://api.github.com/users/epilande/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/epilande/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "evrowe",
-    "id": 235133,
-    "avatar_url": "https://avatars1.githubusercontent.com/u/235133?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/evrowe",
-    "html_url": "https://github.com/evrowe",
-    "followers_url": "https://api.github.com/users/evrowe/followers",
-    "following_url": "https://api.github.com/users/evrowe/following{/other_user}",
-    "gists_url": "https://api.github.com/users/evrowe/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/evrowe/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/evrowe/subscriptions",
-    "organizations_url": "https://api.github.com/users/evrowe/orgs",
-    "repos_url": "https://api.github.com/users/evrowe/repos",
-    "events_url": "https://api.github.com/users/evrowe/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/evrowe/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "fabienjuif",
-    "id": 17828231,
-    "avatar_url": "https://avatars0.githubusercontent.com/u/17828231?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/fabienjuif",
-    "html_url": "https://github.com/fabienjuif",
-    "followers_url": "https://api.github.com/users/fabienjuif/followers",
-    "following_url": "https://api.github.com/users/fabienjuif/following{/other_user}",
-    "gists_url": "https://api.github.com/users/fabienjuif/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/fabienjuif/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/fabienjuif/subscriptions",
-    "organizations_url": "https://api.github.com/users/fabienjuif/orgs",
-    "repos_url": "https://api.github.com/users/fabienjuif/repos",
-    "events_url": "https://api.github.com/users/fabienjuif/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/fabienjuif/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "frankkienl",
-    "id": 1552295,
-    "avatar_url": "https://avatars0.githubusercontent.com/u/1552295?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/frankkienl",
-    "html_url": "https://github.com/frankkienl",
-    "followers_url": "https://api.github.com/users/frankkienl/followers",
-    "following_url": "https://api.github.com/users/frankkienl/following{/other_user}",
-    "gists_url": "https://api.github.com/users/frankkienl/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/frankkienl/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/frankkienl/subscriptions",
-    "organizations_url": "https://api.github.com/users/frankkienl/orgs",
-    "repos_url": "https://api.github.com/users/frankkienl/repos",
-    "events_url": "https://api.github.com/users/frankkienl/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/frankkienl/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "jmona789",
-    "id": 13789757,
-    "avatar_url": "https://avatars1.githubusercontent.com/u/13789757?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/jmona789",
-    "html_url": "https://github.com/jmona789",
-    "followers_url": "https://api.github.com/users/jmona789/followers",
-    "following_url": "https://api.github.com/users/jmona789/following{/other_user}",
-    "gists_url": "https://api.github.com/users/jmona789/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/jmona789/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/jmona789/subscriptions",
-    "organizations_url": "https://api.github.com/users/jmona789/orgs",
-    "repos_url": "https://api.github.com/users/jmona789/repos",
-    "events_url": "https://api.github.com/users/jmona789/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/jmona789/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "jlandure",
-    "id": 525974,
-    "avatar_url": "https://avatars2.githubusercontent.com/u/525974?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/jlandure",
-    "html_url": "https://github.com/jlandure",
-    "followers_url": "https://api.github.com/users/jlandure/followers",
-    "following_url": "https://api.github.com/users/jlandure/following{/other_user}",
-    "gists_url": "https://api.github.com/users/jlandure/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/jlandure/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/jlandure/subscriptions",
-    "organizations_url": "https://api.github.com/users/jlandure/orgs",
-    "repos_url": "https://api.github.com/users/jlandure/repos",
-    "events_url": "https://api.github.com/users/jlandure/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/jlandure/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "marcobiedermann",
-    "id": 5244986,
-    "avatar_url": "https://avatars0.githubusercontent.com/u/5244986?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/marcobiedermann",
-    "html_url": "https://github.com/marcobiedermann",
-    "followers_url": "https://api.github.com/users/marcobiedermann/followers",
-    "following_url": "https://api.github.com/users/marcobiedermann/following{/other_user}",
-    "gists_url": "https://api.github.com/users/marcobiedermann/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/marcobiedermann/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/marcobiedermann/subscriptions",
-    "organizations_url": "https://api.github.com/users/marcobiedermann/orgs",
-    "repos_url": "https://api.github.com/users/marcobiedermann/repos",
-    "events_url": "https://api.github.com/users/marcobiedermann/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/marcobiedermann/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "mraerino",
-    "id": 4941459,
-    "avatar_url": "https://avatars0.githubusercontent.com/u/4941459?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/mraerino",
-    "html_url": "https://github.com/mraerino",
-    "followers_url": "https://api.github.com/users/mraerino/followers",
-    "following_url": "https://api.github.com/users/mraerino/following{/other_user}",
-    "gists_url": "https://api.github.com/users/mraerino/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/mraerino/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/mraerino/subscriptions",
-    "organizations_url": "https://api.github.com/users/mraerino/orgs",
-    "repos_url": "https://api.github.com/users/mraerino/repos",
-    "events_url": "https://api.github.com/users/mraerino/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/mraerino/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "marthesselink",
-    "id": 21331676,
-    "avatar_url": "https://avatars1.githubusercontent.com/u/21331676?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/marthesselink",
-    "html_url": "https://github.com/marthesselink",
-    "followers_url": "https://api.github.com/users/marthesselink/followers",
-    "following_url": "https://api.github.com/users/marthesselink/following{/other_user}",
-    "gists_url": "https://api.github.com/users/marthesselink/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/marthesselink/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/marthesselink/subscriptions",
-    "organizations_url": "https://api.github.com/users/marthesselink/orgs",
-    "repos_url": "https://api.github.com/users/marthesselink/repos",
-    "events_url": "https://api.github.com/users/marthesselink/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/marthesselink/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "SergiSMJ",
-    "id": 13422636,
-    "avatar_url": "https://avatars3.githubusercontent.com/u/13422636?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/SergiSMJ",
-    "html_url": "https://github.com/SergiSMJ",
-    "followers_url": "https://api.github.com/users/SergiSMJ/followers",
-    "following_url": "https://api.github.com/users/SergiSMJ/following{/other_user}",
-    "gists_url": "https://api.github.com/users/SergiSMJ/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/SergiSMJ/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/SergiSMJ/subscriptions",
-    "organizations_url": "https://api.github.com/users/SergiSMJ/orgs",
-    "repos_url": "https://api.github.com/users/SergiSMJ/repos",
-    "events_url": "https://api.github.com/users/SergiSMJ/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/SergiSMJ/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "sgraewe",
-    "id": 5310933,
-    "avatar_url": "https://avatars0.githubusercontent.com/u/5310933?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/sgraewe",
-    "html_url": "https://github.com/sgraewe",
-    "followers_url": "https://api.github.com/users/sgraewe/followers",
-    "following_url": "https://api.github.com/users/sgraewe/following{/other_user}",
-    "gists_url": "https://api.github.com/users/sgraewe/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/sgraewe/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/sgraewe/subscriptions",
-    "organizations_url": "https://api.github.com/users/sgraewe/orgs",
-    "repos_url": "https://api.github.com/users/sgraewe/repos",
-    "events_url": "https://api.github.com/users/sgraewe/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/sgraewe/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "tupton",
-    "id": 47334,
-    "avatar_url": "https://avatars0.githubusercontent.com/u/47334?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/tupton",
-    "html_url": "https://github.com/tupton",
-    "followers_url": "https://api.github.com/users/tupton/followers",
-    "following_url": "https://api.github.com/users/tupton/following{/other_user}",
-    "gists_url": "https://api.github.com/users/tupton/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/tupton/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/tupton/subscriptions",
-    "organizations_url": "https://api.github.com/users/tupton/orgs",
-    "repos_url": "https://api.github.com/users/tupton/repos",
-    "events_url": "https://api.github.com/users/tupton/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/tupton/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "tamedro",
-    "id": 1501012,
-    "avatar_url": "https://avatars0.githubusercontent.com/u/1501012?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/tamedro",
-    "html_url": "https://github.com/tamedro",
-    "followers_url": "https://api.github.com/users/tamedro/followers",
-    "following_url": "https://api.github.com/users/tamedro/following{/other_user}",
-    "gists_url": "https://api.github.com/users/tamedro/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/tamedro/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/tamedro/subscriptions",
-    "organizations_url": "https://api.github.com/users/tamedro/orgs",
-    "repos_url": "https://api.github.com/users/tamedro/repos",
-    "events_url": "https://api.github.com/users/tamedro/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/tamedro/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "Taranys",
-    "id": 4621525,
-    "avatar_url": "https://avatars2.githubusercontent.com/u/4621525?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/Taranys",
-    "html_url": "https://github.com/Taranys",
-    "followers_url": "https://api.github.com/users/Taranys/followers",
-    "following_url": "https://api.github.com/users/Taranys/following{/other_user}",
-    "gists_url": "https://api.github.com/users/Taranys/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/Taranys/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/Taranys/subscriptions",
-    "organizations_url": "https://api.github.com/users/Taranys/orgs",
-    "repos_url": "https://api.github.com/users/Taranys/repos",
-    "events_url": "https://api.github.com/users/Taranys/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/Taranys/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "caepenna",
-    "id": 2954723,
-    "avatar_url": "https://avatars0.githubusercontent.com/u/2954723?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/caepenna",
-    "html_url": "https://github.com/caepenna",
-    "followers_url": "https://api.github.com/users/caepenna/followers",
-    "following_url": "https://api.github.com/users/caepenna/following{/other_user}",
-    "gists_url": "https://api.github.com/users/caepenna/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/caepenna/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/caepenna/subscriptions",
-    "organizations_url": "https://api.github.com/users/caepenna/orgs",
-    "repos_url": "https://api.github.com/users/caepenna/repos",
-    "events_url": "https://api.github.com/users/caepenna/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/caepenna/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  },
-  {
-    "login": "eawww",
-    "id": 9022825,
-    "avatar_url": "https://avatars1.githubusercontent.com/u/9022825?v=4",
-    "gravatar_id": "",
-    "url": "https://api.github.com/users/eawww",
-    "html_url": "https://github.com/eawww",
-    "followers_url": "https://api.github.com/users/eawww/followers",
-    "following_url": "https://api.github.com/users/eawww/following{/other_user}",
-    "gists_url": "https://api.github.com/users/eawww/gists{/gist_id}",
-    "starred_url": "https://api.github.com/users/eawww/starred{/owner}{/repo}",
-    "subscriptions_url": "https://api.github.com/users/eawww/subscriptions",
-    "organizations_url": "https://api.github.com/users/eawww/orgs",
-    "repos_url": "https://api.github.com/users/eawww/repos",
-    "events_url": "https://api.github.com/users/eawww/events{/privacy}",
-    "received_events_url": "https://api.github.com/users/eawww/received_events",
-    "type": "User",
-    "site_admin": false,
-    "contributions": 1
-  }
-]

src/data/gitmojis.json

@@ -1,451 +1,451 @@
 {
-	"gitmojis":[
-		{
-			"emoji":"🎨",
-			"entity":"🎨",
-			"code":":art:",
-			"description":"Improving structure / format of the code.",
-			"name":"art"
-		},
-		{
-			"emoji":"⚡️",
-			"entity":"⚡",
-			"code":":zap:",
-			"description":"Improving performance.",
-			"name":"zap"
-		},
-		{
-			"emoji":"🔥",
-			"entity":"🔥",
-			"code":":fire:",
-			"description":"Removing code or files.",
-			"name":"fire"
-		},
-		{
-			"emoji":"🐛",
-			"entity":"🐛",
-			"code":":bug:",
-			"description":"Fixing a bug.",
-			"name":"bug"
-		},
-		{
-			"emoji": "🚑",
-			"entity": "🚑",
-			"code": ":ambulance:",
-			"description": "Critical hotfix.",
-			"name": "ambulance"
-		},
-		{
-			"emoji":"✨",
-			"entity":"✨",
-			"code":":sparkles:",
-			"description":"Introducing new features.",
-			"name":"sparkles"
-		},
-		{
-			"emoji":"📝",
-			"entity":"📝",
-			"code":":pencil:",
-			"description":"Writing docs.",
-			"name":"pencil"
-		},
-		{
-			"emoji":"🚀",
-			"entity":"🚀",
-			"code":":rocket:",
-			"description":"Deploying stuff.",
-			"name":"rocket"
-		},
-		{
-			"emoji":"💄",
-			"entity":"&#ff99cc;",
-			"code":":lipstick:",
-			"description":"Updating the UI and style files.",
-			"name":"lipstick"
-		},
-		{
-			"emoji":"🎉",
-			"entity":"🎉",
-			"code":":tada:",
-			"description":"Initial commit.",
-			"name":"tada"
-		},
-		{
-			"emoji":"✅",
-			"entity":"✅",
-			"code":":white_check_mark:",
-			"description":"Updating tests.",
-			"name":"white-check-mark"
-		},
-		{
-			"emoji":"🔒",
-			"entity":"🔒",
-			"code":":lock:",
-			"description":"Fixing security issues.",
-			"name":"lock"
-		},
-		{
-			"emoji":"🍎",
-			"entity":"🍎",
-			"code":":apple:",
-			"description":"Fixing something on macOS.",
-			"name":"apple"
-		},
-		{
-			"emoji":"🐧",
-			"entity":"🐧",
-			"code":":penguin:",
-			"description":"Fixing something on Linux.",
-			"name":"penguin"
-		},
-		{
-			"emoji":"🏁",
-			"entity":"🏁",
-			"code":":checkered_flag:",
-			"description":"Fixing something on Windows.",
-			"name":"checkered-flag"
-		},
-		{
-			"emoji":"🤖",
-			"entity":"🤖",
-			"code":":robot:",
-			"description":"Fixing something on Android.",
-			"name":"robot"
-		},
-		{
-			"emoji":"🍏",
-			"entity":"🍏",
-			"code":":green_apple:",
-			"description":"Fixing something on iOS.",
-			"name":"green-apple"
-		},
-		{
-			"emoji":"🔖",
-			"entity":"🔖",
-			"code":":bookmark:",
-			"description":"Releasing / Version tags.",
-			"name":"bookmark"
-		},
-		{
-			"emoji":"🚨",
-			"entity":"🚨",
-			"code":":rotating_light:",
-			"description":"Removing linter warnings.",
-			"name":"rotating-light"
-		},
-		{
-			"emoji":"🚧",
-			"entity":"🚧",
-			"code":":construction:",
-			"description":"Work in progress.",
-			"name":"construction"
-		},
-		{
-			"emoji":"💚",
-			"entity":"💚",
-			"code":":green_heart:",
-			"description":"Fixing CI Build.",
-			"name":"green-heart"
-		},
-		{
-			"emoji":"⬇️",
-			"entity":"⬇️",
-			"code":":arrow_down:",
-			"description":"Downgrading dependencies.",
-			"name":"arrow-down"
-		},
-		{
-			"emoji":"⬆️",
-			"entity":"⬆️",
-			"code":":arrow_up:",
-			"description":"Upgrading dependencies.",
-			"name":"arrow-up"
-		},
-		{
-			"emoji": "📌",
-			"entity": "📌",
-			"code": ":pushpin:",
-			"description": "Pinning dependencies to specific versions.",
-			"name": "pushpin"
-		},
-		{
-			"emoji":"👷",
-			"entity":"👷",
-			"code":":construction_worker:",
-			"description":"Adding CI build system.",
-			"name":"construction-worker"
-		},
-		{
-			"emoji":"📈",
-			"code":":chart_with_upwards_trend:",
-			"description":"Adding analytics or tracking code.",
-			"name":"chart-with-upwards-trend"
-		},
-		{
-			"emoji":"♻️",
-			"entity":"♲",
-			"code":":recycle:",
-			"description":"Refactoring code.",
-			"name":"recycle"
-		},
-		{
-			"emoji":"🐳",
-			"entity":"🐳",
-			"code":":whale:",
-			"description":"Work about Docker.",
-			"name":"whale"
-		},
-		{
-			"emoji":"➕",
-			"entity":"➕",
-			"code":":heavy_plus_sign:",
-			"description":"Adding a dependency.",
-			"name":"heavy-plus-sign"
-		},
-		{
-			"emoji":"➖",
-			"entity":"➖",
-			"code":":heavy_minus_sign:",
-			"description":"Removing a dependency.",
-			"name":"heavy-minus-sign"
-		},
-		{
-			"emoji":"🔧",
-			"entity":"🔧",
-			"code":":wrench:",
-			"description":"Changing configuration files.",
-			"name":"wrench"
-		},
-		{
-			"emoji": "🌐",
-			"entity": "🌐",
-			"code": ":globe_with_meridians:",
-			"description": "Internationalization and localization.",
-			"name": "globe-with-meridians"
-		},
-		{
-			"emoji":"✏️",
-			"entity":"",
-			"code":":pencil2:",
-			"description":"Fixing typos.",
-			"name":"pencil"
-		},
-		{
-			"emoji":"💩",
-			"entity":"",
-			"code":":poop:",
-			"description":"Writing bad code that needs to be improved.",
-			"name":"poop"
-		},
-		{
-			"emoji":"⏪",
-			"entity":"⏪",
-			"code":":rewind:",
-			"description":"Reverting changes.",
-			"name":"rewind"
-		},
-		{
-			"emoji":"🔀",
-			"entity":"🔀",
-			"code":":twisted_rightwards_arrows:",
-			"description":"Merging branches.",
-			"name":"twisted-rightwards-arrows"
-		},
-		{
-			"emoji":"📦",
-			"entity":"&#1F4E6;",
-			"code":":package:",
-			"description":"Updating compiled files or packages.",
-			"name":"package"
-		},
-		{
-			"emoji":"👽",
-			"entity":"&#1F47D;",
-			"code":":alien:",
-			"description":"Updating code due to external API changes.",
-			"name":"alien"
-		},
-		{
-			"emoji":"🚚",
-			"entity":"&#1F69A;",
-			"code":":truck:",
-			"description":"Moving or renaming files.",
-			"name":"truck"
-		},
-		{
-			"emoji":"📄",
-			"entity":"&#1F4C4;",
-			"code":":page_facing_up:",
-			"description":"Adding or updating license.",
-			"name":"page-facing-up"
-		},
-		{
-			"emoji":"💥",
-			"entity":"💥",
-			"code":":boom:",
-			"description":"Introducing breaking changes.",
-			"name":"boom"
-		},
-		{
-			"emoji":"🍱",
-			"entity":"&#1F371",
-			"code":":bento:",
-			"description":"Adding or updating assets.",
-			"name":"bento"
-		},
-		{
-			"emoji":"👌",
-			"entity":"👌",
-			"code":":ok_hand:",
-			"description":"Updating code due to code review changes.",
-			"name":"ok-hand"
-		},
-		{
-			"emoji": "♿️",
-			"entity":"♿",
-			"code": ":wheelchair:",
-			"description":"Improving accessibility.",
-			"name":"wheelchair"
-		},
-		{
-			"emoji": "💡",
-			"entity":"💡",
-			"code": ":bulb:",
-			"description":"Documenting source code.",
-			"name":"bulb"
-		},
-		{
-			"emoji": "🍻",
-			"entity":"🍻",
-			"code": ":beers:",
-			"description": "Writing code drunkenly.",
-			"name":"beers"
-		},
-		{
-			"emoji": "💬",
-			"entity":"💬",
-			"code": ":speech_balloon:",
-			"description": "Updating text and literals.",
-			"name":"speech-balloon"
-		},
-		{
-			"emoji": "🗃",
-			"entity":"🗃",
-			"code": ":card_file_box:",
-			"description": "Performing database related changes.",
-			"name":"card-file-box"
-		},
-		{
-			"emoji":"🔊",
-			"entity":"🔊",
-			"code":":loud_sound:",
-			"description":"Adding logs.",
-			"name":"loud-sound"
-		},
-		{
-			"emoji":"🔇",
-			"entity":"🔇",
-			"code":":mute:",
-			"description":"Removing logs.",
-			"name":"mute"
-		},
-		{
-			"emoji": "👥",
-			"entity": "👥",
-			"code": ":busts_in_silhouette:",
-			"description": "Adding contributor(s).",
-			"name": "busts-in-silhouette"
-		},
-		{
-			"emoji": "🚸",
-			"entity": "🚸",
-			"code": ":children_crossing:",
-			"description": "Improving user experience / usability.",
-			"name": "children-crossing"
-		},
-		{
-			"emoji": "🏗",
-			"entity": "&#1f3d7;",
-			"code": ":building_construction:",
-			"description": "Making architectural changes.",
-			"name": "building-construction"
-		},
-		{
-			"emoji": "📱",
-			"entity": "📱" ,
-			"code": ":iphone:",
-			"description": "Working on responsive design.",
-			"name": "iphone"
-		},
-		{
-			"emoji": "🤡",
-			"entity": "🤡" ,
-			"code": ":clown_face:",
-			"description": "Mocking things.",
-			"name": "clown-face"
-		},
-		{
-			"emoji": "🥚",
-			"entity": "🥚",
-			"code": ":egg:",
-			"description": "Adding an easter egg.",
-			"name": "egg"
-		},
-		{
-			"emoji": "🙈",
-			"entity": "&#8bdfe7;" ,
-			"code": ":see_no_evil:",
-			"description": "Adding or updating a .gitignore file",
-			"name": "see-no-evil"
-		},
-		{
-			"emoji": "📸",
-			"entity": "📸" ,
-			"code": ":camera_flash:",
-			"description": "Adding or updating snapshots",
-			"name": "camera-flash"
-		},
-		{
-			"emoji": "⚗",
-			"entity": "📸" ,
-			"code": ":alembic:",
-			"description": "Experimenting new things",
-			"name": "alembic"
-		},
-		{
-			"emoji": "🔍",
-			"entity": "🔍" ,
-			"code": ":mag:",
-			"description": "Improving SEO",
-			"name": "mag"
-		},
-		{
-			"emoji":"☸️",
-			"entity":"☸",
-			"code":":wheel_of_dharma:",
-			"description":"Work about Kubernetes",
-			"name":"wheel-of-dharma"
-		},
-		{
-			"emoji": "🏷️",
-			"entity": "🏷",
-			"code": ":label:",
-			"description": "Adding or updating types (Flow, TypeScript)",
-			"name": "label"		
-		},
-		{
-			"emoji": "🌱",
-			"entity": "🌱",
-			"code": ":seedling:",
-			"description": "Adding or updating seed files",
-			"name": "seedling"		
-		},
-		{
-			"emoji": "🚩",
-			"entity": "🚩",
-			"code": ":triangular_flag_on_post:",
-			"description": "Adding, updating, or removing feature flags",
-			"name": "triangular-flag-on-post"
-		}
-	]
+  "gitmojis": [
+    {
+      "emoji": "🎨",
+      "entity": "🎨",
+      "code": ":art:",
+      "description": "Improving structure / format of the code.",
+      "name": "art"
+    },
+    {
+      "emoji": "⚡️",
+      "entity": "⚡",
+      "code": ":zap:",
+      "description": "Improving performance.",
+      "name": "zap"
+    },
+    {
+      "emoji": "🔥",
+      "entity": "🔥",
+      "code": ":fire:",
+      "description": "Removing code or files.",
+      "name": "fire"
+    },
+    {
+      "emoji": "🐛",
+      "entity": "🐛",
+      "code": ":bug:",
+      "description": "Fixing a bug.",
+      "name": "bug"
+    },
+    {
+      "emoji": "🚑",
+      "entity": "🚑",
+      "code": ":ambulance:",
+      "description": "Critical hotfix.",
+      "name": "ambulance"
+    },
+    {
+      "emoji": "✨",
+      "entity": "✨",
+      "code": ":sparkles:",
+      "description": "Introducing new features.",
+      "name": "sparkles"
+    },
+    {
+      "emoji": "📝",
+      "entity": "📝",
+      "code": ":pencil:",
+      "description": "Writing docs.",
+      "name": "pencil"
+    },
+    {
+      "emoji": "🚀",
+      "entity": "🚀",
+      "code": ":rocket:",
+      "description": "Deploying stuff.",
+      "name": "rocket"
+    },
+    {
+      "emoji": "💄",
+      "entity": "&#ff99cc;",
+      "code": ":lipstick:",
+      "description": "Updating the UI and style files.",
+      "name": "lipstick"
+    },
+    {
+      "emoji": "🎉",
+      "entity": "🎉",
+      "code": ":tada:",
+      "description": "Initial commit.",
+      "name": "tada"
+    },
+    {
+      "emoji": "✅",
+      "entity": "✅",
+      "code": ":white_check_mark:",
+      "description": "Updating tests.",
+      "name": "white-check-mark"
+    },
+    {
+      "emoji": "🔒",
+      "entity": "🔒",
+      "code": ":lock:",
+      "description": "Fixing security issues.",
+      "name": "lock"
+    },
+    {
+      "emoji": "🍎",
+      "entity": "🍎",
+      "code": ":apple:",
+      "description": "Fixing something on macOS.",
+      "name": "apple"
+    },
+    {
+      "emoji": "🐧",
+      "entity": "🐧",
+      "code": ":penguin:",
+      "description": "Fixing something on Linux.",
+      "name": "penguin"
+    },
+    {
+      "emoji": "🏁",
+      "entity": "🏁",
+      "code": ":checkered_flag:",
+      "description": "Fixing something on Windows.",
+      "name": "checkered-flag"
+    },
+    {
+      "emoji": "🤖",
+      "entity": "🤖",
+      "code": ":robot:",
+      "description": "Fixing something on Android.",
+      "name": "robot"
+    },
+    {
+      "emoji": "🍏",
+      "entity": "🍏",
+      "code": ":green_apple:",
+      "description": "Fixing something on iOS.",
+      "name": "green-apple"
+    },
+    {
+      "emoji": "🔖",
+      "entity": "🔖",
+      "code": ":bookmark:",
+      "description": "Releasing / Version tags.",
+      "name": "bookmark"
+    },
+    {
+      "emoji": "🚨",
+      "entity": "🚨",
+      "code": ":rotating_light:",
+      "description": "Removing linter warnings.",
+      "name": "rotating-light"
+    },
+    {
+      "emoji": "🚧",
+      "entity": "🚧",
+      "code": ":construction:",
+      "description": "Work in progress.",
+      "name": "construction"
+    },
+    {
+      "emoji": "💚",
+      "entity": "💚",
+      "code": ":green_heart:",
+      "description": "Fixing CI Build.",
+      "name": "green-heart"
+    },
+    {
+      "emoji": "⬇️",
+      "entity": "⬇️",
+      "code": ":arrow_down:",
+      "description": "Downgrading dependencies.",
+      "name": "arrow-down"
+    },
+    {
+      "emoji": "⬆️",
+      "entity": "⬆️",
+      "code": ":arrow_up:",
+      "description": "Upgrading dependencies.",
+      "name": "arrow-up"
+    },
+    {
+      "emoji": "📌",
+      "entity": "📌",
+      "code": ":pushpin:",
+      "description": "Pinning dependencies to specific versions.",
+      "name": "pushpin"
+    },
+    {
+      "emoji": "👷",
+      "entity": "👷",
+      "code": ":construction_worker:",
+      "description": "Adding CI build system.",
+      "name": "construction-worker"
+    },
+    {
+      "emoji": "📈",
+      "code": ":chart_with_upwards_trend:",
+      "description": "Adding analytics or tracking code.",
+      "name": "chart-with-upwards-trend"
+    },
+    {
+      "emoji": "♻️",
+      "entity": "♲",
+      "code": ":recycle:",
+      "description": "Refactoring code.",
+      "name": "recycle"
+    },
+    {
+      "emoji": "🐳",
+      "entity": "🐳",
+      "code": ":whale:",
+      "description": "Work about Docker.",
+      "name": "whale"
+    },
+    {
+      "emoji": "➕",
+      "entity": "➕",
+      "code": ":heavy_plus_sign:",
+      "description": "Adding a dependency.",
+      "name": "heavy-plus-sign"
+    },
+    {
+      "emoji": "➖",
+      "entity": "➖",
+      "code": ":heavy_minus_sign:",
+      "description": "Removing a dependency.",
+      "name": "heavy-minus-sign"
+    },
+    {
+      "emoji": "🔧",
+      "entity": "🔧",
+      "code": ":wrench:",
+      "description": "Changing configuration files.",
+      "name": "wrench"
+    },
+    {
+      "emoji": "🌐",
+      "entity": "🌐",
+      "code": ":globe_with_meridians:",
+      "description": "Internationalization and localization.",
+      "name": "globe-with-meridians"
+    },
+    {
+      "emoji": "✏️",
+      "entity": "",
+      "code": ":pencil2:",
+      "description": "Fixing typos.",
+      "name": "pencil"
+    },
+    {
+      "emoji": "💩",
+      "entity": "",
+      "code": ":poop:",
+      "description": "Writing bad code that needs to be improved.",
+      "name": "poop"
+    },
+    {
+      "emoji": "⏪",
+      "entity": "⏪",
+      "code": ":rewind:",
+      "description": "Reverting changes.",
+      "name": "rewind"
+    },
+    {
+      "emoji": "🔀",
+      "entity": "🔀",
+      "code": ":twisted_rightwards_arrows:",
+      "description": "Merging branches.",
+      "name": "twisted-rightwards-arrows"
+    },
+    {
+      "emoji": "📦",
+      "entity": "&#1F4E6;",
+      "code": ":package:",
+      "description": "Updating compiled files or packages.",
+      "name": "package"
+    },
+    {
+      "emoji": "👽",
+      "entity": "&#1F47D;",
+      "code": ":alien:",
+      "description": "Updating code due to external API changes.",
+      "name": "alien"
+    },
+    {
+      "emoji": "🚚",
+      "entity": "&#1F69A;",
+      "code": ":truck:",
+      "description": "Moving or renaming files.",
+      "name": "truck"
+    },
+    {
+      "emoji": "📄",
+      "entity": "&#1F4C4;",
+      "code": ":page_facing_up:",
+      "description": "Adding or updating license.",
+      "name": "page-facing-up"
+    },
+    {
+      "emoji": "💥",
+      "entity": "💥",
+      "code": ":boom:",
+      "description": "Introducing breaking changes.",
+      "name": "boom"
+    },
+    {
+      "emoji": "🍱",
+      "entity": "&#1F371",
+      "code": ":bento:",
+      "description": "Adding or updating assets.",
+      "name": "bento"
+    },
+    {
+      "emoji": "👌",
+      "entity": "👌",
+      "code": ":ok_hand:",
+      "description": "Updating code due to code review changes.",
+      "name": "ok-hand"
+    },
+    {
+      "emoji": "♿️",
+      "entity": "♿",
+      "code": ":wheelchair:",
+      "description": "Improving accessibility.",
+      "name": "wheelchair"
+    },
+    {
+      "emoji": "💡",
+      "entity": "💡",
+      "code": ":bulb:",
+      "description": "Documenting source code.",
+      "name": "bulb"
+    },
+    {
+      "emoji": "🍻",
+      "entity": "🍻",
+      "code": ":beers:",
+      "description": "Writing code drunkenly.",
+      "name": "beers"
+    },
+    {
+      "emoji": "💬",
+      "entity": "💬",
+      "code": ":speech_balloon:",
+      "description": "Updating text and literals.",
+      "name": "speech-balloon"
+    },
+    {
+      "emoji": "🗃",
+      "entity": "🗃",
+      "code": ":card_file_box:",
+      "description": "Performing database related changes.",
+      "name": "card-file-box"
+    },
+    {
+      "emoji": "🔊",
+      "entity": "🔊",
+      "code": ":loud_sound:",
+      "description": "Adding logs.",
+      "name": "loud-sound"
+    },
+    {
+      "emoji": "🔇",
+      "entity": "🔇",
+      "code": ":mute:",
+      "description": "Removing logs.",
+      "name": "mute"
+    },
+    {
+      "emoji": "👥",
+      "entity": "👥",
+      "code": ":busts_in_silhouette:",
+      "description": "Adding contributor(s).",
+      "name": "busts-in-silhouette"
+    },
+    {
+      "emoji": "🚸",
+      "entity": "🚸",
+      "code": ":children_crossing:",
+      "description": "Improving user experience / usability.",
+      "name": "children-crossing"
+    },
+    {
+      "emoji": "🏗",
+      "entity": "&#1f3d7;",
+      "code": ":building_construction:",
+      "description": "Making architectural changes.",
+      "name": "building-construction"
+    },
+    {
+      "emoji": "📱",
+      "entity": "📱",
+      "code": ":iphone:",
+      "description": "Working on responsive design.",
+      "name": "iphone"
+    },
+    {
+      "emoji": "🤡",
+      "entity": "🤡",
+      "code": ":clown_face:",
+      "description": "Mocking things.",
+      "name": "clown-face"
+    },
+    {
+      "emoji": "🥚",
+      "entity": "🥚",
+      "code": ":egg:",
+      "description": "Adding an easter egg.",
+      "name": "egg"
+    },
+    {
+      "emoji": "🙈",
+      "entity": "&#8bdfe7;",
+      "code": ":see_no_evil:",
+      "description": "Adding or updating a .gitignore file",
+      "name": "see-no-evil"
+    },
+    {
+      "emoji": "📸",
+      "entity": "📸",
+      "code": ":camera_flash:",
+      "description": "Adding or updating snapshots",
+      "name": "camera-flash"
+    },
+    {
+      "emoji": "⚗",
+      "entity": "📸",
+      "code": ":alembic:",
+      "description": "Experimenting new things",
+      "name": "alembic"
+    },
+    {
+      "emoji": "🔍",
+      "entity": "🔍",
+      "code": ":mag:",
+      "description": "Improving SEO",
+      "name": "mag"
+    },
+    {
+      "emoji": "☸️",
+      "entity": "☸",
+      "code": ":wheel_of_dharma:",
+      "description": "Work about Kubernetes",
+      "name": "wheel-of-dharma"
+    },
+    {
+      "emoji": "🏷️",
+      "entity": "🏷",
+      "code": ":label:",
+      "description": "Adding or updating types (Flow, TypeScript)",
+      "name": "label"
+    },
+    {
+      "emoji": "🌱",
+      "entity": "🌱",
+      "code": ":seedling:",
+      "description": "Adding or updating seed files",
+      "name": "seedling"
+    },
+    {
+      "emoji": "🚩",
+      "entity": "🚩",
+      "code": ":triangular_flag_on_post:",
+      "description": "Adding, updating, or removing feature flags",
+      "name": "triangular-flag-on-post"
+    }
+  ]
 }

src/data/schema.json

@@ -1,44 +1,44 @@
 {
-   "type":"object",
-   "$schema":"http://json-schema.org/draft-03/schema",
-   "id":"http://jsonschema.net",
-   "required": true,
-   "properties":{
-      "gitmojis":{
-         "type":"array",
-         "id":"http://jsonschema.net/gitmojis",
-         "required": true,
-         "items":{
-            "type":"object",
-            "id":"http://jsonschema.net/gitmojis/0",
-            "required": true,
-            "properties":{
-               "code":{
-                  "type":"string",
-                  "id":"http://jsonschema.net/gitmojis/0/code",
-                  "required": true
-               },
-               "entity":{
-                  "type":"string",
-                  "id":"http://jsonschema.net/gitmojis/0/entity"
-               },
-               "description":{
-                  "type":"string",
-                  "id":"http://jsonschema.net/gitmojis/0/description",
-                  "required": true
-               },
-               "emoji":{
-                  "type":"string",
-                  "id":"http://jsonschema.net/gitmojis/0/emoji",
-                  "required": true
-			  },
-               "name":{
-                  "type":"string",
-                  "id":"http://jsonschema.net/gitmojis/0/name",
-                  "required": true
-               }
-            }
-         }
+  "type": "object",
+  "$schema": "http://json-schema.org/draft-03/schema",
+  "id": "http://jsonschema.net",
+  "required": true,
+  "properties": {
+    "gitmojis": {
+      "type": "array",
+      "id": "http://jsonschema.net/gitmojis",
+      "required": true,
+      "items": {
+        "type": "object",
+        "id": "http://jsonschema.net/gitmojis/0",
+        "required": true,
+        "properties": {
+          "code": {
+            "type": "string",
+            "id": "http://jsonschema.net/gitmojis/0/code",
+            "required": true
+          },
+          "entity": {
+            "type": "string",
+            "id": "http://jsonschema.net/gitmojis/0/entity"
+          },
+          "description": {
+            "type": "string",
+            "id": "http://jsonschema.net/gitmojis/0/description",
+            "required": true
+          },
+          "emoji": {
+            "type": "string",
+            "id": "http://jsonschema.net/gitmojis/0/emoji",
+            "required": true
+          },
+          "name": {
+            "type": "string",
+            "id": "http://jsonschema.net/gitmojis/0/name",
+            "required": true
+          }
+        }
       }
-   }
+    }
+  }
 }

src/pages/_document.js

@@ -0,0 +1,56 @@
+// @flow
+import React from 'react'
+import Document, { Head, Main, NextScript } from 'next/document'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+
+class InlineStylesHead extends Head {
+  getCssLinks() {
+    return this.__getInlineStyles()
+  }
+
+  __getInlineStyles() {
+    const { assetPrefix, files } = this.context._documentProps
+    if (!files || files.length === 0) return null
+
+    return files
+      .filter((file) => /\.css$/.test(file))
+      .map((file) => (
+        <style
+          key={file}
+          nonce={this.props.nonce}
+          data-href={`${assetPrefix}/_next/${file}`}
+          dangerouslySetInnerHTML={{
+            __html: readFileSync(join(process.cwd(), '.next', file), 'utf-8')
+          }}
+        />
+      ))
+  }
+}
+
+/*
+  This code has been obtained from:
+  https://github.com/zeit/next-plugins/issues/238#issuecomment-432211871
+*/
+
+class CustomDocument extends Document {
+  render() {
+    return (
+      <html>
+        <InlineStylesHead />
+        <body>
+          <Main />
+          <NextScript />
+          <script
+            type="text/javascript"
+            dangerouslySetInnerHTML={{
+              __html: `(function(a,e,f,g,b,c,d){a.GoogleAnalyticsObject=b;a[b]=a[b]||function(){(a[b].q=a[b].q||[]).push(arguments)};a[b].l=1*new Date;c=e.createElement(f);d=e.getElementsByTagName(f)[0];c.async=1;c.src=g;d.parentNode.insertBefore(c,d)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create","UA-67824860-7","auto");ga("send","pageview");`
+            }}
+          />
+        </body>
+      </html>
+    )
+  }
+}
+
+export default CustomDocument

src/pages/about.js

@@ -0,0 +1,124 @@
+import React from 'react'
+import Link from 'next/link'
+
+import '../styles/style.scss'
+import Layout from '../components/Layout'
+import Button from '../components/Button'
+import SEO from '../components/SEO'
+
+const About = () => (
+  <>
+    <SEO pageTitle="About" pageUrl="/about" />
+    <Layout>
+      <section>
+        <h1>About</h1>
+
+        <p>
+          <strong>Gitmoji is an emoji guide for GitHub commit messages</strong>.
+          Aims to be a standarization cheatsheet - guide for using{' '}
+          <a href="https://emoji.muan.co">emojis</a> on GitHub's commit
+          messages.
+        </p>
+
+        <p>
+          <strong>Using emojis</strong> on <strong>commit messages</strong>{' '}
+          provides an <strong>easy way</strong> of{' '}
+          <strong>identifying the purpose or intention of a commit</strong> with
+          only looking at the emojis used. As there are a lot of different
+          emojis I found the need of creating a guide that can help to use
+          emojis easier.
+        </p>
+
+        <p>
+          This project is Open Source, that means everyone can participate,
+          suggesting, discussing and adding new emojis. Take a look at the{' '}
+          <Link href="#contributing-gitmoji">
+            <a>contributing section</a>
+          </Link>{' '}
+          and{' '}
+          <a href="https://github.com/carloscuesta/gitmoji/blob/master/.github/CONTRIBUTING.md">
+            guidelines for contributing
+          </a>
+          .
+        </p>
+
+        <div>
+          <Button
+            icon="star"
+            link="https://github.com/carloscuesta/gitmoji"
+            text="GitHub"
+          />
+
+          <Button
+            icon="twitter"
+            link={
+              'https://twitter.com/intent/tweet?text=gitmoji' +
+              '%20%E2%80%93%20An%20%23emoji%20guide%20for%20your%20commit' +
+              '%20messages%20by%20%40crloscuesta%20%F0%9F%98%8D%F0%9F%98%9C' +
+              '&url=https://gitmoji.carloscuesta.me'
+            }
+            target="_blank"
+            text="Tweet"
+          />
+        </div>
+      </section>
+
+      <section>
+        <h1>
+          Using gitmoji with{' '}
+          <a href="https://github.com/carloscuesta/gitmoji-cli">gitmoji-cli</a>
+        </h1>
+
+        <p>
+          An easy solution for using gitmoji from your command line, is to
+          install{' '}
+          <a href="https://github.com/carloscuesta/gitmoji-cli">gitmoji-cli</a>.
+          A gitmoji interactive client for using emojis on commit messages.
+        </p>
+
+        <pre>
+          <code>$ npm i -g gitmoji-cli</code>
+        </pre>
+      </section>
+
+      <section>
+        <h1 id="contributing-gitmoji">Contributing to gitmoji</h1>
+
+        <p>
+          Contributing to gitmoji it's a piece of cake 🍰! This project it's a
+          static website built with <i>Next.js</i>. All the gitmojis displayed
+          are rendered from a JSON file. Before submitting any pull request,
+          please follow the next steps:
+        </p>
+
+        <ol>
+          <li>
+            <a href="https://github.com/carloscuesta/gitmoji/issues/new">
+              Create an issue
+            </a>{' '}
+            filling the template.
+          </li>
+          <li>
+            After discussing the idea, feature or suggestion,{' '}
+            <a href="https://github.com/carloscuesta/gitmoji/fork">
+              fork gitmoji
+            </a>
+          </li>
+          <li>
+            Create a new branch with the feature name. (Eg: add-emoji-deploy,
+            fix-website-header)
+          </li>
+          <li>
+            Make your changes and send a{' '}
+            <a href="https://help.github.com/articles/creating-a-pull-request/">
+              pull request{' '}
+            </a>
+            .
+          </li>
+        </ol>
+      </section>
+    </Layout>
+  </>
+)
+
+export default About

src/pages/contributors.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import '../styles/style.scss'
+import Layout from '../components/Layout'
+import ContributorsList from '../components/ContributorsList'
+import SEO from '../components/SEO'
+
+const Contributors = () => (
+  <>
+    <SEO pageTitle="Contributors" pageUrl="/contributors" />
+
+    <Layout>
+      <section>
+        <h1>Contributors</h1>
+
+        <ContributorsList />
+      </section>
+    </Layout>
+  </>
+)
+
+export default Contributors

src/pages/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import Head from 'next/head'
+
+import '../styles/style.scss'
+import Layout from '../components/Layout'
+import GitmojiList from '../components/GitmojiList'
+import SEO from '../components/SEO'
+import { gitmojis } from '../data/gitmojis.json'
+
+const Home = () => (
+  <>
+    <SEO />
+    <Layout>
+      <GitmojiList gitmojis={gitmojis} />
+    </Layout>
+  </>
+)
+
+export default Home

src/pdf/index.js

@@ -1,70 +0,0 @@
-'use strict';
-
-const PDFDocument = require('pdfkit');
-const fs = require('fs');
-const path = require('path');
-const loadEmoji = require('./loadEmojis');
-
-const __root = path.join(__dirname, '/../../');
-
-// The layout of the PDF document
-const layout = {
-    leftMargin: 60,
-    topMargin: 100,
-    emojiSpace: 38,
-    emojiSize: 32,
-
-    emojisHigh: 16,
-    secondMargin: 260,
-
-    textLeftMargin: 40,
-    textDescTopMargin: 18
-};
-
-// Check if directories exists, otherwise create them.
-if(!fs.existsSync(__root+'dist/')) {
-    fs.mkdirSync(__root+'dist');
-    fs.mkdirSync(__root+'dist/pdf');
-    fs.mkdirSync(__root+'dist/pdf/emojis');
-} else if(!fs.existsSync(__root+'dist/pdf')){
-    fs.mkdirSync(__root+'dist/pdf');
-    fs.mkdirSync(__root+'dist/pdf/emojis');
-}
-
-var emojiList = null;
-
-loadEmoji(function (emojis) {
-    console.log("Done fetching images");
-    emojiList = emojis;
-
-    // Wait for images to write to disk
-    setTimeout(generatePDF, 1000);
-});
-
-function generatePDF() {
-    console.log("Generating PDF");
-    var doc = new PDFDocument;
-    doc.pipe(fs.createWriteStream(__root+'dist/pdf/cheatsheet.pdf'));
-
-    doc.fontSize(32).text('Gitmoji Cheatsheet', 40, 40);
-
-    for (var i = 0; i < emojiList.length; i++) {
-        var emoji = emojiList[i];
-
-        var x = layout.leftMargin + Math.floor(i/layout.emojisHigh)%2*layout.secondMargin;
-        var y = layout.topMargin+ layout.emojiSpace * (i%layout.emojisHigh);
-
-        if(Math.floor(i%(layout.emojisHigh*2))==0 && i!=0){
-            doc.addPage();
-        }
-
-        doc.image(__root+'dist/pdf/emojis/'+emoji.name+'.png', x, y, {width: layout.emojiSize});
-        doc.fontSize(14).text(emoji.code, x+layout.textLeftMargin, y);
-        doc.fontSize(11).text(emoji.description, x+layout.textLeftMargin, y+layout.textDescTopMargin);
-
-    }
-
-    doc.end();
-    console.log('PDF generated successfully');
-    console.log('Location: '+path.resolve(__root, 'dist/pdf/cheatsheet.pdf'));
-}

src/pdf/loadEmojis.js

@@ -1,105 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const request = require('request');
-const async = require('async');
-
-const __root = path.join(__dirname, '/../../');
-
-var emojiList = null;
-var emojiUrls = null;
-
-var loadEmojis = function(callback){
-
-    if(emojiList==null)
-        emojiList = JSON.parse(fs.readFileSync(__root+'src/data/gitmojis.json')).gitmojis;
-
-    checkEmojis(function (err, emojisToDownload) {
-        if(err) throw err;
-
-        // Only send a request to Github, if some icons need to be downloaded
-        if(emojisToDownload.length>0){
-            fetchEmojiUrls(function () {
-                downloadEmojis();
-            });
-        } else downloadEmojis();
-
-        function downloadEmojis() {
-            async.each(emojisToDownload, downloadEmoji, function (err) {
-                if(err) throw err;
-                callback(emojiList);
-            });
-        }
-
-    });
-
-    // Functions
-
-    // Get emoji image urls, from Github
-    function fetchEmojiUrls(callback) {
-        var options = {
-            url: 'https://api.github.com/emojis',
-            headers: {
-                'User-Agent': 'gitmoji'
-            }
-        };
-
-        request(options, function (err, res, body) {
-            if(err) throw err;
-            if(res.statusCode!=200) throw new Error('Server responded with non 200 code');
-
-            emojiUrls = JSON.parse(body);
-            callback();
-        });
-    }
-
-    // Gets a list from gitmojis.json, of all the emoji icons to download.
-    function checkEmojis(callback) {
-        var emojisToDownload = [];
-
-        async.each(emojiList, function (emoji, callback) {
-            fs.access(__root+'dist/pdf/emojis/'+emoji.name+'.png', function (err) {
-                // Returns an error, if image wasn't found
-                if(err){
-                    emojisToDownload.push(emoji);
-                    callback(null);
-                } else {
-                    console.log("Emoji found: "+emoji.name);
-                    callback(null);
-                }
-            });
-        }, function (err) {
-            callback(err, emojisToDownload);
-        });
-    }
-
-    // Downloads an emoji from Github
-    function downloadEmoji(emoji, callback) {
-        console.log("Emoji downloading: "+emoji.name);
-
-        var url = emojiUrls[emoji.code.substring(1, emoji.code.length-1)];
-
-        if(url==null){
-            throw new Error('Emoji url not found, for emoji: '+emoji.code);
-        }
-
-        var options = {
-            url: url,
-            headers: {
-                'User-Agent': 'gitmoji'
-            }
-        };
-
-        request(options, function (err, res) {
-            if(err) throw err;
-            if(res.statusCode!=200) throw new Error('Server responded with non 200 code');
-        }).on('end', function () {
-            console.log("Emoji successfully downloaded: "+emoji.name);
-            emoji.path = path.resolve(__root+'dist/pdf/emojis/'+emoji.name+'.png');
-            callback(null, emoji);
-        }).pipe(fs.createWriteStream(__root+'dist/pdf/emojis/'+emoji.name+'.png'));
-    }
-};
-
-module.exports = loadEmojis;

src/scripts/clipboard.js

@@ -1 +0,0 @@
-var clipboard = new Clipboard('.gitmoji');

src/scripts/main.js

@@ -1,5 +0,0 @@
-var statuses = ['joy', 'loved', 'haha', 'sunglasses', 'sexy', 'tongue'];
-document.getElementById(statuses[Math.floor(Math.random() * statuses.length)]).classList.add('emoji-visible');
-(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','https://www.google-analytics.com/analytics.js','ga');
-ga('create', 'UA-67824860-7', 'auto');
-ga('send', 'pageview');

src/scripts/notification.js

@@ -1 +0,0 @@
-!function(){var a=document.getElementById("gitmoji-list");a.addEventListener("click",function(b){if(b.target&&b.target.matches(".gitmoji")){b.target.classList.add("active"),b.target.classList.remove("active");var c=new NotificationFx({message:"<p>Hey! Gitmoji copied to the clipboard 😜</p>",layout:"growl",effect:"scale",type:"notice",onClose:function(){a.disabled=!1}});c.show(),this.disabled=!0}})}();

src/scripts/notificationFx.js

@@ -1,3 +0,0 @@
-(function(e){function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function b(a){this.options=d({},this.options);d(this.options,a);this._init()}b.prototype.options={wrapper:document.body,message:"yo!",layout:"growl",effect:"slide",type:"error",ttl:6E3,onClose:function(){return!1},onOpen:function(){return!1}};b.prototype._init=function(){this.ntf=document.createElement("div");this.ntf.className="ns-box ns-"+this.options.layout+" ns-effect-"+this.options.effect+" ns-type-"+this.options.type;
-this.ntf.innerHTML='<div class="ns-box-inner">'+this.options.message+'</div><span class="ns-close"></span></div>';this.options.wrapper.insertBefore(this.ntf,this.options.wrapper.firstChild);var a=this;this.dismissttl=setTimeout(function(){a.active&&a.dismiss()},this.options.ttl);this._initEvents()};b.prototype._initEvents=function(){var a=this;this.ntf.querySelector(".ns-close").addEventListener("click",function(){a.dismiss()})};b.prototype.show=function(){this.active=!0;this.ntf.classList.remove("ns-hide");
-this.ntf.classList.add("ns-show");this.options.onOpen()};b.prototype.dismiss=function(){var a=this;this.active=!1;clearTimeout(this.dismissttl);this.ntf.classList.remove("ns-show");setTimeout(function(){a.ntf.classList.add("ns-hide");a.options.onClose()},25);var b=function(c){if(c.target!==a.ntf)return!1;this.removeEventListener("animationend",b);a.options.wrapper.removeChild(this)};this.ntf.addEventListener("animationend",b)};e.NotificationFx=b})(window);

src/styles/_includes/_flexbox.scss

@@ -1 +1,106 @@
-.col-sm-2,.col-xs-12,.col-xs-3,.row{box-sizing:border-box}.container{margin-right:auto;margin-left:auto}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.col-xs-12,.col-xs-3{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1.25rem;padding-left:1.25rem}.col-xs-12{-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.center-xs{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.middle-xs{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}@media only screen and (min-width:48em){.container{width:49rem}.col-sm-2,.col-sm-6{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1.25rem;padding-left:1.25rem}.col-sm-6{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.col-sm-2{-ms-flex-preferred-size:16.66666667%;flex-basis:16.66666667%;max-width:16.66666667%}}@media only screen and (min-width:64em){.container{width:65rem}.col-md-3{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1.25rem;padding-left:1.25rem;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}}
+.col-sm-2,
+.col-xs-12,
+.col-xs-3,
+.row {
+  box-sizing: border-box;
+}
+.container {
+  margin-right: auto;
+  margin-left: auto;
+}
+.row {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+.col-xs-12,
+.col-xs-3 {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 1.25rem;
+  padding-left: 1.25rem;
+}
+.col-xs-12 {
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+  max-width: 100%;
+}
+.col-xs-3 {
+  -ms-flex-preferred-size: 25%;
+  flex-basis: 25%;
+  max-width: 25%;
+}
+.center-xs {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-align: center;
+}
+.middle-xs {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+@media only screen and (min-width: 48em) {
+  .container {
+    width: 49rem;
+  }
+  .col-sm-2,
+  .col-sm-6 {
+    box-sizing: border-box;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    padding-right: 1.25rem;
+    padding-left: 1.25rem;
+  }
+  .col-sm-6 {
+    -webkit-flex-basis: 50%;
+    -ms-flex-preferred-size: 50%;
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+  .col-sm-2 {
+    -ms-flex-preferred-size: 16.66666667%;
+    flex-basis: 16.66666667%;
+    max-width: 16.66666667%;
+  }
+}
+@media only screen and (min-width: 64em) {
+  .container {
+    width: 65rem;
+  }
+  .col-md-3 {
+    box-sizing: border-box;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    padding-right: 1.25rem;
+    padding-left: 1.25rem;
+    -ms-flex-preferred-size: 25%;
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+}

src/styles/_includes/_menu.scss

@@ -1,195 +1,188 @@
 .c-hamburger {
+  appearance: none;
+  border-radius: none;
+  border: none;
+  box-shadow: none;
+  cursor: pointer;
+  display: block;
+  font-size: 0;
+  height: 80px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: fixed;
+  text-indent: -9999px;
+  transition: background 0.2s;
+  width: 80px;
+  z-index: 10;
+
+  span {
+    background: $menu;
+    border-radius: 50px;
     display: block;
-    position: fixed;
-    overflow: hidden;
-    margin: 0;
-    padding: 0;
-    width: 80px;
-    height: 80px;
-    font-size: 0;
-    text-indent: -9999px;
-    appearance: none;
-    box-shadow: none;
-    border-radius: none;
-    border: none;
-    cursor: pointer;
-    transition: background 0.2s;
-    z-index: 10;
+    height: 3px;
+    left: 18px;
+    position: absolute;
+    right: 18px;
+    top: 44px;
 
-    span {
-    	display: block;
-    	position: absolute;
-    	top: 44px;
-    	left: 18px;
-    	right: 18px;
-    	height: 3px;
-    	background: $menu;
-        border-radius: 50px;
+    &::before,
+    &::after {
+      background-color: $menu;
+      border-radius: 50px;
+      content: '';
+      display: block;
+      height: 3px;
+      left: 0;
+      position: absolute;
+      width: 100%;
+    }
 
-    	&::before, &::after {
-    		position: absolute;
-    		display: block;
-    		left: 0;
-    		width: 100%;
-    		height: 3px;
-            border-radius: 50px;
-    		background-color: $menu;
-    		content: "";
-    	}
+    &::before {
+      top: -15px;
+    }
+    &::after {
+      bottom: -15px;
+    }
+  }
 
-    	&::before {
-    		top: -15px;
-    	}
-
-    	&::after {
-			bottom: -15px;
-    	}
-	}
-
-	&:focus {
-		outline: none;
-	}
+  &:focus {
+    outline: none;
+  }
 }
 
 .c-hamburger--htx {
-    left: auto;
-    right: 5px;
-    top: 0px;
+  left: auto;
+  right: 5px;
+  top: 0px;
 
-    span {
-	    transition: background 0s 0.2s;
+  span {
+    transition: background 0s 0.2s;
 
-	    &::before, &::after {
-    	    transition-duration: 0.2s, 0.2s;
-			transition-delay: 0.2s, 0s;
-	    }
-
-	    &::before {
- 			transition-property: top, transform;
-	    }
-
-	    &::after {
-			transition-property: bottom, transform;
-	    }
+    &::before,
+    &::after {
+      transition-duration: 0.2s, 0.2s;
+      transition-delay: 0.2s, 0s;
     }
+
+    &::before {
+      transition-property: top, transform;
+    }
+    &::after {
+      transition-property: bottom, transform;
+    }
+  }
 }
 
 .c-hamburger__input:checked + .c-hamburger--htx {
-
-    span {
-    	background: none;
-
-    	&::before {
-			top: 0;
-			transform: rotate(45deg);
-    	}
-
-		&::after {
-    		bottom: 0;
-    		transform: rotate(-45deg);
-		}
-
-		&::before, &::after {
-			transition-delay: 0s, 0.2s;
-		}
+  span {
+    background: none;
+    &::before {
+      top: 0;
+      transform: rotate(45deg);
     }
+    &::after {
+      bottom: 0;
+      transform: rotate(-45deg);
+    }
+    &::before,
+    &::after {
+      transition-delay: 0s, 0.2s;
+    }
+  }
 }
 
 .modal {
-    opacity: 0;
-    position: fixed;
-    text-align: center;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1;
-    transition: all .2s ease-in-out;
-    visibility: hidden;
+  opacity: 0;
+  position: fixed;
+  text-align: center;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  transition: all 0.2s ease-in-out;
+  visibility: hidden;
 }
 
 .modal__content {
-    background-color: $menu;
-    height: 300px;
-    width: 200px;
-    margin: 20px auto;
+  background-color: $menu;
+  height: 300px;
+  width: 200px;
+  margin: 20px auto;
 }
 
 .modal a {
-	color: $white;
+  color: $white;
 }
 
 .c-hamburger__input:checked ~ .modal {
-    opacity: 1;
-    background-color: $menu;
-    visibility: visible;
+  opacity: 1;
+  background-color: $menu;
+  visibility: visible;
 
-    .item {
-        font-weight: 700;
-
-    	a {
-    		transform: scale(1);
-    	}
-
-    	&:nth-child(1) a {
-    		transition-delay: 0s;
-    	}
-
-    	&:nth-child(2) a {
-    		transition-delay: 0.035s;
-    	}
-
-    	&:nth-child(3) a {
-    		transition-delay: 0.075s;
-    	}
-
-        &:nth-child(4) a {
-    		transition-delay: 0.0995s;
-    	}
+  .item {
+    font-weight: 700;
+    a {
+      transform: scale(1);
     }
+    &:nth-child(1) a {
+      transition-delay: 0s;
+    }
+    &:nth-child(2) a {
+      transition-delay: 0.035s;
+    }
+    &:nth-child(3) a {
+      transition-delay: 0.075s;
+    }
+    &:nth-child(4) a {
+      transition-delay: 0.0995s;
+    }
+  }
 }
 
-.c-hamburger__input:checked ~ .c-hamburger span::after, .c-hamburger__input:checked ~ .c-hamburger span::before {
-	background-color: $white;
+.c-hamburger__input:checked ~ .c-hamburger span::after,
+.c-hamburger__input:checked ~ .c-hamburger span::before {
+  background-color: $white;
 }
 
 input#hamburger-menu {
-    display: none;
+  display: none;
 }
 
 nav.nav {
-	.navigation {
-		position: absolute;
-		left: 0%;
-		width: 100%;
-		top: 50%;
-		-webkit-transform: translateY(-50%);
-		-moz-transform: translateY(-50%);
-		-ms-transform: translateY(-50%);
-		-o-transform: translateX(-50%);
-		transform: translateY(-50%);
-	}
+  .navigation {
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    -o-transform: translateX(-50%);
+    -webkit-transform: translateY(-50%);
+    left: 0%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+  }
 
-	ul, li {
-		margin: 0;
-		padding: 0;
-	}
+  ul,
+  li {
+    margin: 0;
+    padding: 0;
+  }
 
-	.item {
-		text-transform: capitalize;
-		font-size: 3em;
-		list-style: none;
-		font-weight: 400;
-		margin : .4em 0;
-		transition: all .2s ease-in-out;
+  .item {
+    text-transform: capitalize;
+    font-size: 3em;
+    list-style: none;
+    font-weight: 400;
+    margin: 0.4em 0;
+    transition: all 0.2s ease-in-out;
 
-		a {
-			display: block;
-			height: 100px;
-			line-height: 100px;
-			transition: all 400ms cubic-bezier(.17,.67,.38,1.46);
-    		transform: scale(0.3);
-		}
-
-	}
+    a {
+      display: block;
+      height: 100px;
+      line-height: 100px;
+      transform: scale(0.3);
+      transition: all 400ms cubic-bezier(0.17, 0.67, 0.38, 1.46);
+    }
+  }
 }

src/styles/_includes/_notifications.scss

@@ -1,145 +1,164 @@
 .ns-box {
-	position: fixed;
-	background: rgba(42, 45, 50, 0.85);
-	padding: 22px;
-	line-height: 1.4;
-	z-index: 1000;
-	pointer-events: none;
-	color: rgba(250, 251, 255, 0.95);
-	font-size: 90%;
-	font-weight: 600;
+  position: fixed;
+  background: rgba(42, 45, 50, 0.85);
+  padding: 22px;
+  line-height: 1.4;
+  z-index: 1000;
+  pointer-events: none;
+  color: rgba(250, 251, 255, 0.95);
+  font-size: 90%;
+  font-weight: 600;
 
-	&.ns-show {
-		pointer-events: auto;
-	}
+  &.ns-show {
+    pointer-events: auto;
+  }
 
-	a {
-		color: inherit;
-		opacity: 0.7;
-		font-weight: 700;
+  a {
+    color: inherit;
+    opacity: 0.7;
+    font-weight: 700;
 
-		&:hover, &:focus {
-			opacity: 1;
-		}
-	}
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+  }
 
-	p {
-		margin: 0;
-	}
+  p {
+    margin: 0;
+  }
 
-	&.ns-show, &.ns-visible {
-		pointer-events: auto;
-	}
+  &.ns-show,
+  &.ns-visible {
+    pointer-events: auto;
+  }
 }
 
 .ns-close {
-	width: 20px;
-	height: 20px;
-	position: absolute;
-	right: 4px;
-	top: 4px;
-	overflow: hidden;
-	text-indent: 100%;
-	cursor: pointer;
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  overflow: hidden;
+  text-indent: 100%;
+  cursor: pointer;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 
-	&:hover, &:focus {
-		outline: none;
-	}
+  &:hover,
+  &:focus {
+    outline: none;
+  }
 
-	&::before, &::after {
-		content: '';
-		position: absolute;
-		width: 3px;
-		height: 60%;
-		top: 50%;
-		left: 50%;
-		background: #6e6e6e;
-	}
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: 3px;
+    height: 60%;
+    top: 50%;
+    left: 50%;
+    background: #6e6e6e;
+  }
 
-	&:hover {
-		&::before, &::after {
-			background: #fff;
-		}
-	}
+  &:hover {
+    &::before,
+    &::after {
+      background: #fff;
+    }
+  }
 
-	&::before {
-		-webkit-transform: translate(-50%, -50%) rotate(45deg);
-		transform: translate(-50%, -50%) rotate(45deg);
-	}
+  &::before {
+    -webkit-transform: translate(-50%, -50%) rotate(45deg);
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
 
-	&::after {
-		-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-		transform: translate(-50%, -50%) rotate(-45deg);
-	}
+  &::after {
+    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
 }
 
 /* Growl-style notifications */
 .ns-growl {
-	top: 30px;
-	left: 30px;
-	max-width: 300px;
-	border-radius: 5px;
+  top: 30px;
+  left: 30px;
+  max-width: 300px;
+  border-radius: 5px;
 }
 
 .ns-growl p {
-	margin: 0;
-	line-height: 1.3;
+  margin: 0;
+  line-height: 1.3;
 }
 
-[class^="ns-effect-"].ns-growl.ns-hide,
-[class*=" ns-effect-"].ns-growl.ns-hide {
-	-webkit-animation-direction: reverse;
-	animation-direction: reverse;
+[class^='ns-effect-'].ns-growl.ns-hide,
+[class*=' ns-effect-'].ns-growl.ns-hide {
+  -webkit-animation-direction: reverse;
+  animation-direction: reverse;
 }
 
 /* Individual effects */
 
 /* Scale */
 .ns-effect-scale {
-	background: $pink;
-	box-shadow: 0 25px 10px -15px rgba(0,0,0,0.05);
+  background: $pink;
+  box-shadow: 0 25px 10px -15px rgba(0, 0, 0, 0.05);
 }
 
 .ns-effect-scale a:hover,
 .ns-effect-scale a:focus {
-	color: $white;
+  color: $white;
 }
 
 .ns-effect-scale .ns-close::before,
 .ns-effect-scale .ns-close::after {
-	background: $white;
+  background: $white;
 }
 
 .ns-effect-scale .ns-close:hover::before,
 .ns-effect-scale .ns-close:hover::after {
-	background: $black;
+  background: $black;
 }
 
 .ns-effect-scale.ns-show,
 .ns-effect-scale.ns-hide {
-	-webkit-animation-name: animScale;
-	animation-name: animScale;
-	-webkit-animation-duration: 0.25s;
-	animation-duration: 0.25s;
+  -webkit-animation-name: animScale;
+  animation-name: animScale;
+  -webkit-animation-duration: 0.25s;
+  animation-duration: 0.25s;
 }
 
 @-webkit-keyframes animScale {
-	0% { opacity: 0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
-	100% { opacity: 1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); }
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+  }
 }
 
 @keyframes animScale {
-	0% { opacity: 0; -webkit-transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
-	100% { opacity: 1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); transform: translate3d(0,0,0) scale3d(1,1,1); }
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
+    transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+  }
 }
 
 @media screen and (max-width: 25em) {
-	.ns-growl {
-		top: 10px;
-		left: 10px;
-		right: 10px;
-		max-width: none;
-	}
+  .ns-growl {
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    max-width: none;
+  }
 }

src/styles/_includes/_vars.scss

@@ -1,140 +1,75 @@
-$yellow: #FFDD67;
-$lightGray: #EBEFF1;
-$white: #FFF;
+$yellow: #ffdd67;
+$lightGray: #ebeff1;
+$white: #fff;
 $menu: #ff5a79;
 $black: #000;
 $pink: #ff5a79;
 
 // Emoji colors
 
-$art: #ff7281;
-$arrowUp: #00E676;
-$arrowDown: #EF5350;
-$apple: #f94e43;
-$bookmark: #80DEEA;
-$bug: #8cd842;
-$checkeredFlag: #ff7281;
-$construction: #FFB74D;
-$fire: #ff9d44;
-$greenHeart: #c5e763;
-$lock: #ffce49;
-$memo: #00E676;
-$penguin: #fa9a3f;
-$rocket: #00a9f0;
-$rotatingLight: #536DFE;
-$sparkles: #ffe55f;
-$whiteCheckMark: #77e856;
-$wrench: #FFC400;
-$zap: #40C4FF;
-$constructionWorker: #64B5F6;
-$recycle: #77e856;
-$tada: #f74d5f;
-$lipstick: #80DEEA;
-$whale: #00cbe8;
-$heavyPlusSign: #00E676;
-$heavyMinusSign: #EF5350;
-$chartWithUpwardsTrend: #CEDAE6;
-$globeWithMeridians: #E7F4FF;
-$ambulance: #fb584a;
-$pencil: #ffce49;
-$poop: #a78674;
-$package: #fdd0ae;
-$alien: #c5e763;
-$truck: #ef584a;
-$rewind: #56d1d8;
-$twistedRightwardsArrows: #56d1d8;
-$pageFacingUp: #d9e3e8;
-$bento : #ff5864;
-$boom: #f94f28;
-$okHand: #c5e763;
-$wheelchair: #00b1fb;
-$bulb: #ffce49;
-$beers: #fbb64b;
-$speechBalloon: #CEDAE6;
-$cardFileBox: #c5e763;
-$appleiOS: #8dc448;
-$robot: #39c2f1;
-$mute: #e6ebef;
-$loadSound: #23b4d2;
-$bustsInSilhouette: #d9e3e8;
-$chidrenCrossing: #ffce49;
-$pushpin: #39c2f1;
-$buildingConstruction: #ffe55f;
-$iphone: #40C4FF;
-$clownFace: #ff7281;
-$egg: #77e856;
-$seeNoEvil: #8bdfe7;
-$cameraFlash: #00a9f0;
-$alembic: #7f39fb;
-$mag: #ffe55f;
-$wheelOfDarma: #40C4FF;
-$label: #cb63e6;
-$seedling: #c5e763;
-$triangularFlagOnPost: #ffce49;
-
 $gitmojis: (
-	art: $art,
-	apple: $apple,
-	bookmark: $bookmark,
-	bug: $bug,
-	checkered-flag: $checkeredFlag,
-	construction: $construction,
-	fire: $fire,
-	green-heart: $greenHeart,
-	lock: $lock,
-	memo: $memo,
-	penguin: $penguin,
-	rocket: $rocket,
-	rotating-light: $rotatingLight,
-	sparkles: $sparkles,
-	white-check-mark: $whiteCheckMark,
-	wrench: $wrench,
-	zap: $zap,
-	construction-worker: $constructionWorker,
-	arrow-up: $arrowUp,
-	arrow-down: $arrowDown,
-	recycle: $recycle,
-	tada: $tada,
-	lipstick: $lipstick,
-	whale: $whale,
-	heavy-plus-sign: $heavyPlusSign,
-	heavy-minus-sign: $heavyMinusSign,
-	chart-with-upwards-trend: $chartWithUpwardsTrend,
-	globe-with-meridians: $globeWithMeridians,
-	ambulance: $ambulance,
-	pencil: $pencil,
-	poop: $poop,
-	package: $package,
-	alien: $alien,
-	truck: $truck,
-	rewind: $rewind,
-	twisted-rightwards-arrows: $twistedRightwardsArrows,
-	page-facing-up: $pageFacingUp,
-	bento: $bento,
-	boom: $boom,
-	ok-hand: $okHand,
-	wheelchair: $wheelchair,
-	bulb: $bulb,
-	beers: $beers,
-	speech-balloon: $speechBalloon,
-	card-file-box: $cardFileBox,
-	green-apple: $appleiOS,
-	robot: $robot,
-	mute: $mute,
-	loud-sound: $loadSound,
-	busts-in-silhouette: $bustsInSilhouette,
-	children-crossing: $chidrenCrossing,
-	pushpin: $pushpin,
-	building-construction: $buildingConstruction,
-	iphone: $iphone,
-	clown-face: $clownFace,
-  egg: $egg,
-	see-no-evil: $seeNoEvil,
-  camera-flash: $cameraFlash,
-  alembic: $alembic,
-	mag: $mag,
-	wheel-of-dharma: $wheelOfDarma,
-	label: $label,
-	seedling: $seedling,
-	triangular-flag-on-post: $triangularFlagOnPost,
-)
+  alembic: #7f39fb,
+  alien: #c5e763,
+  ambulance: #fb584a,
+  apple: #f94e43,
+  arrow-down: #8dc448,
+  arrow-up: #ef5350,
+  art: #00e676,
+  beers: #ff7281,
+  bento: #fbb64b,
+  bookmark: #ff5864,
+  boom: #80deea,
+  bug: #f94f28,
+  building-construction: #8cd842,
+  bulb: #ffe55f,
+  busts-in-silhouette: #ffce49,
+  camera-flash: #d9e3e8,
+  card-file-box: #00a9f0,
+  chart-with-upwards-trend: #c5e763,
+  checkered-flag: #cedae6,
+  children-crossing: #ff7281,
+  clown-face: #ffce49,
+  construction-worker: #ff7281,
+  construction: #ffb74d,
+  egg: #64b5f6,
+  fire: #77e856,
+  globe-with-meridians: #ff9d44,
+  green-apple: #e7f4ff,
+  green-heart: #c5e763,
+  heavy-minus-sign: #ef5350,
+  heavy-plus-sign: #00e676,
+  iphone: #40c4ff,
+  label: #cb63e6,
+  lipstick: #80deea,
+  lock: #23b4d2,
+  loud-sound: #ffce49,
+  mag: #ffe55f,
+  memo: #00e676,
+  mute: #e6ebef,
+  ok-hand: #c5e763,
+  package: #fdd0ae,
+  page-facing-up: #d9e3e8,
+  pencil: #ffce49,
+  penguin: #fa9a3f,
+  poop: #a78674,
+  pushpin: #39c2f1,
+  recycle: #77e856,
+  rewind: #56d1d8,
+  robot: #39c2f1,
+  rocket: #00a9f0,
+  rotating-light: #536dfe,
+  see-no-evil: #c5e763,
+  seedling: #8bdfe7,
+  sparkles: #ffe55f,
+  speech-balloon: #cedae6,
+  tada: #f74d5f,
+  triangular-flag-on-post: #ffce49,
+  truck: #ef584a,
+  twisted-rightwards-arrows: #56d1d8,
+  whale: #00cbe8,
+  wheel-of-dharma: #00b1fb,
+  wheelchair: #40c4ff,
+  white-check-mark: #77e856,
+  wrench: #ffc400,
+  zap: #40c4ff
+);

src/styles/style.scss

@@ -4,264 +4,280 @@
 @import '_includes/notifications';
 
 h1 {
-	font-size: 2em;
+  font-size: 2em;
 }
 
-html, body {
-	margin: 0;
-	padding: 0;
-	font-size: 16.5px;
-	font-family: Avenir, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-    "Fira Sans", "Droid Sans", "Helvetica Neue",
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 16.5px;
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
 }
 
 a {
-	transition: color .5s ease-in-out;
-	text-decoration: none;
-	color: $pink;
+  transition: color 0.5s ease-in-out;
+  text-decoration: none;
+  color: $pink;
 
-	&:hover {
-		animation: zomg .5s infinite;
-	}
+  &:hover {
+    animation: zomg 0.5s infinite;
+  }
 
-	&.btn:hover {
-		animation: none;
-	}
+  &.btn:hover {
+    animation: none;
+  }
 }
 
 code {
-	font-family: Avenir, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-    "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-	font-weight: 700;
-	font-size: 1.25em;
-	word-break: break-all;
+  font-weight: 700;
+  font-size: 1.25em;
+  word-break: break-all;
 }
 
 pre {
-	background-color: $yellow;
-	box-shadow: 0 4px darken($yellow, 15%);
-	padding: 1em;
-	border-radius: 4px
+  background-color: $yellow;
+  box-shadow: 0 4px darken($yellow, 15%);
+  padding: 1em;
+  border-radius: 4px;
 }
 
 section {
-	padding: .5em;
+  padding: 0.5em;
 }
 
 .header {
-	background-color: $yellow;
-	padding: 4.5em 2em;
-	text-align: center;
+  background-color: $yellow;
+  padding: 4.5em 2em;
+  text-align: center;
 
-	h2 {
-		padding: .5em 0;
-		margin: 0;
-		font-size: 2em;
-	}
+  h2 {
+    padding: 0.5em 0;
+    margin: 0;
+    font-size: 2em;
+  }
 
-	&-buttons {
-		padding: 1em 0;
-		text-align: center;
-	}
+  &-buttons {
+    padding: 1em 0;
+    text-align: center;
+  }
 }
 
 .single-emoji-logo {
-	opacity: 0;
+  opacity: 0;
 }
 
 .emoji-container {
-	background-color: #f5f5f5;
+  background-color: #f5f5f5;
 }
 
 .gitmoji-logo {
-	width: 100%;
-	height: 115px;
+  width: 100%;
+  height: 115px;
 }
 
 .btn {
-	display: inline-block;
-	cursor: pointer;
-	border-radius: 4px;
-	font-weight: 600;
-	padding: .75em 1em;
-	transition: none;
-	margin: .25em 0;
-	position: relative;
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 4px;
+  font-weight: 600;
+  padding: 0.75em 1em;
+  transition: none;
+  margin: 0.25em 0;
+  position: relative;
 
-	&:not(:first-child) {
-		margin-left: 1em;
-	}
+  &:not(:first-child) {
+    margin-left: 1em;
+  }
 
-	&-pink {
-		background-color: $pink;
-		color: $white;
-	    box-shadow: 0 4px darken($pink, 20%);
+  &-pink {
+    background-color: $pink;
+    color: $white;
+    box-shadow: 0 4px darken($pink, 20%);
 
-		&:hover {
-			top: 2px;
-			box-shadow: 0 2px darken($pink, 20%);
-		}
+    &:hover {
+      top: 2px;
+      box-shadow: 0 2px darken($pink, 20%);
+    }
 
-		&:active {
-			box-shadow: 0 0 $pink;
-			top: 4px;
-		}
-	}
+    &:active {
+      box-shadow: 0 0 $pink;
+      top: 4px;
+    }
+  }
 
-	.icon {
-		margin-right: .25em;
-	}
+  .icon {
+    margin-right: 0.25em;
+  }
 }
 
 .wrap {
-	max-width: 1100px;
-	margin: 0 auto;
+  max-width: 1100px;
+  margin: 0 auto;
 }
 
 main.wrap {
-	padding: 3.5em 2em;
+  padding: 3.5em 2em;
 }
 
 .emoji {
-	display: flex;
-	box-sizing: border-box;
+  display: flex;
+  box-sizing: border-box;
 
-	.gitmoji {
-		font-size: 5em;
-		cursor: pointer;
-		font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
-	}
+  .gitmoji {
+    font-size: 5em;
+    cursor: pointer;
+    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji',
+      'Segoe UI Symbol', 'Android Emoji', 'EmojiSymbols';
+  }
 
-	&-card {
-		background-color: $white;
-		border-radius: 4px;
-		box-shadow: 0 1px 2px 0 rgba(168, 182, 191, .6);
-		flex: 1;
-		margin: 1em 0;
-		transition: all .25s ease-out;
-		text-align: center;
-		overflow: hidden;
+  &-card {
+    background-color: $white;
+    border-radius: 4px;
+    box-shadow: 0 1px 2px 0 rgba(168, 182, 191, 0.6);
+    flex: 1;
+    margin: 1em 0;
+    transition: all 0.25s ease-out;
+    text-align: center;
+    overflow: hidden;
 
-		&:hover {
-			box-shadow: 0 10px 20px 0 rgba(168, 182, 191, .6);
-			transform: translateY(-1px);
-		}
-	}
+    &:hover {
+      box-shadow: 0 10px 20px 0 rgba(168, 182, 191, 0.6);
+      transform: translateY(-1px);
+    }
+  }
 
-	&-info {
-		padding: 1.5em;
-		word-break: break-all;
+  &-info {
+    padding: 1.5em;
+    word-break: break-all;
 
-		p {
-			color: #999;
-		    word-break: normal;
-		}
-	}
+    p {
+      color: #999;
+      word-break: normal;
+    }
+  }
 
-	&-header {
-		align-self: flex-start;
-		padding-top: 2em;
-		padding-bottom: .85em;
-		border-top-left-radius: 4px;
-		border-top-right-radius: 4px;
-	}
+  &-header {
+    align-self: flex-start;
+    padding-top: 2em;
+    padding-bottom: 0.85em;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
 
-	&-data {
-		display: flex;
-		align-items: center;
-	}
+  &-data {
+    display: flex;
+    align-items: center;
+  }
 
-	&-visible {
-		opacity: 1;
-	}
+  &-visible {
+    opacity: 1;
+  }
 }
 
 .contributor {
-	&-picture {
-		max-width: 100%;
-		border-radius: 50%;
-		padding: .5em;
-	}
+  &-picture {
+    max-width: 100%;
+    border-radius: 50%;
+    padding: 0.5em;
+  }
 }
 
 .icon {
-	width: 1em;
-	height: 1em;
+  width: 1em;
+  height: 1em;
 
-	&-heart {
-		margin: 0 .25em;
-	}
+  &-heart {
+    margin: 0 0.25em;
+  }
 }
 
 .footer {
-	padding: 1.5em;
-	background-color: #00e5ff;
-	color: $white;
+  padding: 1.5em;
+  background-color: #00e5ff;
+  color: $white;
 
-	nav {
-		-webkit-box-pack: end;
-		-ms-flex-pack: end;
-		justify-content: flex-end;
-		text-align: end;
+  nav {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+    text-align: end;
 
-		a:after {
-			content: "·";
-			color: $white!important;
-			margin: 0 .75em;
-		}
+    a:after {
+      content: '·';
+      color: $white !important;
+      margin: 0 0.75em;
+    }
 
-		a:last-child:after {
-			content: "";
-			margin: 0;
-		}
-	}
+    a:last-child:after {
+      content: '';
+      margin: 0;
+    }
+  }
 }
 
-@media(max-width: 768px) {
-	footer nav, footer h3 {
-		justify-content: center!important;
-		text-align: center!important;
-	}
+@media (max-width: 768px) {
+  footer nav,
+  footer h3 {
+    justify-content: center !important;
+    text-align: center !important;
+  }
 
-	.emoji .gitmoji {
-		font-size: 50px;
-	}
+  .emoji .gitmoji {
+    font-size: 50px;
+  }
 
-	.emoji-header {
-		padding-bottom: 1em;
-	}
+  .emoji-header {
+    padding-bottom: 1em;
+  }
 
-	.header h2 {
-		display: none;
-	}
+  .header h2 {
+    display: none;
+  }
 
-	.made-with-love, .footer-nav {
-		flex-basis: 100%;
-		max-width: 100%
-	}
+  .made-with-love,
+  .footer-nav {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
 }
 
-@media(min-width: 2048px) {
-	html, body {
-		font-size: 19px;
-	}
+@media (min-width: 2048px) {
+  html,
+  body {
+    font-size: 19px;
+  }
 }
 
 @each $gitmoji, $color in ($gitmojis) {
-	.#{$gitmoji} {
-		background-color: $color;
-	}
+  .#{$gitmoji} {
+    background-color: $color;
+  }
 }
 
 @keyframes zomg {
-  0%, 100% { color: #7ccdea;}
-  16%      { color: #0074D9;}
-  32%      { color: #2ECC40;}
-  48%      { color: #FFDC00;}
-  64%      { color: #B10DC9;}
-  80%      { color: #FF4136;}
+  0%,
+  100% {
+    color: #7ccdea;
+  }
+  16% {
+    color: #0074d9;
+  }
+  32% {
+    color: #2ecc40;
+  }
+  48% {
+    color: #ffdc00;
+  }
+  64% {
+    color: #b10dc9;
+  }
+  80% {
+    color: #ff4136;
+  }
 }

src/templates/_includes/_footer.pug

@@ -1,15 +0,0 @@
-footer.footer
-	.wrap
-		.row.middle-xs
-			.col-sm-6.made-with-love
-				h3
-					| Made with
-					svg.icon.icon-heart
-						use(xlink:href='#icon-heart')
-					| by
-					a(href='https://carloscuesta.me')  Carlos Cuesta
-			.col-sm-6.footer-nav
-				nav
-					a(href="/about") About
-					a(href="/contributors") Contributors
-					a(href="https://github.com/carloscuesta/gitmoji") GitHub

src/templates/_includes/_icons.pug

@@ -1,24 +0,0 @@
-svg(style='position: absolute; width: 0; height: 0;', width='0', height='0', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink')
-	defs
-		symbol#icon-heart(viewbox='0 0 64 64')
-			title heart
-			path.heart(d='m61.1 18.2c-6.4-17-27.2-9.4-29.1-.9-2.6-9-22.9-15.7-29.1.9-6.9 18.5 26.7 35.1 29.1 37.8 2.4-2.2 36-19.6 29.1-37.8', fill='#ff5a79')
-		symbol#icon-star(viewbox='0 0 64 64')
-			title star
-			path.twitter(d='M62,25.2H39.1L32,3l-7.1,22.2H2l18.5,13.7l-7,22.1L32,47.3L50.5,61l-7.1-22.2L62,25.2z', fill='#FFDD67')
-		symbol#icon-twitter(viewbox='0 0 64 64')
-			title twitter
-			g(fill='#42ade2')
-				path(d='m59.8 24.3c0 0 1.1-6.2-3.5-3.4 0 0-.4-6.3-4.3-1.9 0 0-2.1-3.9-4.4-.3-3.1 4.8-5.2 12.4-3.2 25l3.8-2.5c2.7-7.9 12.4-8.8 13.7-13.1.9-3-2.1-3.8-2.1-3.8')
-				path(d='m22.1 17.6l-9.9 3.6c2.2-12 16.6-11.2 16.6-11.2s-6.8 3.2-6.7 7.6')
-				path(d='m23.7 19.8l-10.5 1.4c4.8-11.2 18.7-7.3 18.7-7.3s-7.3 1.6-8.2 5.9')
-			g(fill='#ffd93b')
-				path(d='m2 29l5.4-1.4v3.6c0-.1-3.3-.6-5.4-2.2')
-				path(d='M7.4,27.5L2,24.8c3.6-2.8,7.7-1.9,7.7-1.9L7.4,27.5z')
-			g(fill='#e08828')
-				path(d='m33.8 53h-2.1v7.9c-.3.1-2.1-.1-2.9-.1-1.8 0-3.3 1.3-3.3 1.3h8.3v-9.1')
-				path(d='m25 53h-2.1v7.9c-.3.1-2.1-.1-2.9-.1-1.8 0-3.3 1.3-3.3 1.3h8.3v-9.1')
-				path(d='m54 36.2c3.9 0-4.1 17.5-23.3 17.5-13 0-23.9-5.2-23.9-21.5 0-10.1 6.4-18.3 19.5-15 13.3 3.5 6.5 19 27.7 19', fill='#42ade2')
-				path(d='m37.6 51.7c-15.6 0-14-12-27.9-11.2 5.1 15.8 27.9 11.2 27.9 11.2', fill='#fff')
-				path(d='m39.1 29.2c-10-9.8-20.2 6.2-7.9 12.6 12.1 6.2 20.4-4.8 20.4-4.8s-6.1-1.5-12.5-7.8', fill='#297b9d')
-			circle(cx='15.1', cy='24.9', r='2.5', fill='#3e4347')

src/templates/_includes/_meta.pug

@@ -1,33 +0,0 @@
-meta(name="author", content="Carlos Cuesta")
-meta(name="description", content="Gitmoji is an emoji guide for your commit messages. Aims to be a standarization cheatsheet for using emojis on GitHub's commit messages.")
-meta(charset="utf-8")
-meta(name="viewport", content="width=device-width, initial-scale=1.0")
-meta(name="twitter:card", content="summary")
-meta(name="twitter:title", content="gitmoji")
-meta(name="twitter:description", content="An emoji guide for your commit messages.")
-meta(name="twitter:image", content="https://gitmoji.carloscuesta.me/static/gitmoji.gif")
-meta(name="twitter:creator", content="@crloscuesta")
-meta(name="twitter:url", content="https://gitmoji.carloscuesta.me")
-meta(property="og:title", content="gitmoji")
-meta(name="og:description", content="An emoji guide for your commit messages.")
-meta(property="og:image",  content="https://gitmoji.carloscuesta.me/static/gitmoji.gif")
-meta(name="og:url", content="https://gitmoji.carloscuesta.me")
-meta(name="robots", content="index, follow")
-link(rel='apple-touch-icon', sizes='57x57', href='/static/apple-icon-57x57.png')
-link(rel='apple-touch-icon', sizes='60x60', href='/static/apple-icon-60x60.png')
-link(rel='apple-touch-icon', sizes='72x72', href='/static/apple-icon-72x72.png')
-link(rel='apple-touch-icon', sizes='76x76', href='/static/apple-icon-76x76.png')
-link(rel='apple-touch-icon', sizes='114x114', href='/static/apple-icon-114x114.png')
-link(rel='apple-touch-icon', sizes='120x120', href='/static/apple-icon-120x120.png')
-link(rel='apple-touch-icon', sizes='144x144', href='/static/apple-icon-144x144.png')
-link(rel='apple-touch-icon', sizes='152x152', href='/static/apple-icon-152x152.png')
-link(rel='apple-touch-icon', sizes='180x180', href='/static/apple-icon-180x180.png')
-link(rel='icon', type='image/png', sizes='192x192', href='/static/android-icon-192x192.png')
-link(rel='icon', type='image/png', sizes='32x32', href='/static/favicon-32x32.png')
-link(rel='icon', type='image/png', sizes='96x96', href='/static/favicon-96x96.png')
-link(rel='icon', type='image/png', sizes='16x16', href='/static/favicon-16x16.png')
-link(rel='manifest', href='/static/manifest.json')
-meta(name='msapplication-TileColor', content='#FFDD67')
-meta(name='msapplication-TileImage', content='/static/ms-icon-144x144.png')
-meta(name='theme-color', content='#FFDD67')
-meta(name='google-site-verification', content='78vmlhi_erc-UGybxcGwHyiUtf04wzYExTLa-4LoWio')

src/templates/_includes/_nav.pug

@@ -1,15 +0,0 @@
-nav.nav.row.middle-xs
-	input#hamburger-menu.c-hamburger__input(type='checkbox')
-	label.c-hamburger.c-hamburger--htx(for='hamburger-menu')
-		span
-	.modal
-		.modal-content
-			ul.navigation
-				li.item
-					a(href='https://gitmoji.carloscuesta.me', onmousedown="ga('send', 'event', 'Menu', 'Gitmoji');") Home
-				li.item
-					a(href='/about', onmousedown="ga('send', 'event', 'Menu', 'About');") About
-				li.item
-					a(href='/contributors', onmousedown="ga('send', 'event', 'Menu', 'About');") Contributors
-				li.item
-					a(href='https://github.com/carloscuesta/gitmoji', onmousedown="ga('send', 'event', 'Menu', 'GitHub');") GitHub

src/templates/about.pug

@@ -1,48 +0,0 @@
-doctype html
-html
-	head
-		title gitmoji | About | An emoji guide for your commit messages
-		link(rel="canonical", href="https://gitmoji.carloscuesta.me/about")
-		style
-			include ../../dist/css/style.css
-		include _includes/_meta.pug
-	body
-		include _includes/_icons.pug
-		include _includes/_nav.pug
-		header.header
-			include ../images/gitmoji.svg
-			h2 An emoji guide for your commit messages
-		main.wrap
-			section
-				h1 About
-				p #[strong Gitmoji is an emoji guide for GitHub commit messages]. Aims to be a standarization cheatsheet - guide for using #[a(href="http://emoji.muan.co") emojis] on GitHub's commit messages.
-				p #[strong Using emojis] on #[strong commit messages] provides an #[strong easy way] of #[strong identifying the purpose or intention of a commit] with only looking at the emojis used. As there are a lot of different emojis I found the need of creating a guide that can help to use emojis easier.
-				p This project is Open Source, that means everyone can participate, suggesting, discussing and adding new emojis. Take a look at the #[a(href="#contributing-gitmoji") contributing section] and #[a(href="https://github.com/carloscuesta/gitmoji/blob/master/.github/CONTRIBUTING.md") the guidelines for contributing].
-				div
-					a.btn.btn-pink(href="https://github.com/carloscuesta/gitmoji/")
-						svg.icon.icon-star
-							use(xlink:href='#icon-star')
-						| GitHub
-					a.btn.btn-pink(href="https://twitter.com/intent/tweet?text=gitmoji%20%E2%80%93%20An%20%23emoji%20guide%20for%20your%20commit%20messages%20by%20%40crloscuesta%20%F0%9F%98%8D%F0%9F%98%9C&url=https://gitmoji.carloscuesta.me", target="_blank")
-						svg.icon.icon-twitter
-							use(xlink:href='#icon-twitter')
-						| Tweet
-			section
-				h1 Using gitmoji with #[a(href="https://github.com/carloscuesta/gitmoji-cli") gitmoji-cli]
-				p An easy solution for using gitmoji from your command line, is to install #[a(href="https://github.com/carloscuesta/gitmoji-cli") gitmoji-cli]. A gitmoji interactive client for using emojis on commit messages.
-				pre
-					code $ npm i -g gitmoji-cli
-			section
-				h1#contributing-gitmoji Contributing to gitmoji
-				p Contributing to gitmoji it's a piece of cake 🍰! This project it's a static website built with #[i Pug, SCSS, Gulp and ES6]. All the gitmojis displayed are rendered from a JSON file. Before submitting any pull request, please follow the next steps:
-				ol
-					li #[a(href="https://github.com/carloscuesta/gitmoji/issues/new") Create an issue] filling the template.
-					li After discussing the idea, feature or suggestion, #[a(href="https://github.com/carloscuesta/gitmoji/fork") fork gitmoji]
-					li Create a new branch with the feature name. (Eg: add-emoji-deploy, fix-website-header)
-					li Make your changes and send a #[a(href="https://help.github.com/articles/creating-a-pull-request/") pull request ].
-				div
-					a.btn.btn-pink(href="https://github.com/carloscuesta/gitmoji/blob/master/.github/CONTRIBUTING.md") Contributing guidelines
-
-		include _includes/_footer.pug
-	script
-		include ../scripts/main.js

src/templates/contributors.pug

@@ -1,27 +0,0 @@
-doctype html
-html
-	head
-		title gitmoji | Contributors | An emoji guide for your commit messages
-		link(rel="canonical", href="https://gitmoji.carloscuesta.me/contributors")
-		style
-			include ../../dist/css/style.css
-		include _includes/_meta.pug
-	body
-		include _includes/_icons.pug
-		include _includes/_nav.pug
-		header.header
-			include ../images/gitmoji.svg
-			h2 Contributors
-		main.wrap
-			.row.center-xs
-				each contributor in contributors
-					article.contributor.col-xs-3.col-sm-2
-						a(href=contributor.html_url)
-							img.contributor-picture(src=contributor.avatar_url)
-		include _includes/_footer.pug
-		script.
-			var statuses = ['joy', 'loved', 'haha', 'sunglasses', 'sexy', 'tongue'];
-			document.getElementById(statuses[Math.floor(Math.random() * statuses.length)]).classList.add('emoji-visible');
-			(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','https://www.google-analytics.com/analytics.js','ga');
-			ga('create', 'UA-67824860-7', 'auto');
-			ga('send', 'pageview');

src/templates/index.pug

@@ -1,40 +0,0 @@
-doctype html
-html
-	head
-		title gitmoji | An emoji guide for your commit messages
-		link(rel="canonical", href="https://gitmoji.carloscuesta.me")
-		style
-			include ../../dist/css/style.css
-		include _includes/_meta.pug
-	body.emoji-container
-		include _includes/_icons.pug
-		include _includes/_nav.pug
-		header.header
-			include ../images/gitmoji.svg
-			h2 An emoji guide for your commit messages
-			div.header-buttons
-				a.btn.btn-pink(href="https://github.com/carloscuesta/gitmoji/")
-					svg.icon.icon-star
-						use(xlink:href='#icon-star')
-					| GitHub
-				a.btn.btn-pink(href="https://twitter.com/intent/tweet?text=gitmoji%20%E2%80%93%20An%20%23emoji%20guide%20for%20your%20commit%20messages%20by%20%40crloscuesta%20%F0%9F%98%8D%F0%9F%98%9C&url=https://gitmoji.carloscuesta.me", target="_blank")
-					svg.icon.icon-twitter
-						use(xlink:href='#icon-twitter')
-					| Tweet
-		main.wrap
-			.row.center-xs#gitmoji-list
-				each gitmoji in emojis.gitmojis
-					article.emoji.col-xs-12.col-sm-6.col-md-3
-						.emoji-card
-							header(class=gitmoji.name+' emoji-header')
-								span(data-clipboard-text=gitmoji.code).emoji-icon.gitmoji=gitmoji.emoji
-							.emoji-info
-								code=gitmoji.code
-								p=gitmoji.description
-		include _includes/_footer.pug
-	script(src='//cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js')
-	script
-		include ../scripts/clipboard.js
-		include ../scripts/main.js
-		include ../scripts/notificationFx.js
-		include ../scripts/notification.js