Generate content social images

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: eef8b9b2-19e9-4014-80c0-1afcf2d4e9ff

Author: michaeljolley

src/lib/social-images.ts

@@ -0,0 +1,68 @@
+const CLOUDINARY_BASE = 'https://res.cloudinary.com/dk3rdh3yo/image/upload';
+const BACKGROUND_COUNT = 6;
+
+export interface ContentSocialImage {
+  key: string;
+  title: string;
+  topics: string[];
+}
+
+function encodeText(value: string): string {
+  return encodeURIComponent(value.toLocaleUpperCase('en-US')).replace(
+    /[!'()*]/g,
+    (character) => `%${character.charCodeAt(0).toString(16).toUpperCase()}`
+  );
+}
+
+export function splitSocialTitle(title: string): { main: string; ending: string } {
+  const normalized = title.trim().replace(/\s+/g, ' ');
+  if (!normalized) throw new Error('A social image title cannot be empty.');
+
+  const words = normalized.split(' ');
+  const endingLength = Math.min(5, Math.max(1, Math.ceil(words.length * 0.4)));
+
+  return {
+    main: words.slice(0, -endingLength).join(' ') || normalized,
+    ending: words.slice(-endingLength).join(' ')
+  };
+}
+
+export function buildContentSocialImage(
+  content: Omit<ContentSocialImage, 'key'>,
+  background: number
+): string {
+  if (!Number.isInteger(background) || background < 1 || background > BACKGROUND_COUNT) {
+    throw new RangeError(`Social image background must be between 1 and ${BACKGROUND_COUNT}.`);
+  }
+
+  const topics = [...new Set(content.topics.map((topic) => topic.trim()).filter(Boolean))];
+  if (!topics.length) throw new Error('A social image needs at least one topic.');
+
+  const title = splitSocialTitle(content.title);
+  const topicLayer =
+    `co_%23e83a47,l_text:Fira%20Mono_20:${encodeText(topics.join(' | '))}` +
+    '/fl_layer_apply,g_north_west,x_60,y_60';
+  const titleLayer =
+    `w_630,c_fit,co_white,b_rgb:00000080,l_text:Archivo%20Black_60_line_spacing_-20:${encodeText(title.main)}` +
+    '/fl_layer_apply,g_south_west,x_60,y_180';
+  const endingLayer =
+    `bo_15px_solid_%23e83a47,b_%23e83a47,co_%23000000,l_text:Archivo%20Black_32:${encodeText(title.ending)},c_fit,w_600,h_50` +
+    '/fl_layer_apply,g_south_west,x_60,y_100';
+
+  return `${CLOUDINARY_BASE}/${topicLayer}/${titleLayer}/${endingLayer}/v1/ograph/ograph_${background}.png`;
+}
+
+export function assignContentSocialImages(
+  content: readonly ContentSocialImage[]
+): Map<string, string> {
+  const ordered = [...content].sort((left, right) =>
+    left.key < right.key ? -1 : left.key > right.key ? 1 : 0
+  );
+
+  return new Map(
+    ordered.map((item, index) => [
+      item.key,
+      buildContentSocialImage(item, (index % BACKGROUND_COUNT) + 1)
+    ])
+  );
+}

src/pages/[topic]/[slug].astro

@@ -8,19 +8,41 @@ import ShareMenu from '../../components/ShareMenu.astro';
 import { topicBySlug } from '../../config/site';
 import { isVideoKind, itemKindLabel, pagedItems, type Item } from '../../lib/content';
 import { bakedLike } from '../../lib/likes';
+import { assignContentSocialImages } from '../../lib/social-images';
 import { videoTranscripts } from '../../lib/video-transcripts';
 
 export async function getStaticPaths() {
   const [items, blog] = await Promise.all([pagedItems(), getCollection('blog')]);
   const posts = new Map(blog.map((post) => [post.id, post]));
-  return items.map((item) => ({
-    params: { topic: item.topic, slug: item.slug },
-    props: { item, post: item.kind === 'article' ? posts.get(item.key.slice(5)) : undefined }
-  }));
+  const socialImages = assignContentSocialImages(
+    items.map((item) => ({
+      key: item.key,
+      title: item.title,
+      topics: [item.topic, ...item.alsoFiled].map((slug) => {
+        const topic = topicBySlug(slug);
+        if (!topic) throw new Error(`No configured topic for "${slug}" on ${item.key}.`);
+        return topic.title;
+      })
+    }))
+  );
+
+  return items.map((item) => {
+    const socialImage = socialImages.get(item.key);
+    if (!socialImage) throw new Error(`No social image generated for ${item.key}.`);
+
+    return {
+      params: { topic: item.topic, slug: item.slug },
+      props: {
+        item,
+        socialImage,
+        post: item.kind === 'article' ? posts.get(item.key.slice(5)) : undefined
+      }
+    };
+  });
 }
 
 type Post = Awaited<ReturnType<typeof getCollection<'blog'>>>[number];
-const { item, post } = Astro.props as { item: Item; post?: Post };
+const { item, post, socialImage } = Astro.props as { item: Item; post?: Post; socialImage: string };
 const pageUrl = item.url!;
 const topic = topicBySlug(item.topic)!;
 const Content = post ? (await render(post)).Content : null;
@@ -69,7 +91,7 @@ const likes = await bakedLike('content', item.key);
   title={item.title}
   description={item.description || `${itemKindLabel(item.kind)} about ${topic.title}.`}
   active={video ? 'videos' : 'articles'}
-  image={item.thumbnail ?? undefined}
+  image={socialImage}
   noindex={item.draft}
   canonical={post?.data.canonicalUrl}
 >

tests/social-images.test.mjs

@@ -2,6 +2,11 @@ import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import fs from 'node:fs';
 import path from 'node:path';
+import {
+  assignContentSocialImages,
+  buildContentSocialImage,
+  splitSocialTitle
+} from '../src/lib/social-images.ts';
 
 const root = process.cwd();
 const read = (...parts) => fs.readFileSync(path.join(root, ...parts), 'utf8');
@@ -10,6 +15,7 @@ const config = read('src', 'config', 'site.ts');
 const base = read('src', 'layouts', 'Base.astro');
 const home = read('src', 'pages', 'index.astro');
 const about = read('src', 'pages', 'about.astro');
+const detail = read('src', 'pages', '[topic]', '[slug].astro');
 
 test('page groups use their intended social images', () => {
   assert.match(config, /home: 'https:\/\/res\.cloudinary\.com\/.+\/ograph\/home_[^']+\.png'/);
@@ -26,3 +32,51 @@ test('Open Graph and Twitter publish the same large image', () => {
   assert.match(base, /name="twitter:image" content=\{socialImage\}/);
   assert.match(base, /name="twitter:image:alt" content=\{pageTitle\}/);
 });
+
+test('content pages use encoded Cloudinary title and topic layers', () => {
+  const image = buildContentSocialImage(
+    {
+      title: 'Five DI Anti-Patterns Haunting .NET Apps and how to fix Them',
+      topics: ['Dependency Injection', 'C#']
+    },
+    3
+  );
+
+  assert.equal(
+    image,
+    'https://res.cloudinary.com/dk3rdh3yo/image/upload/' +
+      'co_%23e83a47,l_text:Fira%20Mono_20:DEPENDENCY%20INJECTION%20%7C%20C%23/' +
+      'fl_layer_apply,g_north_west,x_60,y_60/' +
+      'w_630,c_fit,co_white,b_rgb:00000080,l_text:Archivo%20Black_60_line_spacing_-20:' +
+      'FIVE%20DI%20ANTI-PATTERNS%20HAUNTING%20.NET%20APPS/' +
+      'fl_layer_apply,g_south_west,x_60,y_180/' +
+      'bo_15px_solid_%23e83a47,b_%23e83a47,co_%23000000,l_text:Archivo%20Black_32:' +
+      'AND%20HOW%20TO%20FIX%20THEM,c_fit,w_600,h_50/' +
+      'fl_layer_apply,g_south_west,x_60,y_100/v1/ograph/ograph_3.png'
+  );
+  assert.deepEqual(splitSocialTitle('A short title'), {
+    main: 'A',
+    ending: 'short title'
+  });
+  assert.match(detail, /image=\{socialImage\}/);
+  assert.doesNotMatch(detail, /image=\{item\.thumbnail/);
+});
+
+test('content pages distribute backgrounds evenly in stable key order', () => {
+  const content = Array.from({ length: 14 }, (_, index) => ({
+    key: `content:${String(index).padStart(2, '0')}`,
+    title: `Content title number ${index}`,
+    topics: ['C#']
+  })).reverse();
+  const images = assignContentSocialImages(content);
+  const counts = Array.from({ length: 6 }, () => 0);
+
+  for (const image of images.values()) {
+    const background = Number(image.match(/ograph_(\d)\.png$/)?.[1]);
+    counts[background - 1] += 1;
+  }
+
+  assert.deepEqual(counts, [3, 3, 2, 2, 2, 2]);
+  assert.match(images.get('content:00'), /ograph_1\.png$/);
+  assert.match(images.get('content:05'), /ograph_6\.png$/);
+});