merge

Author: blotus

.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

@@ -7,6 +7,7 @@ title: Nginx / OpenResty
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import CodeBlock from '@theme/CodeBlock';
+import UnderlineTooltip from '@site/src/components/underline-tooltip';
 
 # CrowdSec WAF QuickStart for Nginx/OpenResty
 
@@ -42,7 +43,7 @@ To begin setting up the AppSec Component, the initial step is to install a relev
 
 We will utilize the [`crowdsecurity/appsec-virtual-patching`](https://app.crowdsec.net/hub/author/crowdsecurity/collections/appsec-virtual-patching) collection, which offers a wide range of rules aimed at identifying and preventing the exploitation of known vulnerabilities.
 
-This [collection](/concepts.md#collections) is regularly updated to include protection against newly discovered vulnerabilities. Upon installation, it receives automatic daily updates to ensure your protection is always current.
+This <UnderlineTooltip tooltip="Collections are bundle of parsers, scenarios, postoverflows that form a coherent package.">collection</UnderlineTooltip> is regularly updated to include protection against newly discovered vulnerabilities. Upon installation, it receives automatic daily updates to ensure your protection is always current.
 Furthermore we also install the [`crowdsecurity/appsec-generic-rules`](https://app.crowdsec.net/hub/author/crowdsecurity/collections/appsec-generic-rules) collection. This collection contains detection scenarios for generic attack vectors. It provides some protection in cases where specific scenarios for vulnerabilities do not exist (yet).
 
 On the machine where the Security Engine is installed, just execute the following command:
@@ -59,11 +60,11 @@ Executing this command will install the following items:
 
 - The [*AppSec Rules*](/appsec/rules_syntax.md) contain the definition of malevolent requests to be matched and stopped
 - The [*AppSec Configuration*](/appsec/configuration.md#appsec-configuration) links together a set of rules to provide a coherent set
-- The [*CrowdSec Parser*](/concepts.md#parsers) and [*CrowdSec Scenario(s)*](/concepts.md#scenarios) bans for a longer duration repeating offenders
+- The <UnderlineTooltip tooltip="YAML files that extract relevant data from logs, such as IP addresses, timestamps, or request paths.">CrowdSec Parser</UnderlineTooltip> and <UnderlineTooltip tooltip="Behavioral rules written in a domain-specific language that define what malicious activity looks like, such as multiple failed logins in a short time.">CrowdSec Scenario(s)</UnderlineTooltip> bans for a longer duration repeating offenders
 
 ### Setup the Acquisition
 
-Having installed the required components, it's time to configure the CrowdSec [Acquisition](/concepts.md#acquisition) to expose the Application Security Component to our web server. This configuration allows our Nginx/OpenResty server to send requests to the AppSec Component for evaluation and decision-making.
+Having installed the required components, it's time to configure the CrowdSec <UnderlineTooltip tooltip="Acquisition files tell CrowdSec where to find logs and which application they belong to.">Acquisition</UnderlineTooltip> to expose the Application Security Component to our web server. This configuration allows our Nginx/OpenResty server to send requests to the AppSec Component for evaluation and decision-making.
 
 Steps:
     1. Create the `/etc/crowdsec/acquis.d/` directory (if it doesn't exist on your machine)
@@ -81,7 +82,7 @@ Steps:
 
 The two important directives in this configuration file are:
 
- - `appsec_config` is the name of the [*AppSec Configuration*](appsec/configuration.md#appsec-configuration) that was included in the [Collection](/concepts.md#collections) we just installed.
+ - `appsec_config` is the name of the [*AppSec Configuration*](appsec/configuration.md#appsec-configuration) that was included in the <UnderlineTooltip tooltip="Collections are bundle of parsers, scenarios, postoverflows that form a coherent package.">Collection</UnderlineTooltip> we just installed.
  - the `listen_addr` is the IP and port the AppSec Component will listen to.
 
 :::warning

crowdsec-docs/components.json

@@ -3,7 +3,8 @@ id: traefik
 title: Traefik
 ---
 
-import FormattedTabs from '@site/src/components/FormattedTabs'; 
+import FormattedTabs from '@site/src/components/formatted-tabs';
+import UnderlineTooltip from '@site/src/components/underline-tooltip'; 
 
 # CrowdSec WAF QuickStart for Traefik
 
@@ -20,7 +21,7 @@ Additionally, we'll show how to monitor these alerts through the [console](https
 1. If you're new to the [AppSec Component](/appsec/intro.md#introduction) or **W**eb **A**pplication **F**irewalls, start with the [Introduction](/appsec/intro.md#introduction) for a better understanding.
 
 2. It's assumed that you have already installed:
-   - **CrowdSec [Security Engine](intro.mdx)**: for installation, refer to the [QuickStart guide](/u/getting_started/installation/linux). The AppSec Component, which analyzes HTTP requests, is included within the security engine as a [Acquisition](/log_processor/data_sources/appsec.md).
+   - **CrowdSec [Security Engine](intro.mdx)**: for installation, refer to the [QuickStart guide](/u/getting_started/installation/linux). The AppSec Component, which analyzes HTTP requests, is included within the security engine as a <UnderlineTooltip tooltip="Acquisition files tell CrowdSec where to find logs and which application they belong to.">Acquisition</UnderlineTooltip>.
    -  Traefik Plugin **[Remediation Component](/u/bouncers/intro)**: Thanks to [maxlerebourg](https://github.com/maxlerebourg) and team they created a [Traefik Plugin](https://plugins.traefik.io/plugins/6335346ca4caa9ddeffda116/crowdsec-bouncer-traefik-plugin) that allows you to block requests directly from Traefik.
 
 :::info
@@ -39,7 +40,7 @@ To begin setting up the AppSec Component, the initial step is to install a relev
 
 We will utilize the [crowdsecurity/appsec-virtual-patching](https://app.crowdsec.net/hub/author/crowdsecurity/collections/appsec-virtual-patching) collection, which offers a wide range of rules aimed at identifying and preventing the exploitation of known vulnerabilities.
 
-This [collection](/concepts.md#collections) is regularly updated to include protection against newly discovered vulnerabilities. Upon installation, it receives automatic daily updates to ensure your protection is always current.
+This <UnderlineTooltip tooltip="Collections are bundle of parsers, scenarios, postoverflows that form a coherent package.">collection</UnderlineTooltip> is regularly updated to include protection against newly discovered vulnerabilities. Upon installation, it receives automatic daily updates to ensure your protection is always current.
 
 Furthermore we also install the [crowdsecurity/appsec-generic-rules](https://app.crowdsec.net/hub/author/crowdsecurity/collections/appsec-generic-rules) collection. This collection contains detection scenarios for generic attack vectors. It provides some protection in cases where specific scenarios for vulnerabilities do not exist (yet).
 
@@ -63,7 +64,7 @@ Executing this command or updating the compose will install the following items:
 
 - The [*AppSec Rules*](/appsec/rules_syntax.md) contain the definition of malevolent requests to be matched and stopped.
 - The [*AppSec Configuration*](/appsec/configuration.md#appsec-configuration) links together a set of rules to provide a coherent set.
-- The [*CrowdSec Parser*](/concepts.md#parsers) and [*CrowdSec Scenario(s)*](/concepts.md#scenarios) are used to detect and remediate persistent attacks.
+- The <UnderlineTooltip tooltip="YAML files that extract relevant data from logs, such as IP addresses, timestamps, or request paths.">CrowdSec Parser</UnderlineTooltip> and <UnderlineTooltip tooltip="Behavioral rules written in a domain-specific language that define what malicious activity looks like, such as multiple failed logins in a short time.">CrowdSec Scenario(s)</UnderlineTooltip> are used to detect and remediate persistent attacks.
 
 Once you have updated your compose or installed via the command line, will we need to restart the container. However, before we do that, we need to setup the acquisition for the AppSec Component.