Add a separate page listing the various talks I've given (#49)

_components/navbar.njk

@@ -4,6 +4,7 @@
   <nav>
     <ul>
       <li><a href="/">Home</a></li>
+      <li><a href="/talks/">Talks</a></li>
       <li><a href="/blog/">Blog</a></li>
     </ul>
   </nav>

_data.yaml

@@ -1,3 +1,4 @@
+layout: page-layout.njk
 metas:
   type: website
   site: AndreuBotella.com

_includes/page-layout.njk

@@ -0,0 +1,11 @@
+---
+# For non-blog pages other than the home page
+layout: layout.njk
+additional_css:
+  - /styles/blog.css
+---
+<main>
+  <h1>{{ title | md(true) | safe }}</h1>
+
+  {{ content | safe }}
+</main>

index.md

@@ -39,20 +39,4 @@ in web standards](https://andreubotella.github.io/multipart-form-data)
 [A self-building and self-updating mirror of the CSS Working Group specifications](https://andreubotella.github.io/csswg-auto-build)
 ([GitHub](https://github.com/andreubotella/csswg-auto-build))
 
-Lightning talk at BlinkOn 17 (November 2022):
-[“Specifying `line-clamp`”](https://youtu.be/DWZ3BcDSpo0)
-([slides](https://abotella.pages.igalia.com/blink-on-17-line-clamp/))
-
-Lightning talk at BlinkOn 18 (October 2023):
-[“Updates on `line-clamp`”](https://youtu.be/VZNm7ik4hdE)
-([slides](https://abotella.pages.igalia.com/line-clamp-2023/))
-
-Breakout talk at BlinkOn 18 (October 2023):
-[“Integrating Task Attribution and `AsyncContext`”](https://youtu.be/vGCOwR73hC8)
-([slides](https://abotella.pages.igalia.com/async-context-integration/))
-
-Talk at NodeConf EU (November 2023) together with
-[Nicolò Ribaudo](https://nicr.dev/):
-[“Past and future of server-side runtimes”](https://www.nodeconf.eu/andreu-botella-past-and-future-of-server-side-runtimes)
-(video upcoming,
-[slides](https://abotella.pages.igalia.com/past-and-future-of-server-side-runtimes))
+[See also the various talks I've given.](/talks/)

static/styles/style.css

@@ -174,3 +174,11 @@ code {
 :visited:active code {
   color: var(--active-link-color);
 }
+
+iframe.youtube {
+  display: block;
+  margin: auto;
+  width: 75%;
+  max-width: 560px;
+  aspect-ratio: 16/9;
+}

talks.md

@@ -0,0 +1,103 @@
+---
+title: Talks
+metas:
+    description:
+        A number of talks I've given at various events about my work on web browsers and standards.
+---
+
+These are various talks I've given at various events about my work on web
+browsers and standards:
+
+## “Past and future of server-side runtimes”
+
+_(given together with [Nicolò Ribaudo](https://github.com/nicolo-ribaudo))_
+
+<dl>
+    <dt>Event:</dt>
+    <dd><a href="https://www.nodeconf.eu">NodeConf EU 2023</a></dd>
+    <dt>Date:</dt>
+    <dd><time datetime="2023-11-08">November 8th 2023</time></dd>
+    <dt>Length:</dt>
+    <dd>~25 minutes</dd>
+    <dt>Slides:</dt>
+    <dd><a target="_new" href="https://abotella.pages.igalia.com/past-and-future-of-server-side-runtimes">https://abotella.pages.igalia.com/past-and-future-of-server-side-runtimes</a>
+</dl>
+
+<iframe class="youtube" src="https://www.youtube-nocookie.com/embed/LdnmN2qGo0g" title="YouTube video player: Past and future of server-side runtimes" frameborder="0" allow="picture-in-picture; web-share" allowfullscreen></iframe>
+
+The history of server-side JavaScript runtimes has seen evolutions and
+revolutions in a number of aspects: ways of doing I/O, module systems,
+interoperability across different runtimes, interoperability with the web, and
+much more. This talk explores this history, covering past innovations and
+standardization efforts (did you know that
+[CommonJS](https://wiki.commonjs.org/wiki/CommonJS) was much more than a module
+system?). We then learn about [WinterCG](https://wintercg.org/), a new effort to
+coordinate runtimes to interoperate with the web, and discuss how it can shape
+the future of server-side JavaScript.
+
+## “Integrating Task Attribution and `AsyncContext`”
+
+<dl>
+    <dt>Event:</dt>
+    <dd><a href="https://www.chromium.org/events/blinkon-18/">BlinkOn 18</a></dd>
+    <dt>Date:</dt>
+    <dd><time datetime="2023-10-19">October 19th 2023</time></dd>
+    <dt>Length:</dt>
+    <dd>~25 minutes</dd>
+    <dt>Slides:</dt>
+    <dd><a target="_new" href="https://abotella.pages.igalia.com/async-context-integration">https://abotella.pages.igalia.com/async-context-integration</a></dd>
+</dl>
+
+<iframe class="youtube" src="https://www.youtube-nocookie.com/embed/vGCOwR73hC8" title="YouTube video player: Integrating Task Attribution and AsyncContext" frameborder="0" allow="picture-in-picture; web-share" allowfullscreen></iframe>
+
+[`AsyncContext`](https://github.com/tc39/proposal-async-context) is a TC39
+proposal that tracks user-provided values across asynchronous continuations
+(`await` points), as well as web APIs such as event handlers. The work that's
+currently being done in
+[task attribution](https://docs.google.com/document/d/1_m-h9_KgDMddTS2OFP0CShr4zjU-C-up64DwCrCfBo4/edit?usp=sharing)
+also tracks browser-internal values across asynchronous continuations and web
+APIs. It would be better to layer one of these two features on top of the other,
+in Chromium and in the specifications.
+
+This session aims to discuss this integration, whether the semantics of these
+two features agree in regards to web APIs, and how they should be layered.
+
+## “Updates on `line-clamp`”
+
+<dl>
+    <dt>Event:</dt>
+    <dd><a href="https://www.chromium.org/events/blinkon-18/">BlinkOn 18</a></dd>
+    <dt>Date:</dt>
+    <dd><time datetime="2023-10-17">October 17th 2023</time></dd>
+    <dt>Length:</dt>
+    <dd>3-minute lightning talk</dd>
+    <dt>Slides:</dt>
+    <dd><a target="_new" href="https://abotella.pages.igalia.com/line-clamp-2023">https://abotella.pages.igalia.com/line-clamp-2023</a></dd>
+</dl>
+
+<iframe class="youtube" src="https://www.youtube-nocookie.com/embed/VZNm7ik4hdE" title="YouTube video player: Updates on line-clamp" frameborder="0" allow="picture-in-picture; web-share" allowfullscreen></iframe>
+
+This lightning talk discusses the updates on `line-clamp` that happened since
+the previous edition of BlinkOn, in particular about how the CSS Working Group
+is working on two separate proposals, and on how I made working implementations
+in Blink for both of them.
+
+## “Specifying `line-clamp`”
+
+<dl>
+    <dt>Event:</dt>
+    <dd><a href="https://www.chromium.org/events/blinkon-17/">BlinkOn 17</a></dd>
+    <dt>Date:</dt>
+    <dd><time datetime="2022-11-15">November 15th 2022</time></dd>
+    <dt>Length:</dt>
+    <dd>~3-minute lightning talk</dd>
+    <dt>Slides:</dt>
+    <dd><a target="_new" href="https://abotella.pages.igalia.com/blink-on-17-line-clamp">https://abotella.pages.igalia.com/blink-on-17-line-clamp</a></dd>
+</dl>
+
+<iframe class="youtube" src="https://www.youtube-nocookie.com/embed/DWZ3BcDSpo0" title="YouTube video player: Updates on line-clamp" frameborder="0" allow="picture-in-picture; web-share" allowfullscreen></iframe>
+
+This lightning talk discusses the `-webkit-line-clamp` CSS property, which
+clamps an element's text to a number of lines with an ellipsis at the end. It
+talks about its many shortcomings, and about various proposals under discussion
+by the CSS Working Group on how to fix them.