Use a social media card as og:image and link cards for download

src/pages/speaker/[slug].astro

@@ -1,4 +1,5 @@
 ---
+import fs from "node:fs";
 import { getCollection, getEntries } from "astro:content";
 import Layout from "@layouts/Layout.astro";
 import Prose from "@ui/Prose.astro";
@@ -20,6 +21,22 @@ const { entry } = Astro.props;
 
 const sessions = await getEntries(entry.data.submissions);
 
+// Social cards generated by scripts/download_social_speakers.cjs;
+// multi-session speakers have one card per session, suffixed with the
+// session code (social-<slug>-<CODE>.png), single-session speakers just
+// social-<slug>.png.
+const CARDS_DIR = "public/media/speakers";
+const cardFiles = fs.existsSync(CARDS_DIR) ? fs.readdirSync(CARDS_DIR) : [];
+const speakerCards = cardFiles
+  .filter(
+    (f) =>
+      f === `social-${entry.id}.png` ||
+      new RegExp(`^social-${entry.id}-[A-Z0-9]+\\.png$`).test(f),
+  )
+  .sort()
+  .map((f) => `/media/speakers/${f}`);
+const socialCard = speakerCards[0];
+
 function isUrl(str: string): boolean {
   str = ensureHttps(str);
   const regex = /^(https?:\/\/)?([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,6})([\/\w@.-]*)$/;
@@ -83,7 +100,11 @@ function getGitHosting(url: string): string | undefined {
 }
 ---
 
-<Layout title={entry.data.name} description={`Profile of ${entry.data.name}`}>
+<Layout
+  title={entry.data.name}
+  description={`Profile of ${entry.data.name}`}
+  image={socialCard}
+>
   <Section2 variant="dark" id="speaker-page">
     <Title id="speaker" as="h1">{entry.data.name}</Title>
 
@@ -268,6 +289,26 @@ function getGitHosting(url: string): string | undefined {
         ))
       }
     </ul>
+
+    {
+      speakerCards.length > 0 && (
+        <p class="mb-4 text-xl">
+          <span class="font-bold">
+            Social media card{speakerCards.length > 1 ? "s" : ""}:
+          </span>
+          {speakerCards.map((card, index) => (
+            <a
+              class="text-white/80 hover:text-accent underline ml-2"
+              href={card}
+              target="_blank"
+              set:text={
+                speakerCards.length > 1 ? `Card ${index + 1}` : "Download"
+              }
+            />
+          ))}
+        </p>
+      )
+    }
   </Section2>
 </Layout>