From 9a227fac710d5e07526923c2c904e43124ff73b4 Mon Sep 17 00:00:00 2001
From: Jade Ellis <jade@ellis.link>
Date: Tue, 23 Jul 2024 22:54:46 +0100
Subject: [PATCH] Optimise social media images

---
 .../src/routes/blog/[...date]/[slug]/+page.svelte     | 11 +++++++----
 packages/website/src/routes/blog/image/+server.ts     | 10 ++++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/website/src/routes/blog/[...date]/[slug]/+page.svelte b/packages/website/src/routes/blog/[...date]/[slug]/+page.svelte
index d136378c..073df14b 100644
--- a/packages/website/src/routes/blog/[...date]/[slug]/+page.svelte
+++ b/packages/website/src/routes/blog/[...date]/[slug]/+page.svelte
@@ -12,10 +12,13 @@
     // }
     $: canonical = SITE_URL + "/blog/" + data.post.canonical;
 
-    function calcOgURL(slug: string, date: string, width?: number): URL {
+    function calcOgURL(slug: string, date: string, ratio?: number, width?: number): URL {
         let url = new URL(SITE_URL + "/blog/image");
         url.searchParams.set("slug", slug);
         url.searchParams.set("date", date);
+        if (ratio) {
+            url.searchParams.set("ratio", ratio.toString());
+        }
         if (width) {
             url.searchParams.set("width", width.toString());
         }
@@ -63,7 +66,7 @@
     {#if defaultAuthor?.fediverse}
         <meta name="fediverse:creator" content={defaultAuthor?.fediverse} />
     {/if}
-    <meta property="og:image" content={calcOgURL(data.post.slug, data.post.date, 1200).toString()} />
+    <meta property="og:image" content={calcOgURL(data.post.slug, data.post.date, 630/1200, 1200).toString()} />
     <meta property="og:image:width" content={(1200).toString()} />
     <meta property="og:image:height" content={(1200 / 2).toString()} />
     <meta property="og:image:type" content="image/png" />
@@ -74,11 +77,11 @@
     description={data.post.description}
     {canonical}
     twitter={{
-        card: "summary",
+        card: "summary_large_image",
         // site: "@primalmovement",
         title: data.post.title,
         description: data.post.description,
-        // image: data.post.image
+        image: calcOgURL(data.post.slug, data.post.date, 1/2, 1200).toString()}
     }}
     openGraph={{
         title: data.post.title,
diff --git a/packages/website/src/routes/blog/image/+server.ts b/packages/website/src/routes/blog/image/+server.ts
index 118c2673..f666d867 100644
--- a/packages/website/src/routes/blog/image/+server.ts
+++ b/packages/website/src/routes/blog/image/+server.ts
@@ -19,8 +19,9 @@ const fontData: ArrayBuffer = await fontFile.arrayBuffer();
 
 // const height = 630;
 // const width = 1200;
-const defaultHeight = 400;
 const defaultWidth = 800;
+const defaultRatio = 0.5
+// const defaultWidth = 800;
 
 const h = (type: any, props: any) => { return { type, props } }
 
@@ -32,10 +33,11 @@ export async function GET({ url }) {
         throw error(404, 'Post not found (bad date)')
     }
     const width = Number(url.searchParams.get('width'))
-    if (width > 10000) {
+    const ratio = Number(url.searchParams.get('ratio'))
+    if (width > 10000 || ratio > 50) {
         throw error(400, 'Image too big')
     }
-    if (!cache.has(slug + "/" + dateParts?.join("-") + "/" + width)) {
+    if (!cache.has(slug + "/" + dateParts?.join("-") + "/" + width + "/" + ratio)) {
 
         // let start = new Date(dateParts[0] || 1, dateParts[1] || 0, dateParts[2] || 0);
         // // @ts-ignore
@@ -110,7 +112,7 @@ export async function GET({ url }) {
                     style: 'normal'
                 }
             ],
-            height: defaultHeight,
+            height: defaultWidth * (ratio || defaultRatio),
             width: defaultWidth,
         });