@xexr/blog-platform 1.0.8 → 1.0.10

package/README.md

@@ -170,9 +170,23 @@ export default async function BlogPage({
 
 ```tsx
 import "@/lib/blog-platform";
-import { BlogArticlePage, getStorage } from "@xexr/blog-platform";
+import {
+  BlogArticlePage,
+  getStorage,
+  generateArticleMetadata,
+} from "@xexr/blog-platform";
 import { notFound } from "next/navigation";
 
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const article = await getStorage().getArticle(slug);
+  return article ? generateArticleMetadata(article) : {};
+}
+
 export default async function ArticlePage({
   params,
 }: {
@@ -195,8 +209,10 @@ export default async function ArticlePage({
 
   // Find current article index
   const currentIndex = articles.findIndex((a) => a.slug === slug);
-  const previousArticle = currentIndex > 0 ? articles[currentIndex - 1] : undefined;
-  const nextArticle = currentIndex < articles.length - 1 ? articles[currentIndex + 1] : undefined;
+  const previousArticle =
+    currentIndex > 0 ? articles[currentIndex - 1] : undefined;
+  const nextArticle =
+    currentIndex < articles.length - 1 ? articles[currentIndex + 1] : undefined;
 
   return (
     <BlogArticlePage
@@ -223,6 +239,51 @@ 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.
 
+**`app/blog/authors/[slug]/page.tsx`** - Author profile pages:
+
+```tsx
+import "@/lib/blog-platform";
+import {
+  BlogAuthorPage,
+  generateAuthorPageMetadata,
+  loadAuthorArchive,
+} from "@xexr/blog-platform";
+import { notFound } from "next/navigation";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const archive = await loadAuthorArchive(slug);
+  return archive
+    ? generateAuthorPageMetadata(archive.author, archive.articles[0]!.site)
+    : {};
+}
+
+export default async function AuthorPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const archive = await loadAuthorArchive(slug);
+  if (!archive) {
+    notFound();
+  }
+
+  return (
+    <BlogAuthorPage
+      author={archive.author}
+      articles={archive.articles}
+      site={archive.articles[0]!.site}
+      navigation={{ backToHome: { url: "/blog" } }}
+    />
+  );
+}
+```
+
 ### 2. Set Up Publishing API
 
 **`app/api/blog/publish/route.ts`**:
@@ -362,8 +423,8 @@ const nextConfig = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'bloggy.poyzer.download', // Replace with your Bloggy instance domain
+        protocol: "https",
+        hostname: "bloggy.poyzer.download", // Replace with your Bloggy instance domain
       },
     ],
   },
@@ -454,11 +515,11 @@ Before you can publish articles, ensure you have:
 
 **Troubleshooting Connection Test**:
 
-| Issue | Solution |
-|-------|----------|
-| ❌ Invalid credentials | Check that `BLOG_PLATFORM_API_KEYS` in your .env matches the token you entered |
-| ❌ Connection failed | Verify your Blog Platform API URL is correct and accessible |
-| ❌ Version incompatible | Upgrade your blog platform package to match Bloggy's version |
+| Issue                   | Solution                                                                       |
+| ----------------------- | ------------------------------------------------------------------------------ |
+| ❌ Invalid credentials  | Check that `BLOG_PLATFORM_API_KEYS` in your .env matches the token you entered |
+| ❌ Connection failed    | Verify your Blog Platform API URL is correct and accessible                    |
+| ❌ Version incompatible | Upgrade your blog platform package to match Bloggy's version                   |
 
 ### Step 2: Publish an Article
 
@@ -473,7 +534,6 @@ Before you can publish articles, ensure you have:
 
 3. **Configure Publication Settings**:
    The publish modal opens with pre-filled fields:
-
    - **URL Slug**: Auto-generated from the title (lowercase, hyphens)
      - Preview: `https://yourblog.com/blog/your-article-slug`
      - Editable: Change to your preferred slug
@@ -523,6 +583,7 @@ Before you can publish articles, ensure you have:
    - `dateModified` updates in JSON-LD, `datePublished` remains unchanged
 
 **What Gets Updated**:
+
 - ✅ Article content (title, body, images)
 - ✅ Meta description
 - ✅ `dateModified` timestamp
@@ -551,38 +612,44 @@ Before you can publish articles, ensure you have:
 
 ### Publishing Status Reference
 
-| Status | Description | Available Actions |
-|--------|-------------|-------------------|
-| **Never Published** | Article has never been published | ✅ Publish |
-| **Published** | Article is live on blog | ✅ Republish (update)<br>✅ Unpublish |
-| **Failed** | Publishing failed due to error | ✅ Retry publish |
-| **Publishing** | Publish in progress | ⏳ Wait (typically < 5s) |
+| Status              | Description                      | Available Actions                     |
+| ------------------- | -------------------------------- | ------------------------------------- |
+| **Never Published** | Article has never been published | ✅ Publish                            |
+| **Published**       | Article is live on blog          | ✅ Republish (update)<br>✅ Unpublish |
+| **Failed**          | Publishing failed due to error   | ✅ Retry publish                      |
+| **Publishing**      | Publish in progress              | ⏳ Wait (typically < 5s)              |
 
 ### Error Handling & Troubleshooting
 
 #### Common Publishing Errors
 
 **PUB003: Slug Already Exists**
+
 - **Cause**: Another article is already using this slug
 - **Solution**: Choose a different slug (add date, number, or variation)
 
 **PUB005: Invalid Credentials**
+
 - **Cause**: Authentication token doesn't match
 - **Solution**: Update token in platform settings and re-test connection
 
 **PUB006: Content Validation Failed**
+
 - **Cause**: Article doesn't meet publishing requirements
 - **Solution**: Check error details (usually min 50 words required)
 
 **PUB007: Platform Unavailable**
+
 - **Cause**: Blog platform is down or unreachable
 - **Solution**: Check your blog is running, then retry publish
 
 **PUB008: No Platform Configured**
+
 - **Cause**: Publishing platform not set up for this site
 - **Solution**: Go to Blog → Edit → Publishing and configure platform
 
 **PUB009: Version Incompatible**
+
 - **Cause**: Bloggy version doesn't match blog platform version (major mismatch)
 - **Solution**: Upgrade your `@xexr/blog-platform` package
 
@@ -601,11 +668,13 @@ If publishing fails:
 The blog platform displays author information based on Bloggy's author settings:
 
 **Author Resolution Order**:
+
 1. **Article Author**: If article has an assigned author, use that author
 2. **Site Default Author**: If no article author, use site's default author
 3. **No Author**: If neither available, publish without author byline
 
 **Guest Author Display**:
+
 - Guest authors (marked with `isGuest: true`) show **Guest Author** badge
 - Author bio card displays if `author.bio` is present
 - Author profile links are not included (post-MVP feature)
@@ -628,22 +697,26 @@ The blog platform displays author information based on Bloggy's author settings:
 When publishing articles, the blog platform automatically handles:
 
 **Meta Tags**:
+
 - `<title>`: Article title
 - `<meta name="description">`: Your custom meta description
 - `<link rel="canonical">`: Self-canonical URL
 
 **Structured Data (JSON-LD)**:
+
 - BlogPosting schema with full article metadata
 - Author Person schema (if author present)
 - Organization schema for publisher
 - BreadcrumbList for navigation
 
 **OpenGraph Tags**:
+
 - `og:title`, `og:description`, `og:url`
 - `og:type="article"`
 - Featured image as `og:image` (if available)
 
 **Image Optimization**:
+
 - Images served via Cloudflare CDN
 - Automatic WebP conversion
 - Responsive sizing
@@ -656,11 +729,13 @@ The blog platform uses **semantic versioning** to ensure compatibility:
 **Version Format**: `MAJOR.MINOR.PATCH`
 
 **Compatibility Rules**:
+
 - ✅ **Patch Differences** (1.0.0 ↔ 1.0.3): Always compatible
 - ⚠️ **Minor Differences** (1.0.0 ↔ 1.1.0): Compatible with warnings
 - ❌ **Major Differences** (1.0.0 ↔ 2.0.0): Incompatible, blocks publishing
 
 **Checking Compatibility**:
+
 1. Go to Blog → Edit → Publishing
 2. Click **Test Connection**
 3. View compatibility status in test results
@@ -674,12 +749,14 @@ The blog platform uses **semantic versioning** to ensure compatibility:
 Publishing API is rate-limited to **5 requests per minute per authentication token**.
 
 **Rate Limit Behavior**:
+
 - Each publish/unpublish counts as 1 request
 - Version check counts as 1 request
 - Limit resets every 60 seconds
 - Exceeded limits return HTTP 429 with `Retry-After` header
 
 **If Rate Limited**:
+
 1. Wait for reset (shown in error message)
 2. System automatically retries after delay
 3. Avoid rapid republishing during testing
@@ -687,12 +764,14 @@ Publishing API is rate-limited to **5 requests per minute per authentication tok
 ### Security & Privacy
 
 **Credential Security**:
+
 - All tokens encrypted with AES-256-GCM before storage
 - Tokens never displayed after save (shown as "••••")
 - HTTPS required for all API communication
 - Authentication required on all blog platform endpoints
 
 **Content Privacy**:
+
 - Only accepted articles can be published
 - Draft articles remain private in Bloggy
 - Unpublished articles return 404 on blog
@@ -884,8 +963,8 @@ border-border            /* Border colors */
 ```css
 /* globals.css - Tailwind v4 */
 @theme inline {
-  --color-primary: oklch(0.6 0.2 250);  /* Custom blue */
-  --color-foreground: oklch(0.2 0.02 250);  /* Dark text */
+  --color-primary: oklch(0.6 0.2 250); /* Custom blue */
+  --color-foreground: oklch(0.2 0.02 250); /* Dark text */
   /* ... other theme variables */
 }
 ```
@@ -911,9 +990,9 @@ module.exports = {
       typography: {
         DEFAULT: {
           css: {
-            maxWidth: '80ch',  // Wider content
+            maxWidth: "80ch", // Wider content
             h1: {
-              fontSize: '3rem',  // Larger headings
+              fontSize: "3rem", // Larger headings
             },
             // ... custom prose styles
           },
@@ -1014,7 +1093,9 @@ Dark mode is automatically supported via Tailwind's `dark:` variant:
 // app/layout.tsx
 export default function RootLayout({ children }) {
   return (
-    <html lang="en" className="dark">  {/* Add 'dark' class */}
+    <html lang="en" className="dark">
+      {" "}
+      {/* Add 'dark' class */}
       <body>{children}</body>
     </html>
   );
@@ -1056,8 +1137,8 @@ The blog platform follows these design principles:
 ```css
 /* globals.css */
 @theme inline {
-  --color-primary: oklch(0.6 0.25 140);  /* Green primary */
-  --color-primary-foreground: oklch(1 0 0);  /* White text on primary */
+  --color-primary: oklch(0.6 0.25 140); /* Green primary */
+  --color-primary-foreground: oklch(1 0 0); /* White text on primary */
 }
 ```
 
@@ -1069,7 +1150,9 @@ Result: All blog links, CTAs, and accent colors become green.
 // app/blog/[slug]/page.tsx
 export default function ArticlePage({ params }) {
   return (
-    <div className="container mx-auto max-w-5xl">  {/* Wider than default */}
+    <div className="container mx-auto max-w-5xl">
+      {" "}
+      {/* Wider than default */}
       <BlogArticlePage article={article} />
     </div>
   );
@@ -1085,12 +1168,10 @@ import { AuthorByline as DefaultByline } from "@xexr/blog-platform";
 function CustomAuthorByline({ author }) {
   return (
     <div className="flex items-center gap-4">
-      <img src={author.avatar} className="w-16 h-16 rounded-full" />
+      <img src={author.avatar} className="h-16 w-16 rounded-full" />
       <div>
         <DefaultByline author={author} />
-        <p className="text-sm text-muted-foreground">
-          @{author.twitter}
-        </p>
+        <p className="text-muted-foreground text-sm">@{author.twitter}</p>
       </div>
     </div>
   );

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

@@ -20,7 +20,11 @@ import {
   createStructuredDataScript,
 } from "../../../lib/structured-data";
 import { articleMdxOptions } from "../../../lib/mdx";
-import { buildBlogPath, normalizeBlogBasePath } from "../../../lib/urls";
+import {
+  buildAuthorPath,
+  buildBlogPath,
+  normalizeBlogBasePath,
+} from "../../../lib/urls";
 import {
   type BlogTheme,
   extractTableOfContents,
@@ -82,6 +86,46 @@ function formatReadingTime(seconds: number): string {
   return `${minutes} min read`;
 }
 
+function formatCreditUrl(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+function FeaturedImageCredit({
+  creditText,
+  creditUrl,
+}: {
+  creditText?: string;
+  creditUrl?: string;
+}) {
+  if (!creditText && !creditUrl) {
+    return null;
+  }
+
+  const label = creditText ?? formatCreditUrl(creditUrl ?? "");
+
+  return (
+    <span>
+      Credit:{" "}
+      {creditUrl ? (
+        <a
+          href={creditUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="underline underline-offset-2 transition-colors hover:text-[var(--blog-text-accent)]"
+        >
+          {label}
+        </a>
+      ) : (
+        label
+      )}
+    </span>
+  );
+}
+
 export default function ArticlePage({
   article,
   className,
@@ -105,6 +149,11 @@ export default function ArticlePage({
 
   // Use the featured image URL provided by Bloggy (hosted on Bloggy's domain)
   const imageUrl = article.featuredImage;
+  const hasFeaturedImageMeta = Boolean(
+    article.featuredImageCaption ??
+      article.featuredImageCreditText ??
+      article.featuredImageCreditUrl,
+  );
 
   return (
     <article
@@ -136,6 +185,45 @@ export default function ArticlePage({
         </header>
       )}
 
+      <style>{`
+        .article-content figure > p {
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
+        }
+
+        .article-content figure figcaption {
+          margin-top: 0.5rem !important;
+          text-align: center;
+          font-size: 0.875rem !important;
+          line-height: 1.35 !important;
+          color: hsl(var(--muted-foreground));
+        }
+
+        .article-content figure figcaption .blog-image-credit {
+          display: block;
+          margin-top: 0.25rem;
+          font-size: 0.75rem;
+          line-height: 1.25;
+          letter-spacing: 0.025em;
+          opacity: 0.8;
+        }
+
+        .article-content figure figcaption > span:not(.blog-image-credit) {
+          margin-left: 0.5rem;
+          padding-left: 0.5rem;
+          border-left: 1px solid var(--blog-accent-border);
+          font-size: 0.75rem;
+          letter-spacing: 0.025em;
+          opacity: 0.8;
+        }
+
+        .article-content figure figcaption a {
+          color: inherit;
+          text-decoration-line: underline;
+          text-underline-offset: 0.18em;
+        }
+      `}</style>
+
       {/* 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 */}
@@ -155,8 +243,13 @@ export default function ArticlePage({
           {article.author && (
             <div className="flex items-center gap-2">
               <span className="sr-only">Author</span>
-              <AuthorAvatar author={article.author} size="md" />
-              <span className="font-medium">{article.author.name}</span>
+              <Link
+                href={buildAuthorPath(normalizedBasePath, article.author.slug)}
+                className="inline-flex items-center gap-2 font-medium transition-colors hover:text-[var(--blog-accent)] hover:no-underline"
+              >
+                <AuthorAvatar author={article.author} size="md" />
+                {article.author.name}
+              </Link>
               {article.author.isGuest && (
                 <Badge variant="outline" className="text-xs">
                   Guest Author
@@ -228,18 +321,38 @@ export default function ArticlePage({
 
       {/* Featured Image */}
       {imageUrl && (
-        <div className="article-featured-image mx-auto my-8 aspect-[16/9] w-full max-w-4xl overflow-hidden rounded-3xl border border-[var(--blog-accent-border)] shadow-[0_24px_80px_rgb(168_85_247_/_0.14)] sm:my-12 lg:my-16">
-          <Image
-            src={imageUrl}
-            alt={
-              article.featuredImageAlt ?? `Featured image for ${article.title}`
-            }
-            className="h-full w-full object-cover"
-            width={800}
-            height={450}
-            priority
-          />
-        </div>
+        <figure className="article-featured-image mx-auto my-8 w-full max-w-4xl sm:my-12 lg:my-16">
+          <div className="aspect-[16/9] overflow-hidden rounded-3xl border border-[var(--blog-accent-border)] shadow-[0_24px_80px_rgb(168_85_247_/_0.14)]">
+            <Image
+              src={imageUrl}
+              alt={
+                article.featuredImageAlt ??
+                `Featured image for ${article.title}`
+              }
+              className="h-full w-full object-cover"
+              width={800}
+              height={450}
+              priority
+            />
+          </div>
+
+          {hasFeaturedImageMeta && (
+            <figcaption className="text-muted-foreground mt-3 space-y-1 px-2 text-center text-sm leading-relaxed sm:px-0">
+              {article.featuredImageCaption && (
+                <p>{article.featuredImageCaption}</p>
+              )}
+              {(article.featuredImageCreditText ??
+                article.featuredImageCreditUrl) && (
+                <p className="text-xs">
+                  <FeaturedImageCredit
+                    creditText={article.featuredImageCreditText}
+                    creditUrl={article.featuredImageCreditUrl}
+                  />
+                </p>
+              )}
+            </figcaption>
+          )}
+        </figure>
       )}
 
       {/* Article Content */}
@@ -256,7 +369,7 @@ export default function ArticlePage({
 
           <div
             id="article-body"
-            className="prose prose-sm sm:prose-base lg:prose-lg xl:prose-xl prose-gray dark:prose-invert prose-headings:scroll-mt-20 prose-headings:font-light prose-headings:text-balance prose-headings:text-[var(--blog-text-accent)] prose-h1:text-2xl sm:prose-h1:text-3xl lg:prose-h1:text-4xl prose-h2:text-xl sm:prose-h2:text-2xl lg:prose-h2:text-3xl prose-h3:text-lg sm:prose-h3:text-xl lg:prose-h3:text-2xl prose-p:leading-relaxed prose-p:text-pretty prose-a:text-[var(--blog-text-accent)] prose-a:transition-colors hover:prose-a:text-[var(--blog-text-accent-hover)] max-w-none"
+            className="prose prose-sm sm:prose-base lg:prose-lg xl:prose-xl prose-gray dark:prose-invert prose-headings:scroll-mt-20 prose-headings:font-light prose-headings:text-balance prose-headings:text-[var(--blog-text-accent)] prose-h1:text-2xl sm:prose-h1:text-3xl lg:prose-h1:text-4xl prose-h2:text-xl sm:prose-h2:text-2xl lg:prose-h2:text-3xl prose-h3:text-lg sm:prose-h3:text-xl lg:prose-h3:text-2xl prose-p:leading-relaxed prose-p:text-pretty prose-a:text-[var(--blog-text-accent)] prose-a:transition-colors hover:prose-a:text-[var(--blog-text-accent-hover)] [&_figure>p]:!my-0 [&_figcaption]:!mt-2 [&_figcaption]:text-center [&_figcaption]:!text-sm [&_figcaption]:!leading-snug [&_figcaption]:text-muted-foreground [&_figcaption_.blog-image-credit]:mt-1 [&_figcaption_.blog-image-credit]:block [&_figcaption_.blog-image-credit]:text-xs [&_figcaption_.blog-image-credit]:tracking-wide [&_figcaption_.blog-image-credit]:text-muted-foreground/80 [&_figcaption>span:not(.blog-image-credit)]:ml-2 [&_figcaption>span:not(.blog-image-credit)]:border-l [&_figcaption>span:not(.blog-image-credit)]:border-[var(--blog-accent-border)] [&_figcaption>span:not(.blog-image-credit)]:pl-2 [&_figcaption>span:not(.blog-image-credit)]:text-xs [&_figcaption>span:not(.blog-image-credit)]:tracking-wide [&_figcaption>span:not(.blog-image-credit)]:text-muted-foreground/80 max-w-none"
           >
             <MDXRemote
               source={article.content}
@@ -290,7 +403,15 @@ export default function ArticlePage({
                       Written by
                     </p>
                     <h2 className="text-foreground flex flex-wrap items-center gap-2 text-xl font-semibold">
-                      {article.author.name}
+                      <Link
+                        href={buildAuthorPath(
+                          normalizedBasePath,
+                          article.author.slug,
+                        )}
+                        className="transition-colors hover:text-[var(--blog-accent)] hover:no-underline"
+                      >
+                        {article.author.name}
+                      </Link>
                       {article.author.isGuest && (
                         <Badge variant="outline" className="text-xs">
                           Guest Author

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

@@ -0,0 +1,108 @@
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import AuthorPage, { generateAuthorPageMetadata } from "./page";
+import type {
+  PublishedArticle,
+  PublishedAuthor,
+  PublishedSite,
+} from "../../../../types/contracts";
+
+const site: PublishedSite = {
+  id: "site-1",
+  name: "Test Blog",
+  tagline: "Testing author pages",
+  description: "A test blog",
+  domain: "example.com",
+  toneAdjectives: [],
+  locale: "en",
+};
+
+const author: PublishedAuthor = {
+  id: "author-1",
+  name: "Jane Doe",
+  slug: "jane-doe",
+  bio: "Writes about product systems.",
+  avatarUrl: "https://cdn.example.com/authors/jane.jpg",
+  socialLinks: {
+    website: "https://jane.example.com",
+    linkedin: "https://www.linkedin.com/in/jane-doe",
+  },
+  pronouns: "she/her",
+  isGuest: true,
+  toneAdjectives: ["practical", "direct"],
+};
+
+function article(slug: string, title: string): PublishedArticle {
+  return {
+    id: slug,
+    slug,
+    title,
+    excerpt: `${title} excerpt.`,
+    content: "# Article",
+    readingSeconds: 180,
+    wordCount: 500,
+    publishedAt: "2026-05-01T10:00:00.000Z",
+    updatedAt: "2026-05-01T10:00:00.000Z",
+    author,
+    site,
+    topics: [],
+    meta: {
+      keywords: ["test"],
+      canonicalUrl: `https://example.com/blog/${slug}`,
+    },
+    version: 1,
+  };
+}
+
+describe("AuthorPage", () => {
+  it("renders author profile details and that author's published articles", () => {
+    const html = renderToStaticMarkup(
+      React.createElement(AuthorPage, {
+        author,
+        articles: [
+          article("first-post", "First Post"),
+          article("second-post", "Second Post"),
+        ],
+        site,
+      }),
+    );
+
+    expect(html).toContain("Jane Doe");
+    expect(html).toContain("Writes about product systems.");
+    expect(html).toContain("Guest Author");
+    expect(html).not.toContain("she/her");
+    expect(html).not.toContain('aria-label="Writing style"');
+    expect(html).toContain("https://jane.example.com");
+    expect(html).toContain("https://www.linkedin.com/in/jane-doe");
+    expect(html).toContain("First Post");
+    expect(html).toContain("Second Post");
+    expect(html).toContain("/blog/first-post");
+    expect(html).toContain("/blog/second-post");
+    expect(html).not.toContain(">\\/blog\\/authors\\/jane-doe<");
+    expect(html).toContain(
+      "https%3A%2F%2Fcdn.example.com%2Fauthors%2Fjane.jpg",
+    );
+  });
+
+  it("generates canonical metadata for the author route", () => {
+    const metadata = generateAuthorPageMetadata(author, site, "/blog");
+
+    expect(metadata.title).toBe("Jane Doe - Test Blog");
+    expect(metadata.description).toBe("Writes about product systems.");
+    expect(metadata.openGraph.url).toBe(
+      "https://example.com/blog/authors/jane-doe",
+    );
+    expect(metadata.openGraph.images).toEqual([
+      { url: "https://cdn.example.com/authors/jane.jpg", alt: "Jane Doe" },
+    ]);
+    expect(metadata.twitter.card).toBe("summary_large_image");
+    expect(metadata.twitter.images).toEqual([
+      "https://cdn.example.com/authors/jane.jpg",
+    ]);
+    expect(metadata.alternates.canonical).toBe(
+      "https://example.com/blog/authors/jane-doe",
+    );
+  });
+});