Skip to content

Commit eb2a5d7

Browse files
LaurenceJJonesLaurenceJJones
authored
wip: enhanced introduction (#810)
* wip: enhanced introduction * wip: Add popover as a fallback on mobile devices * wip: fix lock * wip: fix popover * enhance: grey on light mode, and simple image * enhance: hint at previous RC naming scheme * enhance: word words and wrod * enhance: fix broken links * enhance: fix broken link
1 parent 07fa82f commit eb2a5d7

22 files changed

+1564
-1248
lines changed

‎crowdsec-docs/package-lock.json‎

Lines changed: 1341 additions & 1139 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎crowdsec-docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@mui/icons-material": "^5.11.16",
2929
"@mui/material": "^5.13.4",
3030
"@mui/x-date-pickers": "^6.18.0",
31+
"@radix-ui/react-popover": "^1.1.14",
3132
"@radix-ui/react-tooltip": "^1.1.2",
3233
"class-variance-authority": "^0.7.0",
3334
"clsx": "^2.1.1",

‎crowdsec-docs/sidebarsUnversioned.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -557,11 +557,6 @@ module.exports = {
557557
id: "getting_started/intro",
558558
label: "🧭 Introduction",
559559
},
560-
{
561-
type: "doc",
562-
id: "getting_started/pre_requisites",
563-
label: "📋 Prerequisites",
564-
},
565560
{
566561
type: "category",
567562
label: "📦 Installation",

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { TouchProvider, HybridTooltip, HybridTooltipTrigger, HybridTooltipContent } from '@site/src/ui/hybridtooltip';
3+
4+
export default function UnderlineTooltip({ children, tooltip }) {
5+
return (
6+
<TouchProvider>
7+
<HybridTooltip delayDuration={300}>
8+
<HybridTooltipTrigger asChild>
9+
<span className="tw-underline tw-decoration-dashed tw-decoration-1 tw-decoration-gray-700 tw-cursor-help hover:tw-decoration-gray-900 dark:tw-decoration-gray-300 dark:hover:tw-decoration-gray-100 tw-underline-offset-2">
10+
{children}
11+
</span>
12+
</HybridTooltipTrigger>
13+
<HybridTooltipContent>
14+
<p>{tooltip}</p>
15+
</HybridTooltipContent>
16+
</HybridTooltip>
17+
</TouchProvider>
18+
);
19+
}

‎crowdsec-docs/src/ui/hybridtooltip.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
'use client';
2+
3+
import React from 'react';
4+
import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
5+
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tooltip';
6+
import { Popover, PopoverTrigger, PopoverContent } from './popover';
7+
import { TooltipContentProps, TooltipProps, TooltipTriggerProps } from '@radix-ui/react-tooltip';
8+
import { PopoverContentProps, PopoverProps, PopoverTriggerProps } from '@radix-ui/react-popover';
9+
10+
const TouchContext = createContext<boolean | undefined>(undefined);
11+
const useTouch = () => useContext(TouchContext);
12+
13+
export const TouchProvider = (props: PropsWithChildren) => {
14+
const [isTouch, setTouch] = useState<boolean>();
15+
16+
useEffect(() => {
17+
setTouch(window.matchMedia('(pointer: coarse)').matches);
18+
}, []);
19+
20+
// Conditionally provide the appropriate provider
21+
return (
22+
<TouchContext.Provider value={isTouch}>
23+
{isTouch ? (
24+
// Popover doesn't need a provider
25+
<>{props.children}</>
26+
) : (
27+
// Tooltip needs TooltipProvider
28+
<TooltipProvider delayDuration={300}>
29+
{props.children}
30+
</TooltipProvider>
31+
)}
32+
</TouchContext.Provider>
33+
);
34+
};
35+
36+
export const HybridTooltip = (props: TooltipProps & PopoverProps) => {
37+
const isTouch = useTouch();
38+
39+
return isTouch ? <Popover {...props} /> : <Tooltip {...props} />;
40+
};
41+
42+
export const HybridTooltipTrigger = (props: TooltipTriggerProps & PopoverTriggerProps) => {
43+
const isTouch = useTouch();
44+
45+
return isTouch ? <PopoverTrigger {...props} /> : <TooltipTrigger {...props} />;
46+
};
47+
48+
export const HybridTooltipContent = (props: TooltipContentProps & PopoverContentProps) => {
49+
const isTouch = useTouch();
50+
51+
return isTouch ? <PopoverContent {...props} /> : <TooltipContent {...props} />;
52+
};

‎crowdsec-docs/src/ui/popover.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as PopoverPrimitive from "@radix-ui/react-popover"
5+
6+
import { cn } from "@site/src/utils/index"
7+
8+
const Popover = PopoverPrimitive.Root
9+
10+
const PopoverTrigger = PopoverPrimitive.Trigger
11+
12+
const PopoverContent = React.forwardRef<
13+
React.ElementRef<typeof PopoverPrimitive.Content>,
14+
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15+
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16+
<PopoverPrimitive.Portal>
17+
<PopoverPrimitive.Content
18+
ref={ref}
19+
align={align}
20+
sideOffset={sideOffset}
21+
className={cn(
22+
"tw-z-50 tw-w-72 tw-rounded-md tw-border tw-border-neutral-200 tw-bg-neutral-100 tw-p-4 tw-text-neutral-950 tw-shadow-md tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=open]:tw-fade-in-0 data-[state=closed]:tw-zoom-out-95 data-[state=open]:tw-zoom-in-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2 tw-origin-[--radix-popover-content-transform-origin] dark:tw-border-neutral-800 dark:tw-bg-neutral-950 dark:tw-text-neutral-50",
23+
className
24+
)}
25+
{...props}
26+
/>
27+
</PopoverPrimitive.Portal>
28+
))
29+
PopoverContent.displayName = PopoverPrimitive.Content.displayName
30+
31+
export { Popover, PopoverTrigger, PopoverContent }

‎crowdsec-docs/src/ui/tooltip.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
1919
ref={ref}
2020
sideOffset={sideOffset}
2121
className={cn(
22-
"tw-z-50 tw-overflow-hidden tw-rounded-md tw-border tw-border-neutral-200 tw-bg-white tw-px-3 tw-py-1.5 tw-text-sm tw-text-neutral-950 tw-shadow-md tw-animate-in tw-fade-in-0 tw-zoom-in-95 data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=closed]:tw-zoom-out-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2 dark:tw-border-neutral-800 dark:tw-bg-neutral-950 dark:tw-text-neutral-50",
22+
"tw-z-50 tw-overflow-hidden tw-rounded-md tw-border tw-border-neutral-200 tw-bg-neutral-100 tw-px-3 tw-py-1.5 tw-text-sm tw-text-neutral-950 tw-shadow-md tw-animate-in tw-fade-in-0 tw-zoom-in-95 data-[state=closed]:tw-animate-out data-[state=closed]:tw-fade-out-0 data-[state=closed]:tw-zoom-out-95 data-[side=bottom]:tw-slide-in-from-top-2 data-[side=left]:tw-slide-in-from-right-2 data-[side=right]:tw-slide-in-from-left-2 data-[side=top]:tw-slide-in-from-bottom-2 dark:tw-border-neutral-800 dark:tw-bg-neutral-950 dark:tw-text-neutral-50",
2323
className
2424
)}
2525
{...props}

‎crowdsec-docs/unversioned/getting_started/health_check.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: health_check
33
title: CrowdSec Security Engine Setup Health-Check
4-
pagination_prev: getting_started/pre_requisites
4+
pagination_prev: getting_started/intro
55
pagination_next: getting_started/next_steps
66
---
77

‎crowdsec-docs/unversioned/getting_started/installation/cloudways.mdx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: cloudways
33
title: Cloudways (CrowdSec + WP Remediation) - 🧪 Experimental
4-
pagination_prev: getting_started/pre_requisites
4+
pagination_prev: getting_started/intro
55
pagination_next: getting_started/health_check
66
---
77

@@ -13,6 +13,8 @@ import CodeBlock from '@theme/CodeBlock';
1313

1414
# Install CrowdSec on Cloudways
1515

16+
Before getting started, it is advised to read the [introduction](/unversioned/getting_started/introduction.mdx) page to understand the prerequisites and concepts for running CrowdSec.
17+
1618
:::warning
1719
🧪 This is an experimental way to have CrowdSec run on Cloudways, it does work well to detect attacks and remediate at the wordpress level.
1820
However remediation at the firewall level is not possible due to the limited permissions of the user.

‎crowdsec-docs/unversioned/getting_started/installation/docker.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
id: docker
33
title: Docker
4-
pagination_prev: getting_started/pre_requisites
4+
pagination_prev: getting_started/intro
55
pagination_next: getting_started/health_check
66
---
77

@@ -11,7 +11,7 @@ pagination_next: getting_started/health_check
1111
Prerequisites are written for bare metal installations. Please keep in mind the containerization layer may make some of these items unnecessary.
1212
:::
1313

14-
Before getting started it is advised to read the [prerequisites](/unversioned/getting_started/prerequisites.mdx) page to understand the requirements for running CrowdSec.
14+
Before getting started, it is advised to read the [introduction](/unversioned/getting_started/introduction.mdx) page to understand the prerequisites and concepts for running CrowdSec.
1515

1616
## Docker
1717

@@ -125,4 +125,4 @@ Use a `.env` file or Docker secrets to avoid hardcoding sensitive variables like
125125

126126
## Next Steps?
127127

128-
Great, you now have CrowdSec installed on your system. Within the [post installation steps](/getting_started/next_steps.md) you will find the next steps to configure and optimize your installation.
128+
Great, you now have CrowdSec installed on your system. Within the [post installation steps](/getting_started/next_steps.mdx) you will find the next steps to configure and optimize your installation.

0 commit comments

Comments
 (0)