diff --git a/crowdsec-docs/src/components/home-page/get-to-know-us.tsx b/crowdsec-docs/src/components/home-page/get-to-know-us.tsx index 7fa131fd7..8fc86e6fa 100644 --- a/crowdsec-docs/src/components/home-page/get-to-know-us.tsx +++ b/crowdsec-docs/src/components/home-page/get-to-know-us.tsx @@ -3,55 +3,70 @@ import ThemedImage from "@theme/ThemedImage"; import React from "react"; import { HomePageItem } from "./home-item"; -type StaticData = { +type ItemData = { icon: React.FC>; title: string; description: string; link: string; }; -const staticData: StaticData[] = [ +// Core Products - Main CrowdSec offerings +const coreProducts: ItemData[] = [ { - icon: () => CrowdSec logo, - title: "What is CrowdSec?", - description: "Data curated solution with a bunch of millions IPs detected by our large community.", - link: "https://www.crowdsec.net", + icon: () => security engine, + title: "Security Engine", + description: "Detect threats with behavior analysis and community intelligence.", + link: "/u/getting_started/intro", }, { - icon: () => security engines, - title: "Security Engines", - description: "Secure yourself.", - link: "/u/getting_started/intro", + icon: () => blocklists, + title: "Blocklists", + description: "Subscribe to curated threat intelligence feeds.", + link: "/u/blocklists/intro", }, + { + icon: () => CTI, + title: "CTI", + description: "Query our threat intelligence database programmatically.", + link: "/u/cti_api/intro", + }, +]; + +// Tools & Integration +const toolsAndIntegration: ItemData[] = [ { icon: () => 🖥️, - title: "CrowdSec Console", - description: "Manage and monitor your security.", + title: "Console", + description: "Manage, monitor, and visualize your security from one dashboard.", link: "/u/console/intro", }, { - icon: () => 🧑🏻‍💻, - title: "CrowdSec CLI", - description: "Use our command line interface.", - link: "/docs/next/cscli/", + icon: () => web application firewall, + title: "AppSec / WAF", + description: "Protect web applications from OWASP Top 10 and custom threats.", + link: "/docs/next/appsec/intro", }, { - icon: () => Web application firewall, - title: "CrowdSec WAF", - description: "Protect your web applications.", - link: "/docs/next/appsec/intro", + icon: () => 🧑🏻‍💻, + title: "CLI Reference", + description: "Complete command-line interface documentation.", + link: "/docs/next/cscli/", }, +]; + +// Resources & Help +const resources: ItemData[] = [ { - icon: () => blocklists, - title: "Blocklists", - description: "Block thousands of IPs.", - link: "/u/blocklists/intro", + icon: () => CrowdSec logo, + title: "About CrowdSec", + description: "Learn how our community-powered security works.", + link: "https://www.crowdsec.net", }, { - icon: () => world API, - title: "APIs", - description: "Integrate with your tools.", - link: "/u/cti_api/intro", + icon: () => 🛠️, + title: "Online Sandbox", + description: "Try CrowdSec in an interactive browser environment.", + link: "https://killercoda.com/iiamloz/scenario/crowdsec-setup", }, { icon: () => ( @@ -64,8 +79,8 @@ const staticData: StaticData[] = [ alt="OpenAI logo" /> ), - title: "Custom GPT", - description: "Get help from our custom documentation GPT.", + title: "AI Assistant", + description: "Get help from our documentation-trained GPT.", link: "https://chatgpt.com/g/g-682c3a61a78081918417571116c2b563-crowdsec-documentation", }, ]; @@ -73,33 +88,46 @@ const staticData: StaticData[] = [ const GetToKnowUs = (): React.JSX.Element => { return (
-

Get to know us!

-
-
- -
- {staticData.slice(1, staticData.length - 1).map((props) => ( - +
+

Explore CrowdSec

+

+ Discover our products, tools, and resources to build a comprehensive security solution. +

+
+ + {/* Core Products */} +
+

Products

+

+ Our main security components that work together to protect your infrastructure. +

+
+
+ {coreProducts.map((item) => ( + + ))} +
+ + {/* Tools & Integration */} +
+

Tools & Integration

+

Extend and integrate CrowdSec with your existing workflows.

+
+
+ {toolsAndIntegration.map((item) => ( + + ))} +
+ + {/* Resources */} +
+

Resources

+

Learn more and get help with your CrowdSec journey.

+
+
+ {resources.map((item) => ( + ))} -
- -
); diff --git a/crowdsec-docs/src/components/home-page/home-item.tsx b/crowdsec-docs/src/components/home-page/home-item.tsx index b44d19f78..92de07e98 100644 --- a/crowdsec-docs/src/components/home-page/home-item.tsx +++ b/crowdsec-docs/src/components/home-page/home-item.tsx @@ -11,19 +11,21 @@ type Props = { }; export const HomePageItem = (props: Props): React.JSX.Element => ( - +
- + {(!Array.isArray(props.icon) && ) || } -
- {props.title} - {props.description &&

{props.description}

} +
+ + {props.title} + + {props.description &&

{props.description}

}
diff --git a/crowdsec-docs/src/components/home-page/quick-start.tsx b/crowdsec-docs/src/components/home-page/quick-start.tsx index d15d747bf..e2009b800 100644 --- a/crowdsec-docs/src/components/home-page/quick-start.tsx +++ b/crowdsec-docs/src/components/home-page/quick-start.tsx @@ -92,42 +92,48 @@ const multiServerSetup: StaticData[] = [ const QuickStart = (): React.JSX.Element => { return (
-
-

Select your environment

-

We can secure your stack. Just select your platform and get started.

+
+

Installation

+

+ Choose your platform to install the CrowdSec Security Engine. Each guide walks you through setup, configuration, and + connecting to the CrowdSec Console. +

-
-

Single Server Setup

-

- Install CrowdSec on a single server. This is the simplest way to get started with CrowdSec. + {/* Single Server */} +

+

Single Server

+

+ Standalone installation for protecting a single machine or service.

-
+
{singleServerSetup.map((props) => ( ))}
-
+ + {/* Healthcheck */} +
-

- *Logos and trademarks, such as the logos above, are the property of their respective owners and are used here for - identification purposes only. -

-
-

Multi-Server Setup

-

- Use CrowdSec within a multi-server environment. This is the advanced way to get started. + +

*Logos and trademarks are property of their respective owners.

+ + {/* Multi-Server */} +
+

Multi-Server

+

+ Distributed deployment for organizations managing multiple servers or infrastructure.

-
+
{multiServerSetup.map((props) => ( ))} diff --git a/crowdsec-docs/src/components/product-page/feature-card.tsx b/crowdsec-docs/src/components/product-page/feature-card.tsx new file mode 100644 index 000000000..0b82a9bbc --- /dev/null +++ b/crowdsec-docs/src/components/product-page/feature-card.tsx @@ -0,0 +1,55 @@ +import Link from "@docusaurus/Link"; +import React from "react"; + +export type FeatureCardProps = { + title: string; + description: string; + link: string; + icon: string; +}; + +export const FeatureCard = ({ title, description, link, icon }: FeatureCardProps): React.JSX.Element => ( + +
+
{icon.startsWith("/") ? {title} : icon}
+

+ {title} +

+

{description}

+
+ +); + +export type IntegrationCardProps = { + title: string; + description: string; + link: string; + icon: React.ReactNode; +}; + +export const IntegrationCard = ({ title, description, link, icon }: IntegrationCardProps): React.JSX.Element => ( + +
+
{icon}
+
+

+ {title} +

+

{description}

+
+
+ +); + +export type IntegrationItemProps = { + title: string; + link: string; +}; + +export const IntegrationItem = ({ title, link }: IntegrationItemProps): React.JSX.Element => ( + +
+ {title} +
+ +); diff --git a/crowdsec-docs/src/components/product-page/index.ts b/crowdsec-docs/src/components/product-page/index.ts new file mode 100644 index 000000000..28d39a8f7 --- /dev/null +++ b/crowdsec-docs/src/components/product-page/index.ts @@ -0,0 +1,4 @@ +export type { FeatureCardProps, IntegrationCardProps, IntegrationItemProps } from "./feature-card"; +export { FeatureCard, IntegrationCard, IntegrationItem } from "./feature-card"; +export { ProductPageLayout } from "./product-page-layout"; +export { Section } from "./section"; diff --git a/crowdsec-docs/src/components/product-page/product-page-layout.tsx b/crowdsec-docs/src/components/product-page/product-page-layout.tsx new file mode 100644 index 000000000..1df93ac0a --- /dev/null +++ b/crowdsec-docs/src/components/product-page/product-page-layout.tsx @@ -0,0 +1,97 @@ +import Link from "@docusaurus/Link"; +import Layout from "@theme/Layout"; +import React from "react"; +import { Button } from "../../ui/button"; + +type HeroButton = { + label: string; + link: string; + variant?: "primary" | "outline"; +}; + +type HelpButton = { + label: string; + link: string; +}; + +type ProductPageLayoutProps = { + title: string; + metaDescription: string; + icon: string; + description: string; + heroButtons: HeroButton[]; + helpTitle?: string; + helpDescription?: string; + helpButtons: HelpButton[]; + children: React.ReactNode; +}; + +export const ProductPageLayout = ({ + title, + metaDescription, + icon, + description, + heroButtons, + helpTitle = "Need Help?", + helpDescription, + helpButtons, + children, +}: ProductPageLayoutProps): React.JSX.Element => { + return ( + +
+ {/* Hero Section */} +
+
+ + ← Back to Documentation + +
+
+
+
+ {title} +
+

{title}

+
+

{description}

+
+ {heroButtons.map((btn) => + btn.variant === "outline" ? ( + + + + ) : ( + + + + ) + )} +
+
+
+
+
+ + {children} + + {/* Help Section */} +
+
+

{helpTitle}

+ {helpDescription &&

{helpDescription}

} +
+ {helpButtons.map((btn) => ( + + + + ))} +
+
+
+
+ + ); +}; diff --git a/crowdsec-docs/src/components/product-page/section.tsx b/crowdsec-docs/src/components/product-page/section.tsx new file mode 100644 index 000000000..b4342cb92 --- /dev/null +++ b/crowdsec-docs/src/components/product-page/section.tsx @@ -0,0 +1,22 @@ +import React from "react"; + +type SectionProps = { + title: string; + description?: string; + children: React.ReactNode; + variant?: "default" | "muted"; +}; + +export const Section = ({ title, description, children, variant = "default" }: SectionProps): React.JSX.Element => { + const bgClass = variant === "muted" ? "bg-muted border-t border-border" : ""; + + return ( +
+
+

{title}

+ {description &&

{description}

} + {children} +
+
+ ); +}; diff --git a/crowdsec-docs/src/css/colors.css b/crowdsec-docs/src/css/colors.css index 1b627880f..ac341f6d6 100644 --- a/crowdsec-docs/src/css/colors.css +++ b/crowdsec-docs/src/css/colors.css @@ -96,7 +96,7 @@ html[data-theme="dark"], --popover: 40 44 80; --popover-foreground: 250 251 251; --primary: 133 149 208; - --primary-foreground: 52 52 52; + --primary-foreground: 250 251 251; --secondary: 224 178 90; --secondary-foreground: 250 251 251; --premium: 248 171 19; @@ -124,6 +124,20 @@ html[data-theme="dark"], --sidebar-accent-foreground: 250 251 251; --sidebar-border: 56 63 98; --sidebar-ring: 112 112 112; + --docsearch-primary-color: rgb(var(--primary)); + --docsearch-text-color: rgb(var(--foreground)); + --docsearch-muted-color: rgb(var(--muted-foreground)); + --docsearch-container-background: rgba(4, 4, 31, 0.72); + --docsearch-modal-background: rgb(var(--card)); + --docsearch-hit-background: rgb(var(--background)); + --docsearch-hit-color: rgb(var(--foreground)); + --docsearch-hit-active-color: rgb(var(--primary-foreground)); + --docsearch-hit-active-background: rgb(var(--primary)); + --docsearch-footer-background: rgb(var(--muted)); + --docsearch-key-gradient: linear-gradient(180deg, rgb(var(--background)), rgb(var(--muted))); + --docsearch-key-shadow: 0 1px 0 rgb(var(--border)), 0 1px 3px rgba(0, 0, 0, 0.35); + --docsearch-searchbox-shadow: 0 0 0 1px rgb(var(--border)); + --docsearch-modal-shadow: 0 12px 32px rgba(4, 4, 31, 0.35); } @theme inline { @@ -183,6 +197,20 @@ html[data-theme="dark"], /* Algolia global search colors */ --docsearch-searchbox-background: rgb(var(--input)); + --docsearch-primary-color: rgb(var(--primary)); + --docsearch-text-color: rgb(var(--foreground)); + --docsearch-muted-color: rgb(var(--muted-foreground)); + --docsearch-container-background: rgba(16, 24, 39, 0.55); + --docsearch-modal-background: rgb(var(--card)); + --docsearch-hit-background: rgb(var(--background)); + --docsearch-hit-color: rgb(var(--foreground)); + --docsearch-hit-active-color: rgb(var(--primary-foreground)); + --docsearch-hit-active-background: rgb(var(--primary)); + --docsearch-footer-background: rgb(var(--muted)); + --docsearch-key-gradient: linear-gradient(180deg, rgb(var(--background)), rgb(var(--muted))); + --docsearch-key-shadow: 0 1px 0 rgb(var(--border)), 0 1px 3px rgba(0, 0, 0, 0.15); + --docsearch-searchbox-shadow: 0 0 0 1px rgb(var(--border)); + --docsearch-modal-shadow: 0 12px 32px rgba(16, 24, 39, 0.2); } .platinum-tag-gradient { diff --git a/crowdsec-docs/src/css/custom.css b/crowdsec-docs/src/css/custom.css index f261253c6..cda298f98 100644 --- a/crowdsec-docs/src/css/custom.css +++ b/crowdsec-docs/src/css/custom.css @@ -57,8 +57,9 @@ html[data-theme="dark"] { --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1); } -/* IMAGE STYLES FOR PAGES*/ -main .container img:not(a img) { +/* IMAGE STYLES FOR DOCUMENTATION CONTENT */ +article img:not(a img), +.markdown img:not(a img) { @apply border border-solid border-gray-300/80 dark:border-gray-300/80 rounded-lg p-2; } @@ -222,6 +223,94 @@ div[class^="announcementBar"] { border: 0 !important; } +/* Homepage search styles - hide navbar search on homepage */ +body.homepage .navbar__search { + display: none !important; +} +body.homepage [class*="navbarSearchContainer"] { + display: none !important; +} +html:has(.homepage-search) .navbar__search { + display: none !important; +} +html:has(.homepage-search) [class*="navbarSearchContainer"] { + display: none !important; +} + +.homepage-search { + display: flex; + justify-content: center; +} + +.homepage-search .DocSearch-Button { + @apply w-full bg-card border border-solid border-border rounded-lg px-4 py-3 m-0; + @apply hover:border-primary/50 hover:shadow-md transition-all; + max-width: 100%; + margin: 0 auto; +} + +.homepage-search .DocSearch-Button-Placeholder { + @apply text-gray-500 dark:text-gray-400; + display: inline-flex; + align-items: center; + gap: 0.5rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.homepage-search .DocSearch-Search-Icon { + @apply text-gray-400 dark:text-gray-500; +} + +.homepage-search .DocSearch-Button-Keys { + @apply hidden md:flex; +} + +@media (max-width: 640px) { + .homepage-search .DocSearch-Button { + padding: 0.75rem 0.875rem; + } +} + +/* Algolia DocSearch modal theming */ +[data-theme="light"] .DocSearch { + --docsearch-primary-color: rgb(var(--primary)); + --docsearch-text-color: rgb(var(--foreground)); + --docsearch-muted-color: rgb(var(--muted-foreground)); + --docsearch-container-background: rgb(var(--color-gray-900) / 0.55); + --docsearch-modal-background: rgb(var(--card)); + --docsearch-searchbox-background: rgb(var(--input)); + --docsearch-searchbox-focus-background: rgb(var(--card)); + --docsearch-hit-color: rgb(var(--foreground)); + --docsearch-hit-active-color: rgb(var(--primary-foreground)); + --docsearch-hit-background: rgb(var(--background)); + --docsearch-footer-background: rgb(var(--muted)); + --docsearch-key-gradient: linear-gradient(180deg, rgb(var(--background)), rgb(var(--muted))); + --docsearch-key-shadow: 0 1px 0 rgb(var(--border)), 0 1px 3px rgba(0, 0, 0, 0.15); +} + +[data-theme="light"] .DocSearch-Commands-Key { + background: rgb(var(--color-gray-200)); + box-shadow: 0 1px 0 rgb(var(--color-gray-300)); +} + +[data-theme="dark"] .DocSearch { + --docsearch-primary-color: rgb(var(--primary)); + --docsearch-text-color: rgb(var(--foreground)); + --docsearch-muted-color: rgb(var(--muted-foreground)); + --docsearch-container-background: rgb(var(--color-gray-950) / 0.72); + --docsearch-modal-background: rgb(var(--card)); + --docsearch-searchbox-background: rgb(var(--input)); + --docsearch-searchbox-focus-background: rgb(var(--card)); + --docsearch-hit-color: rgb(var(--foreground)); + --docsearch-hit-active-color: rgb(var(--primary-foreground)); + --docsearch-hit-background: rgb(var(--background)); + --docsearch-footer-background: rgb(var(--background)); + --docsearch-key-gradient: linear-gradient(180deg, rgb(var(--background)), rgb(var(--muted))); + --docsearch-key-shadow: 0 1px 0 rgb(var(--border)), 0 1px 3px rgba(0, 0, 0, 0.35); +} + /* Quick guide specific CSS /u/getting_started/... */ .sideBarItemRecommended a::after { content: "Rec."; diff --git a/crowdsec-docs/src/pages/blocklists.tsx b/crowdsec-docs/src/pages/blocklists.tsx new file mode 100644 index 000000000..9e6558ceb --- /dev/null +++ b/crowdsec-docs/src/pages/blocklists.tsx @@ -0,0 +1,120 @@ +import { FeatureCard, FeatureCardProps, IntegrationCard, ProductPageLayout, Section } from "../components/product-page"; + +const gettingStarted: FeatureCardProps[] = [ + { + title: "Introduction", + description: "Learn what blocklists are and how they stop known bad IPs.", + link: "/u/blocklists/intro", + icon: "📖", + }, + { + title: "Getting Started", + description: "Subscribe and start blocking in minutes.", + link: "/u/blocklists/getting_started", + icon: "🚀", + }, + { + title: "Browse Catalog", + description: "Explore coverage, categories, and sources.", + link: "/u/console/blocklists/catalog", + icon: "📚", + }, +]; + +const integrationMethods: FeatureCardProps[] = [ + { + title: "With Security Engine", + description: "Add blocklists to your existing CrowdSec deployment.", + link: "/u/blocklists/security_engine", + icon: "/img/icons/radar-target.webp", + }, + { + title: "Direct Firewall Integration", + description: "Push blocklists directly to firewalls and gateways.", + link: "/u/integrations/intro", + icon: "/img/icons/shield-target.webp", + }, +]; + +const consoleFeatures: FeatureCardProps[] = [ + { + title: "Blocklist Overview", + description: "Monitor coverage and update status.", + link: "/u/console/blocklists/overview", + icon: "📊", + }, + { + title: "Subscription Management", + description: "Manage subscriptions, quotas, and settings.", + link: "/u/console/blocklists/subscription", + icon: "⚙️", + }, + { + title: "Blocklist Details", + description: "Inspect sources, scope, and blocklist details.", + link: "/u/console/blocklists/details", + icon: "🔍", + }, +]; + +const BlocklistsPage = () => { + return ( + +
+
+ {gettingStarted.map((item) => ( + + ))} +
+
+ +
+
+ {integrationMethods.map((item) => ( + + ) : ( + {item.icon} + ) + } + /> + ))} +
+
+ +
+
+ {consoleFeatures.map((item) => ( + + ))} +
+
+ + ); +}; + +export default BlocklistsPage; diff --git a/crowdsec-docs/src/pages/cti.tsx b/crowdsec-docs/src/pages/cti.tsx new file mode 100644 index 000000000..8597d753d --- /dev/null +++ b/crowdsec-docs/src/pages/cti.tsx @@ -0,0 +1,187 @@ +import Link from "@docusaurus/Link"; +import { + FeatureCard, + FeatureCardProps, + IntegrationItem, + IntegrationItemProps, + ProductPageLayout, + Section, +} from "../components/product-page"; + +const gettingStarted: FeatureCardProps[] = [ + { + title: "Introduction", + description: "Learn what the CTI API offers and how to use it.", + link: "/u/cti_api/intro", + icon: "📖", + }, + { + title: "Console Quickstart", + description: "Use the web interface to search and explore CTI data.", + link: "/u/cti_api/getting_started", + icon: "🖥️", + }, + { + title: "API Quickstart", + description: "Integrate CTI data programmatically into your workflows.", + link: "/u/cti_api/api_getting_started", + icon: "🔌", + }, +]; + +const coreFeatures: FeatureCardProps[] = [ + { + title: "IP Reports", + description: "Get full context for any IP, including reputation and activity.", + link: "/u/cti_api/ip_report", + icon: "📋", + }, + { + title: "Search Queries", + description: "Search CTI data with filters and query operators.", + link: "/u/cti_api/search_queries", + icon: "🔍", + }, + { + title: "Advanced Search", + description: "Build complex queries to spot patterns at scale.", + link: "/u/cti_api/advanced_search", + icon: "🎯", + }, + { + title: "CVE Explorer", + description: "Explore CVEs and see active exploitation by IP.", + link: "/u/cti_api/cve_explorer", + icon: "🛡️", + }, +]; + +const taxonomy: FeatureCardProps[] = [ + { + title: "Taxonomy Overview", + description: "Learn how CTI data is structured and labeled.", + link: "/u/cti_api/taxonomy/intro", + icon: "📊", + }, + { + title: "Reputation Scores", + description: "See how scores are computed and what they mean.", + link: "/u/cti_api/taxonomy/scores", + icon: "⭐", + }, + { + title: "Behaviors", + description: "Explore the behaviors we track across attacks.", + link: "/u/cti_api/taxonomy/behaviors", + icon: "🔬", + }, + { + title: "Classifications", + description: "Understand threat classifications and categories.", + link: "/u/cti_api/taxonomy/classifications", + icon: "🏷️", + }, +]; + +const integrations: IntegrationItemProps[] = [ + { title: "Splunk SIEM", link: "/u/cti_api/api_integration/integration_splunk_siem" }, + { title: "Splunk SOAR", link: "/u/cti_api/api_integration/integration_splunk_soar" }, + { title: "Microsoft Sentinel", link: "/u/cti_api/api_integration/integration_ms_sentinel" }, + { title: "Security Copilot", link: "/u/cti_api/api_integration/integration_securitycopilot" }, + { title: "Palo Alto XSOAR", link: "/u/cti_api/api_integration/integration_paloalto_xsoar" }, + { title: "IBM QRadar", link: "/u/cti_api/api_integration/integration_qradar" }, + { title: "TheHive", link: "/u/cti_api/api_integration/integration_thehive" }, + { title: "OpenCTI", link: "/u/cti_api/api_integration/integration_opencti" }, + { title: "MISP", link: "/u/cti_api/api_integration/integration_misp" }, + { title: "Maltego", link: "/u/cti_api/api_integration/integration_maltego" }, + { title: "Sekoia XDR", link: "/u/cti_api/api_integration/integration_sekoia_xdr" }, + { title: "IntelOwl", link: "/u/cti_api/api_integration/integration_intelowl" }, +]; + +const resources: FeatureCardProps[] = [ + { + title: "API Reference", + description: "Full API reference with endpoints and parameters.", + link: "https://crowdsecurity.github.io/cti-api/", + icon: "📚", + }, + { + title: "FAQ", + description: "Common questions about access, limits, and data.", + link: "/u/cti_api/faq", + icon: "❓", + }, + { + title: "Chrome Extension", + description: "Check IP reputation directly in your browser.", + link: "/u/cti_api/api_integration/integration_chrome", + icon: "🌐", + }, +]; + +const CTIPage = () => { + return ( + +
+
+ {gettingStarted.map((item) => ( + + ))} +
+
+ +
+
+ {coreFeatures.map((item) => ( + + ))} +
+
+ +
+
+ {taxonomy.map((item) => ( + + ))} +
+
+ +
+
+ {integrations.map((item) => ( + + ))} +
+
+ + View all integrations → + +
+
+ +
+
+ {resources.map((item) => ( + + ))} +
+
+ + ); +}; + +export default CTIPage; diff --git a/crowdsec-docs/src/pages/index.tsx b/crowdsec-docs/src/pages/index.tsx index d24f7b3db..019a6b9e9 100644 --- a/crowdsec-docs/src/pages/index.tsx +++ b/crowdsec-docs/src/pages/index.tsx @@ -1,64 +1,188 @@ import Link from "@docusaurus/Link"; import Layout from "@theme/Layout"; -import React from "react"; -import GetToKnowUs from "../components/home-page/get-to-know-us"; -import QuickStart from "../components/home-page/quick-start"; +import SearchBar from "@theme/SearchBar"; +import React, { useEffect } from "react"; import { Button } from "../ui/button"; -const HomePageHeader = (): React.JSX.Element => { +type ProductCardProps = { + title: string; + description: string; + icon: React.ReactNode; + link: string; + features: string[]; + bestFor: string; +}; + +const ProductCard = ({ title, description, icon, link, features, bestFor }: ProductCardProps): React.JSX.Element => ( + +
+
+
+ {icon} +
+

+ {title} +

+
+

{description}

+

{bestFor}

+
    + {features.map((feature) => ( +
  • + ✓ + {feature} +
    • + ))} +
+
+ Explore product → +
+
+ +); + +const products: ProductCardProps[] = [ + { + title: "Security Engine", + description: "Analyze your logs to detect attacks, block malicious IPs, and protect web applications.", + icon: Security Engine, + link: "/security-engine", + features: ["Behavior-based detection", "Community threat sharing", "AppSec / WAF for web apps", "Open source"], + bestFor: "Best for self-hosted detection and protection.", + }, + { + title: "Blocklists", + description: "Deploy curated threat intel feeds to protect your network without running detection yourself.", + icon: Blocklists, + link: "/blocklists", + features: ["Curated IP lists", "Ready to deploy", "Automatic updates", "Multiple categories"], + bestFor: "Best for fast protection with minimal setup.", + }, + { + title: "CTI", + description: "Query CrowdSec threat intelligence to enrich investigations, automate lookups, and integrate with tools.", + icon: CTI, + link: "/cti", + features: ["REST API access", "IP reputation scores", "Attack context", "SIEM integrations"], + bestFor: "Best for enrichment, integrations, and investigations.", + }, +]; + +const HomePage = () => { + // Add class to body to hide navbar search on homepage + useEffect(() => { + document.body.classList.add("homepage"); + document.documentElement.classList.add("homepage"); + return () => { + document.body.classList.remove("homepage"); + document.documentElement.classList.remove("homepage"); + }; + }, []); + return ( -
- {/*
*/} -
-
-
-
-

Welcome to the CrowdSec Documentation

-

- CrowdSec provides open source solution for detecting and blocking malicious IPs, safeguarding both - infrastructure and application security. -

+ +
+ {/* Hero Section */} +
+
+
+
+

CrowdSec Documentation

+

+ Community-driven security that unifies detection, blocklists, and threat intel for modern + infrastructure. +

+
+ CrowdSec Logo
- CrowdSec Logo
-
- - - -
- -
+ + {/* Search Section */} +
+
+
+ +
+
+
+ + {/* Product Selection */} +
+
+

+ Choose your starting point +

+

+ Each path links to setup, how-tos, and reference docs. +

+ +
+ {products.map((product) => ( + + ))} +
+
+
+ + {/* Help Section */} +
+
+

+ Not sure where to start? +

+

+ Answer a few questions and get a recommended path with install steps for your stack. +

+
+ + - -
- - -
-
- - +
- -
-
- ); -}; - -const HomePage = () => { - return ( - - + {/* Quick Links */} +
+
+

Popular Docs

+
+ + + + + + + + + + + + + + + +
+
+
+ ); }; diff --git a/crowdsec-docs/src/pages/security-engine.tsx b/crowdsec-docs/src/pages/security-engine.tsx new file mode 100644 index 000000000..76583a020 --- /dev/null +++ b/crowdsec-docs/src/pages/security-engine.tsx @@ -0,0 +1,204 @@ +import ForwardIcon from "@mui/icons-material/Forward"; +import HubIcon from "@mui/icons-material/Hub"; +import MonitorHeartIcon from "@mui/icons-material/MonitorHeart"; +import cibApple from "@site/static/img/logo/apple-colored.svg"; +import cibDocker from "@site/static/img/logo/docker-colored.svg"; +import cibFreebsd from "@site/static/img/logo/freebsd-colored.svg"; +import cibKubernetes from "@site/static/img/logo/kubernetes-colored.svg"; +import cibLinux from "@site/static/img/logo/linux-colored.svg"; +import cibWindows from "@site/static/img/logo/windows-colored.svg"; +import opnsenseLogo from "@site/static/img/logo-opnsense.svg"; +import pfSenseLogo from "@site/static/img/logo-pfsense.svg"; +import whmLogo from "@site/static/img/logo-whm.svg"; +import React from "react"; +import { HomePageItem } from "../components/home-page/home-item"; +import { FeatureCard, FeatureCardProps, ProductPageLayout, Section } from "../components/product-page"; + +type PlatformData = { + icon: React.ComponentType>; + text: string; + link: string; + description?: string; +}; + +const singleServerSetup: PlatformData[] = [ + { icon: cibLinux, text: "Linux", link: "/u/getting_started/installation/linux" }, + { icon: cibWindows, text: "Windows", link: "/u/getting_started/installation/windows" }, + { icon: cibFreebsd, text: "FreeBSD", link: "/u/getting_started/installation/freebsd" }, + { icon: cibApple, text: "macOS", link: "/u/getting_started/installation/macos" }, + { icon: cibDocker, text: "Docker", link: "/u/getting_started/installation/docker" }, + { icon: cibKubernetes, text: "Kubernetes", link: "/u/getting_started/installation/kubernetes" }, + { icon: opnsenseLogo, text: "OPNsense", link: "/u/getting_started/installation/opnsense" }, + { icon: pfSenseLogo, text: "pfSense", link: "/u/getting_started/installation/pfsense" }, + { icon: whmLogo, text: "WHM", link: "/u/getting_started/installation/whm" }, +]; + +const multiServerSetup: PlatformData[] = [ + { + icon: HubIcon, + text: "Central LAPI", + link: "/u/user_guides/multiserver_setup", + description: "Use a single LAPI to aggregate alerts and distribute decisions.", + }, + { + icon: ForwardIcon, + text: "Log Centralization", + link: "/u/user_guides/log_centralization", + description: "Centralize logs from multiple servers to run detection in one place.", + }, +]; + +const features: FeatureCardProps[] = [ + { + title: "Parsers & Scenarios", + description: "Learn how CrowdSec parses logs and detects threats with community-maintained scenarios.", + link: "/docs/next/concepts", + icon: "📊", + }, + { + title: "Remediation Components", + description: "Block threats at firewalls, web servers, and CDNs with remediation components.", + link: "/u/bouncers/intro", + icon: "/img/icons/shield-target.webp", + }, + { + title: "Console Integration", + description: "Connect to the CrowdSec Console for centralized management, alerts, and analytics.", + link: "/u/console/intro", + icon: "📱", + }, + { + title: "AppSec / WAF", + description: "Protect web applications from OWASP Top 10 risks and custom attack patterns.", + link: "/docs/next/appsec/intro", + icon: "/img/icons/waf.webp", + }, +]; + +const nextSteps: FeatureCardProps[] = [ + { + title: "Post-Installation Checklist", + description: "Essential steps after installing the Security Engine", + link: "/u/getting_started/next_steps", + icon: "✅", + }, + { + title: "CLI Reference", + description: "Complete cscli command documentation", + link: "/docs/next/cscli/", + icon: "💻", + }, + { + title: "Configuration", + description: "Fine-tune your Security Engine settings", + link: "/docs/next/configuration/crowdsec_configuration", + icon: "⚙️", + }, + { + title: "Troubleshooting", + description: "Common issues and how to resolve them", + link: "/u/troubleshooting/intro", + icon: "🔧", + }, +]; + +const SecurityEnginePage = () => { + return ( + + {/* Installation Section - custom layout for platforms */} +
+
+
+

Installation

+

+ Choose your platform to install the Security Engine. Each guide covers setup, configuration, and enrolling in + the CrowdSec Console to sync decisions and metrics. +

+
+ + {/* Single Server */} +
+

Single Server

+

+ Deploy on a single host or service for fast detection and blocking. +

+
+ {singleServerSetup.map((props) => ( + + ))} +
+
+ + {/* Healthcheck */} +
+ +
+ +

+ *Logos and trademarks are property of their respective owners. +

+ + {/* Multi-Server */} +
+

Multi-Server

+

+ Scale detection across fleets with centralized alerts or logs. +

+
+ {multiServerSetup.map((props) => ( + + ))} +
+
+
+
+ +
+
+ {features.map((feature) => ( + + ))} +
+
+ +
+
+ {nextSteps.map((step) => ( + + ))} +
+
+ + ); +}; + +export default SecurityEnginePage; diff --git a/crowdsec-docs/src/ui/button.tsx b/crowdsec-docs/src/ui/button.tsx index 2f085033e..d6df909cf 100644 --- a/crowdsec-docs/src/ui/button.tsx +++ b/crowdsec-docs/src/ui/button.tsx @@ -11,7 +11,7 @@ const buttonVariants = cva( default: "bg-gray-900 text-gray-50 hover:bg-gray-900/90 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90", destructive: "bg-red-500 text-gray-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90", outline: - "border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-transparent dark:hover:bg-gray-800 dark:hover:text-gray-50", + "border border-solid border-primary/50 bg-transparent text-primary hover:bg-primary/10 hover:border-primary dark:border-primary/50 dark:text-primary dark:hover:bg-primary/10 dark:hover:border-primary", secondary: "bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80", ghost: "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50", link: "text-foreground dark:text-foreground bg-transparent hover:bg-gray-200 dark:hover:bg-gray-300 active:bg-gray-100 dark:active:bg-gray-400",