Merge pull request #813 from crowdsecurity/code-improvments

✨ Migrate linting & formatting to Biome + TypeScript improvements

Author: ziracmo

.github/workflows/lint.yaml

@@ -0,0 +1,31 @@
+name: Code quality
+
+on:
+  pull_request: 
+
+jobs:
+  quality:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+          cache-dependency-path: crowdsec-docs/package-lock.json
+        
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ./crowdsec-docs/
+
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          version: latest
+
+      - name: Run Biome
+        run: biome ci .

.gitignore

@@ -1,2 +1,3 @@
 .vscode
 node_modules
+.history

README.md

@@ -6,6 +6,12 @@ Online version of this documentation is available here: https://doc.crowdsec.net
 
 The documentation is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
 
+## Pre-requisites
+
+- Node.js (version 20 or later)
+- npm (Node package manager)
+- VSCode with recommended extensions installed (see `.vscode/extensions.json`)
+
 ## Installation
 
 ```console
@@ -28,3 +34,12 @@ npm run build
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 you can also use the `npm run serve` command to test the build locally.
+
+## Linting and Formatting
+
+This project uses [Biomes](https://biomejs.dev/) for linting and formatting. You can run the following commands:
+
+```console
+npm run lint
+npm run format
+```

biome.json

@@ -0,0 +1,64 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.0.6/schema.json",
+	"vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false },
+	"files": {
+		"ignoreUnknown": false,
+		"includes": [
+			"crowdsec-docs/**/*.ts",
+			"crowdsec-docs/**/*.tsx",
+			"crowdsec-docs/**/*.css",
+			"!**/node_modules/**",
+			"!crowdsec-docs/plugins/**",
+			"!crowdsec-docs/build/**"
+		]
+	},
+	"formatter": {
+		"enabled": true,
+		"formatWithErrors": false,
+		"indentStyle": "tab",
+		"indentWidth": 4,
+		"lineEnding": "lf",
+		"lineWidth": 140,
+		"attributePosition": "auto",
+		"bracketSameLine": false,
+		"bracketSpacing": true,
+		"expand": "auto",
+		"useEditorconfig": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"style": {
+				"useImportType": "off"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"jsxQuoteStyle": "double",
+			"quoteProperties": "asNeeded",
+			"trailingCommas": "es5",
+			"semicolons": "always",
+			"arrowParentheses": "always",
+			"bracketSameLine": false,
+			"quoteStyle": "double",
+			"attributePosition": "auto",
+			"bracketSpacing": true
+		}
+	},
+	"html": { "formatter": { "selfCloseVoidElements": "always" } },
+	"css": {
+		"formatter": {
+			"enabled": true,
+			"indentStyle": "tab",
+			"indentWidth": 4,
+			"lineEnding": "lf",
+			"lineWidth": 140
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": { "source": { "organizeImports": "on" } }
+	}
+}

crowdsec-docs/.npmrc

@@ -0,0 +1 @@
+v20.18.1

crowdsec-docs/.prettierrc

@@ -3,18 +3,19 @@
     "tailwind": {
       "config": "tailwind.config.js",
       "css": "src/css/custom.css",
-      "baseColor": "neutral",
-      "prefix": "tw-",
-      "cssVariables": false
+      "baseColor": "gray",
+      "prefix": "",
+      "cssVariables": true
     },
     "rsc": true,
     "aliases": {
-        "utils": "@/src/utils",
-        "components": "@/src/components",
-        "ui": "@/src/ui",
-        "hooks": "@/src/hooks",
-        "lib": "@/src/lib"
+        "utils": "@site/src/utils",
+        "components": "@site/src/components",
+        "ui": "@site/src/ui",
+        "hooks": "@site/src/hooks",
+        "lib": "@site/src/lib"
     },
-    "style": "default"
+    "style": "default",
+    "iconLibrary": "lucide"
   }
 

crowdsec-docs/babel.config.js

@@ -3,7 +3,7 @@ id: traefik
 title: Traefik
 ---
 
-import FormattedTabs from '@site/src/components/FormattedTabs'; 
+import FormattedTabs from '@site/src/components/formatted-tabs'; 
 
 # CrowdSec WAF QuickStart for Traefik
 

crowdsec-docs/components.json

@@ -3,7 +3,7 @@ id: getting_started
 title: Getting Started
 ---
 
-import AcademyPromo from '@site/src/components/AcademyPromo';
+import AcademyPromo from '@site/src/components/academy-promo';
 
 Welcome to CrowdSec!
 
@@ -15,8 +15,7 @@ To embark on your CrowdSec journey, the optimal starting point is to set up a co
 
 The CrowdSec console serves as a web-based interface enabling you to conveniently monitor all your CrowdSec instances from a centralized hub. To get started, simply [sign up here](https://app.crowdsec.net/signup).
 
-
-## Deploy 
+## Deploy
 
 ### Walkthrough
 
@@ -43,8 +42,9 @@ In our updated documentation, we now refer to CrowdSec as the "Security Engine"
 #### Prerequisites
 
 The Security Engine by default uses the following ports:
-  - 8080/tcp for the API
-  - 6060/tcp for the Prometheus metrics / Debugging
+
+-   8080/tcp for the API
+-   6060/tcp for the Prometheus metrics / Debugging
 
 If these ports are not available on your system, you can change them in the configuration file post installation. See [Configuration](/configuration/crowdsec_configuration.md) for more information.
 
@@ -55,15 +55,15 @@ Please note that the API is mandatory for your security engine, do not remove it
 For the most straightforward installation of the Security Engine, utilize the official repository, guaranteeing you'll constantly have the latest version.
 
 Please see the relevant documentation for your OS:
-- [Linux](/getting_started/install.mdx)
-- [FreeBSD](/getting_started/install_freebsd.md)
-- [Windows](/getting_started/getting_started_on_windows.md)
+
+-   [Linux](/getting_started/install.mdx)
+-   [FreeBSD](/getting_started/install_freebsd.md)
+-   [Windows](/getting_started/getting_started_on_windows.md)
 
 #### Installing from source
 
 Should you opt for a source-based installation, you can follow the steps outlined [here](/getting_started/install_source.mdx).
 
-
 ### Remediation Component
 
 After installing the Security Engine, you can proceed to install a Remediation Component, which is responsible for executing actions based on the decisions made by the Security Engine.
@@ -76,4 +76,4 @@ If you are uncertain about which one to install, please refer to our [Remediatio
 
 Since you created your account on the CrowdSec console, you can now [enroll your Security Engine to your account](https://app.crowdsec.net/security-engines?enroll-engine=true).
 
-To do so, you can find steps outlined [here](/u/getting_started/post_installation/console/#engines-page).
+To do so, you can find steps outlined [here](/u/getting_started/post_installation/console/#engines-page).