feat: Talks

next/components/date.js

 import { parseISO, format } from 'date-fns'
 
-export default function Date({ dateString }) {
+export default function Date({ dateString, dateFormat }) {
   const date = parseISO(dateString)
-  return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
+  const finalFormat = dateFormat || 'LLLL d, yyyy'
+
+  return <time dateTime={dateString}>{format(date, finalFormat)}</time>
 }

next/content/talks/collaborer.md → next/content/talks/cooperer.md

 ---
-title: Collaborer avec d'autres métiers
+title: Coopérer avec d'autres métiers
 date: "2020-04-21"
-url: https://nech.pl/bigday2020-video
+org: Université Rennes1
+video: https://nech.pl/bigday2020-video
 slides: https://nech.pl/bigday2020
+event: https://bioinfo-fr.net/big-day-2020
 ---
+https://www.youtube.com/watch?v=un0cFiN65yg

next/content/talks/droidcon19.md

+---
+title: 'Having a Voice on Mobile: How hard can it be?'
+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
-date: '2017-11-23'
-url: https://www.youtube.com/watch?v=3eb4KMNcOII
+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
 ---
-<!-- slides: https://nech.pl/bigday2020 -->

next/content/talks/mwc.md

+---
+title: Mobile Search Patterns
+context: 4 Years From Now
+org: Mobile World Congress
+date: '2017-02-28'
+slides: https://docs.google.com/presentation/d/1tHvU26nKkabHbHBomXgeSzjuVr9juJPcckKvUcdneRk/edit?usp=sharing
+event: https://www.4yfn.com/
+---

next/content/talks/parisapi.md

+---
+title: ParisAPI#31 - A tale of two APIs
+date: '2018-01-23'
+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?'
+context: 'Humanities After Humans: Our Extended Bodies, Ourselves'
+org: Université de Lorraine, INHA, UCP
+date: '2020-12-11'
+video: https://nech.pl/serving-humans-video
+slides: https://nech.pl/serving-humans
+event: https://humanitiesafterhumans.wordpress.com/
+---

next/content/talks/talktome-berlin.md

+---
+title: TalkToMeBerlin
+date: '2018-06-15'
+event: http://talktome.berlin/
+org: TalkToMe! Berlin
+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/lib/talks.js

@@ -4,10 +4,14 @@ export function getTalksData() {
   return getAllContentData('talks', true)
 }
 
-export function getAllPostIds() {
+export function getRecentTalksData() {
+  return getAllContentData('talks', true).slice(0,3)
+}
+
+export function getAllTalkIds() {
   return getAllContentIds("talks")
 }
 
-export async function getPostData(id) {
+export async function getTalkData(id) {
   return getContentData("talks", id)
 }

next/lib/utils.js

@@ -5,16 +5,14 @@ import remark from "remark";
 import html from "remark-html";
 
 function getContentDirectory(name) {
-  const dir = path.join(process.cwd(), "content", name);
-  console.log("gCD:", dir);
-  return dir;
+  return path.join(process.cwd(), "content", name)
 }
 
 function getAllContentData(name, sorted = false) {
   // Get file names under /content/{name}
   const contentDirectory = getContentDirectory(name);
   const fileNames = fs.readdirSync(contentDirectory);
-  console.log("gACD: total", fileNames.length, "items");
+  console.log(`gACD: total ${name}(s): ${fileNames.length}`);
 
   const allContentData = fileNames.map((fileName) => {
     // Remove ".md" from file name to get id
@@ -72,6 +70,16 @@ async function getContentData(name, id) {
     .use(html)
     .process(matterResult.content);
   const contentHtml = processedContent.toString();
+  console.log(matterResult);
+  if ("description" in matterResult.data) {
+    console.log("Got desc!");
+    const processedDescription = await remark()
+      .use(html)
+      .process(matterResult.data.description);
+    matterResult.data.description = processedContent.toString();
+
+  }
+
 
   // Combine the data with the id and contentHtml
   return {

next/pages/_app.js

 import 'bootstrap/dist/css/bootstrap.css'
-import '../styles.css'
+import '../styles/main.css'
 
 export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

next/pages/index.js

@@ -4,20 +4,22 @@ import Date from "../components/date";
 import Layout from "../components/layout";
 import utilStyles from "../styles/utils.module.css";
 import { getPostsData } from "../lib/posts";
-import { getTalksData } from "../lib/talks";
+import { getRecentTalksData } from "../lib/talks";
 
 export async function getStaticProps() {
-  const allPostsData = getPostsData();
-  const allTalksData = getTalksData();
+  const nbLastTalks = 3;
+  const talks = getRecentTalksData();
+  const posts = getPostsData();
+
   return {
     props: {
-      allPostsData,
-      allTalksData,
+      posts,
+      talks,
     },
   };
 }
 
-export default function Home({ allPostsData, allTalksData }) {
+export default function Home({ posts, talks }) {
   return (
     <div className="container">
       <Layout home>
@@ -33,11 +35,11 @@ export default function Home({ allPostsData, allTalksData }) {
           </h2>
 
           <h3>
-            …code into <em>human solutions</em>
+            …code into <em>solutions to human problems</em>
           </h3>
           <p className="description">
-            At <a href="https://algolia.com">Algolia</a>, I create technologies to
-            help humans find things and
+            At <a href="https://algolia.com">Algolia</a>, I create technologies
+            to help humans find things and
             <a href="https://www.algolia.com/products/answers-for-support/">
               {" "}
               answers
@@ -62,27 +64,38 @@ export default function Home({ allPostsData, allTalksData }) {
           </p>
         </section>
         <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
-          <h2 className={utilStyles.headingLg}>Talks</h2>
+          <h3>
+            …ideas into <em>talks</em>
+          </h3>
+          <p className="description">
+            I <Link href="/talks/">speak</Link> about topics I care about: from
+            sharing my passions and teaching useful patterns, to questioning our
+            current mental models.
+          </p>
+          <h2 className={utilStyles.headingLg}>Most recent talks</h2>
           <ul className={utilStyles.list}>
-            {allTalksData.map(({ id, date, title, url, slides }) => (
-              <li className={utilStyles.listItem} key={id}>
-                <Link href={`/posts/${id}`}>
-                  <a href={url}>{title}</a>
-                </Link>
-                <br />
-                <small className={utilStyles.lightText}>
-                  <Date dateString={date} />
-                </small>
-              </li>
+            {talks.map(({ id, title, description }) => (
+              <Link href={`/talk/${id}`} key={id}>
+                <li className={utilStyles.listItem} key={id}>
+                  <h4>{title}</h4>
+                  {description && (
+                    <small className={utilStyles.lightText}>
+                      {description}
+                    </small>
+                  )}
+                  <br />
+
+                </li>
+              </Link>
             ))}
           </ul>
         </section>
         <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
           <h2 className={utilStyles.headingLg}>Blog</h2>
           <ul className={utilStyles.list}>
-            {allPostsData.map(({ id, date, title }) => (
+            {posts.map(({ id, date, title }) => (
               <li className={utilStyles.listItem} key={id}>
-                <Link href={`/posts/${id}`}>
+                <Link href={`/post/${id}`}>
                   <a>{title}</a>
                 </Link>
                 <br />

next/pages/talk/[id].js

+import Head from "next/head";
+import Layout from "../../components/layout";
+import Date from "../../components/date";
+
+import utilStyles from "../../styles/utils.module.css";
+import { getTalkData, getTalksData, getAllTalkIds } from "../../lib/talks";
+
+export async function getStaticProps({ params }) {
+  const data = await getTalkData(params.id);
+  return {
+    props: {
+      data,
+    },
+  };
+}
+
+export async function getStaticPaths() {
+  const paths = getAllTalkIds();
+  return {
+    paths,
+    fallback: false,
+  };
+}
+
+export default function Talk({ data }) {
+  return (
+    <Layout>
+      <Head>
+        <title>{data.title}</title>
+      </Head>
+      <article>
+        <h1 className={utilStyles.headingXl}>{data.title}</h1>
+        <div className={utilStyles.lightText}>
+          <Date dateString={data.date} dateFormat="YY MMM" />
+        </div>
+        {data.event && data.context && (
+          <p>
+            {" "}
+            at <a href={data.event}>{data.context}</a> by {data.org}
+          </p>
+        )}
+        <div className={utilStyles.lightText}></div>
+        <div className={utilStyles.lightText}></div>
+        <div dangerouslySetInnerHTML={{ __html: data.contentHtml }} />
+      </article>
+    </Layout>
+  );
+}

next/pages/talks.js

+import Image from "next/image";
+import Link from "next/link";
+import Head from "next/head";
+import Layout from "../components/layout";
+import utilStyles from "../styles/utils.module.css";
+import { getTalksData } from "../lib/talks";
+
+import React from "react";
+import ReactPlayer from "react-player";
+
+export async function getStaticProps() {
+  const talks = getTalksData();
+  const selection = [
+  ];
+
+  return {
+    props: {
+      talks,
+      selection
+    },
+  };
+}
+
+export default function Talks({ talks, selection }) {
+  return (
+    <Layout>
+      <Head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Talks</title>
+      </Head>
+      <div>
+        <section className={utilStyles.headingMd}>
+          <h1>I give talks about topics I care about</h1>
+          <h2></h2>
+          <ul>
+            {selection.map(({}) => (
+              <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 }) => (
+              <li className={utilStyles.listItem} key={id}>
+                <a href={video || slides}>{title}</a>
+                <br />
+                <small className={utilStyles.lightText}>
+                  <Date dateString={date} />
+                  {event && (
+                    <p>
+                      {" "}
+                      at <a href={event}>{context}</a> by {org}
+                    </p>
+                  )}
+                </small>{" "}
+              </li>
+            )
+          )}
+        </ul>
+      </div>
+    </Layout>
+  );
+}

next/styles.css → next/styles/main.css

@@ -30,10 +30,22 @@ header {
   margin-bottom: 2em;
 }
 
-main h1 {
+main h2 {
   margin-bottom: 1em;
 }
 
+main h3 {
+  /* margin: 1em 0; */
+}
+
+h4 {
+  font-size: 1.2rem;
+}
+
+small {
+  font-size: 1rem;
+}
+
 footer {
   margin-top: 4em;
   text-align: center;