feat - Create second version of Become speaker article

src/lib/components/custom/img.svelte

@@ -4,3 +4,12 @@
 </script>
 
 <img {src} {alt} loading="lazy" />
+
+<style>
+	img {
+		max-width: 100%;
+		height: auto;
+		display: block;
+		margin: auto;
+	}
+</style>

src/lib/types.ts

@@ -1,4 +1,4 @@
-export type Categories = 'Angular' | 'Other'
+export type Categories = 'Angular' | 'Conference' | 'Other'
 
 export type Post = {
 	title: string
@@ -7,6 +7,8 @@ export type Post = {
 	date: string
 	categories: Categories[]
 	published: boolean
+	coverSrc?: string
+	coverAlt?: string
 	readingTime: {
 		text: string
 	}

src/posts/becomeSpeaker.md

@@ -0,0 +1,124 @@
+---
+title: Devenir Speaker. Une aventure incroyable !
+description: En 2022, je suis sorti de mon petit confort pour devenir Speaker.
+published: true
+slug: becomeSpeaker
+date: '2024-05-07'
+coverSrc: ./becomeSpeaker/cinema.jpeg
+categories: 
+    - Conference
+---
+
+# Comment je suis devenu speaker
+
+Je suis devenu, en 2022, un Speaker, un vrai. Je vais vous raconter comment cela est arrivé.
+
+## Fixer des objectifs
+
+Comme beaucoup de monde, j'aime beaucoup me dépasser, me challenger. Pour cela, je me fixe des objectifs à atteindre et mets tout en œuvre pour pouvoir y arriver.
+
+En 2021, je n'avais plus d'objectifs professionnels. Lors d'une soirée après une journée de conférence, un Speaker m'a demandé pourquoi je n'essayerais pas de devenir Speaker moi-même. Il m'a trouvé tout un tas d'arguments (plus ou moins valables). C'est ainsi que l'idée m'est venue. Mais comment se sentir légitime dans ce monde fermé où l'on croise quasiment toujours les mêmes têtes ? J'ai donc continué en posant la question à plusieurs Speakers. Les réponses variaient bien sûr, mais celle qui m'a convaincu c'est celle-ci : "Tu crois que je suis un expert ? Certainement pas ! Je suis certainement moins compétent que toi. Toutefois, je partage mon expérience. N'importe qui peut en faire autant, ce n'est pas une question de compétence mais d'histoire à raconter."
+
+## Le syndrome de l'imposteur
+
+Comme beaucoup de développeurs, j'étais atteint du syndrome de l'imposteur. Vous connaissez sûrement.
+
+Ce syndrome correspond à un sentiment de doute sur nos capacités et sur notre légitimité à faire ce que l'on fait.
+
+Pour combattre ce symptôme, je me suis fait accompagner d'un mentor. Le fait de ne pas être seul et d'avoir une "béquille" de secours en cas de problème permet de surmonter cette crainte.
+
+Il m'a fallu monter sur scène une première fois (peut-être même une seconde) pour que ce syndrome disparaisse.
+
+## L'objectif est fixé, mais où commencer
+
+N'ayant aucune connaissance de ce monde, la première question que l'on se pose est : comment y entrer ?
+
+![Conference Hall](./becomeSpeaker/confHall.png)
+
+En France, il existe la plateforme [conference hall](https://conference-hall.io/) qui permet de créer un résumé de ses sujets afin de les soumettre à une ou plusieurs conférences. Une fois soumis, il existe un processus de validation au sein des comités d'organisation des conférences afin de choisir quels sujets ils souhaitent proposer.
+
+❗️Attention, toutes les conférences n'utilisent pas cet outil.
+
+Il nous manque encore le sujet.
+
+## Choisir son sujet
+
+Encore une fois, plein de questions viennent à se poser. Quel sujet vais-je choisir ? Lorsqu'on en trouve un, va-t-il plaire suffisamment pour être choisi ...
+
+Afin de maximiser nos chances d'être sélectionné, nous sommes partis sur 2 sujets sur des axes opposés :
+
+- Un premier orienté problème technique pointu destiné à un public d'experts sur une technologie donnée.
+- Un second grand public en faisant un retour d'expérience sur une technologie JavaScript.
+
+Sans grande surprise, le premier sujet ne fut choisi par aucune conférence, contrairement au second qui a eu beaucoup plus de succès.
+
+## Faire naitre son talk
+
+Une fois le sujet choisi, le vrai travail commence.
+
+Pour raconter un REX, il faut déjà avoir une expérience. C'est-à-dire avoir des choses à raconter et un avis sur le sujet.
+
+Tout a commencé avec des POCs, une étude de l'état de l'art, des vidéos et des lectures d'articles afin de se renseigner sur les limites de l'outil afin de pouvoir les explorer par nous-mêmes.
+
+Il faut ensuite trouver un bon résumé afin de pouvoir soumettre son talk rapidement.
+
+Il existe plusieurs écoles: 
+
+- Finaliser son talk avant de soumettre
+- Soumettre et attendre d'être pris avant de finaliser
+
+Je suis plutôt de la seconde école.
+
+## Soumettre son sujet
+
+Afin de soumettre son sujet, il faut faire des choix.
+
+D'abord un format. Il existe plusieurs délais : 15 min, 30 min, 45 - 50 min, 1h30, 3h. Chaque sujet n'a pas forcément un temps idéal, mais il faut choisir celui qui lui correspond le mieux. On va se baser sur sa complexité, le nombre d'informations à faire passer ...
+
+Ensuite un type. Conférence, Atelier. Chaque sujet a un type privilégié. Lorsqu'on veut présenter un REX, les deux formats peuvent correspondre. Nous avons choisi le format conférence en mode live coding pour notre part.
+
+## Finaliser son sujet
+
+Ça y est, la première acceptation est arrivée. Merci à Devfest Lille.
+
+Il est temps d'écrire son sujet. Le syndrome de la page blanche commence. Il y a beaucoup à dire. Mais par où commencer ? Comment créer l'histoire de ce que l'on veut raconter ?
+
+Nous avons défini un plan d'action afin de nous séparer les tâches et pouvoir créer l'histoire voulue. Plusieurs essais et adaptations plus tard, nous étions prêts à donner la conférence.
+
+## La scène
+
+La date approchant, comme tout à chacun, le stress arrive.
+
+Puis le planning devient disponible. On s'aperçoit qu'on est sur la grande scène juste après la keynote. Le stress grimpe encore.
+
+Pour combattre ce stress. Nous avons redoublé les essais afin d'être certains d'être prêts.
+
+## Le grand jour
+
+Finalement le jour du talk arrive. Un sentiment partagé entre l'excitation de réussir ce challenge, le stress de franchir le pas et de monter sur scène et ce sentiment toujours présent d'illégitimité à être présent à cet endroit, encore plus lorsque je vois la salle. Comble de la malchance, j'ai perdu ma voix la veille au soir.
+
+On monte sur scène enfin. La préparation commence. On positionne l'ordinateur, les micros. Jusque-là tout va bien. Sauf que je suis trop petit. Heureusement l'organisation est au top et trouve une solution très rapidement.
+
+Puis l'attente arrive. La salle se remplit. Le stress monte encore.
+
+Enfin c'est notre moment. Je me lance. Au bout de quelques secondes / minutes, le stress retombe. Tout se passe comme aux répétitions. J'oublie toutefois du contenu mais rien de dramatique, à part moi et mon mentor personne n'est au courant, ce problème n'est donc que dans mon esprit.
+
+La fin arrive avec les applaudissements, les questions. La partie la plus difficile car non préparée. On ne sait pas à quoi s'attendre. Tout se passe sans difficulté.
+
+On descend enfin de scène. Des personnes viennent nous voir, pour nous remercier, nous poser des questions par rapport à leur problématique ... Nous sommes sur un petit nuage.
+
+Puis enfin on se retrouve seul avec un sentiment de béatitude, la tête dans le cloud. Plus qu'une seule question. Quand recommence-t-on ?
+
+## La suite
+
+Cette conférence a été sélectionnée 9 fois. Nous avons donc parcouru la France pour donner cette même conférence, souvent mise à jour, adaptée en fonction des questions que nous avions eu et de l'évolution de la technologie présentée ...
+
+Aujourd'hui je continue ce voyage en testant d'autres formats. Cette année j'ai même eu la chance d'être sélectionné à Devoxx France pour un Hands on. De plus, je suis devenu mentor moi-même en faisant entrer dans ce monde une personne atteinte du syndrome de l'imposteur au même titre que moi au début de cette expérience.
+
+Ce sentiment de béatitude est toujours là. Tant que je retrouverai ce sentiment, je continuerai à être Speaker.
+
+## La vidéo
+
+La vidéo de cette conférence est disponible en cliquant sur l'image ci-dessous :
+
+[![Vidéos de la conférence](./becomeSpeaker/firstTalk.jpg)](https://youtu.be/GJuEQ35POO8?si=_16OY2QyBlRiRwEH "Vidéos de la conférence")

src/routes/[slug]/+page.svelte

@@ -11,6 +11,14 @@
 	<meta name="description" content={data.meta.description} />
 </svelte:head>
 
+{#if data.meta.coverSrc}
+	{#if data.meta.coverAlt}
+		<img src={data.meta.coverSrc} alt={data.meta.coverAlt} loading="lazy" />
+	{:else}
+		<img src={data.meta.coverSrc} alt={data.meta.title} loading="lazy" />
+	{/if}	
+{/if}
+
 <article>
   <!-- Title -->
   <div>
@@ -31,3 +39,16 @@
 		<svelte:component this={data.content} />
 	</div>
 </article>
+
+<style>
+	img {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+	}
+
+	article {
+		background-color: white;
+		z-index: 20;
+	}
+</style>

src/routes/[slug]/+page.ts

@@ -3,7 +3,7 @@ export const prerender = true;
 
 export async function load({ params }) {
 	try {
-        const post = await import(`../../posts/${params.slug}/index.md`);
+        const post = await import(`../../posts/${params.slug}.md`);
 		return {
 			content: post.default,
 			meta: post.metadata

src/routes/api/posts/+server.ts

@@ -7,13 +7,13 @@ async function getPosts() {
 	const paths = import.meta.glob('/src/posts/**/*.md', { eager: true })
 
 	for (const path in paths) {
-		const file = paths[path];
-		const slug = path.split('/').at(-2);
+		const file = paths[path]
+		const slug = path.split('/').at(-1)?.replace('.md', '');
 
 		if (file && typeof file === 'object' && 'metadata' in file && slug) {
-			const metadata = file.metadata as Omit<Post, 'slug'>;
-			const post = { ...metadata, slug } satisfies Post;
-			post.published && posts.push(post);
+			const metadata = file.metadata as Omit<Post, 'slug'>
+			const post = { ...metadata, slug } satisfies Post
+			post.published && posts.push(post)
 		}
 	}
 

src/routes/posts/+page.svelte

@@ -5,8 +5,8 @@
 </script>
 
 <svelte:head>
-	<title>Posts list</title>
-	<meta name="description" content="Technical posts list ordered by date" />
+	<title>Liste des postes</title>
+	<meta name="description" content="Liste des postes ordonné par date" />
 </svelte:head>
 
 <!-- Posts -->

src/routes/styles.css

@@ -15,29 +15,23 @@ body {
 
 h1 {
 	font-weight: 700;
+	font-size: 2rem;
 }
 h2 {
 	font-weight: 500;
+	font-size: 1.5rem;
 }
 p {
 	font-weight: 400;
 	line-height: 1.5;
 }
 
-h1 {
-	font-size: 2rem;
-}
-
-h2 {
-	font-size: 1rem;
-}
-
 @media (width > 720px) {
 	h1 {
-		font-size: 2.4rem;
+		font-size: 2.5rem;
 	}
 
 	h2 {
-		font-size: 1.2rem;
+		font-size: 1.8rem;
 	}
 }