docs: use absolute links (#71)

* doc: use absolute links to have correct links in NPM

* feat: add  markdown lint dependencies

* feat: add markdown lint configuration

* feat: add markdown lint custom rule

* feat: add markdown lint script

* doc: correct markdown

* feat: add markdown-lint CI workflow

* doc : add section about markdown lint

Author: clementDours

.github/workflows/markdown-lint.yml

@@ -0,0 +1,35 @@
+name: Quality
+
+on: pull_request
+
+jobs:
+  quality-job:
+    name: Markdown lint
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        id: setup-node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: packages/eslint-plugin/.nvmrc
+
+      - name: Load dependency cache
+        uses: actions/cache@v3
+        with:
+          path: packages/eslint-plugin/node_modules
+          # add `-patches-${{ hashFiles('patches/**/*') }}` if you use patch-package
+          key: eslint-${{ runner.os }}-node-${{ steps.setup-node.outputs.node-version }}-modules-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            eslint-${{ runner.os }}-node-${{ steps.setup-node.outputs.node-version }}-modules-
+            eslint-${{ runner.os }}-node-${{ steps.setup-node.outputs.node-version }}-
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Markdown lint
+        run: yarn lint-md

.markdownlint.json

@@ -0,0 +1,4 @@
+{
+  "default": true,
+  "MD013": false
+}

.vscode/settings.json

@@ -2,5 +2,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": { "source.fixAll": true },
-  "eslint.workingDirectories": ["example-app", "packages/eslint-plugin"]
+  "eslint.workingDirectories": ["example-app", "packages/eslint-plugin"],
+  "markdownlint.customRules": [
+    "./markdown-lint-custom-rules/no-relative-links.js"
+  ]
 }

CONTRIBUTING.md

@@ -2,8 +2,12 @@
 
 Each package has its own specifications for contribution. Please refer to the `CONTRIBUTING.md` file in the package you want to contribute to.
 
-- [eslint-plugin](packages/eslint-plugin/CONTRIBUTING.md)
+- [eslint-plugin](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/CONTRIBUTING.md)
 
 ## Conventional commits
 
-We use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) to automate the release process. Please follow the commit message format described in the link above. Lerna will automatically generate the changelog for each package based on the commit messages since the last version. (see [README.md](README.md#publishing-a-new-version-of-a-package))
+We use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) to automate the release process. Please follow the commit message format described in the link above. Lerna will automatically generate the changelog for each package based on the commit messages since the last version. (see [README.md](https://github.com/bamlab/react-native-project-config/blob/main/README.md#publishing-a-new-version-of-a-package))
+
+## markdown lint
+
+We don't use relative links bewteen .md files, NPM handles them differently than github does, and this creates a bug on NPM where the links are broken. On this project you have markdown lint set up. You can download the [markdown lint VSCode extension](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint), it will lint your .md files as you write them. There is a [custom rule](https://github.com/bamlab/react-native-project-config/blob/main/markdown-lint-custom-rules/no-relative-links.js) that prevents the use of relative links in .md files. You can check it if you need to write a new custom rule. The scipt and the extension use this [configuration file](https://github.com/bamlab/react-native-project-config/blob/main/.vscode/settings.json), and the custom rules that are added in the VS Code [settings](https://github.com/bamlab/react-native-project-config/blob/main/.markdownlint.json)

README.md

@@ -12,8 +12,8 @@ There is also an example app under `packages/example-app` whose goal is to demon
 
 ## Using the configurations
 
-- [Using ESLint plugin](./packages/eslint-plugin/README.md)
-- [Using Typescript config](./packages/typescript-config/README.md)
+- [Using ESLint plugin](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/README.md)
+- [Using Typescript config](https://github.com/bamlab/react-native-project-config/blob/main/packages/typescript-config/README.md)
 
 ## Installing the project
 
@@ -32,7 +32,7 @@ Here are some useful commands:
 
 ## Publishing a new version of a package
 
-The publication is done automatically by this [Github Workflow](.github/workflows/publish.yml) when a new tag is pushed to the repository.
+The publication is done automatically by this [Github Workflow](https://github.com/bamlab/react-native-project-config/blob/main/.github/workflows/publish.yml) when a new tag is pushed to the repository.
 All you have to do is the versioning of the packages you want to publish.
 
 > You need to be on the main branch and have the repo write access to publish a new version.

markdown-lint-custom-rules/no-relative-links.js

@@ -0,0 +1,26 @@
+const { URL } = require('url');
+module.exports = {
+    names: ['MDC01', 'no-relative-links'],
+    description: 'Rule that reports an error for any relative links',
+    tags: ['links'],
+    function: (params, onError) => {
+        params.tokens.filter(token => token.type === 'inline').forEach(token => {
+            token.children.filter(child => child.type === 'link_open').forEach(child => {
+                const link = child.attrs.find(attribute => attribute[0] === 'href');
+                if (link) {
+                    const hrefValue = link[1];
+                    try {
+                        new URL(hrefValue);
+                    } catch (e) {
+                        if (!hrefValue.startsWith('#')) { // Allow anchor links
+                            onError({
+                                lineNumber: child.lineNumber,
+                                detail: `Found a relative link: ${hrefValue}`
+                            });
+                        }
+                    }
+                }
+            });
+        });
+    }
+};

package.json

@@ -5,8 +5,14 @@
     "packages/*",
     "example-app"
   ],
+  "scripts": {
+    "lint-md": "find . -name '*.md' -not -path './node_modules/*' -exec markdownlint --config ./.markdownlint.json --rules ./markdown-lint-custom-rules/no-relative-links.js {} +"
+  },
   "devDependencies": {
     "lerna": "^6.3.0",
+    "markdownlint": "^0.31.1",
+    "markdownlint-cli": "^0.37.0",
+    "markdownlint-rule-helpers": "^0.22.0",
     "prettier": "^2.8.1"
   }
 }

packages/eslint-plugin/.eslint-doc-generatorrc.js

@@ -5,6 +5,8 @@ const { prettier: prettierRC } = require("./package.json"); // or wherever your
 const config = {
   postprocess: (content, path) =>
     prettier.format(content, { ...prettierRC, parser: "markdown" }),
+  urlRuleDoc: path => `
+https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/${path}.md`,
 };
 
 module.exports = config;

packages/eslint-plugin/CHANGELOG.md

@@ -9,7 +9,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 - disable react-native/no-raw-text ([#60](https://github.com/bamlab/react-native-project-config/issues/60)) ([4a8ace3](https://github.com/bamlab/react-native-project-config/commit/4a8ace36fbf91421461b808c896a048ce5138152))
 
-# [1.0.0](https://github.com/bamlab/react-native-project-config/compare/@bam.tech/[email protected][email protected]/[email protected]) (2023-09-14)
+## [1.0.0](https://github.com/bamlab/react-native-project-config/compare/@bam.tech/[email protected][email protected]/[email protected]) (2023-09-14)
 
 ### Features
 

packages/eslint-plugin/CONTRIBUTING.md

@@ -7,16 +7,17 @@ It is important to keep it up to date and to add new rules and configurations wh
 
 If you feel that a rule could be useful to all react-native new projects, you can add it to the plugin by following these steps:
 
-#### Open an issue to discuss the rule with the community:
+### Open an issue to discuss the rule with the community
 
 - Go to this link : [RFC for a new rule on eslint-plugin ⭐](https://github.com/bamlab/react-native-project-config/issues/new?assignees=&labels=%F0%9F%93%8F+eslint-plugin%2C%E2%AD%90+enhancement&projects=&template=RFC-NEW-RULE.yml&title=%5BRFC%5D%3A+plugin%3Arule-name)
 - Fill the template with any relevant information about the rule (why it is needed, how it works, shareable configs to add it to, etc.)
 - Submit the issue and share it with the community
 
-#### After the discussion, if the rule is approved, you can create a PR to add the rule to the plugin:
+### After the discussion, if the rule is approved, you can create a PR to add the rule to the plugin
 
 - Create a new branch from `main` with the name `feat/plugin-rule-name`
 - Go to the corresponding shareable config file (for example `recommended.js`) and add the rule to the `rules` object:
+
   ```js
   // recommended.js
   module.exports = {
@@ -27,9 +28,13 @@ If you feel that a rule could be useful to all react-native new projects, you ca
     },
   }
   ```
+
   > If you feel a new shareable config should be created for the rule, please refer to the [Creating new shareable configuration](#creating-new-shareable-configuration) section.
+
 - (Optional) If the plugin the rule is part of is not yet added as a dependency:
+
   - add the plugin in the `plugins` array of the shareable config file:
+
     ```js
     // recommended.js
     module.exports = {
@@ -40,7 +45,9 @@ If you feel that a rule could be useful to all react-native new projects, you ca
       ],
     }
     ```
+
   - add the plugin to the `peerDependencies` of the `package.json` file:
+
     ```json
     // package.json
     {
@@ -51,9 +58,10 @@ If you feel that a rule could be useful to all react-native new projects, you ca
       },
     }
     ```
+
 - In the description of the PR, add `Closes #<issue number>` to link the PR to the issue and close it automatically when the PR is merged
 
-#### (OPTIONAL) Feel free to add a breaking example of the rule in the `example-app/eslint-breaking-examples` directory:
+#### (OPTIONAL) Feel free to add a breaking example of the rule in the `example-app/eslint-breaking-examples` directory
 
 Here's an example:
 
@@ -93,6 +101,7 @@ Creating new rules is quite simple:
    ```
 
 1. Update the README and run the tests:
+
    ```bash
    yarn update:eslint-docs
    yarn lint

packages/eslint-plugin/README.md

@@ -30,11 +30,11 @@ Then update your `.eslintrc` config file:
 
 This plugin exports multiple configurations that can be used in your `.eslintrc` config file:
 
-| Name                                                    | Description                                                                                                                                                  |
-| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [`@bam.tech/recommended`](./lib/configs/recommended.js) | The recommended config for all projects                                                                                                                      |
-| [`@bam.tech/tests`](./lib/configs/tests.js)             | The recommended config for test files. By default this applies to every file: put it in an `overrides` to filter on your test files.                         |
-| [`@bam.tech/a11y`](./lib/configs/a11y.js)               | [beta] Eslint config to check for accessibility. Still in beta to not break existing projects, but will be merged into the recommended config in the future. |
+| Name                                                                                                                                         | Description                                                                                                                                                  |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [`@bam.tech/recommended`](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/lib/configs/recommended.js) | The recommended config for all projects                                                                                                                      |
+| [`@bam.tech/tests`](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/lib/configs/tests.js)             | The recommended config for test files. By default this applies to every file: put it in an `overrides` to filter on your test files.                         |
+| [`@bam.tech/a11y`](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/lib/configs/a11y.js)               | [beta] Eslint config to check for accessibility. Still in beta to not break existing projects, but will be merged into the recommended config in the future. |
 
 These configs need some peer dependencies. You can list them with:
 
@@ -59,14 +59,15 @@ This plugin exports some custom rules that you can optionally use in your projec
 🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).\
 💡 Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 
-| Name                                                                                                     | Description                                                     | 💼  | 🔧  | 💡  |
-| :------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------- | :-- | :-- | :-- |
-| [accessibility-props-require-accessible](docs/rules/accessibility-props-require-accessible.md)           | Requires accessible prop when accessibility props are defined   | ♿  | 🔧  |     |
-| [do-not-use-role-on-image](docs/rules/do-not-use-role-on-image.md)                                       | Disallow role prop on Image component                           | ♿  | 🔧  |     |
-| [image-requires-accessible-prop](docs/rules/image-requires-accessible-prop.md)                           | Require accessible prop on image components                     | ♿  | 🔧  | 💡  |
-| [require-named-effect](docs/rules/require-named-effect.md)                                               | Enforces the use of named functions inside a useEffect          |     |     |     |
-| [requires-accessibility-label](docs/rules/requires-accessibility-label.md)                               | Enforces label when component accessible                        | ♿  |     | 💡  |
-| [requires-accessibility-role-when-accessible](docs/rules/requires-accessibility-role-when-accessible.md) | Enforces accessibilityRole or role when component is accessible | ♿  |     | 💡  |
+| Name                                        | Description | 💼  | 🔧  | 💡  |
+| :------------------------------------------ | :---------- | :-- | :-- | :-- |
+
+| [accessibility-props-require-accessible](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/accessibility-props-require-accessible.md) | Requires accessible prop when accessibility props are defined | ♿ | 🔧 | |
+| [do-not-use-role-on-image](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/do-not-use-role-on-image.md) | Disallow role prop on Image component | ♿ | 🔧 | |
+| [image-requires-accessible-prop](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/image-requires-accessible-prop.md) | Require accessible prop on image components | ♿ | 🔧 | 💡 |
+| [require-named-effect](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/require-named-effect.md) | Enforces the use of named functions inside a useEffect | | | |
+| [requires-accessibility-label](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/requires-accessibility-label.md) | Enforces label when component accessible | ♿ | | 💡 |
+| [requires-accessibility-role-when-accessible](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/docs/rules/requires-accessibility-role-when-accessible.md) | Enforces accessibilityRole or role when component is accessible | ♿ | | 💡 |
 
 <!-- end auto-generated rules list -->
 
@@ -88,6 +89,6 @@ To use a rule, just declare it in your `.eslintrc`:
 
 You can still customize your ESLint config by adding other configurations, plugins and rules to your `.eslintrc` config file.
 
-## [Contribute](./CONTRIBUTING.md)
+## [Contribute](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/CONTRIBUTING.md)
 
-If you find a useful rule that you feel every project at BAM should use, feel free to [contribute](./CONTRIBUTING.md).
+If you find a useful rule that you feel every project at BAM should use, feel free to [contribute](https://github.com/bamlab/react-native-project-config/blob/main/packages/eslint-plugin/CONTRIBUTING.md).