Skip to content

Commit 3c99062

Browse files
ziracmoziracmo
authored
Merge pull request #714 from crowdsecurity/update-doc-ui
feat: 📝 Update home documentation UI
2 parents 76e8cf4 + 4bda4f4 commit 3c99062

19 files changed

+638
-144
lines changed

‎crowdsec-docs/docusaurus.config.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const backportRedirect = (s) => {
4747
/** @type {import('@docusaurus/types').DocusaurusConfig} */
4848
module.exports = {
4949
future: {
50-
experimental_faster: true,
50+
experimental_faster: true,
5151
},
5252
title: "CrowdSec",
5353
tagline:
@@ -88,11 +88,11 @@ module.exports = {
8888
contextualSearch: true,
8989
},
9090
zooming: {
91-
selector: '.markdown :not(a) > img',
91+
selector: ".markdown :not(a) > img",
9292
delay: 500,
9393
background: {
94-
light: 'rgba(101,108,133,0.8)',
95-
dark: 'rgba(9,10,17,0.8)'
94+
light: "rgba(101,108,133,0.8)",
95+
dark: "rgba(9,10,17,0.8)",
9696
},
9797
},
9898
navbar: {
@@ -266,12 +266,12 @@ module.exports = {
266266
versions: {
267267
"v1.6.0": {
268268
banner: "none",
269-
path: "/"
269+
path: "/",
270270
},
271271
current: {
272-
path: "/next"
273-
}
274-
}
272+
path: "/next",
273+
},
274+
},
275275
},
276276
blog: {
277277
showReadingTime: true,

‎crowdsec-docs/src/components/GetToKnowUs.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import Link from "@docusaurus/Link"
2+
3+
const staticData = [
4+
{
5+
icon: () => (
6+
<img
7+
src="/img/crowdsec_logo.png"
8+
className="tw-h-6 tw-w-9"
9+
alt="CrowdSec logo"
10+
/>
11+
),
12+
title: "What is CrowdSec?",
13+
description:
14+
"Data curated solution with a bunch of millions IPs detected by our large community.",
15+
link: "https://www.crowdsec.net",
16+
},
17+
{
18+
icon: () => (
19+
<img
20+
src="/img/icons/radar-target.webp"
21+
className="tw-h-6 tw-w-6"
22+
alt="security engines"
23+
/>
24+
),
25+
title: "Security Engines",
26+
description: "Secure yourself.",
27+
link: "/docs/intro",
28+
},
29+
{
30+
icon: () => <span className="tw-text-2xl">🖥️</span>,
31+
title: "CrowdSec Console",
32+
description: "Manage and monitor your security.",
33+
link: "/u/console/intro",
34+
},
35+
{
36+
icon: () => <span className="tw-text-2xl">🧑🏻‍💻</span>,
37+
title: "CrowdSec CLI",
38+
description: "Use our command line interface.",
39+
link: "/docs/cscli/",
40+
},
41+
{
42+
icon: () => (
43+
<img
44+
src="/img/icons/waf.webp"
45+
className="tw-h-6 tw-w-6"
46+
alt="Web application firewall"
47+
/>
48+
),
49+
title: "CrowdSec WAF",
50+
description: "Protect your web applications.",
51+
link: "/docs/appsec/intro",
52+
},
53+
{
54+
icon: () => (
55+
<img
56+
src="/img/icons/shield.webp"
57+
className="tw-h-6 tw-w-6"
58+
alt="blocklists"
59+
/>
60+
),
61+
title: "Blocklists",
62+
description: "Block thousands of IPs.",
63+
link: "/u/blocklists/intro",
64+
},
65+
{
66+
icon: () => (
67+
<img
68+
src="/img/icons/world.webp"
69+
className="tw-h-6 tw-w-6"
70+
alt="world API"
71+
/>
72+
),
73+
title: "APIs",
74+
description: "Integrate with your tools.",
75+
link: "/u/cti_api/intro",
76+
},
77+
]
78+
79+
export default function GetToKnowUs() {
80+
return (
81+
<section>
82+
<h2 className="tw-text-left tw-text-white">Get to know us!</h2>
83+
84+
<div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4">
85+
{staticData.map((props, index) => (
86+
<Link
87+
key={props.text}
88+
href={props.link}
89+
className={
90+
"tw-border-0 hover:tw-no-underline " +
91+
(index === 0 ? "md:tw-col-span-2" : "")
92+
}
93+
>
94+
<div
95+
className={
96+
"tw-w-full tw-flex tw-justify-start tw-items-start tw-border tw-border-transparent tw-flex-row tw-rounded-lg tw-px-2 tw-py-2 tw-gap-2 tw-flex-1 tw-cursor-pointer tw-bg-gray-800 tw-ease-in-out tw-text-white tw-duration-300 hover:tw-border-white hover:tw-bg-gray-700"
97+
}
98+
>
99+
<span className="tw-border-2 tw-border-gray-700 tw-bg-alpa-primary tw-w-12 tw-h-12 tw-rounded-lg tw-inline-flex tw-items-center tw-justify-center">
100+
<props.icon className="icon icon-xl" />
101+
</span>
102+
103+
<div className="tw-flex tw-flex-col tw-items-start tw-flex-1">
104+
<span
105+
className={
106+
"tw-text-md tw-font-bold tw-flex-1"
107+
}
108+
>
109+
{props.title}
110+
</span>
111+
<p className="tw-text-sm tw-text-left tw-text-gray-300 tw-mb-0">
112+
{props.description}
113+
</p>
114+
</div>
115+
</div>
116+
</Link>
117+
))}
118+
</div>
119+
</section>
120+
)
121+
}

‎crowdsec-docs/src/components/QuickStart.js‎

Lines changed: 56 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import CIcon from "@coreui/icons-react";
2-
import {
3-
cibKubernetes,
4-
cibDocker,
5-
cibLinux,
6-
cibFreebsd,
7-
cibWindows,
8-
cibApple,
9-
} from "@coreui/icons";
10-
import opnsenseLogo from "@site/static/img/logo-opnsense.svg";
11-
import pfSenseLogo from "@site/static/img/logo-pfsense.svg";
12-
import whmLogo from "@site/static/img/logo-whm.svg";
13-
import cloudwaysLogo from "@site/static/img/logo-cloudways.svg";
14-
import Link from "@docusaurus/Link";
1+
import CIcon from "@coreui/icons-react"
2+
import cibLinux from "@site/static/img/logo/linux-colored.svg"
3+
import cibDocker from "@site/static/img/logo/docker-colored.svg"
4+
import cibWindows from "@site/static/img/logo/windows-colored.svg"
5+
import cibFreebsd from "@site/static/img/logo/freebsd-colored.svg"
6+
import cibApple from "@site/static/img/logo/apple-colored.svg"
7+
import opnsenseLogo from "@site/static/img/logo-opnsense.svg"
8+
import pfSenseLogo from "@site/static/img/logo-pfsense.svg"
9+
import cibKubernetes from "@site/static/img/logo/kubernetes-colored.svg"
10+
import whmLogo from "@site/static/img/logo-whm.svg"
11+
import cloudwaysLogo from "@site/static/img/logo-cloudways.svg"
12+
import Link from "@docusaurus/Link"
1513

1614
const staticData = [
1715
{
@@ -65,37 +63,55 @@ const staticData = [
6563
// text: "Cloudways",
6664
// link: "/u/getting_started/installation/cloudways",
6765
// },
68-
];
66+
]
6967

7068
export default function QuickStart() {
7169
return (
72-
<>
73-
<div className="tw-flex tw-flex-col tw-items-center tw-border-2 tw-border-white tw-border-solid tw-rounded-xl tw-2-4/5 sm:tw-w-2/3 tw-m-auto tw-transition tw-duration-500 tw-ease-in-out tw-transform hover:tw-border-secondary">
74-
<h1 className="tw-text-2xl tw-border-white tw-border-solid tw-rounded-xl tw-px-8 tw-bg-black tw--translate-y-4">
75-
Quick Start
76-
</h1>
77-
<div className="tw-flex tw-flex-row tw-gap-14 tw-px-8 tw-flex-wrap">
78-
{staticData.map((item, index) => (
79-
<div className="tw-w-full md:tw-w-fit tw-transition tw-duration-500 tw-ease-in-out tw-transform hover:tw-border-secondary">
80-
<Link
81-
key={index}
82-
to={item.link}
83-
className="tw-flex tw-flex-col tw-items-center tw-text-white tw-transition tw-duration-500 tw-ease-in-out tw-transform hover:tw-text-secondary"
70+
<section>
71+
<div className="tw-text-left">
72+
<h2 className="tw-mb-1 tw-text-white">
73+
Select your environment
74+
</h2>
75+
<p className="tw-max-w-xl tw-text-sm tw-text-gray-300">
76+
We can secure your stack. Just select your platform and get
77+
started.
78+
</p>
79+
</div>
80+
81+
<div className="tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mt-4">
82+
{staticData.map((props) => (
83+
<Link
84+
key={props.text}
85+
href={props.link}
86+
className="tw-border-0 hover:tw-no-underline"
87+
>
88+
<div
89+
className={
90+
"tw-w-full tw-flex tw-justify-start tw-items-center tw-border tw-border-transparent tw-flex-row tw-rounded-lg tw-px-2 tw-py-2 tw-gap-2 tw-flex-1 tw-cursor-pointer tw-bg-gray-800 tw-ease-in-out tw-text-white tw-duration-300 hover:tw-border-white hover:tw-bg-gray-700"
91+
}
92+
>
93+
<span className="tw-border-2 tw-border-gray-700 tw-bg-alpa-primary tw-w-12 tw-h-12 tw-rounded-lg tw-inline-flex tw-items-center tw-justify-center">
94+
{(!Array.isArray(props.icon) && (
95+
<props.icon className="icon icon-xl" />
96+
)) || <CIcon icon={props.icon} size="xl" />}
97+
</span>
98+
99+
<span
100+
className={
101+
"tw-text-md tw-font-semibold tw-flex-1 tw-text-left"
102+
}
84103
>
85-
{(!Array.isArray(item.icon) && (
86-
<item.icon className="icon icon-4xl" />
87-
)) || <CIcon icon={item.icon} size="4xl" />}
88-
{!!item.text && <p className="tw-text-xl">{item.text}</p>}
89-
</Link>
104+
{props.text}
105+
</span>
90106
</div>
91-
))}
92-
</div>
107+
</Link>
108+
))}
93109
</div>
94-
<p className="tw-text-xs tw-my-1">
95-
**Logos and trademarks, such as the logos above, are the
96-
property of their respective owners and are used here for
97-
identification purposes only.
110+
<p className="tw-text-xs tw-my-1 tw-text-gray-300 tw-text-right">
111+
*Logos and trademarks, such as the logos above, are the property
112+
of their respective owners and are used here for identification
113+
purposes only.
98114
</p>
99-
</>
100-
);
115+
</section>
116+
)
101117
}

0 commit comments

Comments
 (0)