+ ),
+ title: "Security Engines",
+ description: "Secure yourself.",
+ link: "/docs/intro",
+ },
+ {
+ icon: () => 
+ ),
+ title: "CrowdSec WAF",
+ description: "Protect your web applications.",
+ link: "/docs/appsec/intro",
+ },
+ {
+ icon: () => (
+ 
+ ),
+ title: "Blocklists",
+ description: "Block thousands of IPs.",
+ link: "/u/blocklists/intro",
+ },
+ {
+ icon: () => (
+ 
+ ),
+ title: "APIs",
+ description: "Integrate with your tools.",
+ link: "/u/cti_api/intro",
+ },
+]
+
+export default function GetToKnowUs() {
+ return (
+ - Quick Start -
-
- {staticData.map((item, index) => (
-
-
- );
+ return (
+
+
+
+ )
}
export default function Home() {
- const {siteConfig} = useDocusaurusContext();
- return (
-
-
- );
+ return (
+
+
+ )
}
diff --git a/crowdsec-docs/src/theme/DocItem/Layout/index.js b/crowdsec-docs/src/theme/DocItem/Layout/index.js
index 4b8b0cccd..31d7aa5b4 100644
--- a/crowdsec-docs/src/theme/DocItem/Layout/index.js
+++ b/crowdsec-docs/src/theme/DocItem/Layout/index.js
@@ -1,54 +1,59 @@
// Import necessary components and modules
-import React from 'react';
-import clsx from 'clsx';
-import { useWindowSize } from '@docusaurus/theme-common';
-import { useDoc } from '@docusaurus/plugin-content-docs/client';
-import DocItemPaginator from '@theme/DocItem/Paginator';
-import DocVersionBanner from '@theme/DocVersionBanner';
-import DocVersionBadge from '@theme/DocVersionBadge';
-import DocItemFooter from '@theme/DocItem/Footer';
-import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
-import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
-import DocItemContent from '@theme/DocItem/Content';
-import DocBreadcrumbs from '@theme/DocBreadcrumbs';
-import styles from './styles.module.css';
+import React from "react"
+import clsx from "clsx"
+import { useWindowSize } from "@docusaurus/theme-common"
+import { useDoc } from "@docusaurus/plugin-content-docs/client"
+import DocItemPaginator from "@theme/DocItem/Paginator"
+import DocVersionBanner from "@theme/DocVersionBanner"
+import DocVersionBadge from "@theme/DocVersionBadge"
+import DocItemFooter from "@theme/DocItem/Footer"
+import DocItemTOCMobile from "@theme/DocItem/TOC/Mobile"
+import DocItemTOCDesktop from "@theme/DocItem/TOC/Desktop"
+import DocItemContent from "@theme/DocItem/Content"
+import DocBreadcrumbs from "@theme/DocBreadcrumbs"
+import styles from "./styles.module.css"
// Function to decide whether to render the TOC on mobile or desktop
function useDocTOC() {
- const { frontMatter, toc } = useDoc();
- const windowSize = useWindowSize();
- const hidden = frontMatter.hide_table_of_contents;
- const canRender = !hidden && toc.length > 0;
- const mobile = canRender ?
-
+
-
+
+
+ + Select your environment +
++ We can secure your stack. Just select your platform and get + started. +
+
+ {staticData.map((props) => (
+
+
+
+ ))}
+
+ {(!Array.isArray(props.icon) && (
+
- ))}
- {item.text}
} - + {props.text} +- **Logos and trademarks, such as the logos above, are the - property of their respective owners and are used here for - identification purposes only. +
+ *Logos and trademarks, such as the logos above, are the property + of their respective owners and are used here for identification + purposes only.
- - ); + + ) } diff --git a/crowdsec-docs/src/css/custom.css b/crowdsec-docs/src/css/custom.css index 528e4f38e..342161947 100644 --- a/crowdsec-docs/src/css/custom.css +++ b/crowdsec-docs/src/css/custom.css @@ -3,6 +3,8 @@ @tailwind utilities; +@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap'); + /* stylelint-disable docusaurus/copyright-header */ /** * Any CSS included here will be global. The classic template @@ -17,8 +19,170 @@ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --ifm-code-font-size: 95%; --docusaurus-announcement-bar-height: 2.5rem !important; + --ifm-font-family-base: 'Instrument Sans', sans-serif; /* For body text */ + --ifm-font-family-monospace: 'Courier New', monospace; /* For code blocks */ +} + +/* COLORS */ + +@layer base { + /* // Zeplin https://app.zeplin.io/project/655e038b64d81b7bd89cdadb/screen/65a7e811a2ae29e2fbb62a17 */ + :root { + /* Primary */ + --color-primary: 82 71 179; /* Purple */ + --color-primary-50: 237 236 247; + --color-primary-100: 220 218 240; + --color-primary-200: 186 181 225; + --color-primary-300: 151 145 209; + --color-primary-400: 117 108 194; + --color-primary-500: 82 71 179; + --color-primary-600: 66 57 143; + --color-primary-700: 49 43 107; + --color-primary-800: 33 28 72; + --color-primary-900: 16 14 36; + --color-primary-night: 16 14 36; + --color-text-primary: 82 71 179; + --color-border-primary: 82 71 179; + + /* Secondary */ + --color-secondary: 159 107 4; /* Sunburst Orange */ + --color-secondary-50: 245 240 229; + --color-secondary-100: 236 225 205; + --color-secondary-200: 217 196 155; + --color-secondary-300: 197 166 104; + --color-secondary-400: 178 137 54; + --color-secondary-500: 159 107 4; + --color-secondary-600: 127 86 3; + --color-secondary-700: 95 64 2; + --color-secondary-800: 64 43 2; + --color-secondary-900: 32 21 1; + + /* Gray */ + --color-gray-50: 248 250 252; + --color-gray-100: 241 245 249; + --color-gray-200: 226 232 240; + --color-gray-300: 203 213 225; + --color-gray-400: 148 163 184; + --color-gray-500: 100 116 139; + --color-gray-600: 71 85 105; + --color-gray-700: 46 59 77; + --color-gray-800: 22 30 47; + --color-gray-900: 16 24 39; + --color-gray-950: 4 4 31; + + /* Zeplin Primary and Secondary */ + --color-alpa-primary: 17 24 28; + --color-alpa-secondary: 84 89 100; + /* Primary color in light mode in Zeplin */ + --color-alpa-light-primary: 17 24 28; + /* Primary color in dark mode in Zeplin */ + --color-alpa-dark-primary: 249 250 250; + /* Secondary color in light mode in Zeplin */ + --color-alpa-light-secondary: 84 89 100; + /* Secondary color in dark mode in Zeplin */ + --color-alpa-dark-secondary: 176 181 191; + /* Dark Theme/Dark+ color in Zeplin */ + --color-alpa-darker: 4 4 31; + + /* Complementary */ + --color-red: 227 13 20; + --color-green: 31 168 81; + --color-orange: 240 111 5; + --color-yellow: 168 143 16; + --color-premium: 248 171 19; + --color-platinum: 251 217 131; + + /* Components */ + --color-background-card: 255 255 255; + --color-background-color: 248 249 251; + --color-dark-color: 231 234 238; + + /* Corpo website colors */ + --color-corpo-dark: 15 15 41; + --color-corpo-gray: 56 56 78; + + /* Light premium radial gradient */ + --premium-radial-gradient: radial-gradient( + 50% 100% at top, + rgb(251 208 124), + rgb(250 193 80) + ); + + /* From Dark secondary (300 to 400) */ + + --platinum-linear-gradient: linear-gradient(-45deg, rgba(var(--color-premium)), #acacac); + } + + .dark { + /* Primary */ + --color-primary: 136 139 206; + --color-primary-50: 27 28 41; + --color-primary-100: 54 56 82; + --color-primary-200: 82 83 172; + --color-primary-300: 109 111 165; + --color-primary-400: 136 139 206; + --color-primary-500: 160 162 216; + --color-primary-600: 184 185 226; + --color-primary-700: 207 209 235; + --color-primary-800: 231 232 245; + --color-primary-900: 243 243 250; + --color-primary-night: 27 28 41; + --color-text-primary: 136 139 206; + --color-border-primary: 184 185 226; + + /* Secondary */ + --color-secondary: 249 177 36; + --color-secondary-50: 254 247 233; + --color-secondary-100: 254 239 211; + --color-secondary-200: 253 224 167; + --color-secondary-300: 251 208 124; + --color-secondary-400: 250 193 80; + --color-secondary-500: 249 177 36; + --color-secondary-600: 199 142 29; + --color-secondary-700: 149 106 22; + --color-secondary-800: 100 71 14; + --color-secondary-900: 50 35 7; + + /* Gray */ + --color-gray-50: 4 4 31; + --color-gray-100: 16 24 39; + --color-gray-200: 22 30 47; + --color-gray-300: 46 59 77; + --color-gray-400: 71 85 105; + --color-gray-500: 100 116 139; + --color-gray-600: 148 163 184; + --color-gray-700: 203 213 225; + --color-gray-800: 226 232 240; + --color-gray-900: 241 245 249; + --colors-gray-950: 248 250 252; + + /* Zeplin Primary and Secondary */ + --color-alpa-primary: 249 250 250; + --color-alpa-secondary: 176 181 191; + + /* Complementary */ + --color-red: 245 91 96; + --color-green: 113 229 155; + --color-orange: 252 168 100; + --color-yellow: 227 195 95; + --color-premium: 248 171 19; + --color-platinum: 251 217 131; + + /* Components */ + --color-background-card: 22 33 47; + --color-background-color: 16 24 39; + --color-dark-color: 4 4 31; + + /* Light premium radial gradient */ + --premium-radial-gradient: radial-gradient( + 50% 100% at top, + rgb(var(--color-secondary-400)), + rgb(var(--color-secondary-500)) + ); + } } + html[data-theme="light"] .menu__link--active { --ifm-menu-color-active: #4E4A99; } @@ -67,17 +231,12 @@ div.markdown { text-align: justify; } -.hero--primary { - --ifm-hero-text-color: white; - --ifm-color-primary: #141546; -} - a { - color: #7c79e9; + color: rgb(var(--color-primary)); } blockquote { - --ifm-blockquote-border-color: #7c79e9; + --ifm-blockquote-border-color: rgb(var(--color-primary)); --ifm-blockquote-background-color: transparent; } @@ -86,13 +245,17 @@ blockquote { } .footer, .navbar, .navbar-sidebar { - background-color: #2E2A77; + background-color: rgb(22 33 47); --ifm-navbar-link-color: #fff; --ifm-menu-color: #fff; } html[data-theme="dark"] .footer, html[data-theme="dark"] .navbar, html[data-theme="dark"] .navbar-sidebar { - background-color: #242441; + background-color: rgb(22 33 47); +} + +.footer__copyright { + color: rgb(var(--color-gray-300)); } /** Patch some colors **/ @@ -311,4 +474,6 @@ div[class^='announcementBar'] { clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; -} \ No newline at end of file +} + + diff --git a/crowdsec-docs/src/pages/index.js b/crowdsec-docs/src/pages/index.js index 571013cb8..6b424454f 100644 --- a/crowdsec-docs/src/pages/index.js +++ b/crowdsec-docs/src/pages/index.js @@ -1,39 +1,70 @@ -import React from 'react'; -import clsx from 'clsx'; -import Layout from '@theme/Layout'; -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import styles from './index.module.css'; -import QuickStart from '../components/QuickStart' - +import React from "react" +import clsx from "clsx" +import Layout from "@theme/Layout" +import Link from "@docusaurus/Link" +import styles from "./index.module.css" +import QuickStart from "../components/QuickStart" +import GetToKnowUs from "../components/GetToKnowUs" function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); - return ( -
- 
-
-
- {siteConfig.tagline}
-
-
- Documentation
-
-
-
+
+
+
+
+
+
+
+
+
+ + Welcome to the CrowdSec Documentation +
++ CrowdSec provides open source solution for + detecting and blocking malicious IPs, + safeguarding both infrastructure and application + security. +
+
+
+
+ Get started
+
+
+ Explore the Console
+
+
+
- )`,
+ "primary-50": `rgb(var(--color-primary-50) / )`,
+ "primary-100": `rgb(var(--color-primary-100) / )`,
+ "primary-200": `rgb(var(--color-primary-200) / )`,
+ "primary-300": `rgb(var(--color-primary-300) / )`,
+ "primary-400": `rgb(var(--color-primary-400) / )`,
+ "primary-500": `rgb(var(--color-primary-500) / )`,
+ "primary-600": `rgb(var(--color-primary-600) / )`,
+ "primary-700": `rgb(var(--color-primary-700) / )`,
+ "primary-800": `rgb(var(--color-primary-800) / )`,
+ "primary-900": `rgb(var(--color-primary-900) / )`,
+ secondary: `rgb(var(--color-secondary) / )`,
+ "secondary-50": `rgb(var(--color-secondary-50) / )`,
+ "secondary-100": `rgb(var(--color-secondary-100) / )`,
+ "secondary-200": `rgb(var(--color-secondary-200) / )`,
+ "secondary-300": `rgb(var(--color-secondary-300) / )`,
+ "secondary-400": `rgb(var(--color-secondary-400) / )`,
+ "secondary-500": `rgb(var(--color-secondary-500) / )`,
+ "secondary-600": `rgb(var(--color-secondary-600) / )`,
+ "secondary-700": `rgb(var(--color-secondary-700) / )`,
+ "secondary-800": `rgb(var(--color-secondary-800) / )`,
+ "secondary-900": `rgb(var(--color-secondary-900) / )`,
+ gray: {
+ 50: `rgb(var(--color-gray-50) / )`,
+ 100: `rgb(var(--color-gray-100) / )`,
+ 200: `rgb(var(--color-gray-200) / )`,
+ 300: `rgb(var(--color-gray-300) / )`,
+ 400: `rgb(var(--color-gray-400) / )`,
+ 500: `rgb(var(--color-gray-500) / )`,
+ 600: `rgb(var(--color-gray-600) / )`,
+ 700: `rgb(var(--color-gray-700) / )`,
+ 800: `rgb(var(--color-gray-800) / )`,
+ 900: `rgb(var(--color-gray-900) / )`,
+ 950: `rgb(var(--color-gray-950) / )`,
},
- secondary: "#F8AB13",
- }
+ danger: `rgb(var(--color-red) / )`,
+ success: `rgb(var(--color-green) / )`,
+ premium: `rgb(var(--color-premium) / )`,
+ platinum: `rgb(var(--color-platinum) / )`,
+ card: `rgb(var(--color-background-card) / )`,
+ // Zeplin primary and secondary
+ "alpa-primary": `rgb(var(--color-alpa-primary) / )`,
+ "alpa-secondary": `rgb(var(--color-alpa-secondary) / )`,
+ "alpa-dark": `rgb(var(--color-dark-color) / )`,
+ "alpa-light-primary": `rgb(var(--color-alpa-light-primary) / )`,
+ "alpa-light-secondary": `rgb(var(--color-alpa-light-secondary) / )`,
+ "alpa-dark-darker": `rgb(var(--color-alpa-darker) / )`,
+ "alpa-dark-primary": `rgb(var(--color-alpa-dark-primary) / )`,
+ "alpa-dark-secondary": `rgb(var(--color-alpa-dark-secondary) / )`,
+ },
+ backgroundImage: () => ({
+ landing: "url('/img/landing-page-bg.webp')",
+ }),
},
},
plugins: [],
prefix: "tw-", // This is the prefix for the tailwind classes to not clash with docusarus classes
-};
+}
-
- );
-}
\ No newline at end of file
+ )
+}
diff --git a/crowdsec-docs/static/img/icons/radar-target.webp b/crowdsec-docs/static/img/icons/radar-target.webp
new file mode 100644
index 000000000..6688e5510
Binary files /dev/null and b/crowdsec-docs/static/img/icons/radar-target.webp differ
diff --git a/crowdsec-docs/static/img/icons/shield-target.webp b/crowdsec-docs/static/img/icons/shield-target.webp
new file mode 100644
index 000000000..df72f0716
Binary files /dev/null and b/crowdsec-docs/static/img/icons/shield-target.webp differ
diff --git a/crowdsec-docs/static/img/icons/shield.webp b/crowdsec-docs/static/img/icons/shield.webp
new file mode 100644
index 000000000..d8554332d
Binary files /dev/null and b/crowdsec-docs/static/img/icons/shield.webp differ
diff --git a/crowdsec-docs/static/img/icons/waf.webp b/crowdsec-docs/static/img/icons/waf.webp
new file mode 100644
index 000000000..ed17ea7f8
Binary files /dev/null and b/crowdsec-docs/static/img/icons/waf.webp differ
diff --git a/crowdsec-docs/static/img/icons/world.webp b/crowdsec-docs/static/img/icons/world.webp
new file mode 100644
index 000000000..40bd3b3e9
Binary files /dev/null and b/crowdsec-docs/static/img/icons/world.webp differ
diff --git a/crowdsec-docs/static/img/landing-page-bg.webp b/crowdsec-docs/static/img/landing-page-bg.webp
new file mode 100644
index 000000000..a9a961d72
Binary files /dev/null and b/crowdsec-docs/static/img/landing-page-bg.webp differ
diff --git a/crowdsec-docs/static/img/logo/apple-colored.svg b/crowdsec-docs/static/img/logo/apple-colored.svg
new file mode 100644
index 000000000..f7c22054b
--- /dev/null
+++ b/crowdsec-docs/static/img/logo/apple-colored.svg
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/crowdsec-docs/static/img/logo/docker-colored.svg b/crowdsec-docs/static/img/logo/docker-colored.svg
new file mode 100644
index 000000000..3499e4608
--- /dev/null
+++ b/crowdsec-docs/static/img/logo/docker-colored.svg
@@ -0,0 +1,14 @@
+
+
\ No newline at end of file
diff --git a/crowdsec-docs/static/img/logo/freebsd-colored.svg b/crowdsec-docs/static/img/logo/freebsd-colored.svg
new file mode 100644
index 000000000..02c4ea9a0
--- /dev/null
+++ b/crowdsec-docs/static/img/logo/freebsd-colored.svg
@@ -0,0 +1,15 @@
+
+
+
\ No newline at end of file
diff --git a/crowdsec-docs/static/img/logo/kubernetes-colored.svg b/crowdsec-docs/static/img/logo/kubernetes-colored.svg
new file mode 100644
index 000000000..58ab457b8
--- /dev/null
+++ b/crowdsec-docs/static/img/logo/kubernetes-colored.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/crowdsec-docs/static/img/logo/linux-colored.svg b/crowdsec-docs/static/img/logo/linux-colored.svg
new file mode 100644
index 000000000..088de35d5
--- /dev/null
+++ b/crowdsec-docs/static/img/logo/linux-colored.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/crowdsec-docs/static/img/logo/windows-colored.svg b/crowdsec-docs/static/img/logo/windows-colored.svg
new file mode 100644
index 000000000..2a8a70ee0
--- /dev/null
+++ b/crowdsec-docs/static/img/logo/windows-colored.svg
@@ -0,0 +1,72 @@
+
+
+
+
\ No newline at end of file
diff --git a/crowdsec-docs/tailwind.config.js b/crowdsec-docs/tailwind.config.js
index 6b1e2b21e..3ca20b091 100644
--- a/crowdsec-docs/tailwind.config.js
+++ b/crowdsec-docs/tailwind.config.js
@@ -1,4 +1,3 @@
-
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
@@ -12,15 +11,62 @@ module.exports = {
],
theme: {
extend: {
- colors:{
- primary: {
- light: "#2E2A77",
- dark: '#242441',
+ colors: {
+ primary: `rgb(var(--color-primary) /
-
- {children}
-
-
- {docTOC.desktop &&
+
-
+
+ {docTOC.desktop && (
+
+
+ {children}
+ {/*
+
+ {docTOC.desktop}
+ )}
{docTOC.desktop}
}
-