Add prefix to meta tags to fix linked-in OG images

src/app.html

@@ -4,13 +4,6 @@
 		<meta charset="utf-8" />
 		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="canonical" href="https://syntax.fm" />
-
-		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-		<link rel="manifest" href="/site.webmanifest" />
-
 		<script src="/popover.js"></script>
 		<script defer data-domain="syntax.fm" src="https://plausible.io/js/script.js"></script>
 

src/hooks.server.ts

@@ -22,7 +22,6 @@ export const redis =
 				token: UPSPLASH_TOKEN
 		  })
 		: null;
-
 console.log(`🤓 Cache Status... ${cache_status}`);
 
 // import { ADMIN_LOGIN } from '$env/static/private';

src/lib/meta/Meta.svelte

@@ -4,18 +4,25 @@
 
 <svelte:head>
 	<title>{$page.data.meta.title}</title>
+	<meta name="image" property="og:image" content={$page.data.meta.image} />
 	<meta name="theme-color" content="#000000" />
+	{#if $page.data.meta.canonical}
+		<link rel="canonical" href={$page.data.meta.canonical} />
+	{/if}
 	<!-- OG -->
 	<meta property="og:type" content="website" />
 	<meta property="og:title" content={$page.data.meta.title} />
 	<meta property="og:description" content={$page.data.meta.description} />
+	{#if $page.data.meta.canonical}
+		<meta property="og:url" content={$page.data.meta.canonical} />
+	{/if}
 	<meta name="description" content={$page.data.meta.description} />
-	<meta property="og:image" content={$page.data.meta.image} />
-	<meta property="og:image:secure_url" content={$page.data.meta.image} />
+
+	<!-- <meta property="og:image:secure_url" content={$page.data.meta.image} /> -->
 	<!-- Twitter -->
 	<meta name="twitter:card" content="summary_large_image" />
 	<meta name="twitter:title" content={$page.data.meta.title} />
 	<meta name="twitter:site" content="@syntaxfm" />
 	<meta name="twitter:description" content={$page.data.meta.description} />
-	<meta name="twitter:image" content={`${$page.data.meta.image}?v=2`} />
+	<meta name="twitter:image" content={$page.data.meta.image} />
 </svelte:head>

src/routes/(blank)/og/[show_number].jpg/+server.ts

@@ -1,8 +1,11 @@
 import { dev } from '$app/environment';
 import chrome from '@sparticuz/chromium';
 import puppeteer, { Browser } from 'puppeteer-core';
+import { redis } from '../../../../hooks.server.js';
 const exePath = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';
 
+const cache = new Map<string, string>();
+
 async function getOptions() {
 	if (dev) {
 		return {
@@ -45,23 +48,40 @@ export const config = {
 	maxDuration: 30 // vercel timeout 30s
 };
 
+const headers = {
+	'Content-Type': 'image/jpeg',
+	// cache for 10 minutes, allow stale to be served for up for another 10 mins
+	'cache-control': 'public s-max-age=600, stale-while-revalidate=600'
+};
+
 export async function GET({ url, params }) {
 	const start = performance.now();
 	const qs = new URLSearchParams(url.search);
 	// const show = qs.get('show');
 	const show = params.show_number;
 
+	// Check if we have a cached version
+	const cache = redis ? await redis.get(`show-og-${show}`) : null;
+	if (cache) {
+		console.log(`serving cached version of ${show}`, cache);
+		return new Response(Buffer.from(cache, 'base64'), {
+			status: 200,
+			headers
+		});
+	}
 	console.time(`Taking screenshot of ${show}`);
 	const photoBuffer = await getScreenshot(`${url.origin}/og/${show}`);
 	console.timeEnd(`Taking screenshot of ${show}`);
 	const end = performance.now();
 	console.log(`time to render ${show}:`, (end - start) / 1000);
+	// Store buffer in cache
+	console.log(`caching ${show} in redis`);
+	redis?.set(`show-og-${show}`, photoBuffer.toString('base64'), {
+		ex: 60 * 60 * 5
+	});
+
 	return new Response(photoBuffer, {
 		status: 200,
-		headers: {
-			'Content-Type': 'image/jpeg',
-			// cache for 10 minutes, allow stale to be served for up for another 10 mins
-			'cache-control': 'public s-max-age=600, stale-while-revalidate=600'
-		}
+		headers
 	});
 }

src/routes/(site)/+layout.svelte

@@ -38,7 +38,7 @@
 <PageLoadingIndicator />
 
 <div class={'theme-' + ($theme || user_theme) + ' theme-wrapper'}>
-	<UnderConstruction />
+	<!-- <UnderConstruction /> -->
 	{#if $page.url.pathname !== '/'}
 		<Header />
 	{/if}

src/routes/(site)/show/[show_number]/[slug]/+layout.server.ts

@@ -8,6 +8,7 @@ import highlight from 'rehype-highlight';
 import { error } from '@sveltejs/kit';
 import { cache_mang } from '$utilities/cache_mang';
 import type { Prisma, Show } from '@prisma/client';
+import get_show_path from '$utilities/slug.ts';
 
 export const load = async function ({ params, locals, url }) {
 	const { show_number } = params;
@@ -73,7 +74,9 @@ export const load = async function ({ params, locals, url }) {
 		} as ShowTemp & Show,
 		meta: {
 			title: show?.title,
-			image: `https://${url.host}/og/${show_number}.jpg`,
+			image: `${url.protocol}//${url.host}/og/${show_number}.jpg`,
+			url: `${url.protocol}//${url.host}${get_show_path(show)}`,
+			canonical: `${url.protocol}//${url.host}${get_show_path(show)}`,
 			description: show?.aiShowNote?.description ?? show?.show_notes?.match(/(.*?)(?=## )/s)?.[0]
 		}
 	};