enhance: fix img css and button on promos

Author: LaurenceJJones

crowdsec-docs/src/components/console-promo.tsx

@@ -1,22 +1,33 @@
+import { useHistory } from "@docusaurus/router";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import { Button } from "@site/src/ui/button";
 import { Card, CardContent, CardHeader } from "@site/src/ui/card";
 import React from "react";
 
 const ConsolePromo = ({ ...props }): React.JSX.Element => {
 	const url = useBaseUrl(`/img/${props.image}`);
+	const isExternal = /^(?:[a-z]+:)?\/\//i.test(props.link);
+	const history = useHistory();
 	return (
 		<Card className="min-h-[200px] flex flex-col">
 			<CardHeader className="flex-shrink-0">{props.title ? <h3 className="text-left">{props.title}</h3> : null}</CardHeader>
 			<CardContent className="flex-row flex space-x-4 flex-1">
 				<div className="flex-col flex justify-between flex-1">
 					{props.description ? <p className="text-left text-base text-card-foreground">{props.description}</p> : null}
 					<div className="text-left">
-						<a href={props.link} target="_blank">
-							<Button color="primary" className="w-full md:w-1/2">
-								{props.text ?? "Get Started"}
-							</Button>
-						</a>
+						<Button
+							color="primary"
+							className="w-full md:w-1/2"
+							onClick={() => {
+								if (isExternal) {
+									window.open(props.link, "_blank", "noopener,noreferrer");
+								} else {
+									history.push(props.link);
+								}
+							}}
+						>
+							{props.text ?? "Get Started"}
+						</Button>
 					</div>
 				</div>
 

crowdsec-docs/src/css/custom.css

@@ -57,7 +57,7 @@ html[data-theme="dark"] {
 }
 
 /* IMAGE STYLES FOR PAGES*/
-.container img {
+main .container img:not(a img) {
 	@apply border border-solid border-gray-300/80 dark:border-gray-300/80 rounded-lg p-2;
 }