@xexr/blog-platform 1.0.11 → 1.0.13

package/README.md

@@ -442,37 +442,31 @@ Add blog content to your sitemap for better SEO:
 **`app/sitemap.ts`**:
 
 ```tsx
-import { generateBlogSitemapEntries } from "@xexr/blog-platform";
+import { createDynamicBlogSitemap } from "@xexr/blog-platform/sitemap";
 import type { MetadataRoute } from "next";
 import { getBlogData } from "@/lib/blog"; // Your blog data fetching
 
-export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  // Your existing static routes
-  const staticRoutes: MetadataRoute.Sitemap = [
-    {
-      url: "https://yoursite.com",
-      lastModified: new Date(),
-      changeFrequency: "yearly",
-      priority: 1,
-    },
-    // ... other routes
-  ];
-
-  // Generate blog entries
-  const { site, articles, authors } = await getBlogData();
-  const blogEntries = await generateBlogSitemapEntries(
-    site,
-    articles,
-    authors,
-    {
-      includeAuthorPages: true,
-      changeFrequency: { articles: "monthly" },
-      priority: { articles: 0.8 },
-    },
-  );
-
-  return [...staticRoutes, ...blogEntries];
-}
+const staticRoutes: MetadataRoute.Sitemap = [
+  {
+    url: "https://yoursite.com",
+    lastModified: new Date(),
+    changeFrequency: "yearly",
+    priority: 1,
+  },
+  // ... other host routes
+];
+
+export default createDynamicBlogSitemap({
+  staticRoutes,
+  getSite: async () => (await getBlogData()).site,
+  getArticles: async () => (await getBlogData()).articles,
+  options: {
+    includeAuthorPages: true,
+    includeTopicPages: true,
+    changeFrequency: { articles: "monthly" },
+    priority: { articles: 0.8 },
+  },
+});
 ```
 
 > 📖 **For detailed sitemap configuration options**, see [SITEMAP-INTEGRATION.md](./SITEMAP-INTEGRATION.md)

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.tsx

@@ -28,6 +28,7 @@ import {
 } from "../../../lib/urls";
 import { NewsletterSignup } from "../../../components/NewsletterSignup";
 import {
+  BLOG_PAGE_TITLE_GRADIENT_CLASS,
   type BlogTheme,
   extractTableOfContents,
   formatArticleDateMeta,
@@ -236,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>
 

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.test.ts

@@ -34,6 +34,51 @@ const article: PublishedArticle = {
 };
 
 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, {

package/dist/app/blog/page.tsx

@@ -6,6 +6,7 @@ import {
   type PublishedAuthor,
   type PublishedNewsletterSettings,
   type PublishedSite,
+  type PublishedTopic,
 } from "../../types/contracts";
 import { cn } from "../../lib/utils";
 import Pagination from "../../components/Pagination";
@@ -19,7 +20,11 @@ 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 {
@@ -82,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 && (
@@ -90,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>
       )}
 
@@ -248,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>
           )}
@@ -301,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>
             )}
@@ -335,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/ArticleReadingProgress.tsx

@@ -1,3 +1,7 @@
+"use client";
+
+import { useEffect, useMemo } from "react";
+
 import {
   formatTableOfContentsSummary,
   getTocItemState,
@@ -18,9 +22,15 @@ export function ArticleReadingProgress({
   showProgress = true,
 }: ArticleReadingProgressProps) {
   const activeItemId = items[0]?.id ?? null;
+  const itemIds = useMemo(() => items.map((item) => item.id), [items]);
 
   return (
     <>
+      <ArticleReadingProgressController
+        contentId={contentId}
+        itemIds={itemIds}
+      />
+
       {showProgress && (
         <div
           data-blog-reading-progress={contentId}
@@ -40,18 +50,118 @@ export function ArticleReadingProgress({
         activeItemId={activeItemId}
         variant={variant}
       />
-
-      {showProgress && (
-        <script
-          dangerouslySetInnerHTML={{
-            __html: getReadingProgressScript(contentId, items),
-          }}
-        />
-      )}
     </>
   );
 }
 
+function ArticleReadingProgressController({
+  contentId,
+  itemIds,
+}: {
+  contentId: string;
+  itemIds: string[];
+}) {
+  useEffect(() => {
+    let animationFrameId = 0;
+    let pendingHashItemId = decodeURIComponent(
+      window.location.hash.replace(/^#/, ""),
+    );
+
+    const setActiveItem = (activeItemId: string | null) => {
+      const tocLinks = Array.from(
+        document.querySelectorAll<HTMLElement>("[data-blog-toc-link]"),
+      );
+
+      for (const link of tocLinks) {
+        const isActive = link.getAttribute("data-blog-toc-link") === activeItemId;
+        link.setAttribute("data-active", isActive ? "true" : "false");
+        if (isActive) {
+          link.setAttribute("aria-current", "location");
+        } else {
+          link.removeAttribute("aria-current");
+        }
+      }
+    };
+
+    const updateScrollState = () => {
+      const contentElement = document.getElementById(contentId);
+      if (!contentElement) return;
+
+      const progressElements = Array.from(
+        document.querySelectorAll<HTMLElement>(
+          `[data-blog-reading-progress="${contentId}"]`,
+        ),
+      );
+      const contentRect = contentElement.getBoundingClientRect();
+      const scrollTop = window.scrollY;
+      const contentTop = contentRect.top + scrollTop;
+      const readableDistance = contentElement.offsetHeight - window.innerHeight;
+      const nextProgress =
+        readableDistance <= 0
+          ? scrollTop >= contentTop
+            ? 100
+            : 0
+          : ((scrollTop - contentTop) / readableDistance) * 100;
+      const progress = normalizeProgress(nextProgress);
+
+      for (const progressElement of progressElements) {
+        progressElement.style.transform = `scaleX(${progress / 100})`;
+        progressElement.setAttribute("aria-valuenow", String(Math.round(progress)));
+      }
+
+      const headings = itemIds
+        .map((id) => document.getElementById(id))
+        .filter((heading): heading is HTMLElement => Boolean(heading));
+      if (pendingHashItemId && itemIds.includes(pendingHashItemId)) {
+        setActiveItem(pendingHashItemId);
+        pendingHashItemId = "";
+        return;
+      }
+
+      const activeOffset = Math.max(160, Math.round(window.innerHeight * 0.33));
+      const activeHeading =
+        headings
+          .filter((heading) => heading.getBoundingClientRect().top <= activeOffset)
+          .at(-1) ??
+        headings[0] ??
+        null;
+
+      setActiveItem(activeHeading ? activeHeading.id : null);
+    };
+
+    const scheduleUpdate = () => {
+      window.cancelAnimationFrame(animationFrameId);
+      animationFrameId = window.requestAnimationFrame(updateScrollState);
+    };
+
+    const handleHashChange = () => {
+      pendingHashItemId = decodeURIComponent(
+        window.location.hash.replace(/^#/, ""),
+      );
+      scheduleUpdate();
+    };
+
+    scheduleUpdate();
+    window.addEventListener("scroll", scheduleUpdate, { passive: true });
+    window.addEventListener("resize", scheduleUpdate);
+    window.addEventListener("hashchange", handleHashChange);
+
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+      window.removeEventListener("scroll", scheduleUpdate);
+      window.removeEventListener("resize", scheduleUpdate);
+      window.removeEventListener("hashchange", handleHashChange);
+    };
+  }, [contentId, itemIds]);
+
+  return null;
+}
+
+function normalizeProgress(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.min(100, Math.max(0, value));
+}
+
 function ArticleTableOfContents({
   items,
   activeItemId,
@@ -127,82 +237,3 @@ function ArticleTableOfContents({
     </aside>
   );
 }
-
-function getReadingProgressScript(contentId: string, items: TocItem[]): string {
-  return `
-(() => {
-  const contentId = ${JSON.stringify(contentId)};
-  const itemIds = ${JSON.stringify(items.map((item) => item.id))};
-  const progressElement = document.querySelector('[data-blog-reading-progress="' + contentId + '"]');
-  let animationFrameId = 0;
-  let pendingHashItemId = decodeURIComponent(window.location.hash.replace(/^#/, ''));
-
-  const normalizeProgress = (value) => {
-    if (!Number.isFinite(value)) return 0;
-    return Math.min(100, Math.max(0, value));
-  };
-
-  const setActiveItem = (activeItemId) => {
-    const tocLinks = Array.from(document.querySelectorAll('[data-blog-toc-link]'));
-
-    for (const link of tocLinks) {
-      const isActive = link.getAttribute('data-blog-toc-link') === activeItemId;
-      link.setAttribute('data-active', isActive ? 'true' : 'false');
-      if (isActive) {
-        link.setAttribute('aria-current', 'location');
-      } else {
-        link.removeAttribute('aria-current');
-      }
-    }
-  };
-
-  const updateScrollState = () => {
-    const contentElement = document.getElementById(contentId);
-    if (!contentElement) return;
-
-    const contentRect = contentElement.getBoundingClientRect();
-    const scrollTop = window.scrollY;
-    const contentTop = contentRect.top + scrollTop;
-    const readableDistance = contentElement.offsetHeight - window.innerHeight;
-    const nextProgress = readableDistance <= 0
-      ? scrollTop >= contentTop ? 100 : 0
-      : ((scrollTop - contentTop) / readableDistance) * 100;
-    const progress = normalizeProgress(nextProgress);
-
-    if (progressElement) {
-      progressElement.style.transform = 'scaleX(' + progress / 100 + ')';
-      progressElement.setAttribute('aria-valuenow', String(Math.round(progress)));
-    }
-
-    const headings = itemIds
-      .map((id) => document.getElementById(id))
-      .filter(Boolean);
-    if (pendingHashItemId && itemIds.includes(pendingHashItemId)) {
-      setActiveItem(pendingHashItemId);
-      pendingHashItemId = '';
-      return;
-    }
-
-    const activeOffset = Math.max(160, Math.round(window.innerHeight * 0.33));
-    const activeHeading = headings
-      .filter((heading) => heading.getBoundingClientRect().top <= activeOffset)
-      .at(-1) || headings[0] || null;
-
-    setActiveItem(activeHeading ? activeHeading.id : null);
-  };
-
-  const scheduleUpdate = () => {
-    window.cancelAnimationFrame(animationFrameId);
-    animationFrameId = window.requestAnimationFrame(updateScrollState);
-  };
-
-  scheduleUpdate();
-  window.addEventListener('scroll', scheduleUpdate, { passive: true });
-  window.addEventListener('resize', scheduleUpdate);
-  window.addEventListener('hashchange', () => {
-    pendingHashItemId = decodeURIComponent(window.location.hash.replace(/^#/, ''));
-    scheduleUpdate();
-  });
-})();
-`;
-}

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">