Improve content gate

app/resources/access/[slug]/page.tsx

@@ -3,41 +3,60 @@ import fs from "fs";
 import matter from "gray-matter";
 
 import { loadMarkdownFilesMetadata } from "src/utils/markdown";
-import { type BlogPost } from "src/components/Blog";
+import type { BlogPost, MDXBlogPost } from "src/components/Blog";
 import Hero from "src/components/LandingPage/Hero";
 import NewsletterSignup from "src/components/NewsletterSignup";
 
-export const metadata: Metadata = {
-  // Prevent Google from indexing gated content
-  robots: "noindex",
+type Props = {
+  params: Promise<{ slug: string }>;
 };
 
-export async function generateStaticParams() {
-  const posts = await loadMarkdownFilesMetadata<BlogPost>("blog/_posts");
-  // const filteredPosts = posts.filter((p) => p?.featured !== false);
-
-  console.log("ok!", posts[0].slug);
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const slug = (await params).slug;
+  const data = await loadBlogPost(slug);
+  return {
+    title: data.heading,
+    description: data.subtitle,
+    openGraph: {
+      images: [`${process.env.NEXT_PUBLIC_HOST}${data.image}`],
+    },
+    // Prevent Google from indexing gated content
+    robots: "noindex",
+  };
+}
 
+export async function generateStaticParams() {
+  const posts = await loadMarkdownFilesMetadata<MDXBlogPost>("blog/_posts");
   return posts.map((post) => ({
     slug: post.slug,
   }));
 }
 
-export default async function Page({
-  params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
-  const slug = (await params).slug;
-
+async function loadBlogPost(slug: string) {
   let filePath = `./pages/blog/_posts/${slug}.md`;
   if (!fs.existsSync(filePath) && fs.existsSync(filePath + "x")) {
     filePath += "x";
   }
 
   const source = fs.readFileSync(filePath);
-  const { data } = matter(source);
-  const contentUrl = `/blog/${slug}`;
+  const { data, content } = matter(source);
+  const path = `/blog/${slug}`;
+
+  return {
+    ...data,
+    path,
+    content,
+  } as unknown as BlogPost & { path: string; content: string };
+}
+
+export default async function Page({ params }: Props) {
+  const slug = (await params).slug;
+  const data = await loadBlogPost(slug);
+  // Use the teaser or grab the first paragraph
+  const teaser = data.teaser ?? [
+    ...data.content.split("\n\n").slice(0, 1),
+    `Learn more about ${data.heading} in our guide today.`,
+  ];
 
   return (
     <div className="text-basis">
@@ -56,14 +75,16 @@ export default async function Page({
           id="get-access"
           className="max-w-xl mx-auto mt-4 scroll-mt-28 flex flex-col gap-6"
         >
-          {data.teaser?.map((p, idx) => (
-            <p className="text-lg md:text-xl">{p}</p>
+          {teaser?.map((p, idx) => (
+            <p className="text-lg md:text-lg" key={idx}>
+              {p}
+            </p>
           ))}
           <NewsletterSignup
             showHeader={false}
             buttonText="Get access"
             tags={[`gate-${slug}`]}
-            redirect={contentUrl}
+            redirect={data.path}
           />
         </div>
       </div>

components/Blog/index.ts

@@ -1,5 +1,14 @@
 import { type MDXFileMetadata } from "src/utils/markdown";
 
+// Slug -> Formatted title
+export const BLOG_CATEGORIES = {
+  "product-updates": "Product updates",
+  "company-news": "Company news",
+  engineering: "Engineering",
+} as const;
+type BlogCategory = keyof typeof BLOG_CATEGORIES;
+
+// Front-matter for blog posts
 export type BlogPost = {
   heading: string;
   subtitle: string;
@@ -8,12 +17,22 @@ export type BlogPost = {
   date: string;
   humanDate: string;
   tags?: string[];
+
+  // CTAs
+  floatingCTA?: boolean;
+  primaryCTA?: "sales" | "docs";
+
+  // When true, the post will be the highlighted post on the main feed
+  focus?: boolean;
+  // When hidden, the post will be available on at the URL, but not in any blog feed of RSS
   hide?: boolean;
-} & MDXFileMetadata;
+  // When featured is false, post will be hidden from main feed, but available on category pages
+  featured?: boolean;
+  // When included, the post will be included on the category feed
+  category: BlogCategory;
 
-// Slug -> Formatted title
-export const BLOG_CATEGORIES = {
-  "product-updates": "Product updates",
-  "company-news": "Company news",
-  engineering: "Engineering",
+  // Content gates
+  teaser?: string[];
 };
+
+export type MDXBlogPost = BlogPost & MDXFileMetadata;

components/LandingPage/Hero.tsx

@@ -29,7 +29,7 @@ export default function Hero({
         ></div>
       </div>
       <div className="relative z-10 max-w-4xl mx-auto py-28 px-4 sm:px-8 text-basis text-center text-balance">
-        <h1 className="text-5xl leading-tight md:text-6xl font-semibold bg-clip-text text-transparent bg-gradient-to-bl from-[rgb(var(--color-carbon-300))] to-[rgb(var(--color-carbon-50))]">
+        <h1 className="text-5xl leading-tight md:text-6xl md:leading-tight font-semibold bg-clip-text text-transparent bg-gradient-to-bl from-[rgb(var(--color-carbon-300))] to-[rgb(var(--color-carbon-50))]">
           {headline}
         </h1>
         <p className="mt-6 text-xl md:text-2xl text-subtle bg-clip-text text-transparent bg-gradient-to-bl from-[rgb(var(--color-carbon-300))] to-[rgba(var(--color-carbon-200)/0.8)]">

pages/api/rss.xml.ts

@@ -2,10 +2,10 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import RSS from "rss";
 
 import { loadMarkdownFilesMetadata } from "../../utils/markdown";
-import { type BlogPost } from "src/components/Blog";
+import { type MDXBlogPost } from "src/components/Blog";
 
 export default async (req: NextApiRequest, res: NextApiResponse<string>) => {
-  const posts = await loadMarkdownFilesMetadata<BlogPost>("blog/_posts");
+  const posts = await loadMarkdownFilesMetadata<MDXBlogPost>("blog/_posts");
 
   const feed = new RSS({
     title: "Inngest Product & Engineering Blog",

pages/blog.tsx

@@ -10,13 +10,10 @@ import Footer from "../shared/Footer";
 import Header from "../shared/Header";
 import Container from "../shared/layout/Container";
 import Tags from "../shared/Blog/Tags";
-import {
-  loadMarkdownFilesMetadata,
-  type MDXFileMetadata,
-} from "../utils/markdown";
+import { loadMarkdownFilesMetadata } from "../utils/markdown";
 import BlogHeader from "src/components/Blog/BlogHeader";
 import BlogPostList from "src/components/Blog/BlogPostList";
-import { type BlogPost } from "src/components/Blog";
+import { type MDXBlogPost } from "src/components/Blog";
 // import { LaunchWeekBanner } from "./index";
 
 export default function BlogIndex(props) {
@@ -113,7 +110,7 @@ export default function BlogIndex(props) {
 
 // This function also gets called at build time to generate specific content.
 export async function getStaticProps() {
-  const posts = await loadMarkdownFilesMetadata<BlogPost>("blog/_posts");
+  const posts = await loadMarkdownFilesMetadata<MDXBlogPost>("blog/_posts");
   // If a post is set to featured=false, do not show on main blog feed
   // This can be used for less important posts that may be directly linked to from other places
   const filteredPosts = posts.filter((p) => p?.featured !== false);

pages/blog/category/[category].tsx

@@ -5,7 +5,7 @@ import BlogPostList from "src/components/Blog/BlogPostList";
 import BlogHeader from "src/components/Blog/BlogHeader";
 import Container from "src/shared/layout/Container";
 import Nav from "src/components/Nav";
-import { type BlogPost, BLOG_CATEGORIES } from "src/components/Blog";
+import { type MDXBlogPost, BLOG_CATEGORIES } from "src/components/Blog";
 
 type StaticProps = {
   serializedPosts: string[];
@@ -46,7 +46,7 @@ export async function getStaticProps({
 }: {
   params: { category: string };
 }): Promise<{ props: StaticProps }> {
-  const posts = await loadMarkdownFilesMetadata<BlogPost>("blog/_posts");
+  const posts = await loadMarkdownFilesMetadata<MDXBlogPost>("blog/_posts");
   const filteredPosts = posts.filter((p) => p.category === params.category);
   const serializedPosts = filteredPosts.map((p) => JSON.stringify(p));
   const title = BLOG_CATEGORIES[params.category];