feat: improved blogpost design

blog/2023-06-29-vague-de-licenciement-dans-la-tech-actus-devops-juin-2023.md

@@ -2,7 +2,8 @@
 title: "💼Vague de licenciement dans la tech ? | Actus DevOps Juin 2023"
 slug: "vague-de-licenciement-dans-la-tech-actus-devops-juin-2023"
 date: "2023-06-29"
-authors: "cchaudier"
+authors: 
+  - "cchaudier"
 slug: "vague-de-licenciement-dans-la-tech-actus-devops-juin-2023"
 tags: 
   - "actu-devops"
@@ -18,26 +19,50 @@ image: "YT_Actu_DevOps_JUIN_2023.png"
 ---
 
 ## 🗞 Actus DevOps est ton #podcast de veille #DevOps et #Cloud mensuel.
+
 <!-- truncate -->
 
 <iframe src="//www.youtube.com/embed/akltCRy0XwE" width="560" height="314" allowfullscreen="allowfullscreen"></iframe>
 
 **Rejoins-nous !** 💬  Viens discuter avec nous et rejoins gratuitement la [communauté des Compagnons du DevOps](https://www.compagnons-devops.fr/).
 
-## Sommaire
-
-00:00 Intro 00:59 Vos messages ❓ Pose-nous une question : [http://question.compagnons-devops.fr](http://question.compagnons-devops.fr) 03:41 Dépressage dans la tech
+### Sommaire
 
+00:00 Intro  
+00:59 Vos messages  
+❓ Pose-nous une question : [http://question.compagnons-devops.fr](http://question.compagnons-devops.fr)  
+03:41 Dépressage dans la tech  
 - [https://www.lemonde.fr/economie/article/2023/06/09/high-tech-les-lecons-d-une-vague-historique-de-suppressions-d-emplois\_6176826\_3234.html](https://www.lemonde.fr/economie/article/2023/06/09/high-tech-les-lecons-d-une-vague-historique-de-suppressions-d-emplois_6176826_3234.html)
 - [https://www.toolinux.com/?un-plan-de-licenciements-annonce-chez-red-hat](https://www.toolinux.com/?un-plan-de-licenciements-annonce-chez-red-hat)
 - [https://www.latribune.fr/technos-medias/internet/hecatombe-dans-la-tech-plus-de-130-000-licenciements-en-2022-940762.html](https://www.latribune.fr/technos-medias/internet/hecatombe-dans-la-tech-plus-de-130-000-licenciements-en-2022-940762.html)
 - [https://layoffs.fyi/](https://layoffs.fyi/)
 - [https://www.boursorama.com/bourse/indices/cours/%24NDX.X/](https://www.boursorama.com/bourse/indices/cours/%24NDX.X/)
-- [https://www.igen.fr/app-store/2023/02/zenly-cest-fini-le-reseau-social-rachete-par-snap-ferme-ses-portes-135329](https://www.igen.fr/app-store/2023/02/zenly-cest-fini-le-reseau-social-rachete-par-snap-ferme-ses-portes-135329) 15:40 Va checker mon jobboard ! [https://vu.fr/jobboard-DevOps](https://vu.fr/jobboard-DevOps) 15:51 Des CPU x86 plus simple ? [https://www.theregister.com/2023/05/25/intel\_proposes\_dropping\_16\_bit\_mode/](https://www.theregister.com/2023/05/25/intel_proposes_dropping_16_bit_mode/) 23:44 💖 Tu peux soutenir mon travail et la communauté sur : [https://soutenir.compagnons-devops.fr](https://soutenir.compagnons-devops.fr) 24:19 La typo qui a cassé Azure au Brésil
+- [https://www.igen.fr/app-store/2023/02/zenly-cest-fini-le-reseau-social-rachete-par-snap-ferme-ses-portes-135329](https://www.igen.fr/app-store/2023/02/zenly-cest-fini-le-reseau-social-rachete-par-snap-ferme-ses-portes-135329) 
+
+15:40 Va checker mon jobboard !  
+[https://vu.fr/jobboard-DevOps](https://vu.fr/jobboard-DevOps)  
+
+15:51 Des CPU x86 plus simple ?  
+[https://www.theregister.com/2023/05/25/intel\_proposes\_dropping\_16\_bit\_mode/](https://www.theregister.com/2023/05/25/intel_proposes_dropping_16_bit_mode/)  
+
+23:44 💖 Tu peux soutenir mon travail et la communauté sur : [https://soutenir.compagnons-devops.fr](https://soutenir.compagnons-devops.fr)  
+
+24:19 La typo qui a cassé Azure au Brésil  
 - [https://www.lemondeinformatique.fr/actualites/lire-une-erreur-de-typo-bloque-azure-devops-pendant-plusieurs-heures-90613.html](https://www.lemondeinformatique.fr/actualites/lire-une-erreur-de-typo-bloque-azure-devops-pendant-plusieurs-heures-90613.html)
-- [https://status.dev.azure.com/\_event/392143683/post-mortem](https://status.dev.azure.com/_event/392143683/post-mortem) 37:10 Un panorama des outils Cloud
+- [https://status.dev.azure.com/\_event/392143683/post-mortem](https://status.dev.azure.com/_event/392143683/post-mortem)  
+
+37:10 Un panorama des outils Cloud
 - [https://www.linkedin.com/posts/clément-david-59048944\_voici-la-carte-pour-vous-y-retrouver-activity-7070059592595951618-tm8N?utm\_source=share&utm\_medium=member\_desktop](https://www.linkedin.com/posts/cl%C3%A9ment-david-59048944_voici-la-carte-pour-vous-y-retrouver-activity-7070059592595951618-tm8N?utm_source=share&utm_medium=member_desktop)
-- [https://www.padok.fr/tech-radar](https://www.padok.fr/tech-radar) 43:27 Nos outils topgrade : [https://github.com/topgrade-rs/topgrade](https://github.com/topgrade-rs/topgrade) snips.sh : [https://github.com/robherley/snips.sh](https://github.com/robherley/snips.sh) exa : [https://the.exa.website/](https://the.exa.website/) alternative : [https://github.com/lsd-rs/lsd](https://github.com/lsd-rs/lsd) dark snoopy : \* [https://www.instagram.com/darksnooopy/?hl=fr](https://www.instagram.com/darksnooopy/?hl=fr) 56:27 💬 Rejoins la communauté : [https://www.compagnons-devops.fr](https://www.compagnons-devops.fr) 57: Clôture 📩 Si tu n'es pas déjà abonné, alors **abonnes-toi** pour ne pas rater les prochaines vidéos.
+- [https://www.padok.fr/tech-radar](https://www.padok.fr/tech-radar)  
+
+43:27 Nos outils topgrade : [https://github.com/topgrade-rs/topgrade](https://github.com/topgrade-rs/topgrade)
+- snips.sh : [https://github.com/robherley/snips.sh](https://github.com/robherley/snips.sh)  
+- exa : [https://the.exa.website/](https://the.exa.website/) alternative : [https://github.com/lsd-rs/lsd](https://github.com/lsd-rs/lsd)  
+- dark snoopy : \* [https://www.instagram.com/darksnooopy/?hl=fr](https://www.instagram.com/darksnooopy/?hl=fr)  
+
+56:27 💬 Rejoins la communauté : [https://www.compagnons-devops.fr](https://www.compagnons-devops.fr)  
+
+57: Clôture 📩 Si tu n'es pas déjà abonné, alors **abonnes-toi** pour ne pas rater les prochaines vidéos.
 
  
 
@@ -49,7 +74,9 @@ image: "YT_Actu_DevOps_JUIN_2023.png"
 
 ### MES ANTISÈCHES
 
-🎁 git : [https://bref.lydra.fr/antisechegit](https://bref.lydra.fr/antisechegit) 🐳 Docker : [https://bref.lydra.fr/antisechedocker](https://bref.lydra.fr/antisechedocker) 🔀 Ma RoadMap DevOps : [https://vu.fr/RoadmapDevOps](https://vu.fr/RoadmapDevOps)
+🎁 git : [https://bref.lydra.fr/antisechegit](https://bref.lydra.fr/antisechegit)  
+🐳 Docker : [https://bref.lydra.fr/antisechedocker](https://bref.lydra.fr/antisechedocker)  
+🔀 Ma RoadMap DevOps : [https://vu.fr/RoadmapDevOps](https://vu.fr/RoadmapDevOps)
 
  
 

src/css/blog.css

+.blogPost h1, .blogPost h2, .blogPost h3  {
+  font-size: 2.2rem;
+  margin: 1rem 0;
+}
+
+.blogPost a {
+  color: var(--ifm-color-secondary);
+}
+
+.blogPost a:hover {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+.blogPost iframe {
+  margin: 2rem auto;
+  display: block;
+}
+
+.blogPost p {
+  text-align: start;
+}

src/css/custom.css

@@ -5,6 +5,7 @@
  */
 @import url(./fonts.css);
 @import url(./footer.css);
+@import url(./blog.css);
 /* You can override the default Infima variables here. */
 :root {
   --ifm-navbar-height: 90px;
@@ -16,7 +17,7 @@
   --ifm-color-primary-lighter: #f37749;
   --ifm-color-primary-lightest: #f69470;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-  --ifm-color-secondary: #bcada7;
+  --ifm-color-secondary: #806b64;
   --ifm-color-success: #90b03e;
   --ifm-pastel-success: #b4c791;
   --ifm-color-info: #00a3b4;

src/theme/BlogPostItem/Header/Info/index.js

+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import {usePluralForm} from '@docusaurus/theme-common';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import styles from './styles.module.css';
+// Very simple pluralization: probably good enough for now
+function useReadingTimePlural() {
+  const {selectMessage} = usePluralForm();
+  return (readingTimeFloat) => {
+    const readingTime = Math.ceil(readingTimeFloat);
+    return selectMessage(
+      readingTime,
+      translate(
+        {
+          id: 'theme.blog.post.readingTime.plurals',
+          description:
+            'Pluralized label for "{readingTime} min read". Use as much plural forms (separated by "|") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)',
+          message: 'One min read|{readingTime} min read',
+        },
+        {readingTime},
+      ),
+    );
+  };
+}
+function ReadingTime({readingTime}) {
+  const readingTimePlural = useReadingTimePlural();
+  return <>{readingTimePlural(readingTime)}</>;
+}
+function Authors({authors}) {
+  return(
+    authors.map((author) =>{
+      return(
+        <>
+         {authors.indexOf(author) !== 0 && ' / '}  
+         <a href={author.url} target='_blank'>{author.name}</a> 
+        </> 
+      )
+    })
+  )
+}
+function Date({date, formattedDate}) {
+  return (
+    <time dateTime={date} itemProp="datePublished">
+      {formattedDate}
+    </time>
+  );
+}
+function Spacer() {
+  return <>{' · '}</>;
+}
+export default function BlogPostItemHeaderInfo({className}) {
+  const {metadata} = useBlogPost();
+  const {date, formattedDate, readingTime, authors} = metadata;
+  console.log(authors)
+  return (
+    <div className={clsx(styles.container, 'margin-vert--md', className)}>
+      <Date date={date} formattedDate={formattedDate} />
+      {typeof readingTime !== 'undefined' && (
+        <>
+          <Spacer />
+          <ReadingTime readingTime={readingTime} />
+        </>
+      )}
+      {typeof authors !== 'undefined' && (
+        <>
+          <Spacer />
+          Par <Authors authors={authors}/>
+        </>
+      )}
+
+    </div>
+  );
+}

src/theme/BlogPostItem/Header/Info/styles.module.css

+.container {
+  font-size: 0.9rem;
+}

src/theme/BlogPostItem/Header/index.js

@@ -12,7 +12,6 @@ export default function BlogPostItemHeader() {
       <BlogPostItemCoverImage imgSrc={metadata.frontMatter.image}/>
       <BlogPostItemHeaderTitle />
       <BlogPostItemHeaderInfo />
-      <BlogPostItemHeaderAuthors />
     </header>
   );
 }