@xexr/blog-platform 1.0.7 → 1.0.9

package/dist/components/AuthorByline.tsx

@@ -0,0 +1,569 @@
+import React from "react";
+import Image from "next/image";
+import { Globe, Mail } from "lucide-react";
+import { FaGithub, FaLinkedinIn, FaXTwitter } from "react-icons/fa6";
+import { type PublishedAuthor } from "../types/contracts";
+import { cn } from "../lib/utils";
+import { Badge } from "./ui/badge";
+import {
+  generateAuthorStructuredData,
+  createStructuredDataScript,
+} from "../lib/structured-data";
+
+interface AuthorSocialLinkView {
+  key: string;
+  href: string;
+  label: string;
+  external: boolean;
+  icon: React.ReactNode;
+}
+
+interface AuthorBylineProps {
+  /** The author to display */
+  author: PublishedAuthor | null;
+  /** Optional publication date */
+  publishedAt?: string;
+  /** Optional reading time in minutes */
+  readingTime?: number;
+  /** Optional word count */
+  wordCount?: number;
+  /** Whether to show the full bio */
+  showBio?: boolean;
+  /** Whether to include JSON-LD structured data */
+  includeStructuredData?: boolean;
+  /** Custom className for styling */
+  className?: string;
+  /** Layout variant */
+  variant?: "inline" | "stacked" | "minimal";
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Whether to show tone adjectives */
+  showToneAdjectives?: boolean;
+}
+
+/**
+ * AuthorByline component for displaying author information with optional structured data.
+ *
+ * This component provides a consistent way to display author information across
+ * different contexts (article listings, article pages, etc.) with proper
+ * semantic markup and SEO optimization through JSON-LD structured data.
+ */
+export default function AuthorByline({
+  author,
+  publishedAt,
+  readingTime,
+  wordCount,
+  showBio = false,
+  includeStructuredData = false,
+  className,
+  variant = "inline",
+  size = "md",
+  showToneAdjectives = false,
+}: AuthorBylineProps) {
+  // If no author, show minimal byline
+  if (!author) {
+    return (
+      <div
+        className={cn(
+          "author-byline text-muted-foreground",
+          getVariantStyles(variant, size),
+          className,
+        )}
+      >
+        {publishedAt && (
+          <time dateTime={publishedAt} className="published-date">
+            {formatDate(publishedAt)}
+          </time>
+        )}
+        {readingTime && (
+          <span className="reading-time">{readingTime} min read</span>
+        )}
+        {wordCount && (
+          <span className="word-count">{wordCount.toLocaleString()} words</span>
+        )}
+      </div>
+    );
+  }
+
+  const structuredDataProps = includeStructuredData
+    ? createStructuredDataScript(generateAuthorStructuredData(author))
+    : null;
+
+  return (
+    <>
+      <div
+        className={cn(
+          "author-byline",
+          getVariantStyles(variant, size),
+          className,
+        )}
+      >
+        {variant === "stacked" ? (
+          <StackedByline
+            author={author}
+            publishedAt={publishedAt}
+            readingTime={readingTime}
+            wordCount={wordCount}
+            showBio={showBio}
+            showToneAdjectives={showToneAdjectives}
+            size={size}
+          />
+        ) : variant === "minimal" ? (
+          <MinimalByline
+            author={author}
+            publishedAt={publishedAt}
+            readingTime={readingTime}
+            wordCount={wordCount}
+            size={size}
+          />
+        ) : (
+          <InlineByline
+            author={author}
+            publishedAt={publishedAt}
+            readingTime={readingTime}
+            wordCount={wordCount}
+            showBio={showBio}
+            showToneAdjectives={showToneAdjectives}
+            size={size}
+          />
+        )}
+      </div>
+
+      {/* JSON-LD Structured Data */}
+      {includeStructuredData && structuredDataProps && (
+        <script
+          type={structuredDataProps.type}
+          dangerouslySetInnerHTML={structuredDataProps.dangerouslySetInnerHTML}
+        />
+      )}
+    </>
+  );
+}
+
+/**
+ * Inline layout (default) - author info in a single line
+ */
+function InlineByline({
+  author,
+  publishedAt,
+  readingTime,
+  wordCount,
+  showBio,
+  showToneAdjectives,
+  size,
+}: {
+  author: PublishedAuthor;
+  publishedAt?: string;
+  readingTime?: number;
+  wordCount?: number;
+  showBio: boolean;
+  showToneAdjectives: boolean;
+  size: "sm" | "md" | "lg";
+}) {
+  const textSize = getTextSizeClass(size);
+
+  return (
+    <div className="inline-byline">
+      {/* Author info line */}
+      <div
+        className={cn(
+          "flex flex-wrap items-center gap-3",
+          textSize,
+          "text-muted-foreground",
+        )}
+      >
+        <div className="author-info flex items-center gap-2">
+          <AuthorAvatar author={author} size={size} />
+          <span className="author-prefix">By</span>
+          <span className="author-name text-foreground font-medium">
+            {author.name}
+          </span>
+          {author.isGuest && (
+            <Badge
+              variant="secondary"
+              className={cn(size === "sm" && "px-1.5 py-0.5 text-xs")}
+            >
+              Guest
+            </Badge>
+          )}
+        </div>
+
+        <AuthorSocialLinks author={author} />
+
+        {publishedAt && (
+          <time dateTime={publishedAt} className="published-date">
+            {formatDate(publishedAt)}
+          </time>
+        )}
+
+        {readingTime && (
+          <span className="reading-time">{readingTime} min read</span>
+        )}
+
+        {wordCount && (
+          <span className="word-count">{wordCount.toLocaleString()} words</span>
+        )}
+      </div>
+
+      {/* Optional bio */}
+      {showBio && author.bio && (
+        <div className={cn("author-bio mt-2", textSize)}>
+          <p className="text-muted-foreground">{author.bio}</p>
+        </div>
+      )}
+
+      {/* Optional tone adjectives */}
+      {showToneAdjectives && author.toneAdjectives.length > 0 && (
+        <div
+          className={cn(
+            "author-tone mt-1",
+            size === "sm" ? "text-xs" : "text-sm",
+          )}
+        >
+          <span className="text-muted-foreground">
+            Writing style: {author.toneAdjectives.join(", ")}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Stacked layout - author info in multiple lines for better readability
+ */
+function StackedByline({
+  author,
+  publishedAt,
+  readingTime,
+  wordCount,
+  showBio,
+  showToneAdjectives,
+  size,
+}: {
+  author: PublishedAuthor;
+  publishedAt?: string;
+  readingTime?: number;
+  wordCount?: number;
+  showBio: boolean;
+  showToneAdjectives: boolean;
+  size: "sm" | "md" | "lg";
+}) {
+  const textSize = getTextSizeClass(size);
+
+  return (
+    <div className="stacked-byline space-y-2">
+      {/* Author name and guest indicator */}
+      <div className="author-info flex items-center gap-2">
+        <AuthorAvatar author={author} size={size} />
+        <span
+          className={cn(
+            "author-name text-foreground font-medium",
+            size === "lg" ? "text-lg" : size === "md" ? "text-base" : "text-sm",
+          )}
+        >
+          {author.name}
+        </span>
+        {author.isGuest && (
+          <Badge
+            variant="secondary"
+            className={cn(size === "sm" && "px-1.5 py-0.5 text-xs")}
+          >
+            Guest Author
+          </Badge>
+        )}
+        <AuthorSocialLinks author={author} />
+      </div>
+
+      {/* Publication metadata */}
+      {(Boolean(publishedAt) || Boolean(readingTime) || Boolean(wordCount)) && (
+        <div
+          className={cn(
+            "metadata flex flex-wrap items-center gap-3",
+            textSize,
+            "text-muted-foreground",
+          )}
+        >
+          {publishedAt && (
+            <time dateTime={publishedAt} className="published-date">
+              {formatDate(publishedAt)}
+            </time>
+          )}
+          {readingTime && (
+            <span className="reading-time">{readingTime} min read</span>
+          )}
+          {wordCount && (
+            <span className="word-count">
+              {wordCount.toLocaleString()} words
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Optional bio */}
+      {showBio && author.bio && (
+        <div className={cn("author-bio", textSize)}>
+          <p className="text-muted-foreground">{author.bio}</p>
+        </div>
+      )}
+
+      {/* Optional tone adjectives */}
+      {showToneAdjectives && author.toneAdjectives.length > 0 && (
+        <div
+          className={cn("author-tone", size === "sm" ? "text-xs" : "text-sm")}
+        >
+          <span className="text-muted-foreground">
+            Writing style: {author.toneAdjectives.join(", ")}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Minimal layout - just author name and essential info
+ */
+function MinimalByline({
+  author,
+  publishedAt,
+  readingTime,
+  wordCount: _wordCount,
+  size,
+}: {
+  author: PublishedAuthor;
+  publishedAt?: string;
+  readingTime?: number;
+  wordCount?: number;
+  size: "sm" | "md" | "lg";
+}) {
+  const textSize = getTextSizeClass(size);
+
+  return (
+    <div
+      className={cn(
+        "minimal-byline flex items-center gap-2",
+        textSize,
+        "text-muted-foreground",
+      )}
+    >
+      <AuthorAvatar author={author} size={size} />
+      <span className="author-name text-foreground font-medium">
+        {author.name}
+      </span>
+      {author.isGuest && (
+        <Badge
+          variant="outline"
+          className={cn(size === "sm" && "px-1.5 py-0.5 text-xs")}
+        >
+          Guest
+        </Badge>
+      )}
+      {publishedAt && (
+        <>
+          <span>•</span>
+          <time dateTime={publishedAt}>{formatDate(publishedAt, "short")}</time>
+        </>
+      )}
+      {readingTime && (
+        <>
+          <span>•</span>
+          <span>{readingTime} min</span>
+        </>
+      )}
+    </div>
+  );
+}
+
+function AuthorAvatar({
+  author,
+  size,
+}: {
+  author: PublishedAuthor;
+  size: "sm" | "md" | "lg";
+}) {
+  const sizeClass =
+    size === "lg"
+      ? "h-12 w-12 text-base"
+      : size === "md"
+        ? "h-9 w-9 text-sm"
+        : "h-7 w-7 text-xs";
+  const initials = getAuthorInitials(author.name);
+
+  if (author.avatarUrl) {
+    return (
+      <Image
+        src={author.avatarUrl}
+        alt={author.name}
+        width={size === "lg" ? 48 : size === "md" ? 36 : 28}
+        height={size === "lg" ? 48 : size === "md" ? 36 : 28}
+        className={cn(
+          "author-avatar shrink-0 rounded-full object-cover",
+          sizeClass,
+        )}
+        loading="lazy"
+      />
+    );
+  }
+
+  return (
+    <span
+      className={cn(
+        "author-avatar-fallback bg-muted text-muted-foreground inline-flex shrink-0 items-center justify-center rounded-full font-medium",
+        sizeClass,
+      )}
+      aria-hidden="true"
+    >
+      {initials}
+    </span>
+  );
+}
+
+function AuthorSocialLinks({ author }: { author: PublishedAuthor }) {
+  const links = getAuthorSocialLinks(author);
+  if (links.length === 0) return null;
+
+  return (
+    <span className="author-social-links inline-flex items-center gap-1">
+      {links.map((link) => (
+        <a
+          key={link.key}
+          href={link.href}
+          target={link.external ? "_blank" : undefined}
+          rel={link.external ? "noopener noreferrer" : undefined}
+          aria-label={`${author.name} ${link.label}`}
+          className="text-muted-foreground hover:text-foreground hover:bg-muted inline-flex size-6 items-center justify-center rounded-full transition-colors"
+        >
+          {link.icon}
+        </a>
+      ))}
+    </span>
+  );
+}
+
+function getAuthorSocialLinks(author: PublishedAuthor): AuthorSocialLinkView[] {
+  const links = author.socialLinks;
+  if (!links) return [];
+
+  const socialLinks: Array<AuthorSocialLinkView | false | undefined> = [
+    links.website
+      ? {
+          key: "website",
+          href: links.website,
+          label: "website",
+          external: true,
+          icon: <Globe className="size-3.5" aria-hidden="true" />,
+        }
+      : undefined,
+    links.x
+      ? {
+          key: "x",
+          href: links.x,
+          label: "on X",
+          external: true,
+          icon: <FaXTwitter className="size-3.5" aria-hidden="true" />,
+        }
+      : undefined,
+    links.linkedin
+      ? {
+          key: "linkedin",
+          href: links.linkedin,
+          label: "on LinkedIn",
+          external: true,
+          icon: <FaLinkedinIn className="size-3.5" aria-hidden="true" />,
+        }
+      : undefined,
+    links.github
+      ? {
+          key: "github",
+          href: links.github,
+          label: "on GitHub",
+          external: true,
+          icon: <FaGithub className="size-3.5" aria-hidden="true" />,
+        }
+      : undefined,
+    links.email
+      ? {
+          key: "email",
+          href: `mailto:${links.email}`,
+          label: "email",
+          external: false,
+          icon: <Mail className="size-3.5" aria-hidden="true" />,
+        }
+      : undefined,
+  ];
+
+  return socialLinks.filter((link): link is AuthorSocialLinkView =>
+    Boolean(link),
+  );
+}
+
+function getAuthorInitials(name: string): string {
+  const initials = name
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("");
+
+  return initials || "?";
+}
+
+/**
+ * Get variant-specific styles
+ */
+function getVariantStyles(
+  variant: "inline" | "stacked" | "minimal",
+  size: "sm" | "md" | "lg",
+): string {
+  const baseStyles = "author-byline";
+
+  const sizeStyles = {
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+  };
+
+  return cn(baseStyles, sizeStyles[size]);
+}
+
+/**
+ * Get text size class for content
+ */
+function getTextSizeClass(size: "sm" | "md" | "lg"): string {
+  switch (size) {
+    case "sm":
+      return "text-xs";
+    case "md":
+      return "text-sm";
+    case "lg":
+      return "text-base";
+    default:
+      return "text-sm";
+  }
+}
+
+/**
+ * Format date for display
+ */
+function formatDate(
+  dateString: string,
+  format: "long" | "short" = "long",
+): string {
+  const date = new Date(dateString);
+
+  if (format === "short") {
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  }
+
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}

package/dist/components/AuthorPages.test.ts

@@ -0,0 +1,87 @@
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import { BlogAuthorsIndexPage } from "./AuthorPages";
+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 jane: PublishedAuthor = {
+  id: "author-1",
+  name: "Jane Doe",
+  slug: "jane-doe",
+  bio: "Writes about product systems.",
+  isGuest: false,
+  toneAdjectives: [],
+};
+
+const alex: PublishedAuthor = {
+  id: "author-2",
+  name: "Alex Stone",
+  slug: "alex-stone",
+  isGuest: false,
+  toneAdjectives: [],
+};
+
+function article(
+  slug: string,
+  title: string,
+  author: PublishedAuthor,
+): 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("BlogAuthorsIndexPage", () => {
+  it("lists unique published authors with article counts", () => {
+    const html = renderToStaticMarkup(
+      React.createElement(BlogAuthorsIndexPage, {
+        articles: [
+          article("first", "First", jane),
+          article("second", "Second", jane),
+          article("third", "Third", alex),
+        ],
+        basePath: "/new-blog",
+        title: "dypt authors",
+      }),
+    );
+
+    expect(html).toContain("dypt authors");
+    expect(html).toContain("Jane Doe");
+    expect(html).toContain("Alex Stone");
+    expect(html).toContain("/new-blog/authors/jane-doe");
+    expect(html).toContain("/new-blog/authors/alex-stone");
+    expect(html).toContain("2 articles");
+    expect(html).toContain("1 article");
+  });
+});