Skip to content

Commit

Permalink
docs: Removed a tons of external links (#139)
Browse files Browse the repository at this point in the history
  • Loading branch information
patricklafrance authored Sep 11, 2023
1 parent b499b26 commit 934df9b
Show file tree
Hide file tree
Showing 26 changed files with 76 additions and 76 deletions.
2 changes: 1 addition & 1 deletion docs/browserslist/configure-project.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ Refer to the [Browserslist documentation](https://github.com/browserslist/browse

## 4. Try it :rocket:

To test your new [Browserslist](https://browsersl.ist/) configuration, open a terminal at the root of the project and execute the following command:
To test your new Browserslist configuration, open a terminal at the root of the project and execute the following command:

+++ pnpm
```bash
Expand Down
2 changes: 1 addition & 1 deletion docs/default.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ npm create @workleap/project@latest <output-directory>

Starting a new web application is still an arduous task. There are so many tools to choose from, learn, install and configure, it can be daunting.

For an organization like [Workleap](https://workleap.com/), with a large suite of products, it **doesn't make sense to start over every time** we invest in a new idea or add a new vertical to an existing product. Developers working on a new project shouldn't spend their first day's figuring out which [ESLint](https://eslint.org/) rules to enable/disable, or how to transpile their [React](https://react.dev/) code, they should rather **focus on writing features code**.
For an organization like Workleap, with a large suite of products, it **doesn't make sense to start over every time** we invest in a new idea or add a new vertical to an existing product. Developers working on a new project shouldn't spend their first day's figuring out which ESLint rules to enable/disable, or how to transpile their React code, they should rather **focus on writing features code**.

### Filling the gap

Expand Down
2 changes: 1 addition & 1 deletion docs/eslint/advanced-composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ If the default [by project type configurations](default.md/#available-configurat
| :icon-mark-github: [typescript](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/typescript.ts) | Rules for [TypeScript](https://www.typescriptlang.org/) files. |
| :icon-mark-github: [react](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/react.ts) | Rules for [React](https://react.dev/) files. |
| :icon-mark-github: [jest](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/jest.ts) | Rules for [Jest](https://jestjs.io/) files. |
| :icon-mark-github: [testing-library](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/testing-library.ts) | Rules for Jest files using [testing-library](https://testing-library.com/). |
| :icon-mark-github: [testing-library](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/testing-library.ts) | Rules for Jest files using [Testing Library](https://testing-library.com/). |
| :icon-mark-github: [storybook](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/storybook.ts) | Rules for [Storybook](https://storybook.js.org/) story files. |
| :icon-mark-github: [mdx](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/mdx.ts) | Rules for [MDX](https://mdxjs.com/) files (used for Storybook MDX stories). |

Expand Down
8 changes: 4 additions & 4 deletions docs/eslint/default.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,14 @@ This way, it's pretty straightforward for the consumer to configure ESLint as it

| Name | Description |
| --- | --- |
| :icon-mark-github: [web-application](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/by-project-type/web-application.ts) | For web applications developed with [React](https://react.dev/) and [TypeScript](https://www.typescriptlang.org/). |
| :icon-mark-github: [react-library](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/by-project-type/react-library.ts) | For TypeScript libraries developed **with** [React](https://react.dev/). |
| :icon-mark-github: [typescript-library](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/by-project-type/typescript-library.ts) | For TypeScript libraries developed **without** [React](https://react.dev/). |
| :icon-mark-github: [web-application](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/by-project-type/web-application.ts) | For web applications developed with React and TypeScript. |
| :icon-mark-github: [react-library](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/by-project-type/react-library.ts) | For TypeScript libraries developed **with** React. |
| :icon-mark-github: [typescript-library](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/by-project-type/typescript-library.ts) | For TypeScript libraries developed **without** React. |
| :icon-mark-github: [monorepo-workspace](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/by-project-type/monorepo-workspace.ts) | For the workspace configuration of a monorepo solution. |

## Prettier

For a complete explanation of why we chose to stick with [ESLint](https://eslint.org/) for stylistic rules rather than migrating to [Prettier](https://prettier.io/), read the following [article](https://antfu.me/posts/why-not-prettier).
For a complete explanation of why we chose to stick with ESLint for stylistic rules rather than migrating to Prettier, read the following [article](https://antfu.me/posts/why-not-prettier).

## Getting started

Expand Down
2 changes: 1 addition & 1 deletion docs/eslint/integrate-vscode.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ meta:

## 1. Install the ESLint extension

Open [VS Code](https://code.visualstudio.com/) and install the [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension.
Open VS Code and install the [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension.

## 2. Configure VS Code

Expand Down
12 changes: 6 additions & 6 deletions docs/eslint/setup-monorepo.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ Then, open the newly created file and extend the default configuration with the

## 3. Ignore files

[ESLint](https://eslint.org/) can be configured to [ignore](https://eslint.org/docs/latest/use/configure/ignore) certain files and directories while linting by specifying one or more glob patterns.
ESLint can be configured to [ignore](https://eslint.org/docs/latest/use/configure/ignore) certain files and directories while linting by specifying one or more glob patterns.

To do so, first, create a `.eslintignore` file at the root of the solution workspace:

Expand Down Expand Up @@ -86,7 +86,7 @@ node_modules

## 4. Configure indent style

[ESLint](https://eslint.org/) offers [built-in rules](https://eslint.org/docs/latest/rules/indent) for configuring the indentation style of a codebase. However, there's a catch: when [VS Code auto-formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting) feature is enabled, it might conflict with the configured indentation rules if they are set differently.
ESLint offers [built-in rules](https://eslint.org/docs/latest/rules/indent) for configuring the indentation style of a codebase. However, there's a catch: when [VS Code auto-formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting) feature is enabled, it might conflict with the configured indentation rules if they are set differently.

To guarantee a consistent indentation, we recommend using [EditorConfig](https://editorconfig.org/) on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and [VS Code](https://code.visualstudio.com/).

Expand Down Expand Up @@ -187,7 +187,7 @@ Then, open the newly created file and extend the default configuration with one

### web-application

For an application developed with [TypeScript](https://www.typescriptlang.org/) and [React](https://react.dev/), use the following configuration:
For an application developed with TypeScript and React, use the following configuration:

```json !#4 packages/app/.eslintrc.json
{
Expand All @@ -199,7 +199,7 @@ For an application developed with [TypeScript](https://www.typescriptlang.org/)

### react-library

For a [TypeScript](https://www.typescriptlang.org/) library developed **with** [React](https://react.dev/), use the following configuration:
For a TypeScript library developed **with** React, use the following configuration:

```json !#4 packages/app/.eslintrc.json
{
Expand All @@ -211,7 +211,7 @@ For a [TypeScript](https://www.typescriptlang.org/) library developed **with** [

### typescript-library

For a [TypeScript](https://www.typescriptlang.org/) library developed **without** [React](https://react.dev/), use the following configuration:
For a TypeScript library developed **without** React, use the following configuration:

```json !#4 packages/app/.eslintrc.json
{
Expand All @@ -231,7 +231,7 @@ New projects shouldn't have to customize the default configurations offered by `

## 10. Try it :rocket:

To test your new [ESLint](https://eslint.org/) setup, open a JavaScript file, type invalid code (e.g. `var x = 0;`), then save. Open a terminal at the root of the solution and execute the [CLI script added earlier](#5-add-a-cli-script):
To test your new ESLint setup, open a JavaScript file, type invalid code (e.g. `var x = 0;`), then save. Open a terminal at the root of the solution and execute the [CLI script added earlier](#5-add-a-cli-script):

+++ pnpm
```bash
Expand Down
10 changes: 5 additions & 5 deletions docs/eslint/setup-polyrepo.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ Then, open the newly created file and extend the default configuration with one

### web-application

For an application developed with [TypeScript](https://www.typescriptlang.org/) and [React](https://react.dev/), use the following configuration:
For an application developed with TypeScript and React, use the following configuration:

```json !#4 .eslintrc.json
{
Expand All @@ -55,7 +55,7 @@ For an application developed with [TypeScript](https://www.typescriptlang.org/)

### react-library

For a [TypeScript](https://www.typescriptlang.org/) library developed **with** [React](https://react.dev/), use the following configuration:
For a TypeScript library developed **with** React, use the following configuration:

```json !#4 .eslintrc.json
{
Expand All @@ -67,7 +67,7 @@ For a [TypeScript](https://www.typescriptlang.org/) library developed **with** [

### typescript-library

For a [TypeScript](https://www.typescriptlang.org/) library developed **without** [React](https://react.dev/), use the following configuration:
For a TypeScript library developed **without** React, use the following configuration:

```json !#4 .eslintrc.json
{
Expand All @@ -79,7 +79,7 @@ For a [TypeScript](https://www.typescriptlang.org/) library developed **without*

## 3. Ignore files

[ESLint](https://eslint.org/) can be configured to [ignore](https://eslint.org/docs/latest/use/configure/ignore) certain files and directories while linting by specifying one or more glob patterns.
ESLint can be configured to [ignore](https://eslint.org/docs/latest/use/configure/ignore) certain files and directories while linting by specifying one or more glob patterns.

To do so, first, create an `.eslintignore` file at the root of the solution:

Expand Down Expand Up @@ -157,7 +157,7 @@ New projects shouldn't have to customize the default configurations offered by `

## 7. Try it :rocket:

To test your new [ESLint](https://eslint.org/) setup, open a JavaScript file, type invalid code (e.g. `var x = 0;`), then save. Open a terminal at the root of the solution and execute the [CLI script added earlier](#5-add-a-cli-script):
To test your new ESLint setup, open a JavaScript file, type invalid code (e.g. `var x = 0;`), then save. Open a terminal at the root of the solution and execute the [CLI script added earlier](#5-add-a-cli-script):

+++ pnpm
```bash
Expand Down
8 changes: 4 additions & 4 deletions docs/postcss/configure-project.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ project
├── postcss.config.ts
```

Then, open the newly created file and `export` the [PostCSS](https://postcss.org/) configuration by using the `defineConfig(options)` function:
Then, open the newly created file and `export` the PostCSS configuration by using the `defineConfig(options)` function:

```ts !#3 postcss.config.ts
import { defineConfig } from "@workleap/postcss-configs";
Expand Down Expand Up @@ -155,7 +155,7 @@ export default defineConfig({

## 5. Configure webpack

To integrate with [webpack](https://webpack.js.org/), update your configuration file to include a [postcss-loader](https://www.npmjs.com/package/postcss-loader):
To integrate with webpack, update your configuration file to include a [postcss-loader](https://www.npmjs.com/package/postcss-loader):

```js !#12 webpack.config.js
// @ts-check
Expand All @@ -179,7 +179,7 @@ export default {

## 6. Try it :rocket:

To test your new [PostCSS](https://postcss.org/) configuration, create and import a CSS file with the following code:
To test your new PostCSS configuration, create and import a CSS file with the following code:

```css example.css
.example {
Expand Down Expand Up @@ -214,7 +214,7 @@ Then, process the file with `postcss-cli` by executing the following command in
npx postcss example.css -o out.css
```

Whether you processed the CSS with webpack or `postcss-cli`, most of the CSS properties in the `.example` CSS class should have been prefixed (it can vary based on your [Browserslist](https://browsersl.ist/) configuration):
Whether you processed the CSS with webpack or `postcss-cli`, most of the CSS properties in the `.example` CSS class should have been prefixed (it can vary based on your Browserslist configuration):

```css out.css
.example {
Expand Down
2 changes: 1 addition & 1 deletion docs/postcss/default.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ As we actively work on improving our build time and **minimize** the number of t

Here's a couple of ideas to move away from PostCSS:

- Prefer native CSS to [SCSS](https://sass-lang.com/documentation/syntax/).
- Prefer native CSS to SCSS.
- Avoid CSS nesting, it usually makes code harder to read anyway. If you really need nesting, [native support](https://www.w3.org/TR/css-nesting-1/) is coming soon.
- Force developers to use `rem` by disabling the use of `px` with [Stylelint](https://stylelint.io/).
- Prefix CSS properties directly in the codebase rather than relying on [Autoprefixer](https://github.com/postcss/autoprefixer). As browser vendors are now [putting experimental features behind a flag](https://github.com/postcss/autoprefixer) rather than using prefixes, there aren't many CSS properties still requiring a prefix.
Expand Down
6 changes: 3 additions & 3 deletions docs/stylelint/default.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ npm create @workleap/project@latest <output-directory>
+++
!!!

## Sass
## SCSS

While [Sass](https://sass-lang.com/) still offers numerous advantages, as we actively work on improving our build time and **minimize** the number of tools **compiling/transpiling** frontend code, we choose to move away from Sass and not provide any Stylelint's rules for Sass. If you are still using Sass strictly for nesting, note that [native support for nesting](https://www.w3.org/TR/css-nesting-1/) is coming soon to CSS.
While SCSS still offers numerous advantages, as we actively work on improving our build time and **minimize** the number of tools **compiling/transpiling** frontend code, we choose to move away from Sass and not provide any Stylelint's rules for Sass. If you are still using Sass strictly for nesting, note that [native support for nesting](https://www.w3.org/TR/css-nesting-1/) is coming soon to CSS.

## Prettier

Expand All @@ -43,7 +43,7 @@ Since we choose to [stick with ESLint for JavaScript and JSON stylistic rules](.
!**/*.css
```

Otherwise, Prettier will also format your `.js,.json,.ts` files and you'll end up with conflicts between Prettier and [ESLint](https://eslint.org/).
Otherwise, Prettier will also format your `.js,.json,.ts` files and you'll end up with conflicts between [Prettier](https://prettier.io/) and [ESLint](https://eslint.org/).

## Getting started

Expand Down
2 changes: 1 addition & 1 deletion docs/stylelint/integrate-vscode.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ meta:

## 1. Install the Stylelint extension

Open [VS Code](https://code.visualstudio.com/) and install the [stylelint.vscode-stylelint](https://marketplace.visualstudio.com/items?stylelint.vscode-stylelint.vscode-eslint) extension.
Open VS Code and install the [stylelint.vscode-stylelint](https://marketplace.visualstudio.com/items?stylelint.vscode-stylelint.vscode-eslint) extension.

## 2. Configure VS Code

Expand Down
6 changes: 3 additions & 3 deletions docs/stylelint/setup-monorepo.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ Then, open the newly created file and extend the default configuration with the

## 3. Ignore files

[Stylelint](https://stylelint.io/) can be configured to [ignore](https://stylelint.io/user-guide/ignore-code#files-entirely) certain files and directories while linting by specifying one or more glob patterns.
Stylelint can be configured to [ignore](https://stylelint.io/user-guide/ignore-code#files-entirely) certain files and directories while linting by specifying one or more glob patterns.

To do so, first, create an `.stylelintignore` file at the root of the solution workspace:

Expand Down Expand Up @@ -108,9 +108,9 @@ Then, open the newly created file and paste the following ignore rules:

## 5. Configure indent style

[Prettier](https://prettier.io/) offers [built-in rules](https://prettier.io/docs/en/options#tab-width) for configuring the indentation style of a codebase. However, there's a catch: when [VS Code auto-formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting) feature is enabled, it might conflict with the configured indentation rules if they are set differently.
Prettier offers [built-in rules](https://prettier.io/docs/en/options#tab-width) for configuring the indentation style of a codebase. However, there's a catch: when [VS Code auto-formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting) feature is enabled, it might conflict with the configured indentation rules if they are set differently.

To guarantee a consistent indentation, we recommend using [EditorConfig](https://editorconfig.org/) on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and [VS Code](https://code.visualstudio.com/).
To guarantee a consistent indentation, we recommend using [EditorConfig](https://editorconfig.org/) on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and VS Code.

First, create a `.editorconfig` file at the root of the solution workspace:

Expand Down
6 changes: 3 additions & 3 deletions docs/stylelint/setup-polyrepo.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ Then, open the newly created file and extend the default configuration with the

## 3. Ignore files

[Stylelint](https://stylelint.io/) can be configured to [ignore](https://stylelint.io/user-guide/ignore-code#files-entirely) certain files and directories while linting by specifying one or more glob patterns.
Stylelint can be configured to [ignore](https://stylelint.io/user-guide/ignore-code#files-entirely) certain files and directories while linting by specifying one or more glob patterns.

To do so, first, create a `.stylelintignore` file at the root of the solution:

Expand Down Expand Up @@ -95,9 +95,9 @@ Then, open the newly created file and paste the following ignore rules:

## 5. Configure indent style

[Prettier](https://prettier.io/) offers [built-in rules](https://prettier.io/docs/en/options#tab-width) for configuring the indentation style of a codebase. However, there's a catch: when [VS Code auto-formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting) feature is enabled, it might conflict with the configured indentation rules if they are set differently.
Prettier offers [built-in rules](https://prettier.io/docs/en/options#tab-width) for configuring the indentation style of a codebase. However, there's a catch: when [VS Code auto-formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting) feature is enabled, it might conflict with the configured indentation rules if they are set differently.

To guarantees a consistent indentation, we recommend using [EditorConfig](https://editorconfig.org/) on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including Prettier and [VS Code](https://code.visualstudio.com/).
To guarantees a consistent indentation, we recommend using [EditorConfig](https://editorconfig.org/) on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including Prettier and VS Code.

First, create a `.editorconfig` file at the root of the solution:

Expand Down
Loading

0 comments on commit 934df9b

Please sign in to comment.