@xexr/blog-platform 1.0.10 → 1.0.12

package/README.md

@@ -237,7 +237,7 @@ export default async function ArticlePage({
 }
 ```
 
-> **Note**: The `navigation` prop is optional. You can omit `previousArticle` and `nextArticle` if you don't want article navigation links.
+> **Note**: The `navigation` prop is optional. You can omit `previousArticle` and `nextArticle` if you don't want article navigation links. Bloggy can also publish a site-scoped `newsletter` configuration; pass it through to `BlogHomePage` or `BlogArticlePage` if you are not using the article/site objects returned by Bloggy storage directly. The newsletter form posts back to Bloggy's `/api/newsletter/subscribe` endpoint so subscribers are captured consistently across host apps.
 
 **`app/blog/authors/[slug]/page.tsx`** - Author profile pages:
 

package/dist/app/api/blog/publish/route.ts

@@ -1,7 +1,11 @@
 import type { NextRequest, NextResponse } from "next/server";
 import { getStorage } from "@/lib/database";
 import { getBlogPlatformVersion, parseVersionHeader } from "@/lib/version";
-import { requireAuth, authenticateRequest } from "@/lib/auth";
+import {
+  requireAuth,
+  authenticateRequest,
+  createTokenFingerprint,
+} from "@/lib/auth";
 import { enforceRateLimit, getRateLimitHeaders } from "@/lib/ratelimit";
 import { createCorsResponse, handleCorsOptions } from "@/lib/cors";
 import type {
@@ -32,9 +36,9 @@ export async function POST(
       return createCorsResponse(request, authCheck.error!, { status: 401 });
     }
 
-    // Apply rate limiting using the authentication token
-    const token = auth.token ?? "anonymous";
-    const rateLimitCheck = await enforceRateLimit(token);
+    // Apply rate limiting without exposing raw authentication tokens to Redis.
+    const tokenFingerprint = createTokenFingerprint(auth.token ?? "anonymous");
+    const rateLimitCheck = await enforceRateLimit(tokenFingerprint);
     if (!rateLimitCheck.allowed) {
       // Extract rate limit info from error response, with safe fallback
       const rateLimitData =

package/dist/app/api/blog/slugs/[slug]/route.ts

@@ -1,7 +1,11 @@
 import { type NextRequest, NextResponse } from "next/server";
 import { getStorage } from "@/lib/database";
 import { getBlogPlatformVersion, parseVersionHeader } from "@/lib/version";
-import { requireAuth, authenticateRequest } from "@/lib/auth";
+import {
+  requireAuth,
+  authenticateRequest,
+  createTokenFingerprint,
+} from "@/lib/auth";
 import { enforceRateLimit, getRateLimitHeaders } from "@/lib/ratelimit";
 import { createCorsResponse, handleCorsOptions } from "@/lib/cors";
 import { isValidSlug } from "@/app/api/blog/publish/route"; // Reuse slug validation from publish
@@ -29,10 +33,9 @@ export async function GET(
       return NextResponse.json(authCheck.error!, { status: 401 });
     }
 
-    const token = auth.token ?? "anonymous";
-
-    // Rate limiting (same as publish: 5/min per token)
-    const rateLimitCheck = await enforceRateLimit(token);
+    // Rate limiting (same as publish: 5/min per token fingerprint)
+    const tokenFingerprint = createTokenFingerprint(auth.token ?? "anonymous");
+    const rateLimitCheck = await enforceRateLimit(tokenFingerprint);
     if (!rateLimitCheck.allowed) {
       const rateLimitData = (rateLimitCheck.errorResponse.error?.details
         ?.rateLimit as {

package/dist/app/api/blog/unpublish/route.ts

@@ -1,7 +1,11 @@
 import { type NextRequest, NextResponse } from "next/server";
 import { getStorage } from "@/lib/database";
 import { getBlogPlatformVersion, parseVersionHeader } from "@/lib/version";
-import { requireAuth, authenticateRequest } from "@/lib/auth";
+import {
+  requireAuth,
+  authenticateRequest,
+  createTokenFingerprint,
+} from "@/lib/auth";
 import { enforceRateLimit, getRateLimitHeaders } from "@/lib/ratelimit";
 import { createCorsResponse, handleCorsOptions } from "@/lib/cors";
 import type { UnpublishPayload, PublishResult } from "@/types/contracts";
@@ -28,9 +32,9 @@ export async function POST(
       return NextResponse.json(authCheck.error!, { status: 401 });
     }
 
-    // Apply rate limiting using the authentication token
-    const token = auth.token ?? "anonymous";
-    const rateLimitCheck = await enforceRateLimit(token);
+    // Apply rate limiting without exposing raw authentication tokens to Redis.
+    const tokenFingerprint = createTokenFingerprint(auth.token ?? "anonymous");
+    const rateLimitCheck = await enforceRateLimit(tokenFingerprint);
     if (!rateLimitCheck.allowed) {
       // Extract rate limit info from error response, with safe fallback
       const rateLimitData =

package/dist/app/api/blog/version/route.ts

@@ -6,7 +6,11 @@ import {
   type VersionCompatibilityResult,
   type VersionInfo,
 } from "@/lib/version";
-import { requireAuth, authenticateRequest } from "@/lib/auth";
+import {
+  requireAuth,
+  authenticateRequest,
+  createTokenFingerprint,
+} from "@/lib/auth";
 import { enforceRateLimit, getRateLimitHeaders } from "@/lib/ratelimit";
 import { createCorsResponse, handleCorsOptions } from "@/lib/cors";
 
@@ -67,9 +71,9 @@ export async function GET(
       return createCorsResponse(request, errorResponse, { status: 401 });
     }
 
-    // Apply rate limiting using the authentication token
-    const token = auth.token ?? "anonymous";
-    const rateLimitCheck = await enforceRateLimit(token);
+    // Apply rate limiting without exposing raw authentication tokens to Redis.
+    const tokenFingerprint = createTokenFingerprint(auth.token ?? "anonymous");
+    const rateLimitCheck = await enforceRateLimit(tokenFingerprint);
     if (!rateLimitCheck.allowed) {
       // Extract rate limit info from error response, with safe fallback
       const rateLimitData =

package/dist/app/blog/[slug]/page.d.ts

@@ -1,8 +1,11 @@
 import type { ReactElement } from "react";
-import type { PublishedArticle } from "../../../types/contracts";
+import type {
+  PublishedArticle,
+  PublishedNewsletterSettings,
+} from "../../../types/contracts";
 import type { BlogTheme } from "../../../lib/article-ui";
 
-interface ArticlePageProps {
+export interface ArticlePageProps {
   article: PublishedArticle;
   className?: string;
   navigation?: {
@@ -31,6 +34,8 @@ interface ArticlePageProps {
     href: string;
     label: string;
   };
+  newsletter?: PublishedNewsletterSettings;
+  newsletterPreviewMode?: boolean;
   relatedArticles?: PublishedArticle[];
   showShareLinks?: boolean;
 }

package/dist/app/blog/[slug]/page.tsx

@@ -5,6 +5,7 @@ import { MDXRemote } from "next-mdx-remote-client/rsc";
 import {
   type PublishedArticle,
   type PublishedAuthor,
+  type PublishedNewsletterSettings,
 } from "../../../types/contracts";
 import { cn } from "../../../lib/utils";
 import { ArrowLeft, ArrowUpRight, Globe, Mail } from "lucide-react";
@@ -25,14 +26,16 @@ import {
   buildBlogPath,
   normalizeBlogBasePath,
 } from "../../../lib/urls";
+import { NewsletterSignup } from "../../../components/NewsletterSignup";
 import {
+  BLOG_PAGE_TITLE_GRADIENT_CLASS,
   type BlogTheme,
   extractTableOfContents,
   formatArticleDateMeta,
   getBlogThemeStyle,
 } from "../../../lib/article-ui";
 
-interface ArticlePageProps {
+export interface ArticlePageProps {
   article: PublishedArticle;
   className?: string;
   /** Optional navigation links */
@@ -65,6 +68,10 @@ interface ArticlePageProps {
     href: string;
     label: string;
   };
+  /** Optional Bloggy-owned newsletter capture configuration. */
+  newsletter?: PublishedNewsletterSettings;
+  /** Render interactive preview success without persisting subscribers. */
+  newsletterPreviewMode?: boolean;
   /** Optional related articles supplied by the host site. */
   relatedArticles?: PublishedArticle[];
   /** Whether to render static article share links. */
@@ -133,6 +140,8 @@ export default function ArticlePage({
   basePath = "/blog",
   theme,
   postArticleCta,
+  newsletter,
+  newsletterPreviewMode = false,
   relatedArticles = [],
   showShareLinks = true,
 }: ArticlePageProps) {
@@ -146,6 +155,7 @@ export default function ArticlePage({
   const articleUrl =
     article.meta.canonicalUrl ??
     buildBlogPath(normalizedBasePath, article.slug);
+  const newsletterSettings = newsletter ?? article.site.newsletter;
 
   // Use the featured image URL provided by Bloggy (hosted on Bloggy's domain)
   const imageUrl = article.featuredImage;
@@ -227,7 +237,12 @@ export default function ArticlePage({
       {/* Article Header */}
       <header className="article-header mx-auto mb-6 max-w-4xl space-y-4 text-center sm:mb-8 sm:space-y-6 lg:mb-12 lg:space-y-8">
         {/* Title */}
-        <h1 className="article-title bg-linear-to-br from-[var(--blog-accent-hover)] via-[var(--blog-text-accent)] to-fuchsia-200 bg-clip-text px-4 text-2xl leading-tight font-light tracking-tight text-balance text-transparent sm:px-0 sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl">
+        <h1
+          className={cn(
+            "article-title px-4 text-2xl leading-tight font-light tracking-tight text-balance sm:px-0 sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl",
+            BLOG_PAGE_TITLE_GRADIENT_CLASS,
+          )}
+        >
           {article.title}
         </h1>
 
@@ -431,11 +446,22 @@ export default function ArticlePage({
       )}
 
       {((postArticleCta ?? false) ||
+        (newsletterSettings?.enabled ?? false) ||
         showShareLinks ||
         relatedArticles.length > 0) && (
         <div className="mx-auto mt-12 max-w-4xl space-y-8">
           <Separator />
           {postArticleCta && <PostArticleCta cta={postArticleCta} />}
+          {newsletterSettings?.enabled && (
+            <NewsletterSignup
+              siteId={article.site.id}
+              settings={newsletterSettings}
+              sourceSurface="article"
+              sourceArticleSlug={article.slug}
+              sourceUrl={articleUrl}
+              previewMode={newsletterPreviewMode}
+            />
+          )}
           {showShareLinks && (
             <ArticleShareLinks title={article.title} url={articleUrl} />
           )}

package/dist/app/blog/authors/[slug]/page.test.ts

@@ -70,6 +70,9 @@ describe("AuthorPage", () => {
     );
 
     expect(html).toContain("Jane Doe");
+    expect(html).toContain("bg-linear-to-br");
+    expect(html).toContain("via-[var(--blog-text-accent)]");
+    expect(html).toContain("to-fuchsia-200");
     expect(html).toContain("Writes about product systems.");
     expect(html).toContain("Guest Author");
     expect(html).not.toContain("she/her");

package/dist/app/blog/authors/[slug]/page.tsx

@@ -17,7 +17,11 @@ import {
   buildAuthorPath,
   normalizeBlogBasePath,
 } from "../../../../lib/urls";
-import { type BlogTheme, getBlogThemeStyle } from "../../../../lib/article-ui";
+import {
+  BLOG_PAGE_TITLE_GRADIENT_CLASS,
+  type BlogTheme,
+  getBlogThemeStyle,
+} from "../../../../lib/article-ui";
 import type {
   PublishedArticle,
   PublishedAuthor,
@@ -96,7 +100,12 @@ export default function AuthorPage({
                   </Badge>
                 )}
               </div>
-              <h1 className="text-foreground text-4xl leading-tight font-semibold text-balance sm:text-5xl">
+              <h1
+                className={cn(
+                  "text-4xl leading-tight font-light text-balance sm:text-5xl",
+                  BLOG_PAGE_TITLE_GRADIENT_CLASS,
+                )}
+              >
                 {author.name}
               </h1>
             </div>

package/dist/app/blog/page.d.ts

@@ -0,0 +1,59 @@
+import type { ReactElement } from "react";
+import type {
+  PublishedArticle,
+  PublishedNewsletterSettings,
+  PublishedSite,
+} from "../../types/contracts";
+import type { BlogTheme } from "../../lib/article-ui";
+
+export interface BlogHomePageProps {
+  articles: PublishedArticle[];
+  siteName?: string;
+  siteTagline?: string;
+  className?: string;
+  site?: PublishedSite;
+  includeStructuredData?: boolean;
+  basePath?: string;
+  pagination?: {
+    currentPage: number;
+    totalPages: number;
+    baseUrl?: string;
+  };
+  theme?: BlogTheme;
+  newsletter?: PublishedNewsletterSettings;
+  newsletterPreviewMode?: boolean;
+}
+
+export default function BlogHomePage(props: BlogHomePageProps): ReactElement;
+
+export function generateBlogHomeMetadata(
+  siteName?: string,
+  siteTagline?: string,
+  siteUrl?: string,
+  pagination?: {
+    currentPage: number;
+    totalPages: number;
+  },
+  basePath?: string,
+): {
+  title: string;
+  description: string;
+  openGraph: {
+    title: string;
+    description: string;
+    type: string;
+    url?: string;
+  };
+  twitter: {
+    card: string;
+    title: string;
+    description: string;
+  };
+  alternates: {
+    canonical?: string;
+  };
+  other: {
+    prev?: string;
+    next?: string;
+  };
+};

package/dist/app/blog/page.test.ts

@@ -0,0 +1,128 @@
+import React from "react";
+import { renderToPipeableStream } from "react-dom/server";
+import { PassThrough } from "stream";
+import { describe, expect, it } from "vitest";
+
+import BlogHomePage from "./page";
+import type { PublishedArticle } from "../../types/contracts";
+
+const article: PublishedArticle = {
+  id: "article-1",
+  slug: "useful-routines",
+  title: "Useful routines",
+  excerpt: "A practical guide to keeping routines useful.",
+  content: "Routines work best when they are easy to maintain.",
+  readingSeconds: 360,
+  wordCount: 900,
+  publishedAt: "2026-05-06T12:00:00.000Z",
+  updatedAt: "2026-05-07T12:00:00.000Z",
+  author: null,
+  site: {
+    id: "site-1",
+    name: "Example Blog",
+    tagline: "Useful writing",
+    description: "Articles about useful systems.",
+    domain: "example.com",
+    toneAdjectives: [],
+    locale: "en",
+  },
+  meta: {
+    canonicalUrl: "https://example.com/blog/useful-routines",
+    keywords: [],
+  },
+  version: 1,
+};
+
+describe("BlogHomePage", () => {
+  it("uses the article title gradient for the blog home title and renders browse links", async () => {
+    const html = await renderToHtml(
+      React.createElement(BlogHomePage, {
+        articles: [article],
+        siteName: "Example Blog",
+        siteTagline: "Useful writing",
+        basePath: "/new-blog",
+      }),
+    );
+
+    expect(html).toContain("Example Blog");
+    expect(html).toContain("bg-linear-to-br");
+    expect(html).toContain("via-[var(--blog-text-accent)]");
+    expect(html).toContain("to-fuchsia-200");
+    expect(html).toContain('aria-label="Browse blog"');
+    expect(html).toContain('href="/new-blog/topics"');
+    expect(html).toContain('href="/new-blog/authors"');
+  });
+
+  it("links article topic chips to their topic archive pages", async () => {
+    const html = await renderToHtml(
+      React.createElement(BlogHomePage, {
+        articles: [
+          {
+            ...article,
+            topics: [
+              {
+                id: "topic-1",
+                name: "Recurring work and routines",
+                slug: "recurring-work-and-routines",
+                isPrimary: true,
+              },
+            ],
+          },
+        ],
+        basePath: "/new-blog",
+      }),
+    );
+
+    expect(html).toContain(
+      'href="/new-blog/topics/recurring-work-and-routines"',
+    );
+    expect(html).toContain("Recurring work and routines");
+  });
+
+  it("renders the newsletter form when configured", async () => {
+    const html = await renderToHtml(
+      React.createElement(BlogHomePage, {
+        articles: [article],
+        siteName: "Example Blog",
+        newsletter: {
+          enabled: true,
+          title: "Get product updates",
+          description: "Follow new articles and product notes.",
+          buttonLabel: "Get updates",
+          captureBaseUrl: "https://bloggy.example.com",
+          publicSubscribeToken: "public_subscribe_token",
+        },
+      }),
+    );
+
+    expect(html).toContain("Get product updates");
+    expect(html).toContain("Follow new articles and product notes.");
+    expect(html).toContain('type="email"');
+    expect(html).toContain('name="name"');
+    expect(html.indexOf("Get product updates")).toBeGreaterThan(
+      html.indexOf("Useful routines"),
+    );
+  });
+});
+
+function renderToHtml(element: React.ReactElement): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let html = "";
+    const stream = new PassThrough();
+    stream.setEncoding("utf8");
+    stream.on("data", (chunk: string) => {
+      html += chunk;
+    });
+    stream.on("end", () => resolve(html));
+    stream.on("error", reject);
+
+    const { pipe } = renderToPipeableStream(element, {
+      onAllReady() {
+        pipe(stream);
+      },
+      onError(error) {
+        reject(error instanceof Error ? error : new Error(String(error)));
+      },
+    });
+  });
+}

package/dist/app/blog/page.tsx

@@ -4,7 +4,9 @@ import Image from "next/image";
 import {
   type PublishedArticle,
   type PublishedAuthor,
+  type PublishedNewsletterSettings,
   type PublishedSite,
+  type PublishedTopic,
 } from "../../types/contracts";
 import { cn } from "../../lib/utils";
 import Pagination from "../../components/Pagination";
@@ -18,7 +20,12 @@ import {
   normalizeBlogBasePath,
 } from "../../lib/urls";
 import { formatDistanceToNow } from "date-fns";
-import { type BlogTheme, getBlogThemeStyle } from "../../lib/article-ui";
+import {
+  BLOG_PAGE_TITLE_GRADIENT_CLASS,
+  type BlogTheme,
+  getBlogThemeStyle,
+} from "../../lib/article-ui";
+import { NewsletterSignup } from "../../components/NewsletterSignup";
 
 interface BlogHomePageProps {
   articles: PublishedArticle[];
@@ -39,6 +46,10 @@ interface BlogHomePageProps {
   };
   /** Optional theme values for host-site brand integration. */
   theme?: BlogTheme;
+  /** Optional Bloggy-owned newsletter capture configuration. */
+  newsletter?: PublishedNewsletterSettings;
+  /** Render interactive preview success without persisting subscribers. */
+  newsletterPreviewMode?: boolean;
 }
 
 /**
@@ -58,8 +69,12 @@ export default function BlogHomePage({
   basePath = "/blog",
   pagination,
   theme,
+  newsletter,
+  newsletterPreviewMode = false,
 }: BlogHomePageProps) {
   const normalizedBasePath = normalizeBlogBasePath(basePath) || "/";
+  const newsletterSettings = newsletter ?? site?.newsletter;
+  const newsletterSiteId = site?.id ?? articles[0]?.site.id;
 
   return (
     <div
@@ -72,7 +87,12 @@ export default function BlogHomePage({
       {/* Site Header */}
       {siteName && (
         <header className="blog-header mb-8 text-center sm:mb-12 lg:mb-16">
-          <h1 className="blog-title mb-2 bg-linear-to-r from-[var(--blog-accent-hover)] to-[var(--blog-accent)] bg-clip-text text-3xl font-semibold tracking-tight text-balance text-transparent sm:text-4xl lg:text-5xl">
+          <h1
+            className={cn(
+              "blog-title mb-2 text-3xl font-light tracking-tight text-balance sm:text-4xl lg:text-5xl",
+              BLOG_PAGE_TITLE_GRADIENT_CLASS,
+            )}
+          >
             {siteName}
           </h1>
           {siteTagline && (
@@ -80,6 +100,30 @@ export default function BlogHomePage({
               {siteTagline}
             </p>
           )}
+          <nav
+            aria-label="Browse blog"
+            className="mt-5 flex flex-wrap items-center justify-center gap-2 text-sm"
+          >
+            <Link
+              href={normalizedBasePath}
+              aria-current="page"
+              className="rounded-full border border-[var(--blog-accent-border)] bg-[var(--blog-accent-bg)] px-3 py-1.5 font-medium text-[var(--blog-text-accent)] transition-colors hover:border-[var(--blog-text-accent)] hover:text-[var(--blog-text-accent-hover)] hover:no-underline"
+            >
+              All articles
+            </Link>
+            <Link
+              href={buildBlogPath(normalizedBasePath, "topics")}
+              className="text-muted-foreground rounded-full border border-transparent px-3 py-1.5 font-medium transition-colors hover:border-[var(--blog-accent-border)] hover:text-[var(--blog-accent)] hover:no-underline"
+            >
+              Topics
+            </Link>
+            <Link
+              href={buildBlogPath(normalizedBasePath, "authors")}
+              className="text-muted-foreground rounded-full border border-transparent px-3 py-1.5 font-medium transition-colors hover:border-[var(--blog-accent-border)] hover:text-[var(--blog-accent)] hover:no-underline"
+            >
+              Authors
+            </Link>
+          </nav>
         </header>
       )}
 
@@ -119,6 +163,16 @@ export default function BlogHomePage({
         )}
       </main>
 
+      {newsletterSettings?.enabled && newsletterSiteId && (
+        <NewsletterSignup
+          siteId={newsletterSiteId}
+          settings={newsletterSettings}
+          sourceSurface="blog_home"
+          previewMode={newsletterPreviewMode}
+          className="mt-10 sm:mt-12"
+        />
+      )}
+
       {/* JSON-LD Structured Data */}
       {includeStructuredData &&
         site &&
@@ -228,12 +282,11 @@ function ArticlePreview({
           {(article.topics ?? []).length > 0 && (
             <div className="flex flex-wrap gap-2">
               {(article.topics ?? []).map((topic) => (
-                <span
+                <TopicChip
                   key={topic.id}
-                  className="rounded-full border border-[var(--blog-accent-border)] px-2.5 py-1 text-xs font-medium text-[var(--blog-text-accent)]"
-                >
-                  {topic.name}
-                </span>
+                  topic={topic}
+                  basePath={basePath}
+                />
               ))}
             </div>
           )}
@@ -281,12 +334,11 @@ function ArticlePreview({
             {(article.topics ?? []).length > 0 && (
               <div className="flex flex-wrap gap-2">
                 {(article.topics ?? []).map((topic) => (
-                  <span
+                  <TopicChip
                     key={topic.id}
-                    className="rounded-full border border-[var(--blog-accent-border)] px-2.5 py-1 text-xs font-medium text-[var(--blog-text-accent)]"
-                  >
-                    {topic.name}
-                  </span>
+                    topic={topic}
+                    basePath={basePath}
+                  />
                 ))}
               </div>
             )}
@@ -315,6 +367,28 @@ function ArticlePreview({
   );
 }
 
+function TopicChip({
+  topic,
+  basePath,
+}: {
+  topic: PublishedTopic;
+  basePath: string;
+}) {
+  const className =
+    "rounded-full border border-[var(--blog-accent-border)] px-2.5 py-1 text-xs font-medium text-[var(--blog-text-accent)] transition-colors hover:border-[var(--blog-text-accent)] hover:text-[var(--blog-text-accent-hover)]";
+  const slug = topic.slug.trim();
+
+  if (!slug) {
+    return <span className={className}>{topic.name}</span>;
+  }
+
+  return (
+    <Link href={buildBlogPath(basePath, `topics/${slug}`)} className={className}>
+      {topic.name}
+    </Link>
+  );
+}
+
 function AuthorLink({
   author,
   basePath,

package/dist/components/AuthorPages.test.ts

@@ -77,6 +77,9 @@ describe("BlogAuthorsIndexPage", () => {
     );
 
     expect(html).toContain("dypt authors");
+    expect(html).toContain("bg-linear-to-br");
+    expect(html).toContain("via-[var(--blog-text-accent)]");
+    expect(html).toContain("to-fuchsia-200");
     expect(html).toContain("Jane Doe");
     expect(html).toContain("Alex Stone");
     expect(html).toContain("/new-blog/authors/jane-doe");

package/dist/components/AuthorPages.tsx

@@ -4,7 +4,10 @@ import Link from "next/link";
 
 import type { PublishedArticle, PublishedAuthor } from "../types/contracts";
 import type { BlogTheme } from "../lib/article-ui";
-import { getBlogThemeStyle } from "../lib/article-ui";
+import {
+  BLOG_PAGE_TITLE_GRADIENT_CLASS,
+  getBlogThemeStyle,
+} from "../lib/article-ui";
 import { getAuthorsFromArticles } from "../lib/authors";
 import { buildAuthorPath, normalizeBlogBasePath } from "../lib/urls";
 import { cn } from "../lib/utils";
@@ -44,7 +47,12 @@ export function BlogAuthorsIndexPage({
         >
           Back to all articles
         </Link>
-        <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl">
+        <h1
+          className={cn(
+            "text-4xl font-light tracking-tight text-balance sm:text-5xl",
+            BLOG_PAGE_TITLE_GRADIENT_CLASS,
+          )}
+        >
           {title}
         </h1>
         <p className="text-muted-foreground mx-auto max-w-2xl text-lg text-pretty">