Move ad to reusable component

crowdsecurity · Nov 1, 2023 · 25f5e6b · 25f5e6b
1 parent c241e95
commit 25f5e6b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/crowdsec-docs/src/components/ConsoleAd.js b/crowdsec-docs/src/components/ConsoleAd.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const SIGNUP_LINK = `https://app.crowdsec.net/signup${process.env.NODE_ENV === 'production' ? '?mtm_campaign=Console&mtm_source=docs&mtm_medium=tocAd&mtm_content=Console' : ''}`
+export default function ConsoleAd() {
+    return (
+        <a href={SIGNUP_LINK} target="_blank">
+            <img src="/img/console_ad_dark.svg" alt="CrowdSec Console" width="100%" />
+        </a>
+    );
+  }
diff --git a/crowdsec-docs/src/theme/TOC/index.js b/crowdsec-docs/src/theme/TOC/index.js
@@ -3,11 +3,11 @@ import React from "react";
 import clsx from "clsx";
 import TOCItems from "@theme/TOCItems";
 import styles from "./styles.module.css";
+import ConsoleAd from '@site/src/components/ConsoleAd.js'
 
 // Define custom classNames
 const LINK_CLASS_NAME = "table-of-contents__link toc-highlight";
 const LINK_ACTIVE_CLASS_NAME = "table-of-contents__link--active";
-const SIGNUP_LINK = `https://app.crowdsec.net/signup${process.env.NODE_ENV === 'production' ? '?mtm_campaign=Console&mtm_source=docs&mtm_medium=tocAd&mtm_content=Console' : ''}`
 
 // Modified TOC component
 export default function TOC({ className, ...props }) {
@@ -18,9 +18,7 @@ export default function TOC({ className, ...props }) {
         linkClassName={LINK_CLASS_NAME}
         linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
       />
-      <a href={SIGNUP_LINK} target="_blank">
-        <img src="/img/console_ad_dark.svg" alt="CrowdSec Console" width="100%" />
-      </a>
+      <ConsoleAd />
     </div>
   );
 }