Post-Next 15 upgrade fixes (#1066)

* Include fonts

* Upgrade og package

* Fix og metadata for changelog

* Try new includes pattern

* Use font CDN for Metropolis

* Fix RSS. Add changelog

* Add another changelog entry backfill

app/changelog/[slug]/page.tsx

@@ -1,18 +1,46 @@
+import type { Metadata, ResolvingMetadata } from "next";
 import Link from "next/link";
+
+import { generateMetadata as generateOgMetadata } from "src/utils/social";
 import { SectionProvider } from "shared/Docs/SectionProvider";
 import { formatDate } from "src/utils/date";
 
-export default async function Page({
-  params,
-}: {
+type Props = {
   params: Promise<{ slug: string }>;
-}) {
-  const slug = (await params).slug;
+};
+
+export async function loadPost(slug: string) {
   const { default: Post, getStaticProps } = await import(
     `content/changelog/${slug}.mdx`
   );
   const metadata = getStaticProps().props;
+  if (!metadata.date) {
+    const filenameDate = slug.match(/\d\d\d\d-\d\d-\d\d/)?.[0];
+    if (filenameDate) {
+      metadata.date = filenameDate;
+    }
+  }
+  return {
+    Post,
+    metadata,
+  };
+}
 
+export async function generateMetadata(
+  { params }: Props,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const slug = (await params).slug;
+  const { metadata } = await loadPost(slug);
+  return generateOgMetadata({
+    title: metadata.title,
+    description: metadata.description,
+  });
+}
+
+export default async function Page({ params }: Props) {
+  const slug = (await params).slug;
+  const { Post, metadata } = await loadPost(slug);
   return (
     <div className="max-w-6xl mx-auto mt-16 mb-32 px-6 lg:px-12">
       <SectionProvider sections={[]}>

content/changelog/2025-01-28-archive-events.mdx

@@ -0,0 +1,5 @@
+export const title = "Archive events";
+
+You can now archive events in your Inngest environment. This is useful if you want to hide old events that you no longer use.
+
+Archiving events does not prevent them from being received, they only hide them from your dashboard. If an archived event is received, it will be unarchived automatically.

next.config.mjs

@@ -143,6 +143,9 @@ const nextConfig = {
   experimental: {
     scrollRestoration: true,
   },
+  outputFileTracingIncludes: {
+    "/api/og": ["./public/assets/fonts/**"],
+  },
   outputFileTracingExcludes: {
     "*": ["./.git/*", "./.next/*", "./public/**/*"],
   },

package.json

@@ -39,7 +39,7 @@
     "@rive-app/react-canvas": "4.4.0",
     "@sindresorhus/slugify": "2.1.1",
     "@types/mdx": "2.0.13",
-    "@vercel/og": "0.0.22",
+    "@vercel/og": "0.6.5",
     "acorn": "8.14.0",
     "algoliasearch": "4.14.3",
     "clsx": "1.2.1",

pages/api/og.tsx

@@ -13,9 +13,36 @@ const font = fetch(
   )
 ).then((res) => res.arrayBuffer());
 
+async function loadGoogleFont(font: string, text: string) {
+  const url = `https://fonts.googleapis.com/css2?family=${font}&text=${encodeURIComponent(
+    text
+  )}`;
+  const css = await (await fetch(url)).text();
+  const resource = css.match(
+    /src: url\((.+)\) format\('(opentype|truetype)'\)/
+  );
+
+  if (resource) {
+    const response = await fetch(resource[1]);
+    if (response.status == 200) {
+      return await response.arrayBuffer();
+    }
+  }
+
+  throw new Error("failed to load font data");
+}
+
+async function loadInngestCDNFont(fontPath: string) {
+  const url = `https://fonts-cdn.inngest.com/${fontPath}`;
+  const response = await fetch(url);
+  if (response.status == 200) {
+    return await response.arrayBuffer();
+  }
+  throw new Error("failed to load font data");
+}
+
 export default async function handler(req: NextApiRequest) {
   try {
-    const fontData = await font;
     const { searchParams } = new URL(req.url || "");
 
     // ?title=<title>
@@ -26,6 +53,12 @@ export default async function handler(req: NextApiRequest) {
     const isLongTitle = (title || "").length > 40;
     const backgroundImageURL = `${process.env.NEXT_PUBLIC_HOST}/assets/open-graph/background-compressed.png`;
 
+    // const fontData = await font;
+    // const fontData = await loadGoogleFont("Inter", "Inngest");
+    const fontData = await loadInngestCDNFont(
+      "Metropolis/Metropolis-SemiBold.otf"
+    );
+
     return new ImageResponse(
       (
         <div
@@ -40,7 +73,7 @@ export default async function handler(req: NextApiRequest) {
             justifyContent: "flex-start",
             flexDirection: "column",
             flexWrap: "nowrap",
-            fontFamily: "Inter, sans-serif",
+            fontFamily: "Metropolis, sans-serif",
           }}
         >
           <Logo
@@ -72,7 +105,7 @@ export default async function handler(req: NextApiRequest) {
         height: 630,
         fonts: [
           {
-            name: "Inter",
+            name: "Metropolis",
             data: fontData,
             style: "normal",
             weight: 500,
@@ -81,7 +114,7 @@ export default async function handler(req: NextApiRequest) {
       }
     );
   } catch (e: any) {
-    console.log(`${e.message}`);
+    console.log(`Error generating OG image:`, e);
     return new Response(`Failed to generate the image`, {
       status: 500,
     });

pages/api/rss.xml.ts

@@ -3,11 +3,40 @@ import RSS from "rss";
 
 import { loadMarkdownFilesMetadata } from "../../utils/markdown";
 import { type MDXBlogPost } from "src/components/Blog";
+import { loadPost } from "app/changelog/[slug]/page";
 
 export default async (req: NextApiRequest, res: NextApiResponse<string>) => {
-  const posts = await loadMarkdownFilesMetadata<MDXBlogPost>(
-    "pages/blog/_posts"
+  const blogPosts = await loadMarkdownFilesMetadata<MDXBlogPost>(
+    "content/blog"
   );
+  const changelogPosts = await loadMarkdownFilesMetadata<MDXBlogPost>(
+    "content/changelog"
+  );
+
+  const blogPostsTransformed = blogPosts
+    .filter((post) => !post.hide)
+    .map((post) => ({
+      title: post.heading,
+      description: post.subtitle,
+      author: post.author,
+      date: post.date,
+      // Blog posts can just be redirects to customer stories
+      // they start with a leading slash
+      url: post.redirect
+        ? `${process.env.NEXT_PUBLIC_HOST}${post.redirect}`
+        : `${process.env.NEXT_PUBLIC_HOST}/blog/${post.slug}`,
+      categories: post.tags || [],
+    }));
+  const changelogPostsTransformed = [];
+  for (const post of changelogPosts) {
+    const { metadata } = await loadPost(post.slug);
+    changelogPostsTransformed.push({
+      title: metadata.title,
+      date: metadata.date,
+      url: `${process.env.NEXT_PUBLIC_HOST}/changelog/${post.slug}`,
+      categories: ["changelog"],
+    });
+  }
 
   const feed = new RSS({
     title: "Inngest Product & Engineering Blog",
@@ -19,16 +48,18 @@ export default async (req: NextApiRequest, res: NextApiResponse<string>) => {
     language: "en-us",
   });
 
+  const posts = [...blogPostsTransformed, ...changelogPostsTransformed];
+
   posts
-    .filter((post) => !post.hide)
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
     .forEach((post) => {
       feed.item({
-        title: post.heading,
-        description: post.subtitle,
+        title: post.title,
+        description: post.description,
         author: post.author,
         date: post.date,
-        url: `${process.env.NEXT_PUBLIC_HOST}/blog/${post.slug}`,
-        categories: post.tags || [],
+        url: post.url,
+        categories: post.categories,
       });
     });