---
layout: '@/layouts/Doc.astro'
title: 🎙️ Talks
---

import { getCollection } from 'astro:content'
import { legacyTalks } from '@/legacy-talks'

export const collected = (await getCollection('docs'))
    .filter(
        (doc) =>
            doc.id.startsWith('talks/') &&
            !doc.id.endsWith('talks/index.mdx') &&
            doc.data.date &&
            doc.data.title &&
            !doc.data.draft,
    )
    .map((doc) => ({
        date: new Date(doc.data.date),
        title: doc.data.shortTitle ?? doc.data.title,
        url: `/${doc.id.replace(/\/index\.(mdx?|md)$/, '/')}`,
        location: doc.data.location ?? '',
        locationUrl: doc.data.locationUrl ?? '',
    }))

export const legacy = legacyTalks.map((t) => ({
    date: new Date(t.date),
    title: t.title,
    url: t.url,
    location: t.location ?? '',
    locationUrl: t.locationUrl ?? '',
}))

export const talks = [...collected, ...legacy].sort(
    (a, b) => b.date.getTime() - a.date.getTime(),
)


Sam Foreman

> [!TIP] HTML ⇆ Reveal.js
>
> Convert any talk page to a Reveal.js deck by appending `/slides`:
> [`/talks/ai-for-science-2024/`](/talks/ai-for-science-2024/) →
> [`/talks/ai-for-science-2024/slides`](/talks/ai-for-science-2024/slides)

<table class="talks-table">
<thead><tr><th>Date</th><th>Title</th><th>Location</th></tr></thead>
<tbody>
{talks.map((t) => (
<tr>
<td>{(() => { const d = t.date; return `${d.getUTCFullYear()}-${String(d.getUTCMonth()+1).padStart(2,'0')}-${String(d.getUTCDate()).padStart(2,'0')}`; })()}</td>
<td><a href={t.url}>{t.title}</a></td>
<td>{t.locationUrl ? (<a href={t.locationUrl} target="_blank" rel="noopener">{t.location}</a>) : t.location}</td>
</tr>
))}
</tbody>
</table>

<style>{`
  .talks-table {
    margin-block: 1lh;
    border-collapse: collapse;
  }
  .talks-table th,
  .talks-table td {
    padding: 0.25lh 1ch;
    vertical-align: top;
  }
  .talks-table th {
    text-align: left;
    background-color: var(--background1);
  }
  .talks-table td:first-child,
  .talks-table th:first-child {
    white-space: nowrap;
    width: 14ch;
  }
  .talks-table td:first-child {
    color: var(--foreground2);
  }
  .talks-table tbody tr:nth-child(even) {
    background-color: oklch(from var(--background1) l c h / 0.5);
  }
`}</style>