feat: added lefthook and commitlint

installed pre-commit hooks to prevent dump commits
configured commitlint :)
updated README

.release-it.json

@@ -23,25 +23,7 @@
     "./scripts/bump-version.js": {},
     "@release-it/conventional-changelog": {
       "preset": "conventionalcommits",
-      "infile": "CHANGELOG.md",
-      "types": [
-        {
-          "type": "fix",
-          "section": "Bug Fixes"
-        },
-        {
-          "type": "update",
-          "section": "Updates"
-        },
-        {
-          "type": "new",
-          "section": "New Features"
-        },
-        {
-          "type": "chore",
-          "hidden": true
-        }
-      ]
+      "infile": "CHANGELOG.md"
     }
   }
 }

CHANGELOG.md

@@ -1,13 +1,4 @@
-## [4.6.0](https://github.com/muuvmuuv/portfolio/compare/v3.14.0...v4.6.0) (2020-02-04)
-
-
-### New
-
-* added release-it ([678e1d8](https://github.com/muuvmuuv/portfolio/commit/678e1d814f7fb346929dee6f15561f64b7bcc755))
-
-
-## [4.5.0](https://github.com/muuvmuuv/portfolio/compare/v3.14.0...v4.5.0) (2020-02-04)
-
+### [4.5.0](https://github.com/muuvmuuv/portfolio/compare/v3.14.0...v4.5.0) (2020-02-04)
 
 * Added overlay HOC and new lightbox component ([f0864ad](https://github.com/muuvmuuv/portfolio/commit/f0864ad))
 * Blockquote responsive update ([7d2f6ac](https://github.com/muuvmuuv/portfolio/commit/7d2f6ac))
@@ -39,32 +30,24 @@
 * Updated hide content to break long string ([afecf44](https://github.com/muuvmuuv/portfolio/commit/afecf44))
 * Updated responsive anchor ([1c1cfa2](https://github.com/muuvmuuv/portfolio/commit/1c1cfa2))
 
-
-## [3.14.0](https://github.com/muuvmuuv/portfolio/compare/v3.11.0...v3.14.0) (2020-02-02)
-
+### [3.14.0](https://github.com/muuvmuuv/portfolio/compare/v3.11.0...v3.14.0) (2020-02-02)
 
 * Fix "window is not defined" in component ([e7389a7](https://github.com/muuvmuuv/portfolio/commit/e7389a7))
 * Huuge update ([c134958](https://github.com/muuvmuuv/portfolio/commit/c134958))
 * Recreated all icons to have a strict size ([47668be](https://github.com/muuvmuuv/portfolio/commit/47668be))
 * Updated logo ([51afb49](https://github.com/muuvmuuv/portfolio/commit/51afb49))
 
-
-## [3.11.0](https://github.com/muuvmuuv/portfolio/compare/v3.8.2...v3.11.0) (2020-01-22)
-
+### [3.11.0](https://github.com/muuvmuuv/portfolio/compare/v3.8.2...v3.11.0) (2020-01-22)
 
 * Changed fonts ([cf0e876](https://github.com/muuvmuuv/portfolio/commit/cf0e876))
 * Removed demo pages from prod builds ([cef903b](https://github.com/muuvmuuv/portfolio/commit/cef903b))
 * Updated favicon and logo ([000a69a](https://github.com/muuvmuuv/portfolio/commit/000a69a))
 
-
-### [3.8.2](https://github.com/muuvmuuv/portfolio/compare/v3.8.1...v3.8.2) (2020-01-21)
-
+#### [3.8.2](https://github.com/muuvmuuv/portfolio/compare/v3.8.1...v3.8.2) (2020-01-21)
 
 * Update README ([f6f01f6](https://github.com/muuvmuuv/portfolio/commit/f6f01f6))
 
-
-### 3.8.1 (2020-01-21)
-
+#### 3.8.1 (2020-01-21)
 
 * Add about page ([e4fdc15](https://github.com/muuvmuuv/portfolio/commit/e4fdc15))
 * Add breadcrumb ([855b553](https://github.com/muuvmuuv/portfolio/commit/855b553))

README.md

@@ -10,22 +10,17 @@ A beautiful Portfolio page made by me for me based on the awesome static site ge
 - [Building](#building)
   - [NGINX](#nginx)
   - [Now by Zeit](#now-by-zeit)
-- [Auditing](#auditing)
+- [Testing](#testing)
 - [Linting](#linting)
 - [Deployment](#deployment)
 - [Release](#release)
-- [Docker commands](#docker-commands)
-  - [Logs](#logs)
-  - [Performance](#performance)
-  - [Interactive shell session](#interactive-shell-session)
-    - [Image](#image)
-    - [Container](#container)
+- [Package Manager](#package-manager)
 
 ## Development
 
 Developing this project is easy, simply run this in your shell:
 
-```shell
+```
 npm start
 ```
 
@@ -36,128 +31,107 @@ at: `http://localhost:8000`
 
 ## Building
 
-Depending on what you want to build, there a different processes.
+Depending on what should be builded, there a different processes.
 
 ### NGINX
 
 A production like build [NGINX docker container](https://hub.docker.com/_/nginx). This
-will also be used for auditing the website so make sure you have
-[docker installed](https://docs.docker.com/install/) on your computer.
+will be used for testing/auditing the website.
+
+> Docker must be installed: [install docker desktop](https://docs.docker.com/install/)
 
-```shell
+```
 npm run build
 make up
 ```
 
 The website is now accessible on: `https://marvin.lcl`
 
-> You must set `.lcl` to your hosts file to point to `127.0.0.1`
+> You must set `.lcl` to your hosts file to point to `127.0.0.1`. Read more about it here:
+> https://passingcuriosity.com/2013/dnsmasq-dev-osx/
 
 ### Now by Zeit
 
 [Now by Zeit](https://zeit.co/home) provides its own
 [production like server](https://zeit.co/docs/now-cli#commands/dev) to test things locally
 before pushing it in the cloud.
 
-```shell
+```
 npm run serve
 ```
 
 The website is now accessible on: `http://localhost:59235`
 
-## Auditing
+## Testing
 
-To audit our site and see if it matches accessibility, SEO and performance requirements,
-we use [Axe](https://www.deque.com/axe/) and
-[Lighthouse](https://github.com/GoogleChrome/lighthouse/). Axe is more specific than
+To test the sites performance and do some audits I use [Axe](https://www.deque.com/axe/)
+and [Lighthouse](https://github.com/GoogleChrome/lighthouse/). Axe is more specific than
 Lighthouse but Lighthouse provides a good overview.
 
-```shell
+[TODO] update testing section
+
+```
 npm run audit
 ```
 
 ## Linting
 
-For linting I use [Stylelint](https://stylelint.io/), [ESLint](https://eslint.org/) and
-[Prettier](https://prettier.io/) (as the formatter). There are also official VS Code
-plugins for those, please install them before contributing. To run the linter, run this:
+For linting I use the below packages. There are also official VS Code plugins for those.
+To run the linter, run this:
 
-```shell
+```
 npm run lint
 ```
 
+- [Stylelint](https://stylelint.io/)
+- [ESLint](https://eslint.org/)
+- [Commitlint](https://commitlint.js.org/)
+- [Prettier](https://prettier.io/) (as the formatter)
+
 ## Deployment
 
 I'm using [Now by Zeit](https://zeit.co/home) to deploy my site.
 
-Pushing to the development branch will automatically create a new sub-domain and a build.
-So it's easy to view the changes in the production environment before pushing it to
-master.
+Pushing to the development branch will automatically create a new build. So it's easy to
+view the changes in the production environment before pushing it to the master branch.
 
-Pushing to master will create a build and directly upload it to the main domain. Please be
-sure to create one on the development branch first and test/lint the code.
+Pushing/Merging to the master branch will create or alias a build to the main domain.
 
 ## Release
 
 To release a new version type:
 
-```shell
+```
 npm run release
 ```
 
 Make sure to commit your changes first and write a good commit message as described here:
 https://www.conventionalcommits.org/
 
-```
+```yml
 <type>[optional scope]: <description>
 
 [optional body]
 
 [optional footer(s)]
 ```
 
-Example tags:
-
-- `fix` - for a bug fix
-- `update` - either for a backwards-compatible enhancement or for a simple change
-- `new` - implemented a new feature
-- `upgrade` - for a dependency upgrade
-- `chore` - for refactoring, adding tests, etc. (anything that isn't user-facing)
-
 Example commit message with a breaking change (major version increase):
 
-```
+```yml
 feat: allow provided config object to extend other configs
 
 BREAKING CHANGE: `extends` key in config file is now used for extending other config files
 ```
 
-## Docker commands
-
-### Logs
-
-```shell
-docker logs -f marvin-nginx
-```
-
-### Performance
-
-```shell
-docker-compose top nginx
-```
-
-### Interactive shell session
-
-#### Image
+## Package Manager
 
-```shell
-docker run -it --entrypoint bash nginx
-```
-
-#### Container
+I really like npm and used it a long time but thought I should try out Yarn or
+[pnpm](https://pnpm.js.org/) now. So for this project I will use
+[pnpm](https://pnpm.js.org/) which seems the most promissing and because I don't really
+understand what is going on with Yarn 2. Maybe I'll try it in another project someday.
 
-```shell
-docker exec -i -t marvin-nginx bash
-```
+To use pnpm with this project, think about all npm command but just call `pnpm` and not
+`npm` :).
 
 > Copyright © Marvin Heilemann

commitlint.config.js

@@ -0,0 +1,9 @@
+/**
+ * Commitlint config file.
+ *
+ * @package https://github.com/conventional-changelog/commitlint
+ */
+
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+}

lefthook.yml

@@ -0,0 +1,13 @@
+# Refer for explanation to following link:
+# https://github.com/Arkweid/lefthook/blob/master/docs/full_guide.md
+
+pre-commit:
+  commands:
+    lint-commit:
+      run: pnpm run lint:commit
+    lint-script:
+      glob: "*.{js,ts}x?"
+      run: pnpm eslint {staged_files}
+    lint-styles:
+      glob: "*.{scss,css}"
+      run: pnpm stylelint {staged_files}

package.json

@@ -28,7 +28,9 @@
     "lint": "run-s lint:*",
     "lint:js": "eslint ./gatsby ./plugins ./scripts ./src ./tests ./utils ./*.js",
     "lint:scss": "stylelint ./src/styles",
+    "lint:commit": "commitlint --from HEAD~1",
     "−−−−−−−−−−−−−−−−−  SCRIPTS/TOOLS  −−−−−−−−−−−−−−−−–−−": "",
+    "postinstall": "lefthook install",
     "release": "env-cmd -f ./.env.build release-it --disable-metrics",
     "pretty": "pretty-quick"
   },
@@ -84,6 +86,9 @@
     "vanilla-click-outside": "^2.0.0"
   },
   "devDependencies": {
+    "@arkweid/lefthook": "^0.7.1",
+    "@commitlint/cli": "^8.3.5",
+    "@commitlint/config-conventional": "^8.3.4",
     "@release-it/conventional-changelog": "^1.1.0",
     "chrome-launcher": "^0.12.0",
     "cross-env": "^7.0.0",
@@ -108,5 +113,9 @@
     "stylelint-prettier": "^1.1.2",
     "stylelint-scss": "^3.14.2",
     "taskz": "^1.3.0"
+  },
+  "engines": {
+    "node": ">=12",
+    "pnpm": ">=4"
   }
-}
+}