refactor: JDE feedbacks on labels and content

Author: ziracmo

crowdsec-docs/docusaurus.config.ts

@@ -8,9 +8,7 @@ import sidebarsUnversioned from "./sidebarsUnversioned";
 
 const extractPreprocessor = require("./plugins/extract-preprocessor");
 
-const generateCurrentAndNextRedirects = (
-	s: string,
-): { from: string; to: string }[] => [
+const generateCurrentAndNextRedirects = (s: string): { from: string; to: string }[] => [
 	{
 		from: `/docs/${s}`,
 		to: `/u/${s}`,
@@ -21,7 +19,9 @@ const generateCurrentAndNextRedirects = (
 	},
 ];
 
-function handleSidebarItems(items: any[]): any[] {
+type SidebarItem = string | { id?: string; link?: { id?: string }; items?: SidebarItem[] };
+
+function handleSidebarItems(items: SidebarItem[]): { from: string; to: string }[] {
 	const arr = [];
 	for (const item of items) {
 		if (typeof item === "string") {
@@ -34,7 +34,7 @@ function handleSidebarItems(items: any[]): any[] {
 }
 
 // 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: any): any[] => {
+const backportRedirect = (s: SidebarItem): { from: string; to: string }[] => {
 	const arr = [];
 	if (typeof s === "string") {
 		arr.push(...generateCurrentAndNextRedirects(s));
@@ -56,9 +56,7 @@ const backportRedirect = (s: any): any[] => {
 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
@@ -241,11 +239,7 @@ const redirects = [
 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 });
 		},
 	};
@@ -259,8 +253,7 @@ 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",
@@ -341,8 +334,7 @@ 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": {
@@ -360,8 +352,7 @@ 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",
@@ -412,14 +403,12 @@ 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/plugins/gtag/theme/cookieconsent.js

@@ -8,7 +8,7 @@ export default function CookieConsent() {
 	if (dismissed) return null;
 
 	return (
-		<div className="fixed bottom-6 right-6 w-80 rounded-[14px] bg-cs-surface border border-cs-border-hi z-[9999] flex flex-col gap-3.5 p-5 pb-4"
+		<div className="fixed bottom-6 left-6 w-80 rounded-[14px] bg-cs-surface border border-cs-border-hi z-[9999] flex flex-col gap-3.5 p-5 pb-4"
 			style={{ boxShadow: "0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(148,163,184,0.06)" }}
 		>
 			{/* Eyebrow */}

crowdsec-docs/sidebarsUnversioned.ts

@@ -451,11 +451,6 @@ const sidebarsUnversionedConfig: SidebarConfig = {
 						tag: "otherSection",
 					},
 				},
-				{
-					type: "doc",
-					label: "IP Reputation Report",
-					id: "console/ip_reputation/ip_report",
-				},
 			],
 		},
 		{

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

@@ -42,7 +42,7 @@ export default function AccessCard({ icon, title, command, ctaLabel, ctaHref }:
 			)}
 			<a
 				href={ctaHref}
-				className="inline-flex items-center gap-1.5 py-2 px-[18px] rounded-[7px] bg-cs-orange text-[#0a1120] text-[13px] font-semibold no-underline transition-opacity duration-150 self-start hover:opacity-[0.85] hover:no-underline hover:text-[#0a1120]"
+				className="cs-btn inline-flex items-center gap-1.5 py-2 px-[18px] rounded-[7px] bg-cs-orange text-cs-btn-text text-[13px] font-semibold no-underline self-start hover:no-underline hover:text-cs-btn-text"
 			>
 				{ctaLabel} →
 			</a>

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

@@ -63,7 +63,7 @@ export default function DocCard({
 
 	const card = (
 		<div
-			className={`p-5 rounded-xl bg-cs-surface border border-cs-border flex flex-col gap-3 h-full${href ? " transition-[border-color,box-shadow] duration-150" : ""}`}
+			className={`p-5 rounded-xl ease-in-out bg-cs-surface border border-cs-border no-underline hover:no-underline flex flex-col gap-3 h-full${href ? " transition-[border-color,box-shadow] duration-150" : ""}`}
 		>
 			<div className="flex items-start gap-3">
 				{resolvedIcon && (
@@ -119,7 +119,7 @@ export default function DocCard({
 						<a
 							key={l.href}
 							href={l.href}
-							className="text-[12.5px] font-semibold no-underline inline-flex items-center gap-1"
+							className="text-[12.5px] font-semibold no-underline hover:no-underline inline-flex items-center gap-1"
 							style={{ color }}
 						>
 							{l.label}
@@ -131,7 +131,7 @@ export default function DocCard({
 
 			{/* CTA — explicit label, or auto arrow footer for href-only clickable cards */}
 			{href && (ctaLabel || (!links?.length && !command)) && (
-				<div className="mt-auto pt-3 border-t border-dashed border-cs-border flex items-center justify-between">
+				<div className="mt-auto pt-3 border-t border-cs-border flex items-center justify-between">
 					<span className="text-[12.5px] font-semibold inline-flex items-center gap-[5px]" style={{ color }}>
 						{ctaLabel ?? title} <ArrowRight />
 					</span>
@@ -142,7 +142,7 @@ export default function DocCard({
 
 	if (href && !ctaLabel && !links) {
 		return (
-			<a href={href} className="no-underline block">
+			<a href={href} className="no-underline hover:no-underline block">
 				{card}
 			</a>
 		);

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

@@ -34,15 +34,15 @@ export default function GuidedSetupCard({ title, desc, primaryCta, secondaryCta
 			<div className="flex gap-[10px] flex-wrap shrink-0">
 				<a
 					href={primaryCta.href}
-					className="py-[10px] px-4 rounded-[9px] bg-cs-violet text-cs-btn-text font-semibold text-[13.5px] no-underline inline-flex items-center gap-2 shadow-[0_8px_24px_color-mix(in_srgb,var(--cs-violet)_30%,transparent)]"
+					className="cs-btn py-[10px] px-4 rounded-[9px] bg-cs-violet text-cs-btn-text font-semibold text-[13.5px] no-underline hover:no-underline hover:text-cs-btn-text inline-flex items-center gap-2 shadow-[0_8px_24px_color-mix(in_srgb,var(--cs-violet)_30%,transparent)]"
 				>
 					<CIcon icon={cilCompass} style={{ width: 14, height: 14 }} />
 					{primaryCta.label}
 				</a>
 				{secondaryCta && (
 					<a
 						href={secondaryCta.href}
-						className="py-[10px] px-4 rounded-[9px] bg-cs-surface-2 text-cs-ink font-semibold text-[13.5px] border border-cs-border-hi no-underline inline-flex items-center gap-2"
+						className="cs-btn py-[10px] px-4 rounded-[9px] bg-cs-surface-2 text-cs-ink font-semibold text-[13.5px] border border-cs-border-hi no-underline hover:no-underline hover:text-cs-ink inline-flex items-center gap-2"
 					>
 						<CIcon icon={cilBolt} style={{ width: 14, height: 14 }} />
 						{secondaryCta.label}

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

@@ -95,13 +95,12 @@ export default function PathCard({ eyebrow, color, icon, title, desc, tag, tags
 			)}
 
 			{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="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/components/docs/PathwayRow/index.tsx

@@ -98,7 +98,7 @@ export default function PathwayRow({ color, title, eyebrow, sub, steps, ctaLabel
 					<a
 						href={ctaHref}
 						onClick={(e) => e.stopPropagation()}
-						className="py-2 px-[14px] rounded-lg font-semibold text-[13px] inline-flex items-center gap-1.5 no-underline shrink-0 whitespace-nowrap"
+						className="cs-btn py-2 px-[14px] rounded-lg font-semibold text-[13px] inline-flex items-center gap-1.5 no-underline hover:no-underline shrink-0 whitespace-nowrap"
 						style={{
 							background: color,
 							color: "var(--cs-btn-text)",
@@ -169,7 +169,7 @@ export default function PathwayRow({ color, title, eyebrow, sub, steps, ctaLabel
 					{/* CTA in content when OPEN */}
 					<a
 						href={ctaHref}
-						className="inline-flex items-center gap-1.5 py-2 px-[18px] rounded-[7px] text-[13px] font-semibold no-underline whitespace-nowrap"
+						className="cs-btn inline-flex items-center gap-1.5 py-2 px-[18px] rounded-[7px] text-[13px] font-semibold no-underline hover:no-underline whitespace-nowrap"
 						style={{
 							background: color,
 							color: "var(--cs-btn-text)",

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

@@ -126,7 +126,7 @@ export default function PromoCard({ variant = "console" }: Props) {
 				</div>
 				<a
 					href={data.ctaHref}
-					className="inline-flex items-center justify-center w-full py-[10px] px-[14px] rounded-lg text-[13px] font-bold no-underline transition-opacity duration-150 mt-1 tracking-[0.01em] hover:opacity-[0.88] hover:no-underline"
+					className="cs-btn inline-flex items-center justify-center w-full py-[10px] px-[14px] rounded-lg text-[13px] font-bold no-underline mt-1 tracking-[0.01em] hover:no-underline"
 					style={{ background: data.color, color: "var(--cs-btn-text)" }}
 				>
 					{data.ctaLabel} <CIcon icon={cilArrowRight} style={{ width: 13, height: 13 }} aria-hidden="true" />

crowdsec-docs/src/components/home-page/quick-start.tsx

@@ -10,11 +10,11 @@ import cibWindows from "@site/static/img/logo/windows-colored.svg";
 import opnsenseLogo from "@site/static/img/logo-opnsense.svg";
 import pfSenseLogo from "@site/static/img/logo-pfsense.svg";
 import whmLogo from "@site/static/img/logo-whm.svg";
-import React from "react";
+import type React from "react";
 import { HomePageItem } from "./home-item";
 
 type StaticData = {
-	icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+	icon: React.ElementType | React.ReactNode;
 	text: string;
 	link: string;
 	description?: string;