[academy] Promote academy awareness (#485)

**Force merge due to face marketing strat no need for core team approval**

* Add academy promos TODO: fix mobile

* Backport and add prom

crowdsec-docs/docs/console/intro.md

@@ -4,6 +4,16 @@ title: Console
 sidebar_position: 10
 ---
 
+import AcademyPromo from '@site/src/components/AcademyPromo';
+
+<AcademyPromo
+  image="crowdsec_console.svg"
+  description="Watch a short series of videos on how to get started with the CrowdSec Console and enroll your first Security Engine"
+  title="Get started with the Console"
+  course="get-started-with-the-crowdsec-console"
+  utm="?utm_source=docs&utm_medium=banner&utm_campaign=console-page&utm_id=academydocs"
+/>
+
 The [console](https://app.crowdsec.net) is a web interface hosted by crowdsec that allows you to get even more from crowdsec :
  - aggregate, tag and classify your instances (without having them share a common local API)
  - view/filter/export alerts in real-time

crowdsec-docs/docs/cti_api/getting_started.mdx

@@ -4,6 +4,8 @@ title: Getting Started
 sidebar_position: 2
 ---
 
+import AcademyPromo from '@site/src/components/AcademyPromo';
+
 ## Getting an API Key
 
 [Subscribe to the CrowdSec Console, if you haven't already!](https://app.crowdsec.net/) 
@@ -172,3 +174,11 @@ And the default output looks something like this:
 }
 
 ```
+
+<AcademyPromo
+  image="crowdsec_threat_intelligence.svg"
+  description="Watch a short series of videos on how to get the most out of CrowdSec’s Cyber Threat Intelligence database"
+  title="More ways to learn"
+  course="crowdsec-cyber-threat-intelligence"
+  utm="?utm_source=docs&utm_medium=banner&utm_campaign=cti-page&utm_id=academydocs"
+/>

crowdsec-docs/docs/getting_started/getting_started.md

@@ -3,6 +3,8 @@ id: getting_started
 title: Getting Started
 ---
 
+import AcademyPromo from '@site/src/components/AcademyPromo';
+
 Welcome to CrowdSec!
 
 This section will guide you through the installation of the Security Engine, and deployment of your first Remediation Component.
@@ -17,6 +19,14 @@ If you would like to follow a step-by-step video to install Security Engine on a
 
 <iframe width="100%" height="500" src="https://www.youtube-nocookie.com/embed/yxbimVtd2nw?controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
+<AcademyPromo
+  image="crowdsec_fundamentals.svg"
+  description="Watch a short series of videos on how to install CrowdSec and protect your infrastructure"
+  title="Complete Introduction"
+  course="crowdsec-fundamentals"
+  utm="?utm_source=docs&utm_medium=banner&utm_campaign=intro-page&utm_id=academydocs"
+/>
+
 or follow the steps below.
 
 ## Installation Security Engine

crowdsec-docs/docs/intro.mdx

@@ -5,6 +5,7 @@ id: intro
 
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import AcademyPromo from '@site/src/components/AcademyPromo';
 
 <div style={{display: 'flex'}}>
     <div style={{textAlign: 'center', flex: '1'}}>
@@ -49,3 +50,10 @@ Besides the core "detect and react" mechanism, is committed to a few other key p
     </div>
 </div>
 
+<AcademyPromo
+  image="crowdsec_fundamentals.svg"
+  description="Watch a short series of videos on how to install CrowdSec and protect your infrastructure"
+  title="More ways to learn"
+  course="crowdsec-fundamentals"
+  utm="?utm_source=docs&utm_medium=banner&utm_campaign=intro-page&utm_id=academydocs"
+/>

crowdsec-docs/docs/observability/prometheus.md

@@ -4,6 +4,8 @@ title: Prometheus
 sidebar_position: 4
 ---
 
+import AcademyPromo from '@site/src/components/AcademyPromo';
+
 CrowdSec can expose a [prometheus](https://github.com/prometheus/client_golang) endpoint for collection (on `http://127.0.0.1:6060/metrics` by default). You can edit the listen_addr in [config.yaml](/configuration/crowdsec_configuration.md#prometheus) to allow an external Prometheus to scrape the metrics.
 
 The goal of this endpoint, besides the usual resources consumption monitoring, aims at offering a view of CrowdSec "applicative" behavior :
@@ -106,7 +108,13 @@ Acquisition metrics are split by datasource. The following metrics are available
 
  - `cs_info` : Information about CrowdSec (software version)
 
-
+<AcademyPromo
+  image="monitoring_crowdsec.svg"
+  description="Watch a short series of videos on how to observe and monitor CrowdSec."
+  title="More ways to learn"
+  course="monitoring-crowdsec"
+  utm="?utm_source=docs&utm_medium=banner&utm_campaign=prometheus-page&utm_id=academydocs"
+/>
 
 ### Exploitation with prometheus server & grafana
 

crowdsec-docs/docs/parsers/create.md

@@ -4,6 +4,7 @@ title: Creating parsers
 sidebar_position: 4
 ---
 
+import AcademyPromo from '@site/src/components/AcademyPromo';
 
 ## Foreword
 
@@ -301,3 +302,11 @@ We can either deploy it to our production systems to do stuff, or even better, c
 If you want to know more about directives and possibilities, take a look at [the parser reference documentation](/parsers/format.md) !
 
 See as well [this blog article](https://crowdsec.net/blog/how-to-write-crowdsec-parsers-and-scenarios) on the topic.
+
+<AcademyPromo
+  image="parsers_and_scenarios.svg"
+  description="Watch a short series of videos on how to create Parsers, as well as Scenarios"
+  title="More ways to learn"
+  course="writing-parsers-and-scenarios"
+  utm="?utm_source=docs&utm_medium=banner&utm_campaign=parser-page&utm_id=academydocs"
+/>

crowdsec-docs/docs/scenarios/create.md

@@ -4,6 +4,8 @@ title: Creating scenarios
 sidebar_position: 4
 ---
 
+import AcademyPromo from '@site/src/components/AcademyPromo';
+
 :::caution
 
 All the examples assume that you have read the [Creating parsers](/docs/next/parsers/create) documentation.
@@ -260,3 +262,11 @@ We can either deploy it to our production systems to do stuff, or even better, c
 If you want to know more about directives and possibilities, take a look at [the scenario reference documentation](/scenarios/format.md) !
 
 See as well [this blog article](https://crowdsec.net/blog/how-to-write-crowdsec-parsers-and-scenarios) on the topic.
+
+<AcademyPromo
+  image="parsers_and_scenarios.svg"
+  description="Watch a short series of videos on how to create Scenarios, as well as Parsers"
+  title="More ways to learn"
+  course="writing-parsers-and-scenarios"
+  utm="?utm_source=docs&utm_medium=banner&utm_campaign=scenario-page&utm_id=academydocs"
+/>

crowdsec-docs/docusaurus.config.js

@@ -68,7 +68,7 @@ module.exports = {
           position: 'left',
           label: 'CTI API',
         },
-        { to: 'https://academy.crowdsec.net/', label: 'Academy', position: 'left' },
+        { to: `https://academy.crowdsec.net/courses?${process.env.NODE_ENV === 'production' ? 'utm_source=docs&utm_medium=menu&utm_campaign=top-menu&utm_id=academydocs' : ''}`, label: 'Academy', position: 'left' },
         {
           type: 'doc',
           docId: 'faq',

crowdsec-docs/src/components/AcademyPromo.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+
+export default function AcademyPromo({ ...props }) {
+    const LINK = `https://academy.crowdsec.net/course/${props.course}${process.env.NODE_ENV === 'production' ? props.utm : ' '}`
+    return (
+      <div>
+      <hr />
+      <section style={{width: '80%', margin: 'auto'}}>
+        {props.title && (
+            <h2>{props.title}</h2>
+        )}
+        <div className='row'>
+          <div className='col'>
+            {props.image && (
+                <a href={LINK} target='_blank'><img src={'/img/academy/' + props.image} alt={props.title} /></a>
+            )}
+          </div>
+          <div className='col'>
+            {props.description && (
+                <p>{props.description}</p>
+            )}
+            {props.course && (
+                <a href={LINK} target='_blank'><strong>Learn with CrowdSec Academy</strong></a>
+            )}
+          </div>
+        </div>
+      </section>
+      <hr/>
+      </div>
+    );
+  }
+

crowdsec-docs/src/components/RemediationFeatures.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
 import styles from './RemediationFeatures.module.css';
 
 

crowdsec-docs/versioned_docs/version-v1.5.0/console.md

@@ -4,6 +4,16 @@ title: Console
 sidebar_position: 10
 ---
 
+import AcademyPromo from '@site/src/components/AcademyPromo';
+
+<AcademyPromo
+  image="crowdsec_console.svg"
+  description="Watch a short series of videos on how to get started with the CrowdSec Console and enroll your first Security Engine"
+  title="Get started with the Console"
+  course="get-started-with-the-crowdsec-console"
+  utm="?utm_source=docs&utm_medium=banner&utm_campaign=console-page&utm_id=academydocs"
+/>
+
 The [console](https://app.crowdsec.net) is a web interface hosted by crowdsec that allows you to get even more from crowdsec :
  - aggregate, tag and classify your instances (without having them share a common local API)
  - view/filter/export alerts in real-time

crowdsec-docs/versioned_docs/version-v1.5.0/getting_started/getting_started.md

@@ -3,6 +3,8 @@ id: getting_started
 title: Getting Started
 ---
 
+import AcademyPromo from '@site/src/components/AcademyPromo';
+
 Welcome to CrowdSec!
 
 This section will guide you through the installation of the Security Engine, and deployment of your first Remediation Component.
@@ -17,6 +19,14 @@ If you would like to follow a step-by-step video to install Security Engine on a
 
 <iframe width="100%" height="500" src="https://www.youtube-nocookie.com/embed/yxbimVtd2nw?controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 
+<AcademyPromo
+  image="crowdsec_fundamentals.svg"
+  description="Watch a short series of videos on how to install CrowdSec and protect your infrastructure"
+  title="Complete Introduction"
+  course="crowdsec-fundamentals"
+  utm="?utm_source=docs&utm_medium=banner&utm_campaign=intro-page&utm_id=academydocs"
+/>
+
 or follow the steps below.
 
 ## Installation Security Engine

crowdsec-docs/versioned_docs/version-v1.5.0/observability/prometheus.md

@@ -4,6 +4,8 @@ title: Prometheus
 sidebar_position: 4
 ---
 
+import AcademyPromo from '@site/src/components/AcademyPromo';
+
 CrowdSec can expose a [prometheus](https://github.com/prometheus/client_golang) endpoint for collection (on `http://127.0.0.1:6060/metrics` by default). You can edit the listen_addr in [config.yaml](/configuration/crowdsec_configuration.md#prometheus) to allow an external Prometheus to scrape the metrics.
 
 The goal of this endpoint, besides the usual resources consumption monitoring, aims at offering a view of CrowdSec "applicative" behavior :
@@ -106,7 +108,13 @@ Acquisition metrics are split by datasource. The following metrics are available
 
  - `cs_info` : Information about CrowdSec (software version)
 
-
+<AcademyPromo
+  image="monitoring_crowdsec.svg"
+  description="Watch a short series of videos on how to observe and monitor CrowdSec."
+  title="More ways to learn"
+  course="monitoring-crowdsec"
+  utm="?utm_source=docs&utm_medium=banner&utm_campaign=prometheus-page&utm_id=academydocs"
+/>
 
 ### Exploitation with prometheus server & grafana
 

crowdsec-docs/versioned_docs/version-v1.5.0/parsers/create.md

@@ -4,6 +4,7 @@ title: Creating parsers
 sidebar_position: 4
 ---
 
+import AcademyPromo from '@site/src/components/AcademyPromo';
 
 ## Foreword
 
@@ -187,7 +188,7 @@ We can see that our log lines were successfully parsed by both syslog-logs and m
 ## Parser creation : actual parser
 
 
-Let's modify our parser, `./parsers/crowdsecurity/s01-parse/myservice-logs.yaml` :
+Let's modify our parser, `./parsers/s01-parse/crowdsecurity/myservice-logs.yaml` :
 
 ```yaml
 onsuccess: next_stage
@@ -301,3 +302,11 @@ We can either deploy it to our production systems to do stuff, or even better, c
 If you want to know more about directives and possibilities, take a look at [the parser reference documentation](/parsers/format.md) !
 
 See as well [this blog article](https://crowdsec.net/blog/how-to-write-crowdsec-parsers-and-scenarios) on the topic.
+
+<AcademyPromo
+  image="parsers_and_scenarios.svg"
+  description="Watch a short series of videos on how to create Parsers, as well as Scenarios"
+  title="More ways to learn"
+  course="writing-parsers-and-scenarios"
+  utm="?utm_source=docs&utm_medium=banner&utm_campaign=parser-page&utm_id=academydocs"
+/>

crowdsec-docs/versioned_docs/version-v1.5.0/scenarios/create.md

@@ -4,6 +4,8 @@ title: Creating scenarios
 sidebar_position: 4
 ---
 
+import AcademyPromo from '@site/src/components/AcademyPromo';
+
 :::caution
 
 All the examples assume that you have read the [Creating parsers](/docs/next/parsers/create) documentation.
@@ -136,7 +138,7 @@ We have the following fields:
  - a [groupby](/scenarios/format.md#groupby): a field from the event to partition the bucket. It is often the `source_ip` of the event.
  - a [blackhole](/scenarios/format.md#blackhole): the number of minute to not retrigger this scenario for the same `groupby` field.
  - a [reprocess](/scenarios/format.md#reprocess): ingest the alert in crowdsec for further processing.
- - some [labels](/scenarios/format.md#reprocess): some labels to apply on the trigger event. Don't forget to set `remediation: true` if you want the IP to be blocked by bouncers.
+ - some [labels](/scenarios/format.md#labels): some labels to apply on the trigger event. Don't forget to set `remediation: true` if you want the IP to be blocked by bouncers.
 
 
 
@@ -260,3 +262,11 @@ We can either deploy it to our production systems to do stuff, or even better, c
 If you want to know more about directives and possibilities, take a look at [the scenario reference documentation](/scenarios/format.md) !
 
 See as well [this blog article](https://crowdsec.net/blog/how-to-write-crowdsec-parsers-and-scenarios) on the topic.
+
+<AcademyPromo
+  image="parsers_and_scenarios.svg"
+  description="Watch a short series of videos on how to create Scenarios, as well as Parsers"
+  title="More ways to learn"
+  course="writing-parsers-and-scenarios"
+  utm="?utm_source=docs&utm_medium=banner&utm_campaign=scenario-page&utm_id=academydocs"
+/>