feat: style components and image fall back

blog/2023/dummy-blog-post.mdx

@@ -13,7 +13,7 @@ import Jobboard from '@site/src/components/Blog/Jobboard'
 import {FrgCommu, FrgAccelerateur} from '@site/src/components/Blog/Froggit'
 import RdoEmissions from '@site/src/components/Blog/RdoEmissions'
 import Contenus from '@site/src/components/Blog/Contenus'
-import { CddMentor, CddCommu, CddSoutenir } from '@site/src/components/Blog/CompagnonsDevops'
+import { CddMentor, CddCommu, CddSoutenir, CddLiens } from '@site/src/components/Blog/CompagnonsDevops'
 
 ## Article de test des composants
 Article de test pour les composants, j'ai créé un article en plus de la dummy page pour: 
@@ -24,12 +24,18 @@ Cet article et la mire devront être supprimés avant le merge
 <!-- truncate -->
 <FrgCommu/>
 <FrgAccelerateur/>
-
 <Contenus/>
 <RdoEmissions/>
+
+---
+
 <CddMentor/>
 <CddCommu />
-<CddSoutenir />  
+<CddSoutenir /> 
+<CddMentor button/>
+<CddCommu button />
+<CddSoutenir button /> 
+<CddLiens button/>
 
 ---
 <Licence/>  

src/components/Blog/Antiseches.jsx

@@ -5,7 +5,9 @@ import Heading from "@theme/Heading"
 export function AsDocker() {
   return (
     <>
-      <Link to='https://bref.lydra.fr/antisechedocker'> 🐳 Docker</Link> <br/>
+      <br/>
+      <Link to='https://bref.lydra.fr/antisechedocker'> 🐳 Docker</Link> 
+      <br/>
     </>
   )
 }
@@ -13,7 +15,9 @@ export function AsDocker() {
 export function AsGit() {
   return (
     <>
-      <Link to='https://bref.lydra.fr/antisechegit'> 🎁 Git</Link> <br/>
+      <br/>
+      <Link to='https://bref.lydra.fr/antisechegit'> 🎁 Git</Link> 
+      <br/>
     </>
   )
 }
@@ -21,7 +25,9 @@ export function AsGit() {
 export function AsRoadmapDevops() {
   return (
     <>
-      <Link to='https://vu.fr/RoadmapDevOps'> 🔀 Ma RoadMap DevOps</Link> <br/>
+      <br/>
+      <Link to='https://vu.fr/RoadmapDevOps'> 🔀 Ma RoadMap DevOps</Link> 
+      <br/>
     </>
   )
 }

src/components/Blog/BlogPostItemCoverImage.jsx

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

src/components/Blog/CompagnonsDevops.jsx

 import React from "react"
 import Link from "@docusaurus/Link"
-export function CddLiens() {
+
+const butonnize = 'button button--warning margin-vert--sm'
+export function CddLiens(prop) {
   return (
     <>
-      <Link to={"https://i.mtr.bio/compagnons-devops"}> 🔗 Tous mes liens</Link> <br/>
+      <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() {
+export function CddMentor(prop) {
   return (
-    <>
-      <Link to={"https://new.lydra.fr/mentor"}> 🎓 Développe tes compétences DevOps avec un #mentor</Link> <br/>
+    <> 
+      <div className={prop.button && 'center'}>        
+        <Link className={prop.button ? butonnize : 'margin-vert--sm'} to={"https://new.lydra.fr/mentor"}> 🎓 Développe tes compétences DevOps avec un #mentor</Link> 
+      </div>
     </>
   )
 }
 
-export function CddCommu() {
+export function CddCommu(prop) {
   return (
     <>
-      <Link to={"https://www.compagnons-devops.fr"}> 💬 Rejoins la communauté des Compagnons du DevOps</Link> <br/>
+      <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() {
+export function CddSoutenir(prop) {
   return (
     <>
-      <Link to={"https://soutenir.compagnons-devops.fr"}> 💖 Soutiens mon travail et la communauté</Link> <br/>
+        <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>
     </>
   )
 }

src/components/Blog/Froggit.jsx

@@ -3,7 +3,9 @@ import Link from "@docusaurus/Link"
 export function FrgCommu() {
   return (
     <>
-      <Link to='https://froggit.fr/communaute'> 💬 Rejoins la communauté francophone #Froggit dédié à git et GitLab</Link> <br/>
+      <br/>
+      <Link to='https://froggit.fr/communaute'> 💬 Rejoins la communauté francophone #Froggit dédié à git et GitLab</Link> 
+      <br/>
     </>
   )
 }
@@ -11,7 +13,9 @@ export function FrgCommu() {
 export function FrgAccelerateur() {
   return (
     <>
-      <Link to='https://bref.lydra.fr/accelerateur-gitlab'> ⚡️ Accélère ton apprentissage de Git et GitLab</Link> <br/>
+      <br/>
+      <Link to='https://bref.lydra.fr/accelerateur-gitlab'> ⚡️ Accélère ton apprentissage de Git et GitLab</Link> 
+      <br/>
     </>
   )
 }

src/components/Blog/Licence.jsx

 import React from "react"
 import Link from "@docusaurus/Link"
 import Heading from "@theme/Heading"
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 export default function Licence() {
   return (
     <>
       <Heading as='h3'> Licence </Heading>
-        📜 Ce contenu est sous <Link to='https://creativecommons.org/licenses/by-sa/4.0/deed.fr'> licence libre : CC BY-S </Link>. <br/>
-        Si tu utilises ces contenus dans une publication, merci de nous le notifier dans les commentaires.
+      <div className="row">
+        <div class="col col--4 padding-horiz--none">
+          <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"> 
+          📜 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 />
     </>
   )
 }

src/components/Blog/RdoEmissions.jsx

@@ -9,8 +9,8 @@ export default function RdoEmissions() {
       <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> eest une émission où je m’entretiendrai avec un invité sur le mouvement DevOps en entreprise. </li>
-        <li><b>🎙️ En Solo   :</b> eest une émission où je serai seul pour vous parler de DevOps ou de Cloud. </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/>
     </>

src/css/blog.css

-.blogPost {
-color: #262632;
-}
 .blogPost h1, .blogPost h2, .blogPost h3  {
   font-size: 2.2rem;
   margin: 1rem 0;