feat: Talks v2

next/content/talks/cooperer.md

 ---
 title: Coopérer avec d'autres métiers
+description: "Retour d'expérience sur l'iGEM et la coopération entre ingénieurs, biologistes, et designers."
 date: "2020-04-21"
 org: Université Rennes1
+context: Remise de diplômes 2020 du Master BioInfo Rennes1
 video: https://nech.pl/bigday2020-video
 slides: https://nech.pl/bigday2020
 event: https://bioinfo-fr.net/big-day-2020

next/content/talks/droidcon19.md

 ---
 title: 'Having a Voice on Mobile: How hard can it be?'
+description: "Many mobile apps add voice commands. When does it actually help?"
 date: '2019-11-02'
 context: Droidcon London 2019
-org: .droidcon
 video: https://nech.pl/droidcon19-video
 slides: https://nech.pl/droidcon19
 event: https://skillsmatter.com/conferences/11785-droidcon-london-2019

next/content/talks/musicologist.md

 ---
 title: The Musicologist, or Search as a Conversation
+description: "How NLP APIs and modern mobile ecosystems let us build search experiences as natural language conversations."
 date: '2017-11-27'
 slides: https://www.slideshare.net/PaulLouisNECH/search-as-a-conversation-paris-nlp-meetup
 video: https://www.youtube.com/watch?v=3eb4KMNcOII
 context: ParisNLP Meetup
 event: https://twitter.com/ParisNLP/status/933416243964628992
-org: ParisNLP
 ---

next/content/talks/parisapi.md

 ---
-title: ParisAPI#31 - A tale of two APIs
+title: A tale of two APIs
+description: "How leveraging two APIs (DialogFlow and Algolia) allows to transform a JSON file describing a couple hundreds songs into an interactive, conversational experience."
 date: '2018-01-23'
+context: ParisAPI#31
 event: https://www.meetup.com/ParisAPI/events/246453990/
 slides: https://drive.google.com/file/d/1-bzpJUjlVRhQJSLjUQJbe3AFg4mS3RoN/view?usp=sharing
 ---

next/content/talks/serving-humans.md

 ---
 title: Serving Humans? Ethics and Politics of Technological Design
-description: 'In our era of services, *who* is being served?'
+description: 'In our era of services, *who* is being served by technologies?'
 context: 'Humanities After Humans: Our Extended Bodies, Ourselves'
 org: Université de Lorraine, INHA, UCP
 date: '2020-12-11'

next/content/talks/talktome-berlin.md

 ---
-title: TalkToMeBerlin
+title: Workshop | The Challenges of Conversational Search
+description: "Introduction to using Algolia APIs to power your voice experience, with a focus on fast prototyping."
 date: '2018-06-15'
 event: http://talktome.berlin/
-org: TalkToMe! Berlin
-context: TalkToMe Berlin Hackathon
+context: TalkToMe! Berlin Hackathon
 slides: https://docs.google.com/presentation/d/1ofZ17FZsmUyRu5_10-ndpKAQMJ_3m_e0tA5ZXDVFp-k/edit?usp=sharing
 video: https://www.youtube.com/watch?v=_U-K9oaNBhc
 ---

next/pages/index.js

@@ -75,18 +75,15 @@ export default function Home({ posts, talks }) {
           <h2 className={utilStyles.headingLg}>Most recent talks</h2>
           <ul className={utilStyles.list}>
             {talks.map(({ id, title, description }) => (
-              <Link href={`/talk/${id}`} key={id}>
-                <li className={utilStyles.listItem} key={id}>
+              <li className={utilStyles.listItem} key={id}>
+                <Link href={`/talk/${id}`} key={id}>
                   <h4>{title}</h4>
-                  {description && (
-                    <small className={utilStyles.lightText}>
-                      {description}
-                    </small>
-                  )}
-                  <br />
-
-                </li>
-              </Link>
+                </Link>
+                {description && (
+                  <small className={utilStyles.lightText}>{description}</small>
+                )}
+                <br />
+              </li>
             ))}
           </ul>
         </section>

next/pages/talks.js

@@ -10,13 +10,12 @@ import ReactPlayer from "react-player";
 
 export async function getStaticProps() {
   const talks = getTalksData();
-  const selection = [
-  ];
+  const selection = [];
 
   return {
     props: {
       talks,
-      selection
+      selection,
     },
   };
 }
@@ -30,31 +29,66 @@ export default function Talks({ talks, selection }) {
       </Head>
       <div>
         <section className={utilStyles.headingMd}>
-          <h1>I give talks about topics I care about</h1>
-          <h2></h2>
+          <h1>I speak about topics I love</h1>
           <ul>
             {selection.map(({}) => (
-              <li><h3>Item</h3></li>
+              <li>
+                <h3>Item</h3>
+              </li>
             ))}
           </ul>
         </section>
 
-        <h2 className={utilStyles.headingLg}>Most recent talks</h2>
         <ul className={utilStyles.list}>
           {talks.map(
-            ({ id, date, title, org, context, video, slides, event }) => (
+            ({
+              id,
+              title,
+              description,
+              date,
+              org,
+              context,
+              video,
+              slides,
+              event,
+            }) => (
               <li className={utilStyles.listItem} key={id}>
-                <a href={video || slides}>{title}</a>
-                <br />
+                <h3>{title}</h3>
+                {description && (
+                  <>
+                    <small>{description}</small>
+                    <br />
+                  </>
+                )}
                 <small className={utilStyles.lightText}>
                   <Date dateString={date} />
-                  {event && (
+                  {context && (
                     <p>
                       {" "}
-                      at <a href={event}>{context}</a> by {org}
+                      <i>
+                        at <a href={event}>{context}</a>{" "}
+                        {org && <>organised by {org}</>}
+                      </i>
                     </p>
                   )}
                 </small>{" "}
+                <ul class="links">
+                  {video && (
+                    <li>
+                      <a href={video}>Video</a>
+                    </li>
+                  )}
+                  {slides && (
+                    <li>
+                      <a href={slides}>Slides</a>
+                    </li>
+                  )}
+                  {event && (
+                    <li>
+                      <a href={event}>Event</a>
+                    </li>
+                  )}
+                </ul>
               </li>
             )
           )}

next/styles/main.css

@@ -42,6 +42,10 @@ h4 {
   font-size: 1.2rem;
 }
 
+ul.links {
+  margin-bottom: 3em;
+}
+
 small {
   font-size: 1rem;
 }