Add rotating social media card image for web site

Author: marcprux

public/img/lockdowns/android_lockdown_banner0.png

@@ -1,6 +1,7 @@
 ---
 import { languages, markdownify, isRtl } from '../i18n/config';
 import ThemeToggle from '../components/ThemeToggle.astro';
+import { glob } from 'node:fs/promises';
 
 interface Props {
   title: string;
@@ -15,6 +16,15 @@ const {
 } = Astro.props;
 
 const dir = isRtl(lang) ? "rtl" : "ltr";
+
+// Pick a random lockdown image at build time for social media previews
+const lockdownImages: string[] = [];
+for await (const entry of glob('public/img/lockdowns/*.{png,jpg,jpeg,webp}')) {
+  lockdownImages.push(entry.replace(/^public/, ''));
+}
+const ogImage = lockdownImages.length > 0
+  ? `https://keepandroidopen.org${lockdownImages[Math.floor(Math.random() * lockdownImages.length)]}`
+  : 'https://keepandroidopen.org/img/keepandroidopen.png';
 ---
 <!DOCTYPE html>
 <html lang={lang} dir={dir}>
@@ -28,11 +38,11 @@ const dir = isRtl(lang) ? "rtl" : "ltr";
   <meta name="description" content={description}>
   <meta property="og:title" content={title}>
   <meta property="og:description" content={description}>
-  <meta property="og:image" content="https://keepandroidopen.org/img/keepandroidopen.png">
+  <meta property="og:image" content={ogImage}>
   <meta property="og:type" content="website">
   <meta name="twitter:card" content="summary">
   <meta name="twitter:title" content={title}>
-  <meta name="twitter:image" content="https://keepandroidopen.org/img/keepandroidopen.png">
+  <meta name="twitter:image" content={ogImage}>
   <link rel="me" href="https://techhub.social/@keepandroidopen">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
 

public/img/lockdowns/android_lockdown_banner1.png

@@ -30,21 +30,21 @@ function logoPath(url: string): string {
 // Build compose/draft URLs for each social platform
 function xDraftUrl(orgName: string, xUrl: string): string {
   const handle = '@' + xUrl.split('/').pop();
-  const text = `Thank you ${handle} for supporting Keep @Android Open @AlteredDeal #KeepAndroidOpen`;
+  const text = `Thank you ${orgName} (${handle}) for supporting Keep @Android Open @AlteredDeal #KeepAndroidOpen`;
   return `https://x.com/intent/tweet?text=${encodeURIComponent(text)}`;
 }
 
 function bskyDraftUrl(orgName: string, bskyUrl: string): string {
   const handle = '@' + bskyUrl.split('/').pop();
-  const text = `Thank you ${handle} for supporting Keep Android Open @keepandroidopen.bsky.social #KeepAndroidOpen`;
+  const text = `Thank you ${orgName} (${handle}) for supporting Keep Android Open @keepandroidopen.bsky.social #KeepAndroidOpen`;
   return `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`;
 }
 
 function mastodonDraftUrl(orgName: string, mastodonUrl: string): string {
   const url = new URL(mastodonUrl);
   const user = url.pathname.split('/').pop();
   const handle = `${user}@${url.hostname}`;
-  const text = `Thank you ${handle} for supporting Keep Android Open at https://keepandroidopen.org/open-letter/#signatories @keepandroidopen@techhub.social #KeepAndroidOpen`;
+  const text = `Thank you ${orgName} (${handle}) for supporting Keep Android Open at https://keepandroidopen.org/open-letter/#signatories @keepandroidopen@techhub.social #KeepAndroidOpen`;
   return `https://share.joinmastodon.org/?text=${encodeURIComponent(text)}`;
 }