feat(blocklists): redesign getting started page with path cards and comparison table

Author: ziracmo

crowdsec-docs/docusaurus.config.ts

@@ -8,7 +8,9 @@ import sidebarsUnversioned from "./sidebarsUnversioned";
 
 const extractPreprocessor = require("./plugins/extract-preprocessor");
 
-const generateCurrentAndNextRedirects = (s) => [
+const generateCurrentAndNextRedirects = (
+	s: string,
+): { from: string; to: string }[] => [
 	{
 		from: `/docs/${s}`,
 		to: `/u/${s}`,
@@ -19,7 +21,7 @@ const generateCurrentAndNextRedirects = (s) => [
 	},
 ];
 
-function handleSidebarItems(items) {
+function handleSidebarItems(items: any[]): any[] {
 	const arr = [];
 	for (const item of items) {
 		if (typeof item === "string") {
@@ -32,7 +34,7 @@ function handleSidebarItems(items) {
 }
 
 // This function generates redirects for all items in the unversioned sidebars, so that if we move a doc from versioned to unversioned, we don't break existing links. It handles both string items (doc ids) and nested objects (categories with their own items).
-const backportRedirect = (s) => {
+const backportRedirect = (s: any): any[] => {
 	const arr = [];
 	if (typeof s === "string") {
 		arr.push(...generateCurrentAndNextRedirects(s));
@@ -54,7 +56,9 @@ const backportRedirect = (s) => {
 const currentYear = new Date().getFullYear();
 
 const ACADEMY_URL = `https://academy.crowdsec.net/courses?${
-	process.env.NODE_ENV === "production" ? "utm_source=docs&utm_medium=menu&utm_campaign=top-menu&utm_id=academydocs" : ""
+	process.env.NODE_ENV === "production"
+		? "utm_source=docs&utm_medium=menu&utm_campaign=top-menu&utm_id=academydocs"
+		: ""
 }`;
 
 /** IF you make significant changes to the nav bar or side bars
@@ -153,7 +157,7 @@ const FOOTER_LINKS = [
 			},
 			{ label: "Discourse", href: "https://discourse.crowdsec.net/" },
 			{ label: "Discord", href: "https://discord.gg/crowdsec" },
-			{ label: "Twitter", href: "https://twitter.com/crowd_security" },
+			{ label: "X", href: "https://x.com/crowd_security" },
 			{ label: "LinkedIn", href: "https://www.linkedin.com/company/crowdsec/" },
 			{ label: "YouTube", href: "https://www.youtube.com/@crowdsec" },
 		],
@@ -169,7 +173,10 @@ const FOOTER_LINKS = [
 				href: "https://crowdsec.net/blog/category/tutorial/",
 			},
 			{ label: "Academy", href: "https://academy.crowdsec.net/" },
-			{ label: "Custom GPT", href: "https://chatgpt.com/g/g-682c3a61a78081918417571116c2b563-crowdsec-documentation" },
+			{
+				label: "Custom GPT",
+				href: "https://chatgpt.com/g/g-682c3a61a78081918417571116c2b563-crowdsec-documentation",
+			},
 		],
 	},
 ];
@@ -202,21 +209,43 @@ const redirects = [
 	},
 	// CTI Web UI pages moved to console/ip_reputation
 	{ from: "/u/cti_api/getting_started", to: "/u/console/ip_reputation/intro" },
-	{ from: "/u/cti_api/api_getting_started", to: "/u/console/ip_reputation/api_keys" },
+	{
+		from: "/u/cti_api/api_getting_started",
+		to: "/u/console/ip_reputation/api_keys",
+	},
 	{ from: "/u/cti_api/ip_report", to: "/u/console/ip_reputation/ip_report" },
-	{ from: "/u/cti_api/search_queries", to: "/u/console/ip_reputation/search_ui" },
-	{ from: "/u/cti_api/advanced_search", to: "/u/console/ip_reputation/search_ui_advanced" },
-	{ from: "/u/cti_api/cve_explorer", to: "/u/console/ip_reputation/intro#live-exploit-tracker" },
+	{
+		from: "/u/cti_api/search_queries",
+		to: "/u/console/ip_reputation/search_ui",
+	},
+	{
+		from: "/u/cti_api/advanced_search",
+		to: "/u/console/ip_reputation/search_ui_advanced",
+	},
+	{
+		from: "/u/cti_api/cve_explorer",
+		to: "/u/console/ip_reputation/intro#live-exploit-tracker",
+	},
 	// other CTI pages redirect / fixes
 	{ from: "/next/cti_api/intro", to: "/u/console/ip_reputation/api_keys" },
-	{ from: "/next/cti_api/getting_started", to: "/u/console/ip_reputation/api_keys" },
-	{ from: "/u/console/ip_reputation/api_keys_premium", to: "/u/console/ip_reputation/api_keys" },
+	{
+		from: "/next/cti_api/getting_started",
+		to: "/u/console/ip_reputation/api_keys",
+	},
+	{
+		from: "/u/console/ip_reputation/api_keys_premium",
+		to: "/u/console/ip_reputation/api_keys",
+	},
 ];
 
 function redirectsGlobalDataPlugin() {
 	return {
 		name: "redirects-global-data",
-		async contentLoaded({ actions }: { actions: { setGlobalData: (data: unknown) => void } }) {
+		async contentLoaded({
+			actions,
+		}: {
+			actions: { setGlobalData: (data: unknown) => void };
+		}) {
 			actions.setGlobalData({ redirects });
 		},
 	};
@@ -230,7 +259,8 @@ const config: Config = {
 		experimental_faster: true,
 	},
 	title: "CrowdSec",
-	tagline: "CrowdSec - Real-time & crowdsourced protection against aggressive IPs",
+	tagline:
+		"CrowdSec - Real-time & crowdsourced protection against aggressive IPs",
 	url: "https://docs.crowdsec.net",
 	baseUrl: "/",
 	onBrokenLinks: "warn",
@@ -311,7 +341,8 @@ const config: Config = {
 			{
 				docs: {
 					sidebarPath: "./sidebars.ts",
-					editUrl: "https://github.com/crowdsecurity/crowdsec-docs/edit/main/crowdsec-docs/",
+					editUrl:
+						"https://github.com/crowdsecurity/crowdsec-docs/edit/main/crowdsec-docs/",
 					lastVersion: "current",
 					versions: {
 						"v1.7": {
@@ -329,7 +360,8 @@ const config: Config = {
 				},
 				blog: {
 					showReadingTime: true,
-					editUrl: "https://github.com/crowdsecurity/crowdsec-docs/edit/main/crowdsec-docs/",
+					editUrl:
+						"https://github.com/crowdsecurity/crowdsec-docs/edit/main/crowdsec-docs/",
 				},
 				theme: {
 					customCss: "./src/css/custom.css",
@@ -380,12 +412,14 @@ const config: Config = {
 					{
 						title: "CrowdSec Hub",
 						url: "https://hub.crowdsec.net/",
-						description: "Browse and install parsers, scenarios, collections, and remediation components",
+						description:
+							"Browse and install parsers, scenarios, collections, and remediation components",
 					},
 					{
 						title: "CrowdSec Console",
 						url: "https://app.crowdsec.net/",
-						description: "Manage your CrowdSec deployments and access the community blocklist",
+						description:
+							"Manage your CrowdSec deployments and access the community blocklist",
 					},
 					{
 						title: "GitHub Repository",

crowdsec-docs/src/components/docs/PathCard/index.tsx

@@ -39,7 +39,7 @@ export default function PathCard({ eyebrow, color, icon, title, desc, tag, tags
 			href={href}
 			onMouseEnter={() => setHover(true)}
 			onMouseLeave={() => setHover(false)}
-			className="relative p-6 rounded-[14px] overflow-hidden cursor-pointer flex flex-col no-underline min-w-0 transition-[border-color,background,box-shadow] duration-200"
+			className="relative p-6 rounded-[14px] overflow-hidden cursor-pointer flex flex-col no-underline hover:no-underline min-w-0 transition-[border-color,background,box-shadow] duration-200"
 			style={{
 				color: "inherit",
 				background: hover ? "var(--cs-surface-2)" : "var(--cs-surface)",
@@ -94,12 +94,14 @@ export default function PathCard({ eyebrow, color, icon, title, desc, tag, tags
 				</div>
 			)}
 
-			<div className="mt-5 pt-4 border-t border-dashed border-cs-border flex items-center justify-between">
-				{audience && (
-					<div className="font-cs-mono text-[10.5px] text-cs-ink-mute tracking-[0.06em] leading-[1.4] min-w-0 overflow-hidden">
+			{audience && (
+					<div className="font-cs-mono text-[10.5px] text-cs-ink-mute tracking-[0.06em] leading-[1.4] min-w-0 overflow-hidden mt-4">
 						{audience}
 					</div>
 				)}
+
+			<div className="mt-3 pt-4 border-t border-cs-border flex items-center justify-between">
+
 				<div
 					className="inline-flex items-center gap-1.5 font-semibold text-[13px] ml-auto whitespace-nowrap shrink-0 transition-[gap] duration-[160ms]"
 					style={{ color }}

crowdsec-docs/src/css/alerts.css

@@ -12,8 +12,12 @@
 	top: 0.2rem !important;
 }
 
+.alert .cs-admon__icon {
+	@apply p-0.5;
+}
+
 .alert svg {
-	@apply !w-5 !h-5 mb-0;
+	@apply !w-4 !h-4 mb-0;
 }
 
 .alert--info {

crowdsec-docs/src/css/crowdsec-components.css

@@ -413,10 +413,6 @@ code:not(pre code):not(.cs-ic) {
 	overflow: hidden;
 	background: var(--cs-surface);
 }
-.cs-table-wrap table {
-	margin: 0 !important;
-	border: none !important;
-}
 
 /* ── Direct table targeting (catches HTML tables too) ─────────── */
 
@@ -515,6 +511,14 @@ article table tbody tr:hover td {
 	background: color-mix(in srgb, var(--cs-orange) 4%, transparent) !important;
 }
 
+/* ── Reset table styles when inside cs-table-wrap (after all general rules so this wins) */
+.cs-table-wrap table {
+	margin: 0 !important;
+	border: none !important;
+	border-radius: 0 !important;
+	overflow: visible !important;
+}
+
 /* ── Pill component ─────────────────────────────────────────────── */
 .cs-pill {
 	display: inline-flex;
@@ -578,6 +582,13 @@ article table tbody tr:hover td {
 	border-bottom: 1px solid var(--cs-border) !important;
 	margin-bottom: 0 !important;
 	gap: 8px !important;
+	flex-wrap: nowrap !important;
+	overflow-x: auto !important;
+	scrollbar-width: none !important;
+}
+
+.tabs::-webkit-scrollbar {
+	display: none !important;
 }
 
 /* Individual tab items */
@@ -592,6 +603,8 @@ article table tbody tr:hover td {
 	border-radius: 6px 6px 0 0 !important;
 	border: none !important;
 	border-bottom: 2px solid transparent !important;
+	white-space: nowrap !important;
+	flex-shrink: 0 !important;
 	transition:
 		color 0.12s,
 		background 0.12s,

crowdsec-docs/src/css/crowdsec-tokens.css

@@ -167,7 +167,7 @@
 }
 
 .theme-doc-sidebar-item-link hr {
-	visibility: hidden;
+	background-color: var(--cs-border-hi) !important;
 	margin: 0.25rem 0 !important;
 }