Switch over to using og:image generating service

Using patch-package to apply this PR until it is merged & released withastro/astro#9820
third774 · Mar 11, 2024 · a33c64b · a33c64b
1 parent 282baee
commit a33c64b
Show file tree

Hide file tree

Showing 9 changed files with 827 additions and 1,809 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
 		"start": "astro dev",
 		"build": "astro build",
 		"newpost": "node ./scripts/newpost.js",
+		"postinstall": "patch-package",
 		"preview": "wrangler pages dev ./dist",
 		"astro": "astro",
 		"prettier": "prettier --write .",
@@ -22,21 +23,21 @@
 		"typecheck:watch": "tsc --noEmit --watch"
 	},
 	"dependencies": {
-		"@astrojs/cloudflare": "^9.0.2",
-		"@astrojs/mdx": "^2.0.5",
-		"@astrojs/rss": "^4.0.2",
-		"@astrojs/sitemap": "^3.0.5",
+		"@astrojs/cloudflare": "^9.1.0",
+		"@astrojs/mdx": "^2.1.1",
+		"@astrojs/rss": "^4.0.5",
+		"@astrojs/sitemap": "^3.1.1",
 		"@astrojs/tailwind": "^5.1.0",
 		"@daviddarnes/share-button": "^1.1.2",
 		"@evilmartians/harmony": "^1.2.0",
 		"@types/sanitize-html": "^2.9.5",
-		"astro": "^4.2.0",
+		"astro": "^4.4.15",
 		"astro-robots-txt": "^1.0.0",
 		"clsx": "^2.1.0",
 		"drizzle-orm": "^0.29.4",
 		"marked": "^11.1.1",
 		"mdast-util-to-string": "^4.0.0",
-		"puppeteer": "^21.7.0",
+		"patch-package": "^8.0.0",
 		"reading-time": "^1.5.0",
 		"sanitize-html": "^2.11.0",
 		"tailwind-merge": "^2.2.0",

diff --git a/patches/astro+4.4.15.patch b/patches/astro+4.4.15.patch
@@ -0,0 +1,29 @@
+diff --git a/node_modules/astro/dist/runtime/server/render/util.js b/node_modules/astro/dist/runtime/server/render/util.js
+index 44fe49e..a55817b 100644
+--- a/node_modules/astro/dist/runtime/server/render/util.js
++++ b/node_modules/astro/dist/runtime/server/render/util.js
+@@ -70,6 +70,9 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
+   if (key === "className") {
+     return markHTMLString(` class="${toAttributeString(value, shouldEscape)}"`);
+   }
++  if (typeof value === 'string' && value.includes('&') && urlCanParse(value)) {
++		return markHTMLString(` ${key}="${toAttributeString(value, false)}"`);
++	}
+   if (value === true && (key.startsWith("data-") || htmlBooleanAttributes.test(key))) {
+     return markHTMLString(` ${key}`);
+   } else {
+@@ -131,6 +134,14 @@ function promiseWithResolvers() {
+     reject
+   };
+ }
++function urlCanParse(url) {
++	try {
++		new URL(url, 'http://example.com');
++		return true;
++	} catch {
++		return false;
++	}
++}
+ export {
+   addAttribute,
+   defineScriptVars,
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -9,7 +9,16 @@ export interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = "/open-graph/og-image.png" } = Astro.props;
+let { title, description, image } = Astro.props;
+
+if (!image) {
+	const searchParams = new URLSearchParams();
+	searchParams.set("title", title);
+	if (description) {
+		searchParams.set("description", description);
+	}
+	image = "https://og-images.kevinkipp.com/" + "?" + searchParams.toString();
+}
 ---
 
 <head>
@@ -20,8 +29,6 @@ const { title, description, image = "/open-graph/og-image.png" } = Astro.props;
 	<meta name="generator" content={Astro.generator} />
 	<meta name="author" content="Kevin Kipp" />
 
-	<!-- Font preloads -->
-
 	<!-- Canonical URL -->
 	<link rel="canonical" href={canonicalURL} />
 
@@ -38,26 +45,17 @@ const { title, description, image = "/open-graph/og-image.png" } = Astro.props;
 	<meta property="og:site_name" content="Kevin Kipp" />
 	<meta property="og:title" content={title} />
 	{description && <meta property="og:description" content={description} />}
-	{
-		image && (
-			<>
-				<meta property="og:image" content={new URL(image, Astro.url)} />
-				<meta property="og:image:width" content="1200" />
-				<meta property="og:image:height" content="630" />
-			</>
-		)
-	}
+
+	<meta property="og:image" content={image} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
 
 	<!-- Twitter -->
 	<meta property="twitter:card" content="summary_large_image" />
 	<meta property="twitter:url" content={Astro.url} />
 	<meta property="twitter:title" content={title} />
 	{description && <meta property="twitter:description" content={description} />}
-	{
-		image && (
-			<meta property="twitter:image" content={new URL(image, Astro.url)} />
-		)
-	}
+	<meta property="twitter:image" content={image} />
 
 	<link
 		rel="alternate"

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -23,11 +23,7 @@ const { title, description, published, updatedDate, heroImage, heroAlt } = data;
 ---
 
 <Html>
-	<BaseHead
-		title={title}
-		description={description}
-		image={`/open-graph${Astro.url.pathname}og-image.png`}
-	/>
+	<BaseHead title={title} description={description} />
 	<Body>
 		<Header />
 		<Main>

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -2,7 +2,6 @@
 import { type CollectionEntry } from "astro:content";
 import { getPublishedBlogPosts } from "../../content/blog/_getPublishedBlogPosts";
 import BlogPost from "../../layouts/BlogPost.astro";
-import { generateOgImage } from "../../utils/ogImages/generateOgImage";
 
 interface Props {
 	post: CollectionEntry<"blog">;
@@ -18,11 +17,6 @@ export async function getStaticPaths() {
 
 const { post } = Astro.props;
 const { Content, remarkPluginFrontmatter } = await post.render();
-await generateOgImage({
-	title: post.data.title,
-	description: post.data.description,
-	pathname: Astro.url.pathname,
-});
 ---
 
 <BlogPost minutesRead={remarkPluginFrontmatter.minutesRead} post={post}>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -14,7 +14,6 @@ import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
 import { getPublishedBlogPosts } from "../content/blog/_getPublishedBlogPosts";
 import Html from "../layouts/Html.astro";
 import ColumnWrapper from "../components/ColumnWrapper.astro";
-import { generateOgImage } from "../utils/ogImages/generateOgImage";
 
 const { src } = await getImage({
 	src: profile,
@@ -26,12 +25,6 @@ const posts = await getPublishedBlogPosts().then(
 	// only show the first 5 posts
 	(posts) => posts.filter((_, index) => index < 10),
 );
-
-await generateOgImage({
-	title: "👋🏻 Heyo! I'm Kevin.",
-	description: "UI Engineer based in Austin, TX.",
-	pathname: "/",
-});
 ---
 
 <Html>

diff --git a/src/utils/ogImages/generateOgImage.ts b/src/utils/ogImages/generateOgImage.ts
diff --git a/src/utils/ogImages/template.ts b/src/utils/ogImages/template.ts