integration-completion: og-image rendering server integrated

apps/jonogon-rendering/src/index.mts

@@ -226,7 +226,9 @@ export default {
 			const encodedSymmetricKeyString = encoder.encode(env.SYMMETRIC_KEY);
 
 			const signatureData = Buffer.from(captureConfig.data.sign, 'base64');
-			const signingKey = await crypto.subtle.importKey('raw', encodedSymmetricKeyString, { name: 'HMAC', hash: 'MD5' }, false, ['verify']);
+			const signingKey = await crypto.subtle.importKey('raw', encodedSymmetricKeyString, { name: 'HMAC', hash: 'SHA-256' }, false, [
+				'verify',
+			]);
 
 			const verified = await crypto.subtle.verify('HMAC', signingKey, signatureData, encoder.encode(durableObjectKeyString));
 

apps/jonogon-web-next/env.d.ts

@@ -1,5 +1,6 @@
-// Generated by Wrangler
+// Generated by Wrangler on Tue Nov 05 2024 15:28:38 GMT+0000 (Coordinated Universal Time)
 // by running `wrangler types --env-interface CloudflareEnv env.d.ts`
 
 interface CloudflareEnv {
+	RENDERING_SYMMETRIC_KEY: string;
 }

apps/jonogon-web-next/src/app/(interactive)/petitions/[id]/page.tsx

@@ -1,12 +1,52 @@
 import {trpcVanilla} from '@/trpc/server';
 import Petition from '@/app/(interactive)/petitions/[id]/_page';
 import {generateDescription} from './_helpers';
-import type {Metadata} from 'next';
+import {getRequestContext} from '@cloudflare/next-on-pages';
 
 export const runtime = 'edge';
 
+const encoder = new TextEncoder();
+
 export async function generateMetadata({params}: {params: {id: string}}) {
+    const ctx = getRequestContext();
+
+    const encodedSymmetricKeyString = encoder.encode(
+        ctx.env.RENDERING_SYMMETRIC_KEY,
+    );
+
+    const signingKey = await crypto.subtle.importKey(
+        'raw',
+        encodedSymmetricKeyString,
+        {name: 'HMAC', hash: 'SHA-256'},
+        false,
+        ['sign'],
+    );
+
     const response = await trpcVanilla.petitions.get.query({id: params.id});
+
+    const key = `${response.data.approved_at}`;
+    const durableObjectKeyString = `https://jonogon.org/petitions/${params.id}/og-image;${key};1200;630`;
+
+    const signature = await crypto.subtle.sign(
+        'HMAC',
+        signingKey,
+        encoder.encode(durableObjectKeyString),
+    );
+
+    const signatureBase64 = Buffer.from(signature).toString('base64');
+
+    const imageURL = new URL(`https://render.jonogon.org`);
+
+    imageURL.searchParams.set(
+        'url',
+        `https://jonogon.org/petitions/${params.id}/og-image`,
+    );
+
+    imageURL.searchParams.set('key', key);
+    imageURL.searchParams.set('w', `1200`);
+    imageURL.searchParams.set('h', `630`);
+    imageURL.searchParams.set('sign', signatureBase64);
+
     const {
         id,
         title,
@@ -30,19 +70,16 @@ export async function generateMetadata({params}: {params: {id: string}}) {
     const imageAttachments = attachments.filter(
         (attachment) => attachment.type === 'image',
     );
-    const metaImage = imageAttachments.length
-        ? [
-              {
-                  url: `${imageAttachments[0].thumbnail}`.replace(
-                      '$CORE_HOSTNAME',
-                      'localhost',
-                  ),
-                  width: 1200,
-                  height: 630,
-                  alt: originalTitle,
-              },
-          ]
-        : [];
+
+    const metaImage = [
+        {
+            url: imageURL.toString(),
+            width: 1200,
+            height: 630,
+            alt: originalTitle,
+        },
+    ];
+
     return {
         title: siteTitle,
         description: originalDescription,