Merge branch '38-creer-des-composants-appel-a-l-action' into 'main'

Resolve "Créer des composants appel à l'action"

Closes #38

See merge request !26

src/components/Blog/BlogPostItemCoverImage.jsx

 import React from "react"
 export default function BlogPostItemCoverImage(props) {
+  if (!props.imgSrc) {
+    return (
+      <img src={require(`@site/blog/images/fallback.png`).default}/>
+    ) 
+  } 
   return (
     <img src={require(`@site/blog/images/${props.imgSrc}`).default}/>
   )

src/components/Blog/CallToAction.jsx

+import React from "react"
+import Link from "@docusaurus/Link"
+import Heading from "@theme/Heading"
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+const butonnize = 'button button--success margin-vert--sm'
+
+
+// COMPAGNONS DU DEVOPS /////////////////////////////////////////
+
+export function CddLiens(prop) {
+  return (
+    <>
+      <div className={prop.button && 'center'}>        
+        <Link className={prop.button ? butonnize : 'margin-vert--sm'} to={"https://i.mtr.bio/compagnons-devops"}> {prop.button} 🔗 Tous mes liens</Link> 
+      </div>
+    </>
+  )
+}
+
+export function CddMentor(prop) {
+  return (
+    <> 
+      <div className={prop.button && 'center'}>        
+        <Link className={prop.button ? butonnize : 'margin-vert--sm'} to={"https://www.compagnons-devops/mentor"}> 🎓 Développe tes compétences DevOps avec un #mentor</Link> 
+      </div>
+    </>
+  )
+}
+
+export function CddCommu(prop) {
+  return (
+    <>
+      <div className={prop.button && 'center'}>        
+        <Link className={prop.button ? butonnize : 'margin-vert--sm'}to={"https://www.compagnons-devops.fr"}> 💬 Rejoins la communauté des Compagnons du DevOps</Link> 
+      </div>
+    </>
+  )
+}
+
+export function CddSoutenir(prop) {
+  return (
+    <>
+        <div className={prop.button && 'center'}>  
+          <Link className={prop.button ? butonnize : 'margin-vert--sm'} to={"https://soutenir.compagnons-devops.fr"}> {prop.button} 💖 Soutient mon travail et la communauté </Link> 
+        </div>
+    </>
+  )
+}
+
+export function ForDevopsMindset() {
+  return (
+    <>
+      <Link to='https://bref.lydra.fr/devops-mindset'> 🎓 Forge toi un état d'esprit DevOps ! </Link> <br/>
+    </>
+  )
+}
+
+export function RdoEmissions() {
+  return (
+    <>
+    <hr/>
+      Bienvenue, chez les compagnons sur <b>Radio DevOps</b>. La Baladodiffusion des <b>Compagnons du DevOps</b>. Le podcast en français dédié à notre mouvement.
+      <br/>
+      <ul>
+        <li><b>🗞 Actus Devops :</b> est une émission animée par des membres de la communauté des Compagnons du DevOps. Dans chaque épisode nous étudierons l’actualité Cloud et DevOps. </li>
+        <li><b>📻 Radio DevOps :</b> est l'émission phare animée par des membres de la communauté des Compagnons du DevOps. Dans chaque épisode nous débattrons sur un sujet de fond. </li>
+        <li><b>🛋 En aparté :</b> est une émission où je m’entretiendrai avec un invité sur le mouvement DevOps en entreprise. </li>
+        <li><b>🎙️ En Solo   :</b> est une émission où je serai seul pour vous parler de DevOps ou de Cloud. </li>
+      </ul>
+      📩 Si tu n'es pas déjà abonné, alors <b/>abonne-toi<b/> pour ne pas rater ces émissions. <br/>
+    </>
+  )
+}
+
+export function ProdLydra() {
+  return (
+    <p>🌐 Les Compagnons du DevOps <Link to={"https://www.lydra.fr"}> est une initiative de Lydra </Link> </p>
+  )
+}
+
+// FROGGIT /////////////////
+
+export function FrgCommu() {
+  return (
+    <>
+      <br/>
+      <Link to='https://froggit.fr/communaute'> 💬 Rejoins la communauté francophone #Froggit dédié à git et GitLab</Link> 
+      <br/>
+    </>
+  )
+}
+
+export function FrgAccelerateur() {
+  return (
+    <>
+      <br/>
+      <Link to='https://bref.lydra.fr/accelerateur-gitlab'> ⚡️ Accélère ton apprentissage de Git et GitLab</Link> 
+      <br/>
+    </>
+  )
+}
+
+// GÉNÉRAL /////////////////////////////////////////
+
+export function Licence() {
+  return (
+    <>
+      <Heading as='h3'> Licence </Heading>
+      <div className="row">
+        <div class="col col--4 padding-horiz--md">
+          <Link to='https://creativecommons.org/licenses/by-sa/4.0/deed.fr'>
+            <img src={useBaseUrl('/img/by-sa.png')} />
+          </Link>
+        </div>
+        <div class="col col--8 padding-horiz--none"> 
+          📜 Ce contenu est sous <Link to='https://creativecommons.org/licenses/by-sa/4.0/deed.fr'> licence libre : CC BY-SA </Link>. <br/>
+          Si tu utilises ces contenus dans une publication, merci de nous le notifier dans les commentaires.
+        </div>
+      </div>
+      <br/>
+    </>
+  )
+}
+
+// ANTISECHES ////////////////////
+
+export function AsDocker() {
+  return (
+    <>
+      <br/>
+      <Link to='https://bref.lydra.fr/antisechedocker'> 🐳 Docker</Link> 
+      <br/>
+    </>
+  )
+}
+
+export function AsGit() {
+  return (
+    <>
+      <br/>
+      <Link to='https://bref.lydra.fr/antisechegit'> 🎁 Git</Link> 
+      <br/>
+    </>
+  )
+}
+
+export function AsRoadmapDevops() {
+  return (
+    <>
+      <br/>
+      <Link to='https://vu.fr/RoadmapDevOps'> 🔀 Ma RoadMap DevOps</Link> 
+      <br/>
+    </>
+  )
+}
+
+// CLUSTERS /////////////////////////////////////////
+
+export function Jobboard() {
+  return (
+    <div className="center">
+      <Heading as='h3'> Mon Jobboard </Heading>
+      <Link to='https://vu.fr/jobboard-DevOps'> 💼 Trouve ton job de rêve</Link> <br/>
+      <Link to='https://vu.fr/jobboard-DevOps-recrute'> 👔 Recrute avec moi</Link>
+    </div>
+  )
+}
+
+export function AAAFormations() {
+  return (
+    <div className="center">
+      <Heading as='h3'> Mes formations</Heading>
+      <ForDevopsMindset/> 
+    </div>
+  )
+}
+
+export function AAAAntiseches() {
+  return (
+    <div className="center">
+      <Heading as='h3'> Mes antisèches</Heading>
+      <AsRoadmapDevops/> 
+      <AsGit/> 
+      <AsDocker/>
+    </div>
+  )
+}
+
+export function Contenus() {
+  return (
+    <>
+      <Jobboard/>
+      <AAAAntiseches/>
+      <AAAFormations/>
+      <CddLiens/>
+    </>
+  )
+}

src/css/blog.css

@@ -3,6 +3,12 @@
   margin: 1rem 0;
 }
 
+.blogPost h2, .blogPost h3   {
+  font-size: 1.8rem;
+  letter-spacing: 0;
+}
+
+
 .blogPost a {
   color: var(--ifm-color-secondary);
 }
@@ -12,6 +18,10 @@
   text-decoration: none;
 }
 
+.blogPost .button--success, .blogPost .button--success:hover {
+  color: #ffffff;
+}
+
 .blogPost iframe {
   margin: 2rem auto;
   display: block;

src/css/custom.css

@@ -145,13 +145,10 @@ section:nth-child(even) {
   color: var(--ifm-color-highlight);
 }
 
-.articleContent h2 {
-  font-family: var(--ifm-font-family);
-  font-size: 1.3rem;
-  letter-spacing: 0;
-  margin: 0;
-}
-
 .pagination-nav__label {
   font-size: 1rem;
 }
+
+.center {
+  text-align: center;
+}

src/pages/markdown-page.md → src/pages/dummy-page.mdx

 ---
-title: Markdown page example
+title: "Dummy page"
 ---
 
 # Markdown page example
 
 You don't need React to write simple standalone pages.
+
+<RdoEmissions/>  
+<FrgCommu/>
+<FrgAccelerateur/>
+<Licence/>
+<Jobboard/>
+<AAAAntiseches/>
+<AAAFormations/>
+<ProdLydra />
+<Contenus/>

src/pages/mentions-legales.md

@@ -74,6 +74,7 @@ Le code source du site est disponible sur [ce dépôt Froggit🐸](https://lab.f
 - **Collaborate :** conçues par [small.smiles](https://www.flaticon.com/authors/smallsmiles) sur [Flaticon](https://www.flaticon.com/free-icon/collaborate_7829192).
 - **Barista :** conçues par [Josh Boot](https://unsplash.com/fr/@joshboot) sur [Unsplash](https://unsplash.com/fr/photos/-L5W8-yFERs).
 - **Hacker :** conçue par [Vitaly Gorbachev](https://www.flaticon.com/authors/vitaly-gorbachev) sur [Flaticon](https://www.flaticon.com/free-icon/hacker_4123965)
+- **Broken image :** conçue par [verry purnomo](https://www.flaticon.com/authors/verry-purnomo) sur [Flaticon](https://www.flaticon.com/free-icon/broken-image_4173686)
 
 
 :::note Sources

src/theme/MDXComponents/index.js

+import React from 'react';
+import MDXHead from '@theme/MDXComponents/Head';
+import MDXCode from '@theme/MDXComponents/Code';
+import MDXA from '@theme/MDXComponents/A';
+import MDXPre from '@theme/MDXComponents/Pre';
+import MDXDetails from '@theme/MDXComponents/Details';
+import MDXHeading from '@theme/MDXComponents/Heading';
+import MDXUl from '@theme/MDXComponents/Ul';
+import MDXImg from '@theme/MDXComponents/Img';
+import Admonition from '@theme/Admonition';
+import Mermaid from '@theme/Mermaid';
+import * as CTA from '@site/src/components/Blog/CallToAction'
+const MDXComponents = {
+  head: MDXHead,
+  code: MDXCode,
+  a: MDXA,
+  pre: MDXPre,
+  details: MDXDetails,
+  ul: MDXUl,
+  img: MDXImg,
+  h1: (props) => <MDXHeading as="h1" {...props} />,
+  h2: (props) => <MDXHeading as="h2" {...props} />,
+  h3: (props) => <MDXHeading as="h3" {...props} />,
+  h4: (props) => <MDXHeading as="h4" {...props} />,
+  h5: (props) => <MDXHeading as="h5" {...props} />,
+  h6: (props) => <MDXHeading as="h6" {...props} />,
+  admonition: Admonition,
+  mermaid: Mermaid,
+  CddLiens: CTA.CddLiens,
+  CddMentor: CTA.CddMentor,
+  CddCommu: CTA.CddCommu,
+  CddSoutenir: CTA.CddSoutenir,
+  ForDevopsMindset: CTA.ForDevopsMindset,
+  RdoEmissions: CTA.RdoEmissions,
+  ProdLydra: CTA.ProdLydra,
+  FrgCommu: CTA.FrgCommu,
+  FrgAccelerateur: CTA.FrgAccelerateur,
+  Licence: CTA.Licence,
+  AsDocker: CTA.AsDocker,
+  AsGit: CTA.AsGit,
+  AsRoadmapDevops: CTA.AsRoadmapDevops,
+  Jobboard: CTA.Jobboard,
+  Formations: CTA.AAAFormations,
+  Antiseches: CTA.AAAAntiseches,
+  Contenus: CTA.Contenus,
+};
+export default MDXComponents;