Skip to content

Commit 40ec111

Browse files
ziracmoziracmo
committed
feat 💄update alert and code UI
1 parent 4ff8b9f commit 40ec111

File tree

7 files changed

+156
-7
lines changed

7 files changed

+156
-7
lines changed

‎crowdsec-docs/docusaurus.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@ const config: Config = {
224224
},
225225
prism: {
226226
theme: themes.shadesOfPurple,
227+
darkTheme: themes.vsDark,
227228
additionalLanguages: ["bash", "yaml", "json"],
228229
},
229230
} satisfies Preset.ThemeConfig,

‎crowdsec-docs/src/css/custom.css‎

Lines changed: 73 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,11 @@
4242
--card-foreground: 52 52 59;
4343
--popover: 255 255 255;
4444
--popover-foreground: 52 52 59;
45-
--primary: 120 102 201;
45+
--primary: 82 71 179;
4646
--primary-foreground: 251 251 251;
47-
--secondary: 247 247 247;
47+
--secondary: 159 107 4;
4848
--secondary-foreground: 52 52 59;
49+
--premium: 248 171 19;
4950
--info: 224 178 90;
5051
--info-foreground: 52 52 59;
5152
--muted: 247 247 247;
@@ -110,6 +111,7 @@ html[data-theme="dark"],
110111
--primary-foreground: 52 52 52;
111112
--secondary: 224 178 90;
112113
--secondary-foreground: 250 251 251;
114+
--premium: 248 171 19;
113115
--info: 224 178 90;
114116
--info-foreground: 250 251 251;
115117
--muted: 69 69 69;
@@ -537,3 +539,72 @@ div[class^="announcementBar"] {
537539
vertical-align: middle;
538540
transform: rotate(0deg) !important; /* force reset to counter act UL accordion transform */
539541
}
542+
543+
/* 🚩 Alert component */
544+
545+
.alert {
546+
@apply bg-background dark:bg-gray-100 text-foreground dark:text-foreground border border-solid border-border rounded-lg p-4 mb-4 text-sm;
547+
}
548+
549+
.alert p {
550+
@apply mb-1;
551+
}
552+
553+
.alert svg {
554+
@apply !w-5 !h-5 mb-0;
555+
}
556+
557+
.alert--info {
558+
@apply bg-cyan-50 dark:bg-cyan-900/10 text-cyan-900 dark:text-cyan-100 border-cyan-200 dark:border-cyan-700;
559+
}
560+
561+
.alert--info svg {
562+
@apply !fill-cyan-500 dark:fill-cyan-200;
563+
}
564+
565+
.alert--warning {
566+
@apply bg-amber-100 dark:bg-amber-900/10 text-amber-900 dark:text-amber-100 border-amber-200 dark:border-amber-700;
567+
}
568+
569+
.alert--warning svg {
570+
@apply fill-amber-400 dark:fill-amber-200;
571+
}
572+
573+
.alert--success {
574+
@apply bg-emerald-100 dark:bg-emerald-900/10 text-emerald-900 dark:text-emerald-100 border-emerald-200 dark:border-emerald-700;
575+
}
576+
577+
.alert--success svg {
578+
@apply fill-emerald-400 dark:fill-emerald-200;
579+
}
580+
581+
.alert--danger {
582+
@apply bg-red-100 dark:bg-red-900/10 text-red-900 dark:text-red-100 border-red-200 dark:border-red-700;
583+
}
584+
585+
.alert--danger svg {
586+
@apply fill-red-400 dark:fill-red-200;
587+
}
588+
589+
/* 💻 Code blocks */
590+
591+
.prism-code {
592+
@apply !bg-primary dark:!bg-gray-50 text-gray-900 dark:text-gray-100 p-4 mb-4 overflow-x-auto rounded-lg border border-solid border-border;
593+
}
594+
595+
pre {
596+
@apply rounded-lg font-semibold;
597+
}
598+
599+
.prism-code .token.plain {
600+
@apply text-white dark:text-foreground;
601+
}
602+
603+
.prism-code .token.function,
604+
.prism-code .assign-left.variable {
605+
@apply !text-premium dark:!text-secondary;
606+
}
607+
608+
code:not(.prism-code code) {
609+
@apply bg-gray-100 dark:bg-gray-50 border-primary/20 border-solid border text-primary px-1 py-0.5 rounded-md font-semibold;
610+
}

‎crowdsec-docs/src/theme/Admonition/Layout/index.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { ThemeClassNames } from "@docusaurus/theme-common";
2+
import type { Props } from "@theme/Admonition/Layout";
3+
import clsx from "clsx";
4+
import React, { type ReactNode } from "react";
5+
6+
import styles from "./styles.module.css";
7+
8+
function AdmonitionContainer({ type, className, children }: Pick<Props, "type" | "className"> & { children: ReactNode }) {
9+
return (
10+
<div className={clsx(ThemeClassNames.common.admonition, ThemeClassNames.common.admonitionType(type), styles.admonition, className)}>
11+
{children}
12+
</div>
13+
);
14+
}
15+
16+
function AdmonitionHeading({ icon }: Readonly<Pick<Props, "icon" | "title">>) {
17+
return (
18+
<div className={clsx(styles.admonitionHeading, "!mb-0")}>
19+
<span className={styles.admonitionIcon}>{icon}</span>
20+
</div>
21+
);
22+
}
23+
24+
function AdmonitionContent({ children }: Pick<Props, "children">) {
25+
return children ? <div className={clsx(styles.admonitionContent)}>{children}</div> : null;
26+
}
27+
28+
export default function AdmonitionLayout(props: Readonly<Props>): React.JSX.Element {
29+
const { type, icon, title, children, className } = props;
30+
return (
31+
<AdmonitionContainer type={type} className={clsx(className, " flex flex-row items-start alert--icon gap-2")}>
32+
{title || icon ? <AdmonitionHeading title={title} icon={icon} /> : null}
33+
<AdmonitionContent>{children}</AdmonitionContent>
34+
</AdmonitionContainer>
35+
);
36+
}

‎crowdsec-docs/src/theme/Admonition/Layout/styles.module.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.admonition {
2+
margin-bottom: 1em;
3+
}
4+
5+
.admonitionHeading {
6+
font: var(--ifm-heading-font-weight) var(--ifm-h5-font-size) / var(--ifm-heading-line-height) var(--ifm-heading-font-family);
7+
text-transform: uppercase;
8+
}
9+
10+
/* Heading alone without content (does not handle fragment content) */
11+
.admonitionHeading:not(:last-child) {
12+
margin-bottom: 0.3rem;
13+
}
14+
15+
.admonitionHeading code {
16+
text-transform: none;
17+
}
18+
19+
.admonitionIcon {
20+
display: inline-block;
21+
vertical-align: middle;
22+
margin-right: 0.4em;
23+
}
24+
25+
.admonitionIcon svg {
26+
display: inline-block;
27+
height: 1.6em;
28+
width: 1.6em;
29+
fill: var(--ifm-alert-foreground-color);
30+
}
31+
32+
.admonitionContent > :last-child {
33+
margin-bottom: 0;
34+
}

‎crowdsec-docs/src/theme/Footer/Logo/styles.module.css‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
.footerLogoLink {
2-
opacity: 0.5;
3-
transition: opacity var(--ifm-transition-fast)
4-
var(--ifm-transition-timing-default);
2+
opacity: 0.5;
3+
transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default);
54
}
65

76
.footerLogoLink:hover {
8-
opacity: 1;
7+
opacity: 1;
98
}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@ import { cn } from "@site/src/utils";
33
import * as React from "react";
44

55
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
6-
<div ref={ref} className={cn("rounded-lg border border-border text-card-foreground shadow-sm bg-card", className)} {...props} />
6+
<div
7+
ref={ref}
8+
className={cn(
9+
"rounded-lg border border-solid border-border/40 dark:border-border text-card-foreground shadow-sm bg-card",
10+
className
11+
)}
12+
{...props}
13+
/>
714
));
815
Card.displayName = "Card";
916

‎crowdsec-docs/tailwind.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ module.exports = {
1818
"secondary-foreground": `rgb(var(--secondary-foreground) / <alpha-value>)`,
1919
info: `rgb(var(--info) / <alpha-value>)`,
2020
"info-foreground": `rgb(var(--info-foreground) / <alpha-value>)`,
21+
premium: `rgb(var(--premium) / <alpha-value>)`,
2122
gray: {
2223
50: `rgb(var(--color-gray-50) / <alpha-value>)`,
2324
100: `rgb(var(--color-gray-100) / <alpha-value>)`,

0 commit comments

Comments
 (0)