1- import { cilBarChart , cilCompass , cilGlobeAlt , cilRss , cilShieldAlt , cilSpeedometer } from "@coreui/icons" ;
1+ import {
2+ cilBarChart ,
3+ cilCompass ,
4+ cilGlobeAlt ,
5+ cilRss ,
6+ cilShieldAlt ,
7+ cilSpeedometer ,
8+ } from "@coreui/icons" ;
29import { CIcon } from "@coreui/icons-react" ;
310import Layout from "@theme/Layout" ;
411import SearchBar from "@theme/SearchBar" ;
5- import { useEffect } from "react" ;
12+ import React , { useEffect } from "react" ;
613import GuidedSetupCard from "../components/docs/GuidedSetupCard" ;
714import PathCard from "../components/docs/PathCard" ;
815import PathCards from "../components/docs/PathCards" ;
@@ -44,11 +51,20 @@ const blocklistSteps = [
4451 title : "Create an integration endpoint" ,
4552 desc : "Generates a dedicated URL and credentials to serve blocklists to your perimeter devices." ,
4653 } ,
47- { title : "Choose blocklists to serve" , desc : "Select from curated feeds: scanners, bots, TOR exits, exploits, and more." } ,
48- { title : "Plug in as a threat feed" , desc : "Point your firewall, CDN, or WAF at the endpoint. No agent to install." } ,
54+ {
55+ title : "Choose blocklists to serve" ,
56+ desc : "Select from curated feeds: scanners, bots, TOR exits, exploits, and more." ,
57+ } ,
58+ {
59+ title : "Plug in as a threat feed" ,
60+ desc : "Point your firewall, CDN, or WAF at the endpoint. No agent to install." ,
61+ } ,
4962] ;
5063const ctiSteps = [
51- { title : "Look up any IP in the Console" , desc : "Get reputation score, behaviors, attack history, and CVE links instantly." } ,
64+ {
65+ title : "Look up any IP in the Console" ,
66+ desc : "Get reputation score, behaviors, attack history, and CVE links instantly." ,
67+ } ,
5268 {
5369 title : "Generate a CTI API key" ,
5470 hint : "OPTIONAL" as const ,
@@ -90,7 +106,12 @@ const alreadyRunningLinks = [
90106] ;
91107
92108const popularLinks = [
93- { icon : < CIcon icon = { cilCompass } style = { ICON_SM } aria-hidden = "true" /> , label : "Console" , href : "/u/console/intro" , color : CS_ORANGE } ,
109+ {
110+ icon : < CIcon icon = { cilCompass } style = { ICON_SM } aria-hidden = "true" /> ,
111+ label : "Console" ,
112+ href : "/u/console/intro" ,
113+ color : CS_ORANGE ,
114+ } ,
94115 {
95116 icon : < CIcon icon = { cilShieldAlt } style = { ICON_SM } aria-hidden = "true" /> ,
96117 label : "AppSec / WAF" ,
@@ -114,10 +135,20 @@ export default function HomePage() {
114135 } , [ ] ) ;
115136
116137 return (
117- < Layout title = "Documentation" description = "CrowdSec — the open-source & participative IPS" >
138+ < Layout
139+ title = "Documentation"
140+ description = "CrowdSec — the open-source & participative IPS"
141+ >
118142 < main >
119143 { /* ── Hero ── full-width so grid bg spans the viewport ── */ }
120- < section style = { { position : "relative" , padding : "92px 24px 48px" , textAlign : "center" , overflow : "hidden" } } >
144+ < section
145+ style = { {
146+ position : "relative" ,
147+ padding : "92px 24px 48px" ,
148+ textAlign : "center" ,
149+ overflow : "hidden" ,
150+ } }
151+ >
121152 { /* Radial glow */ }
122153 < div
123154 style = { {
@@ -138,14 +169,17 @@ export default function HomePage() {
138169 backgroundImage :
139170 "linear-gradient(var(--cs-border-hi) 1px, transparent 1px), linear-gradient(90deg, var(--cs-border-hi) 1px, transparent 1px)" ,
140171 backgroundSize : "64px 64px" ,
141- maskImage : "radial-gradient(ellipse 700px 320px at 50% 30%, black 30%, transparent 75%)" ,
172+ maskImage :
173+ "radial-gradient(ellipse 700px 320px at 50% 30%, black 30%, transparent 75%)" ,
142174 opacity : 0.4 ,
143175 pointerEvents : "none" ,
144176 } }
145177 aria-hidden = "true"
146178 />
147179
148- < div style = { { position : "relative" , maxWidth : 760 , margin : "0 auto" } } >
180+ < div
181+ style = { { position : "relative" , maxWidth : 760 , margin : "0 auto" } }
182+ >
149183 { /* Badge */ }
150184 < div
151185 style = { {
@@ -154,8 +188,10 @@ export default function HomePage() {
154188 gap : 8 ,
155189 padding : "5px 12px" ,
156190 borderRadius : 999 ,
157- background : "color-mix(in srgb, var(--cs-orange) 12%, transparent)" ,
158- border : "1px solid color-mix(in srgb, var(--cs-orange) 33%, transparent)" ,
191+ background :
192+ "color-mix(in srgb, var(--cs-orange) 12%, transparent)" ,
193+ border :
194+ "1px solid color-mix(in srgb, var(--cs-orange) 33%, transparent)" ,
159195 marginBottom : 28 ,
160196 fontFamily : "var(--cs-font-mono)" ,
161197 fontSize : 11.5 ,
@@ -192,7 +228,8 @@ export default function HomePage() {
192228 < br />
193229 < span
194230 style = { {
195- background : "linear-gradient(120deg, var(--cs-ink) 30%, var(--cs-orange) 70%, var(--cs-ink))" ,
231+ background :
232+ "linear-gradient(120deg, var(--cs-ink) 30%, var(--cs-orange) 70%, var(--cs-ink))" ,
196233 WebkitBackgroundClip : "text" ,
197234 WebkitTextFillColor : "transparent" ,
198235 backgroundClip : "text" ,
@@ -214,18 +251,23 @@ export default function HomePage() {
214251 marginRight : "auto" ,
215252 } }
216253 >
217- Three paths — one platform. Detect attacks at the edge, push curated threat feeds into your stack, or query
218- intel on demand.
254+ Three paths — one platform. Detect attacks at the edge, push
255+ curated threat feeds into your stack, or query intel on demand.
219256 </ p >
220257
221258 { /* Search */ }
222- < div className = "homepage-search" style = { { marginTop : 36 , maxWidth : 560 , margin : "36px auto 0" } } >
259+ < div
260+ className = "homepage-search"
261+ style = { { marginTop : 36 , maxWidth : 560 , margin : "36px auto 0" } }
262+ >
223263 < SearchBar />
224264 </ div >
225265 </ div >
226266 </ section >
227267
228- < div style = { { maxWidth : 1080 , margin : "0 auto" , padding : "0 24px 80px" } } >
268+ < div
269+ style = { { maxWidth : 1080 , margin : "0 auto" , padding : "0 24px 80px" } }
270+ >
229271 { /* ── "I want to…" eyebrow ── */ }
230272 < div
231273 style = { {
@@ -247,7 +289,13 @@ export default function HomePage() {
247289 < PathCard
248290 eyebrow = "01 · DETECT"
249291 color = { CS_ORANGE }
250- icon = { < CIcon icon = { cilShieldAlt } style = { { width : 20 , height : 20 } } aria-hidden = "true" /> }
292+ icon = {
293+ < CIcon
294+ icon = { cilShieldAlt }
295+ style = { { width : 20 , height : 20 } }
296+ aria-hidden = "true"
297+ />
298+ }
251299 title = "Detect & block attacks on my servers"
252300 desc = "Identify and ban bad-behaving IPs from your logs and requests using CrowdSec Detection Scenarios and Virtual-Patching collections."
253301 tag = "Security Engine"
@@ -258,7 +306,13 @@ export default function HomePage() {
258306 < PathCard
259307 eyebrow = "02 · PROTECT"
260308 color = { CS_TEAL }
261- icon = { < CIcon icon = { cilRss } style = { { width : 20 , height : 20 } } aria-hidden = "true" /> }
309+ icon = {
310+ < CIcon
311+ icon = { cilRss }
312+ style = { { width : 20 , height : 20 } }
313+ aria-hidden = "true"
314+ />
315+ }
262316 title = "Push blocklists into my firewall, CDN or WAF"
263317 desc = "Manage network-perimeter devices and want a URL to subscribe to — no agent to install, just curated feeds your equipment can pull."
264318 tag = "Blocklist Endpoint"
@@ -269,7 +323,13 @@ export default function HomePage() {
269323 < PathCard
270324 eyebrow = "03 · INVESTIGATE"
271325 color = { CS_VIOLET }
272- icon = { < CIcon icon = { cilGlobeAlt } style = { { width : 20 , height : 20 } } aria-hidden = "true" /> }
326+ icon = {
327+ < CIcon
328+ icon = { cilGlobeAlt }
329+ style = { { width : 20 , height : 20 } }
330+ aria-hidden = "true"
331+ />
332+ }
273333 title = "Investigate IP behaviors & enrich alerts"
274334 desc = "Security analyst or developer who wants IP context, behaviors, CVEs, aggressivity… in a browser or via REST API."
275335 tag = "IP Reputation & CTI"
@@ -293,7 +353,9 @@ export default function HomePage() {
293353 justifyContent : "center" ,
294354 } }
295355 >
296- < div style = { { height : 1 , flex : 1 , background : "var(--cs-border)" } } />
356+ < div
357+ style = { { height : 1 , flex : 1 , background : "var(--cs-border)" } }
358+ />
297359 < div
298360 style = { {
299361 fontFamily : "var(--cs-font-mono)" ,
@@ -306,7 +368,9 @@ export default function HomePage() {
306368 >
307369 How each path works
308370 </ div >
309- < div style = { { height : 1 , flex : 1 , background : "var(--cs-border)" } } />
371+ < div
372+ style = { { height : 1 , flex : 1 , background : "var(--cs-border)" } }
373+ />
310374 </ div >
311375
312376 < PathwayRow
@@ -342,8 +406,14 @@ export default function HomePage() {
342406 < GuidedSetupCard
343407 title = "Not sure where to start?"
344408 desc = "Answer a few questions and get a recommended path with install steps for your stack."
345- primaryCta = { { label : "Use Case Questionnaire" , href : "https://start.crowdsec.net/" } }
346- secondaryCta = { { label : "Try in Sandbox" , href : "https://killercoda.com/iiamloz/scenario/crowdsec-setup" } }
409+ primaryCta = { {
410+ label : "Use Case Questionnaire" ,
411+ href : "https://start.crowdsec.net/" ,
412+ } }
413+ secondaryCta = { {
414+ label : "Try in Sandbox" ,
415+ href : "https://killercoda.com/iiamloz/scenario/crowdsec-setup" ,
416+ } }
347417 />
348418
349419 { /* ── Popular docs ── */ }
0 commit comments