Add content gate

app/layout.tsx

@@ -22,11 +22,15 @@ export const metadata: Metadata = {
   icons: {
     icon: [
       {
-        url: process.env.NEXT_PUBLIC_FAVICON ?? "/favicon-june-2024-light.png",
+        url: process.env.NEXT_PUBLIC_FAVICON
+          ? `/${process.env.NEXT_PUBLIC_FAVICON}`
+          : "/favicon-june-2024-light.png",
         media: "(prefers-color-scheme: light)",
       },
       {
-        url: process.env.NEXT_PUBLIC_FAVICON ?? "/favicon-june-2024-dark.png",
+        url: process.env.NEXT_PUBLIC_FAVICON
+          ? `/${process.env.NEXT_PUBLIC_FAVICON}`
+          : "/favicon-june-2024-dark.png",
         media: "(prefers-color-scheme: dark)",
       },
     ],

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

@@ -0,0 +1,74 @@
+import type { Metadata } from "next";
+import fs from "fs";
+import matter from "gray-matter";
+
+import { loadMarkdownFilesMetadata } from "src/utils/markdown";
+import { type BlogPost } 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",
+};
+
+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);
+
+  return posts.map((post) => ({
+    slug: post.slug,
+  }));
+}
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const slug = (await params).slug;
+
+  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}`;
+
+  console.log(data);
+
+  return (
+    <div className="text-basis" style={{ scrollBehavior: "smooth" }}>
+      <Hero headline={data.heading} subheadline={data.subtitle}>
+        <a
+          href={"#get-access"}
+          className={
+            "inline-flex items-center gap-1 rounded-md font-medium px-6 py-2 transition-all whitespace-nowrap bg-cta hover:bg-ctaHover text-carbon-1000"
+          }
+        >
+          Read the article
+        </a>
+      </Hero>
+      <div className="max-w-[76ch] m-auto pb-24">
+        <div
+          id="get-access"
+          className="max-w-xl mx-auto mt-4 flex flex-col gap-6"
+        >
+          {data.teaser?.map((p, idx) => (
+            <p className="text-lg md:text-xl">{p}</p>
+          ))}
+          <NewsletterSignup
+            showHeader={false}
+            buttonText="Get access"
+            tags={["gate-principles-of-durable-execution"]}
+            redirect={contentUrl}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

components/InngestClientSDK.tsx

@@ -48,7 +48,11 @@ export function PageViews() {
           },
           v: "2022-12-27.1",
         });
-        if (typeof window !== "undefined" && window._inngestQueue.length) {
+        if (
+          typeof window !== "undefined" &&
+          window._inngestQueue &&
+          window._inngestQueue.length
+        ) {
           window._inngestQueue.forEach((p) => {
             // Prevent the double tracking of page views b/c routeChangeComplete
             // is unpredictable.

components/LandingPage/Hero.tsx

@@ -4,15 +4,17 @@ import React from "react";
 export default function Hero({
   headline,
   subheadline,
-  ctas,
+  ctas = [],
+  children,
 }: {
   headline: string;
   subheadline: string;
-  ctas: {
+  ctas?: {
     href: string;
     text: string | React.ReactNode;
     kind: "button" | "link";
   }[];
+  children?: React.ReactElement;
 }) {
   return (
     <header className="relative pb-8">
@@ -57,6 +59,7 @@ export default function Hero({
             );
           })}
         </div>
+        {children}
       </div>
       <span className="block mx-auto h-0.5 w-[84px] bg-[rgba(var(--color-foreground-base)/0.3)]"></span>
     </header>

components/NewsletterSignup.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRef, useState, type FormEvent } from "react";
-import { useSearchParams } from "next/navigation";
+import { useSearchParams, useRouter } from "next/navigation";
 
 export default function NewsletterSignup({
   showHeader = true,
@@ -10,13 +10,16 @@ export default function NewsletterSignup({
   tagsFromSearchParams = false,
   // NOTE - Custom fields must be set up in mailchimp first that match the "name"
   fields = [],
+  redirect,
 }: {
   showHeader?: boolean;
   buttonText?: string;
   tags?: string[];
   tagsFromSearchParams?: boolean;
   fields?: { name: string; label: string }[];
+  redirect?: string;
 }) {
+  const router = useRouter();
   const inputRef = useRef(null);
   const [loading, setLoading] = useState(false);
   const [response, setResponse] = useState<{
@@ -54,6 +57,9 @@ export default function NewsletterSignup({
     setLoading(false);
     if (res.status === 201) {
       setResponse({ result: true, error: "" });
+      if (redirect) {
+        router.push(redirect);
+      }
     } else {
       const { error } = await res.json();
       console.log("Error:", error);

pages/_app.tsx

@@ -48,7 +48,7 @@ const FireIcon = () => (
 const DISABLE_BANNER = false;
 
 function DefaultLayout({ children }) {
-  const router = useRouter();
+  // const router = useRouter();
   return (
     <>
       {!DISABLE_BANNER && <LaunchWeekBanner />}

pages/blog/_posts/principles-of-durable-execution.mdx

@@ -1,12 +1,18 @@
 ---
-heading: Principles of Durable Execution
-subtitle: The three key principles explained
+heading: The Principles of Durable Execution Explained
+subtitle: Learn what Durable Execution is, how it works, and why it's beneficial to your system.
 image: /assets/blog/principles-of-durable-execution/featured-image.png
 date: 2024-12-10
 author: Dan Farrelly
 primaryCTA: sales
 floatingCTA: true
 category: engineering
+featured: false
+teaser:
+  - "Long-running jobs, complex workflows, distributed systems, and DAGs are difficult to manage. They often involve managing asynchronous, stateful, and fault-tolerant processes that operate at a large scale."
+  - "Developers face many challenges when working with these systems. They need to handle failures, ensure reliability, and maintain observability in distributed environments. Additionally, they often find themselves grappling with concurrency issues while working with suboptimal tooling."
+  - "Durable Execution has emerged as a powerful approach to address these challenges, enabling reliable, long-running software processes."
+  - "Learn the principles of Durable Execution to apply it in your system today."
 ---
 import Blockquote from "src/shared/Blog/Blockquote";
 
@@ -16,7 +22,7 @@ Developers face many challenges when working with these systems. They need to ha
 
 Distributed systems are inherently complex, making robust frameworks or abstractions essential to simplify coordination, error handling, and scalability without compromising flexibility.
 
-**Durable execution** has emerged as a powerful approach to address these challenges, enabling reliable, long-running software processes. In this post, we'll dive into what durable execution is, what makes a system durable, and the benefits of adopting this model in your applications.
+**Durable Execution** has emerged as a powerful approach to address these challenges, enabling reliable, long-running software processes. In this post, we'll dive into what durable execution is, what makes a system durable, and the benefits of adopting this model in your applications.
 
 ## Durable execution explained