docs: adding linting section (#54)

.github/workflows/ci-apps-web.yml

@@ -92,7 +92,7 @@ jobs:
           # Speed up build: they are linted in a previous step
           NEXT_IGNORE_ESLINT: true
           # Speed up build: they are type-checked in a previous step
-          NEXT_IGNORE_TYPECHECK: true
+          NEXT_IGNORE_TYPE_CHECK: true
           # Speed up build: don't run if not needed, enable if it becomes needed
           NEXT_DISABLE_SOURCEMAPS: true
           # Don't send telemetry for ci

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/commit-msg

@@ -1,4 +1,8 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-docker-compose exec -T app npx --no --commitlint --edit "${1}"
+# run directly, without docker support
+# pnpm commitlint --edit "${1}"
+
+# through docker-compose
+docker-compose exec -T -e FORCE_COLOR=1 app pnpm commitlint --edit "${1}"

.npmrc

@@ -4,5 +4,8 @@ engine-strict=true
 ### https://gist.github.com/belgattitude/838b2eba30c324f1f0033a797bab2e31#recommended-npmrc
 # https://pnpm.io/next/npmrc#strict-peer-dependencies
 strict-peer-dependencies=false
+
 # https://pnpm.io/npmrc#auto-install-peers
 auto-install-peers=false
+
+store-dir=.pnpm-store/v3

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

Makefile

@@ -31,6 +31,7 @@ ENVSUBST ?= $(BUILDER) envsubst
 APP_RUNNER ?= $(DOCKER_COMPOSE) run --rm --no-deps app
 NPM_BIN ?= /bin/pnpm
 NPM_RUNNER ?= $(APP_RUNNER) $(NPM_BIN)
+NPM_COMPOSE_RUNNER ?= $(DOCKER_COMPOSE) exec -T -e FORCE_COLOR=1 app $(NPM_BIN) run
 
 
 # Self documenting Makefile code
@@ -171,29 +172,45 @@ pull: ## Pull latest docker image from docker hub for app container
 # ------------------------------------------------------------------------------------
 lint: ## Run lint task to fix issues
 	# $(NPM_RUNNER) lint
-	$(DOCKER_COMPOSE) exec -T -e FORCE_COLOR=1 app $(NPM_BIN) run lint:fix
+	$(NPM_COMPOSE_RUNNER) lint:fix
 .PHONY: lint
 
 lint-staged:
-	$(DOCKER_COMPOSE) exec -T -e FORCE_COLOR=1 app $(NPM_BIN) run lint-staged
+	$(NPM_COMPOSE_RUNNER) lint-staged
 .PHONY: lint-staged
 
 commitlint:
 	$(DOCKER_COMPOSE) exec -T -e FORCE_COLOR=1 app npx --no --commitlint --edit $(1)
 .PHONY: commitlint
 
+lint-md:
+	$(NPM_COMPOSE_RUNNER) lint:md
+.PHONY: lint-md
+
+lint-dist:
+	$(NPM_COMPOSE_RUNNER) lint:dist
+.PHONY: lint-dist
+
+lint-html:
+	$(NPM_COMPOSE_RUNNER) lint:html
+.PHONY: lint-html
+
 test: ## Run unit tests
-	$(DOCKER_COMPOSE) exec -T app $(NPM_BIN) run test
+	$(NPM_COMPOSE_RUNNER) test
 .PHONY: test
 
 format: ## Run prettier formatting
-	$(DOCKER_COMPOSE) exec -T app $(NPM_BIN) run format
+	$(NPM_COMPOSE_RUNNER) format
 .PHONY: format
 
 sort: ## Sort package.json across project
-	$(DOCKER_COMPOSE) exec -T app $(NPM_BIN) run lint:package-json
+	$(NPM_COMPOSE_RUNNER) lint:package-json
 .PHONY: sort
 
+analyze:
+	$(NPM_RUNNER) analyze
+.PHONY: analyze
+
 
 # Release
 # ------------------------------------------------------------------------------------

apps/docs/pages/guide/linting.mdx

@@ -8,16 +8,26 @@ using an out-of-scope variable, and passing the wrong number of arguments to a f
 
 ## 🛠️ Linters and Code Quality Tools
 
-### → lint-staged
+### → Lint-staged
 
 [Lint-staged](https://github.com/okonet/lint-staged) is a tool that allows you to run linters on Git staged files. This means that only the files you’ve changed will be linted.
 Used together with [Husky](https://github.com/typicode/husky), it can prevent bad code from being committed and pushed.
 
-**Example:**
+#### how it works
 
 ![](../../public/examples/lint-staged.svg)
 
-**Config Structure:**
+#### running
+
+```bash
+# just do git commit and it will run the linter
+$ git commit -am "fix: something"
+
+# or you can run it manually
+$ pnpm lint:staged
+```
+
+#### config structure
 
 ```bash
 .
@@ -38,41 +48,47 @@ Used together with [Husky](https://github.com/typicode/husky), it can prevent ba
 └── lint-staged.config.js  # base config to overwrite per apps/packages
 ```
 
-### → commitlint
+### → Commitlint
 
 [Commitlint](https://commitlint.js.org/#/) is a tool that checks if your commit messages meet the [conventional commit](https://www.conventionalcommits.org/en/v1.0.0) format. It’s used in conjunction with [Husky](https://github.com/typicode/husky) to ensure that your commit messages are in the correct format before you push them.
 
 We also use conventional commit to [generate changelog]() automatically. Check [Contributing]() section for more details.
 
-**Example:**
+#### how it works
 
 ![](https://github.com/conventional-changelog/commitlint/raw/master/docs/assets/commitlint.svg)
 
 We are using our own, shared config, installed as npm dependency - [@wayofdev/commitlint-config](https://www.npmjs.com/package/@wayofdev/commitlint-config)
 
-**Config Structure:**
+#### config structure
 
 ```bash
 .
 └── commitlint.config.js  # config extends @wayofdev/commitlint-config
 ```
 
-### → stylelint
+### → Stylelint
 
 [Stylelint](https://stylelint.io) is linter that helps you avoid errors and enforce conventions in your styles. It’s especially useful when you’re using a preprocessor, like Sass or Less, and want to ensure that your compiled CSS follows a certain standard. Configuration is shared from our [@wayofdev/stylelint-config](https://www.npmjs.com/package/@wayofdev/stylelint-config) package.
 
-**Config Structure:**
+#### config structure
 
 ```bash
 .
 └── .stylelintrc.js  # config extends @wayofdev/stylelint-config
 ```
 
-### → secretlint
+### → Secretlint
 
 [Secretlint](https://github.com/secretlint/secretlint) is a linter that helps you avoid committing secrets and credentials into git repositories. Configuration is shared from our [@wayofdev/secretlint-config](https://www.npmjs.com/package/@wayofdev/secretlint-config) package.
 
-**Config Structure:**
+#### running
+
+```bash
+
+```
+
+#### config structure
 
 ```bash
 .
@@ -85,11 +101,24 @@ We are using our own, shared config, installed as npm dependency - [@wayofdev/co
 └── .secretlintrc.js  # config extends @wayofdev/secretlint-config
 ```
 
-### → eslint
+### → Eslint
 
 [Eslint](https://eslint.org) is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions.
 
-**Config Structure:**
+#### running
+
+```bash
+# through docker, with --fix option enabled
+$ make lint
+
+# or directly
+$ pnpm lint:turbo
+
+# with --fix option enabled
+$ pnpm lint:turbo -- --fix
+```
+
+#### config structure
 
 ```bash
 .
@@ -108,31 +137,61 @@ We are using our own, shared config, installed as npm dependency - [@wayofdev/co
         └── .eslintrc.js
 ```
 
-### → prettier
+### → Prettier
 
 [Prettier](https://prettier.io) is used to format code. It’s an opinionated code formatter that enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
 
 Enabled by default in `packages/eslint-config-custom` and is shared across all workspaces.
 
-### → sort-package-json
+### → Sort-package-json
 
 [Sort-package-json](https://github.com/keithamus/sort-package-json) is used to sort package.json file. It’s a package.json formatter that enforces a consistent style by parsing your package.json and re-printing it with its own rules based on the well-known package.json keys order.
 
-### → htmlhint
+### running
+
+```bash
+# through docker
+$ make sort
+
+# or directly
+$ pnpm lint:package-json
+```
+
+### → Htmlhint
 
 [Htmlhint](https://github.com/htmlhint/HTMLHint) is used to lint html files. It’s a static code analysis tool for identifying problematic patterns found in HTML code.
 
-**Config Structure:**
+#### running
+
+```bash
+# through docker
+$ make lint-html
+
+# or directly
+$ pnpm lint:html
+```
+
+#### config structure
 
 `lint:html` command uses config, located in `./node_modules/@wayofdev/htmlhint-config/index.json` and is shared across all workspaces.
 
 Npm package with config is hosted on [npmjs.com](https://www.npmjs.com/package/@wayofdev/htmlhint-config) as `@wayofdev/htmlhint-config`.
 
-### → es-check
+### → Es-check
 
 [Es-check](https://github.com/yowainwright/es-check) checks the version of ES in JavaScript files with simple shell commands.
 
-**Config Structure:**
+#### running
+
+```bash
+# through docker
+$ make lint-dist
+
+# or directly
+$ pnpm lint:dist
+```
+
+#### config structure
 
 ```bash
 .
@@ -142,3 +201,38 @@ Npm package with config is hosted on [npmjs.com](https://www.npmjs.com/package/@
     └── web
         └── .escheckrc
 ```
+
+### → Markdownlint
+
+[Markdownlint](https://github.com/DavidAnson/markdownlint) is used to lint markdown files. It’s a Node.js style checker and lint tool for Markdown/CommonMark files. We are using our own, shared config, installed as npm dependency - [@wayofdev/markdownlint-config](https://www.npmjs.com/package/@wayofdev/markdownlint-config) and root config extends it.
+
+#### running
+
+```bash
+# through docker
+$ make lint-md
+
+# or directly
+$ pnpm lint:md
+```
+
+#### config structure
+
+```bash
+.
+└── .markdownlint.json  # config extends @wayofdev/markdownlint-config
+```
+
+### → Bundle-analyzer
+
+[Bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer) is used to analyze bundle size. It’s a tool that represents the size of your webpack bundle as a convenient interactive zoomable treemap.
+
+#### running
+
+```bash
+# through docker
+$ make analyze
+
+# or directly
+$ pnpm analyze
+```

apps/web/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "analyze": "BUNDLE_ANALYZE=both next build",
+    "analyze": "next build",
     "build": "next build",
     "dev": "next dev",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx --cache --cache-location ../../.cache/eslint/web.eslintcache",

package.json

@@ -64,6 +64,7 @@
     "deps:check": "pnpm dlx npm-check-updates@latest --configFileName .ncurc.yml --deep --mergeConfig",
     "deps:update": "pnpm dlx npm-check-updates@latest --configFileName .ncurc.yml -u --deep --mergeConfig && pnpm install",
     "lint:fix": "turbo run lint:fix && pnpm lint:package-json",
+    "analyze": "BUNDLE_ANALYZE=both ANALYZE=true NEXT_IGNORE_TYPE_CHECK=true NEXT_IGNORE_ESLINT=true NEXT_SENTRY_UPLOAD_DRY_RUN=true turbo run analyze --parallel",
     "cs": "changeset",
     "cs:version": "changeset version",
     "cs:release": "changeset publish"
@@ -99,7 +100,7 @@
     "sort-package-json": "^2.1.0",
     "stylelint": "^14.16.1",
     "stylelint-a11y": "^1.2.3",
-    "turbo": "^1.6.3",
+    "turbo": "^1.7.0",
     "typescript": "^4.9.4"
   },
   "packageManager": "[email protected]",