From edeef0b8e7cc72611dfef9f3634b373462ecd8e4 Mon Sep 17 00:00:00 2001
From: Plumtree3D <ham.in.kneesocks@gmail.com>
Date: Mon, 13 Nov 2023 14:24:16 +0100
Subject: [PATCH] feat: improved blogpost design
---
...ent-dans-la-tech-actus-devops-juin-2023.md | 43 +++++++++--
src/css/blog.css | 22 ++++++
src/css/custom.css | 3 +-
src/theme/BlogPostItem/Header/Info/index.js | 74 +++++++++++++++++++
.../Header/Info/styles.module.css | 3 +
src/theme/BlogPostItem/Header/index.js | 1 -
6 files changed, 136 insertions(+), 10 deletions(-)
create mode 100644 src/css/blog.css
create mode 100644 src/theme/BlogPostItem/Header/Info/index.js
create mode 100644 src/theme/BlogPostItem/Header/Info/styles.module.css
diff --git a/blog/2023-06-29-vague-de-licenciement-dans-la-tech-actus-devops-juin-2023.md b/blog/2023-06-29-vague-de-licenciement-dans-la-tech-actus-devops-juin-2023.md
index 3a31b6f..548506e 100644
--- a/blog/2023-06-29-vague-de-licenciement-dans-la-tech-actus-devops-juin-2023.md
+++ b/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)
Â
diff --git a/src/css/blog.css b/src/css/blog.css
new file mode 100644
index 0000000..8d3fd5c
--- /dev/null
+++ b/src/css/blog.css
@@ -0,0 +1,22 @@
+.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;
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index fb9000d..24c7f82 100644
--- a/src/css/custom.css
+++ b/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;
diff --git a/src/theme/BlogPostItem/Header/Info/index.js b/src/theme/BlogPostItem/Header/Info/index.js
new file mode 100644
index 0000000..2f13d58
--- /dev/null
+++ b/src/theme/BlogPostItem/Header/Info/index.js
@@ -0,0 +1,74 @@
+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>
+ );
+}
diff --git a/src/theme/BlogPostItem/Header/Info/styles.module.css b/src/theme/BlogPostItem/Header/Info/styles.module.css
new file mode 100644
index 0000000..27d569e
--- /dev/null
+++ b/src/theme/BlogPostItem/Header/Info/styles.module.css
@@ -0,0 +1,3 @@
+.container {
+ font-size: 0.9rem;
+}
diff --git a/src/theme/BlogPostItem/Header/index.js b/src/theme/BlogPostItem/Header/index.js
index d9a2264..ed7a169 100644
--- a/src/theme/BlogPostItem/Header/index.js
+++ b/src/theme/BlogPostItem/Header/index.js
@@ -12,7 +12,6 @@ export default function BlogPostItemHeader() {
<BlogPostItemCoverImage imgSrc={metadata.frontMatter.image}/>
<BlogPostItemHeaderTitle />
<BlogPostItemHeaderInfo />
- <BlogPostItemHeaderAuthors />
</header>
);
}
--
GitLab