feat(lyonjs100): add program page (#476)

Co-authored-by: Mathieu Mure <[email protected]>
Co-authored-by: Antoine Caron <[email protected]>

app/evenement/[slug]/page.tsx

@@ -23,7 +23,7 @@ export default async function EventPage({ params: { slug } }: { params: { slug:
         <EventMarkup event={event} />
       </main>
     );
-  } catch (e) {
+  } catch {
     notFound();
   }
 }
@@ -50,7 +50,7 @@ export async function generateMetadata({ params: { slug } }: { params: { slug: s
         description,
       },
     };
-  } catch (e) {
+  } catch {
     return {};
   }
 }

app/lyonjs-100/content.mdx

@@ -31,6 +31,16 @@ Nous allons donc ouvrir la billetterie le <time dateTime="2024-12-06T09:00">6 d
 - **📌 Lieu** : UGC Part dieu
 - **🎟️ Ouverture de la billetterie** : 6 décembre 2024
 
+## Programme
+
+Le programme complet de la journée est disponible ci-dessous.
+
+<div className={styles.cta}>
+  <ButtonLink href="/lyonjs-100/programme">
+    Programme <span aria-hidden="true">&rarr;</span>
+  </ButtonLink>
+</div>
+
 ## Billetterie
 
 La billeterie ouvrira le 6 décembre 2024 à 9h00. Les places seront limitées à 100 avec un prix de vente fixé à 40€, alors assurez-vous de réserver la vôtre dès que possible.
@@ -41,12 +51,6 @@ La billeterie ouvrira le 6 décembre 2024 à 9h00. Les places seront limitées 
   </ButtonLink>
 </div>
 
-## Programme
-
-Le programme complet de la journée sera annoncé prochainement. Restez à l'affût pour découvrir les conférences prévues pour cette journée spéciale.
-
-<ListOfPeople people={speakers} />
-
 ## Sponsors
 
 Un grand merci à nos sponsors pour leur soutien continu.

app/lyonjs-100/programme/Programme.module.css

@@ -0,0 +1,44 @@
+.container {
+  display: flex;
+  gap: 20px;
+  padding: 20px 0;
+  flex-direction: column;
+  align-items: center;
+}
+
+.introduction {
+  color: var(--white-0);
+  margin-top: 24px;
+}
+
+.timeCard {
+  background-color: var(--main-color);
+  color: var(--background-page);
+  /*border-radius: 0.375em;*/
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625em;
+  padding: 0.75em 4em;
+  transition: background-color 100ms;
+  font-weight: 500;
+  white-space: nowrap;
+  transform: translateY(100%);
+  z-index: 2;
+}
+
+.slotCard {
+  background-color: var(--background-card);
+  padding: 2.5rem;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 40px;
+  width: 100%;
+}
+
+.slotCard h2 {
+  margin: 1.5rem 0 0.5rem;
+  text-align: center;
+  text-decoration: none;
+}

app/lyonjs-100/programme/page.tsx

@@ -0,0 +1,52 @@
+import { Metadata } from 'next';
+import { H1 } from '../../../modules/atoms/remark/Titles';
+import { program, speakers } from '../../../data/lyonjs100-speakers';
+import { Talk } from '../../../modules/program/Talk';
+import styles from './Programme.module.css';
+import { Heading } from '../../../modules/atoms/heading/Heading';
+
+const title = 'LyonJS | LyonJS 💯 | Programme';
+const description = 'Le programme de la journée du LyonJS 100';
+
+export const revalidate = 3600;
+
+export const metadata: Metadata = {
+  title,
+  description,
+  twitter: {
+    title,
+    description,
+  },
+  openGraph: {
+    title,
+    description,
+  },
+};
+
+export default function LyonJS100() {
+  return (
+    <main>
+      <H1>Programme</H1>
+      <p className={styles.introduction}>
+        Voici un aperçu de quelques talks au programme de cette journée, Et d’autres talks vous attendent tout au long
+        de la journée ! Le programme détaillé est encore en validation.
+      </p>
+      <div className={styles.container}>
+        {program.map((slot) => (
+          <>
+            <time className={styles.timeCard} dateTime={`2025-02-21T${slot.time}`} title={slot.title}>
+              {slot.time}
+            </time>
+            {slot.speaker ? (
+              <Talk speaker={slot.speaker} key={slot.time} />
+            ) : (
+              <article className={styles.slotCard} key={slot.time}>
+                <Heading Component="h2">{slot.title}</Heading>
+              </article>
+            )}
+          </>
+        ))}
+      </div>
+    </main>
+  );
+}

data/lyonjs100-speakers.ts

@@ -1,36 +1,130 @@
-type Speaker = {
+export type Speaker = {
   name: string;
   talk?: {
     title: string;
-    description: string;
+    description?: string;
   };
   avatarUrl: string;
   social: {
     twitter?: string;
     linkedin?: string;
   };
 };
-export const speakers: Array<Speaker> = [
-  { name: 'Matthieu Lux', avatarUrl: '/speakers/matthieu-lux.webp', social: { twitter: 'swiip', linkedin: 'swiip' } },
-  // { name: 'Jérémie Patonnier', avatarUrl: '/speakers/jeremie-patonnier.jpg', social: { twitter: 'jeremiepat' } },
-  {
-    name: 'Jonny Burger',
-    avatarUrl: '/speakers/jonny-burger.png',
-    social: { twitter: 'JNYBGR', linkedin: 'jonny-burger-4115109b' },
+
+const matthieuLux: Speaker = {
+  name: 'Matthieu Lux',
+  avatarUrl: '/speakers/matthieu-lux.webp',
+  social: { twitter: 'swiip', linkedin: 'swiip' },
+  talk: {
+    title: 'Astro, le framework Web JS multi page',
+    description: `Et si finalement, on faisait des sites avec plusieurs pages ?
+
+Astro est d'abord un framework Web JS basé sur Vite qui permet d'utiliser pratiquement n'importe quel framework frontend: React, Vue, mais aussi Svelte, Solid, Preact... Et même plusieurs d'entre eux à la fois si nécessaire. Au milieu des tout puissants Next et Nuxt, ce trublion propose une voie étonnement simple : revenir au site multi page ! Cela lui permet d'afficher des performances incroyables.
+
+(Pratiquement ?) Tous les serveurs Web JS modernes proposent ni plus ni moins qu'une application JS qui ne fait que faire semblant de se comporter comme un site Web. Cela ne fonctionne pas si mal bien sûr, mais cela a tout de même un coût, à la fois en performance et en complexité. Astro propose une autre voie, on revient aux vraies pages Web et à la navigation entre deux pages. On se rend vite compte que cela ne marche pas si mal, bizarrement, les navigateurs le gère plutôt bien ! Mais attention, avec tout le confort et la puissance des outils JS moderne !
+
+Chez Proton, nous nous sommes engagés sur Astro pour les sites Web. Une partie est maintenant en production, une autre est encore en cours. Outre les fonctionnalités du framework, je vous propose un retour d'experience sur notre migration, nos difficultés et nos succès.`,
   },
-  {
-    name: `Bientôt lui 🤫`,
-    avatarUrl: '/speakers/secret.png',
-    social: {},
+};
+
+const jeremiePatonnier: Speaker = {
+  name: 'Jérémie Patonnier',
+  avatarUrl: '/speakers/jeremie-patonnier.jpg',
+  social: { twitter: 'jeremiepat' },
+  talk: {
+    title: "Deno, l'avenir du dev JS/TS ?",
+    description:
+      "Deno est la nouvelle alternative à Node... si on en crois Ryan Dahl, le créateur de ces deux environnements ! Si Node est devenus un standard industriel pour le développement de serveur d'API et d'application Web Front, quel est l'intérêt de Deno ? Juste un runtime JS de plus ? Que nenni, Deno, c'est Node avec 10 d'expérience en plus, avec des paradigme plus moderne, des choix d'architecture plus robuste et tout un écosystème pour supporter l'usage de JavaScript et TypeScript à grande échelle. Il y a beaucoup à dire... alors si on se prenait un petit moment pour faire le tour de ce nouvel environnement d'exécution JS qui va très vraisemblablement changer nos pratiques de dev dans les 5 ans à venir ?",
+  },
+};
+
+const jonnyBurger: Speaker = {
+  name: 'Jonny Burger',
+  avatarUrl: '/speakers/jonny-burger.png',
+  social: { twitter: 'JNYBGR', linkedin: 'jonny-burger-4115109b' },
+  talk: {
+    title: 'How to build a video editor in React',
+    description: `In this very concrete talk, I'll give an outline in 30 minutes on how to build a video editor from scratch.
+We'll talk about:
+
+- Building a canvas with user interactions
+- Creating a timeline
+- Adding captioning with AI functionality
+- Rendering out the video!
+
+None of these will be in-depth but by the end of the talk, you shall have no fear if you want to build your own video editor!`,
+  },
+};
+
+const ayoubAlouane: Speaker = {
+  name: `Ayoub Alouane`,
+  avatarUrl: '/speakers/ayoub-alouane.png',
+  social: { twitter: 'alouane_med', linkedin: 'med-ayb-alouane' },
+  talk: {
+    title: "La Performance Web : Le cas de l'Afrique",
+    description: `Nous partons souvent du principe que tout le monde dispose d'une bonne connexion Internet et d'un matériel informatique de haute spécification. Bien que cela puisse être vrai dans certaines régions, ce n'est pas le cas dans le monde entier. Je souhaite attirer l'attention sur l'Afrique, où de nombreux pays luttent contre de faibles connexions 3G coûteuses, en fonction de la quantité de données consommées. Ceci est dû à l'infrastructure limitée du continent, conduisant à une dépendance aux connexions mobiles.
+
+Compte tenu de ces circonstances, une utilisation efficace des données avec une bonne performance web devient une priorité. Ainsi, notre session se concentrera sur les défis rencontrés par les utilisateurs et les développeurs africains, et comment le téléchargement et l'exécution de grandes quantités de JavaScript exacerbe les problèmes de consommation de données et de performance. Nous explorerons comment les frameworks js existants ont tenté de résoudre le problème et comment Qwik, avec son approche innovante de la Resumability, présente une solution transformatrice à ces défis. Contrairement aux SPAs traditionnels, la Resumability de Qwik réduit considérablement la charge initiale de JavaScript, permettant aux applications de devenir interactives plus rapidement, même sur des connexions lentes.`,
   },
-  {
-    name: `Elle aussi !! 🤩`,
-    avatarUrl: '/speakers/secret.png',
-    social: {},
+};
+
+const julienSulpis: Speaker = {
+  name: 'Julien Sulpis',
+  avatarUrl: '/speakers/julien-sulpis.png',
+  social: { twitter: 'jsulpis', linkedin: 'julien-sulpis' },
+  talk: {
+    title: 'Savez-vous vraiment ce qu’est la couleur ? Découvrez la science derrière les pixels 🎨',
+    description: `Si la couleur est souvent vue sous un angle créatif, c’est aussi une science qui peut expliquer certaines bizarreries : pourquoi les mêmes couleurs ont l’air plus saturées sur ma maquette Figma que sur ma page web ? Est-ce qu’il y a un rouge “plus rouge” que le rgb(255, 0, 0) ? Pourquoi le jaune paraît plus clair que le bleu à luminosité égale ?
+
+Ces questions sont toutes liées à notre représentation des couleurs. Dans ce talk, je vous emmène dans un voyage à travers l’Histoire et les sciences pour comprendre, réellement, les codes couleur que vous utilisez dans vos applications.
+
+Vous y découvrirez ce que sont les espaces de couleur (sRGB, P3…), les notations courantes comme RGB ou HSL, et en quoi elles peuvent être trompeuses. Vous verrez enfin comment les dernières notations OKLAB et OKLCH, plus fidèles à notre perception des couleurs, peuvent permettre par exemple de créer des gradients ou des palettes de couleur cohérentes beaucoup plus facilement !`,
   },
-  {
-    name: `Non pas lui !! ?? 😱`,
-    avatarUrl: '/speakers/secret.png',
-    social: {},
+};
+
+const manonCarbonnel: Speaker = {
+  name: 'Manon Carbonnel',
+  avatarUrl: '/speakers/manon-carbonnel.png',
+  social: { twitter: 'manoncarbonnel_', linkedin: 'manon-carbonnel' },
+  talk: {
+    title: 'Crafter de meilleures UI, en pensant le DOM comme une API',
+    description: `Arrivant souvent sur les projets en "mode pompier", j'ai acquis des réflexes lorsqu'il s'agit de rapidement corriger ou terminer l'intégration d'application web.
+
+Mais comment faire pour maintenir ces bonnes pratiques une fois le feu éteint ? Comment améliorer le code sans casser l'UI ? Comment bien démarrer l'intégration d'une nouvelle application ?
+
+Nos UI sont autant utilisées par des humains que par des lecteurs d'écran, ou encore des outils de test et des robots... il faut donc penser le DOM comme une API, et pas seulement reproduire une maquette.
+Autour de cet axe, je vous propose quelques outils et idées d'ateliers collaboratifs pour développer des interfaces testables, modulaires et accessibles. Et pourquoi pas un Design System ?
+
+Vous repartirez avec une nouvelle vision du métier de l'intégration web, des pratiques et quelques outils à utiliser dès demain pour améliorer le quotidien de votre projet.`,
   },
+};
+
+const julienHuang: Speaker = {
+  name: 'Julien Huang',
+  avatarUrl: '/speakers/julien-huang.png',
+  social: { twitter: 'JulienHuang_dev', linkedin: 'julien-huang' },
+  talk: {
+    title: 'Tout sur les composants serveur Nuxt',
+    description: `Tout le monde connaît les "server components" de React et Next. Mais qu’en est-il de l’écosystème VueJS ? Avec Nuxt, le méta-framework basé sur VueJS, nous avons aussi des composants serveur ! Bien que le nom soit le même, leur fonctionnement est différent.
+   
+Dans ce talk, nous verrons ce que sont les Islands ainsi que les composants serveur dans Nuxt, et ce qui les distingue des composants serveur de React et des Islands d’Astro.`,
+  },
+};
+
+export const speakers: Array<Speaker> = [matthieuLux, jeremiePatonnier, jonnyBurger, ayoubAlouane];
+
+export const program: Array<{ time: string; speaker?: Speaker; title?: string }> = [
+  { time: '08:00', title: '🥐 Accueil & Petit déjeuner' },
+  { time: '09:00', title: '🎤 Keynote' },
+  { time: '09:30', speaker: matthieuLux },
+  { time: '10:30', title: '☕ Pause' },
+  { time: '10:50', speaker: ayoubAlouane },
+  { time: '11:50', speaker: jonnyBurger },
+  { time: '12:20', title: '🍽️ Déjeuner' },
+  { time: '14:00', speaker: julienSulpis },
+  { time: '15:00', speaker: manonCarbonnel },
+  { time: '16:00', title: '☕ Pause' },
+  { time: '16:20', speaker: jeremiePatonnier },
+  { time: '17:10', speaker: julienHuang },
+  { time: '18:00', title: '🎉 Fin' },
 ];

modules/lyonjs100/HomeAnnouncement.tsx

@@ -36,10 +36,15 @@ export function HomeAnnouncement() {
             Rendez-vous le <time dateTime="2025-02-21T09:00">21 février 2025</time> à l'
             <address>UGC de Part Dieu</address>.
           </span>
+          <div>
+            <ButtonLink href="/lyonjs-100" variant="secondary">
+              Plus d'info
+            </ButtonLink>
+          </div>
         </div>
         <div className={styles.cta}>
-          <ButtonLink href="/lyonjs-100">
-            Chope ta place ! <span aria-hidden="true">&rarr;</span>
+          <ButtonLink href="/lyonjs-100/programme">
+            Découvre le programme ! <span aria-hidden="true">&rarr;</span>
           </ButtonLink>
         </div>
       </div>

modules/person/ListOfPeople.tsx

@@ -1,54 +1,18 @@
 import styles from './person-card.module.css';
-import Image from 'next/image';
-import { IconLink } from '../navigation/links/IconLink';
-import { Twitter } from '../icons/Twitter';
-import { Linkedin } from '../icons/Linkedin';
 import React from 'react';
+import { Person } from './types';
+import { PersonDisplay } from './PersonDisplay';
 
 type Props = {
-  people: Array<{
-    name: string;
-    description?: string;
-    avatarUrl: string;
-    social: {
-      twitter?: string;
-      linkedin?: string;
-    };
-  }>;
+  people: Array<Person>;
 };
 
 export const ListOfPeople = ({ people }: Props) => {
   return (
     <ul className={styles.container}>
       {people.map((person) => (
         <li key={person.name}>
-          <figure className={styles.person}>
-            <Image src={person.avatarUrl} alt={person.name} width="120" height="120" title={person.name} />
-            <p>{person.name}</p>
-            {person.description && <p className={styles.description}>{person.description}</p>}
-            <div className={styles.socials}>
-              {person.social.twitter && (
-                <IconLink
-                  href={`https://twitter.com/${person.social.twitter}`}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  title={`Compte Twitter de ${person.name}`}
-                >
-                  <Twitter color="currentColor" size={20} />
-                </IconLink>
-              )}
-              {person.social.linkedin && (
-                <IconLink
-                  href={`https://www.linkedin.com/in/${person.social.linkedin}`}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                  title={`Compte Linkedin de ${person.name}`}
-                >
-                  <Linkedin color="currentColor" size={20} />
-                </IconLink>
-              )}
-            </div>
-          </figure>
+          <PersonDisplay person={person} />
         </li>
       ))}
     </ul>