@xexr/blog-platform 1.0.6 → 1.0.8

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

@@ -0,0 +1,79 @@
+/* eslint-disable @next/next/no-img-element */
+
+import type React from "react";
+
+import { cn } from "../lib/utils";
+
+type ArticleImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+
+export function ExpandableArticleImage({
+  alt = "",
+  className,
+  src,
+  ...props
+}: ArticleImageProps) {
+  if (typeof src !== "string" || src.length === 0) {
+    return <img alt={alt} className={className} {...props} />;
+  }
+
+  const previewId = `blog-image-preview-${hashImageSrc(src)}`;
+
+  return (
+    <>
+      <a
+        href={`#${previewId}`}
+        className="group mx-auto block cursor-zoom-in rounded-2xl focus-visible:ring-2 focus-visible:ring-[var(--blog-text-accent)] focus-visible:ring-offset-2 focus-visible:outline-none"
+        aria-label={alt ? `Expand image: ${alt}` : "Expand article image"}
+      >
+        <img
+          src={src}
+          alt={alt}
+          className={cn(
+            "mx-auto rounded-2xl border border-[var(--blog-accent-border)] shadow-[0_18px_60px_rgb(168_85_247_/_0.12)] transition-opacity group-hover:opacity-95",
+            className,
+          )}
+          {...props}
+        />
+      </a>
+
+      <div
+        id={previewId}
+        className="invisible fixed inset-0 z-50 flex opacity-0 transition-opacity target:visible target:opacity-100"
+        role="dialog"
+        aria-modal="true"
+        aria-label={alt ? `Image preview: ${alt}` : "Image preview"}
+      >
+        <a
+          href="#article-content"
+          className="absolute inset-0 bg-black/85 backdrop-blur-sm"
+          aria-label="Close image preview"
+        />
+        <div className="pointer-events-none relative z-10 flex min-h-screen w-full items-center justify-center p-4 sm:p-6">
+          <img
+            src={src}
+            alt={alt}
+            className="pointer-events-auto h-[88vh] w-[94vw] rounded-3xl object-contain shadow-2xl"
+          />
+        </div>
+        <a
+          href="#article-content"
+          className="absolute top-4 right-4 z-20 inline-flex size-10 items-center justify-center rounded-full border border-white/20 bg-black/50 text-xl leading-none text-white no-underline transition-colors hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-none"
+          aria-label="Close image preview"
+        >
+          ×
+        </a>
+      </div>
+    </>
+  );
+}
+
+function hashImageSrc(src: string): string {
+  let hash = 0;
+
+  for (let index = 0; index < src.length; index += 1) {
+    hash = (hash << 5) - hash + src.charCodeAt(index);
+    hash |= 0;
+  }
+
+  return Math.abs(hash).toString(36);
+}