@xexr/blog-platform 1.0.7 → 1.0.9

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

@@ -0,0 +1,387 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowLeft, Globe, Mail } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+
+import Pagination from "../../../../components/Pagination";
+import { Badge } from "../../../../components/ui/badge";
+import { Separator } from "../../../../components/ui/separator";
+import {
+  createStructuredDataScript,
+  generateAuthorStructuredData,
+} from "../../../../lib/structured-data";
+import { cn } from "../../../../lib/utils";
+import {
+  buildBlogPath,
+  buildAuthorPath,
+  normalizeBlogBasePath,
+} from "../../../../lib/urls";
+import { type BlogTheme, getBlogThemeStyle } from "../../../../lib/article-ui";
+import type {
+  PublishedArticle,
+  PublishedAuthor,
+  PublishedSite,
+} from "../../../../types/contracts";
+
+interface AuthorPageProps {
+  author: PublishedAuthor;
+  articles: PublishedArticle[];
+  site: PublishedSite;
+  className?: string;
+  basePath?: string;
+  theme?: BlogTheme;
+  pagination?: {
+    currentPage: number;
+    totalPages: number;
+    baseUrl?: string;
+    totalItems?: number;
+  };
+  navigation?: {
+    backToHome?: {
+      url: string;
+      label?: string;
+    };
+  };
+}
+
+export default function AuthorPage({
+  author,
+  articles,
+  site,
+  className,
+  basePath = "/blog",
+  theme,
+  pagination,
+  navigation,
+}: AuthorPageProps) {
+  const normalizedBasePath = normalizeBlogBasePath(basePath) || "/";
+  const backUrl = navigation?.backToHome?.url ?? normalizedBasePath;
+  const authorUrl = buildAuthorPath(normalizedBasePath, author.slug);
+  const totalArticleCount = pagination?.totalItems ?? articles.length;
+  const structuredDataProps = createStructuredDataScript(
+    generateAuthorStructuredData(author, {
+      pathPrefix: normalizedBasePath,
+    }),
+  );
+
+  return (
+    <main
+      style={getBlogThemeStyle(theme)}
+      className={cn(
+        "author-page mx-auto max-w-5xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16",
+        className,
+      )}
+    >
+      <header className="mb-10 space-y-8 sm:mb-14">
+        <Link
+          href={backUrl}
+          className="text-muted-foreground group focus-visible:ring-ring inline-flex items-center gap-2 rounded-md px-2 py-1 text-sm font-medium transition-colors hover:text-[var(--blog-accent)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+        >
+          <ArrowLeft
+            className="size-4 transition-transform group-hover:-translate-x-1"
+            aria-hidden="true"
+          />
+          {navigation?.backToHome?.label ?? "Back to all articles"}
+        </Link>
+
+        <div className="grid gap-6 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center">
+          <AuthorAvatar author={author} />
+          <div className="min-w-0 space-y-4">
+            <div className="space-y-2">
+              <div className="flex flex-wrap items-center gap-2">
+                {author.isGuest && (
+                  <Badge variant="outline" className="text-xs">
+                    Guest Author
+                  </Badge>
+                )}
+              </div>
+              <h1 className="text-foreground text-4xl leading-tight font-semibold text-balance sm:text-5xl">
+                {author.name}
+              </h1>
+            </div>
+
+            {author.bio && (
+              <p className="text-muted-foreground max-w-3xl text-lg leading-relaxed text-pretty">
+                {author.bio}
+              </p>
+            )}
+
+            <AuthorSocialLinks author={author} />
+          </div>
+        </div>
+      </header>
+
+      <Separator className="mb-8" />
+
+      <section aria-labelledby="author-articles-title" className="space-y-6">
+        <div className="flex flex-wrap items-end justify-between gap-3">
+          <div>
+            <h2
+              id="author-articles-title"
+              className="text-foreground text-2xl font-semibold"
+            >
+              Articles by {author.name}
+            </h2>
+            <p className="text-muted-foreground mt-1 text-sm">
+              {totalArticleCount}{" "}
+              {totalArticleCount === 1 ? "article" : "articles"} on {site.name}
+            </p>
+          </div>
+        </div>
+
+        {articles.length === 0 ? (
+          <p className="text-muted-foreground border-border rounded-2xl border p-6">
+            This author does not have any published articles yet.
+          </p>
+        ) : (
+          <div className="divide-border divide-y">
+            {articles.map((article) => (
+              <AuthorArticlePreview
+                key={article.id}
+                article={article}
+                basePath={normalizedBasePath}
+              />
+            ))}
+          </div>
+        )}
+
+        {pagination && pagination.totalPages > 1 && (
+          <div className="pt-4">
+            <Pagination
+              currentPage={pagination.currentPage}
+              totalPages={pagination.totalPages}
+              baseUrl={pagination.baseUrl ?? authorUrl}
+              className="justify-center"
+            />
+          </div>
+        )}
+      </section>
+
+      <script
+        type={structuredDataProps.type}
+        dangerouslySetInnerHTML={structuredDataProps.dangerouslySetInnerHTML}
+      />
+    </main>
+  );
+}
+
+function AuthorSocialLinks({ author }: { author: PublishedAuthor }) {
+  const links = getAuthorSocialLinks(author);
+
+  if (links.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className="flex flex-wrap items-center gap-2"
+      aria-label="Author links"
+    >
+      {links.map((link) => (
+        <a
+          key={link.label}
+          href={link.href}
+          target={link.external ? "_blank" : undefined}
+          rel={link.external ? "noopener noreferrer" : undefined}
+          aria-label={link.ariaLabel}
+          className="text-muted-foreground hover:text-foreground border-border inline-flex size-9 items-center justify-center rounded-full border grayscale transition-colors hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)]"
+        >
+          {link.icon}
+        </a>
+      ))}
+    </div>
+  );
+}
+
+function getAuthorSocialLinks(author: PublishedAuthor) {
+  const links = author.socialLinks;
+
+  if (!links) {
+    return [];
+  }
+
+  return [
+    links.website
+      ? {
+          href: links.website,
+          label: "website",
+          ariaLabel: `${author.name}'s website`,
+          external: true,
+          icon: <Globe className="size-4" aria-hidden="true" />,
+        }
+      : null,
+    (links.x ?? links.twitter)
+      ? {
+          href: links.x ?? links.twitter ?? "",
+          label: "x",
+          ariaLabel: `${author.name} on X`,
+          external: true,
+          icon: (
+            <span className="text-sm font-semibold" aria-hidden="true">
+              X
+            </span>
+          ),
+        }
+      : null,
+    links.linkedin
+      ? {
+          href: links.linkedin,
+          label: "linkedin",
+          ariaLabel: `${author.name} on LinkedIn`,
+          external: true,
+          icon: (
+            <span className="text-sm font-bold" aria-hidden="true">
+              in
+            </span>
+          ),
+        }
+      : null,
+    links.github
+      ? {
+          href: links.github,
+          label: "github",
+          ariaLabel: `${author.name} on GitHub`,
+          external: true,
+          icon: (
+            <span className="text-xs font-bold" aria-hidden="true">
+              GH
+            </span>
+          ),
+        }
+      : null,
+    links.email
+      ? {
+          href: `mailto:${links.email}`,
+          label: "email",
+          ariaLabel: `Email ${author.name}`,
+          external: false,
+          icon: <Mail className="size-4" aria-hidden="true" />,
+        }
+      : null,
+  ].filter((link): link is NonNullable<typeof link> => link !== null);
+}
+
+function AuthorArticlePreview({
+  article,
+  basePath,
+}: {
+  article: PublishedArticle;
+  basePath: string;
+}) {
+  const publishedRelativeLabel = formatDistanceToNow(
+    new Date(article.publishedAt),
+    { addSuffix: true },
+  );
+
+  return (
+    <article className="py-6 first:pt-0 last:pb-0">
+      <Link
+        href={buildBlogPath(basePath, article.slug)}
+        className="group grid gap-4 hover:no-underline sm:grid-cols-[minmax(0,1fr)_12rem] sm:items-start"
+      >
+        <div className="min-w-0 space-y-3">
+          <h3 className="text-xl leading-tight font-semibold text-balance transition-colors group-hover:text-[var(--blog-text-accent)]">
+            {article.title}
+          </h3>
+          {article.excerpt && (
+            <p className="text-muted-foreground line-clamp-3 leading-relaxed">
+              {article.excerpt}
+            </p>
+          )}
+          <div className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+            <time dateTime={article.publishedAt}>{publishedRelativeLabel}</time>
+            <span aria-hidden="true">•</span>
+            <span>{Math.ceil(article.readingSeconds / 60)} min read</span>
+          </div>
+        </div>
+
+        {article.featuredImage && (
+          <div className="border-border relative aspect-[16/10] overflow-hidden rounded-xl border bg-[var(--blog-accent-bg)]">
+            <Image
+              src={article.featuredImage}
+              alt={
+                article.featuredImageAlt ??
+                `Featured image for ${article.title}`
+              }
+              width={320}
+              height={200}
+              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+            />
+          </div>
+        )}
+      </Link>
+    </article>
+  );
+}
+
+function AuthorAvatar({ author }: { author: PublishedAuthor }) {
+  if (author.avatarUrl) {
+    return (
+      <Image
+        src={author.avatarUrl}
+        alt={author.name}
+        width={128}
+        height={128}
+        className="size-28 rounded-full border border-[var(--blog-accent-border)] object-cover sm:size-32"
+        priority
+      />
+    );
+  }
+
+  return (
+    <span className="bg-muted text-muted-foreground inline-flex size-28 items-center justify-center rounded-full text-3xl font-semibold sm:size-32">
+      {getAuthorInitials(author.name)}
+    </span>
+  );
+}
+
+function getAuthorInitials(name: string): string {
+  const initials = name
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("");
+
+  return initials || "?";
+}
+
+export function generateAuthorPageMetadata(
+  author: PublishedAuthor,
+  site: PublishedSite,
+  basePath = "/blog",
+) {
+  const canonicalUrl = `https://${site.domain
+    .replace(/^https?:\/\//, "")
+    .replace(/\/+$/, "")}${buildAuthorPath(basePath, author.slug)}`;
+  const title = `${author.name} - ${site.name}`;
+  const description =
+    author.bio ?? `Read articles by ${author.name} on ${site.name}.`;
+
+  return {
+    title,
+    description,
+    authors: [{ name: author.name }],
+    openGraph: {
+      title,
+      description,
+      type: "profile",
+      url: canonicalUrl,
+      images: author.avatarUrl
+        ? [{ url: author.avatarUrl, alt: author.name }]
+        : undefined,
+      siteName: site.name,
+    },
+    twitter: {
+      card: author.avatarUrl ? "summary_large_image" : "summary",
+      title,
+      description,
+      images: author.avatarUrl ? [author.avatarUrl] : undefined,
+    },
+    alternates: {
+      canonical: canonicalUrl,
+    },
+  };
+}

package/dist/app/blog/page.tsx

@@ -12,12 +12,13 @@ import {
   generateBlogHomeStructuredData,
   createStructuredDataScript,
 } from "../../lib/structured-data";
-import { buildBlogPath, normalizeBlogBasePath } from "../../lib/urls";
-import { formatDistanceToNow } from "date-fns";
 import {
-  type BlogTheme,
-  getBlogThemeStyle,
-} from "../../lib/article-ui";
+  buildAuthorPath,
+  buildBlogPath,
+  normalizeBlogBasePath,
+} from "../../lib/urls";
+import { formatDistanceToNow } from "date-fns";
+import { type BlogTheme, getBlogThemeStyle } from "../../lib/article-ui";
 
 interface BlogHomePageProps {
   articles: PublishedArticle[];
@@ -169,56 +170,110 @@ function ArticlePreview({
 
   return (
     <article className="group border-border mb-6 block border-b pb-6 last:mb-0 last:border-b-0 last:pb-0 sm:mb-8 sm:pb-8">
-      <Link
-        href={articleUrl}
-        className="focus-visible:ring-ring block rounded-2xl hover:no-underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-        aria-label={`Read article: ${article.title}`}
-      >
-        {/* Mobile/Small Tablet: Vertical layout */}
-        <div className="space-y-4 lg:hidden">
-          {imageUrl && (
-            <div className="relative aspect-[16/10] w-full overflow-hidden rounded-2xl">
-              <Image
-                src={imageUrl}
-                alt={
-                  article.featuredImageAlt ??
-                  `Featured image for ${article.title}`
-                }
-                width={400}
-                height={250}
-                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-              />
-            </div>
-          )}
+      {/* Mobile/Small Tablet: Vertical layout */}
+      <div className="space-y-4 lg:hidden">
+        {imageUrl && (
+          <Link
+            href={articleUrl}
+            className="focus-visible:ring-ring relative block aspect-[16/10] w-full overflow-hidden rounded-2xl focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            aria-label={`Read article: ${article.title}`}
+          >
+            <Image
+              src={imageUrl}
+              alt={
+                article.featuredImageAlt ??
+                `Featured image for ${article.title}`
+              }
+              width={400}
+              height={250}
+              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+            />
+          </Link>
+        )}
 
-          <div className="space-y-3">
-            <h2 className="group-hover:text-[var(--blog-accent)] text-lg leading-tight font-bold text-balance transition-colors sm:text-xl md:text-2xl">
+        <div className="space-y-3">
+          <Link
+            href={articleUrl}
+            className="focus-visible:ring-ring block rounded-md hover:no-underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+          >
+            <h2 className="text-lg leading-tight font-bold text-balance transition-colors group-hover:text-[var(--blog-accent)] sm:text-xl md:text-2xl">
               {article.title}
             </h2>
+          </Link>
 
-            <div className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
-              {article.author && (
-                <>
-                  <span className="inline-flex items-center gap-2 font-medium">
-                    <AuthorAvatar author={article.author} size="sm" />
-                    {article.author.name}
-                  </span>
-                  <span className="text-border">•</span>
-                </>
-              )}
-              <time
-                dateTime={article.publishedAt}
-                className="font-medium"
-                aria-label={`Published ${formattedDate}`}
-              >
-                {formattedDate}
-              </time>
-              <span className="text-border">•</span>
-              <span className="font-medium">{readingTime}</span>
+          <div className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+            {article.author && (
+              <>
+                <AuthorLink author={article.author} basePath={basePath} />
+                <span className="text-border">•</span>
+              </>
+            )}
+            <time
+              dateTime={article.publishedAt}
+              className="font-medium"
+              aria-label={`Published ${formattedDate}`}
+            >
+              {formattedDate}
+            </time>
+            <span className="text-border">•</span>
+            <span className="font-medium">{readingTime}</span>
+          </div>
+
+          {article.excerpt && (
+            <p className="text-muted-foreground line-clamp-3 text-sm leading-relaxed sm:text-base">
+              {article.excerpt}
+            </p>
+          )}
+
+          {(article.topics ?? []).length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {(article.topics ?? []).map((topic) => (
+                <span
+                  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>
+              ))}
             </div>
+          )}
+        </div>
+      </div>
+
+      {/* Large Tablet/Desktop: Horizontal layout */}
+      <div className="hidden items-start gap-6 lg:flex xl:gap-8">
+        {imageUrl && (
+          <Link
+            href={articleUrl}
+            className="focus-visible:ring-ring relative block aspect-[16/10] w-64 shrink-0 overflow-hidden rounded-2xl focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none xl:w-72"
+            aria-label={`Read article: ${article.title}`}
+          >
+            <Image
+              src={imageUrl}
+              alt={
+                article.featuredImageAlt ??
+                `Featured image for ${article.title}`
+              }
+              width={288}
+              height={180}
+              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+            />
+          </Link>
+        )}
+
+        <div className="flex min-h-[180px] flex-1 flex-col justify-between space-y-4 xl:min-h-[200px]">
+          <div className="space-y-4">
+            <Link
+              href={articleUrl}
+              className="focus-visible:ring-ring block rounded-md hover:no-underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+            >
+              <h2 className="text-2xl leading-tight font-bold text-balance transition-colors group-hover:text-[var(--blog-accent)] xl:text-3xl">
+                {article.title}
+              </h2>
+            </Link>
 
             {article.excerpt && (
-              <p className="text-muted-foreground line-clamp-3 text-sm leading-relaxed sm:text-base">
+              <p className="text-muted-foreground line-clamp-3 text-base leading-relaxed xl:text-lg">
                 {article.excerpt}
               </p>
             )}
@@ -236,78 +291,48 @@ function ArticlePreview({
               </div>
             )}
           </div>
-        </div>
 
-        {/* Large Tablet/Desktop: Horizontal layout */}
-        <div className="hidden items-start gap-6 lg:flex xl:gap-8">
-          {imageUrl && (
-            <div className="relative aspect-[16/10] w-64 shrink-0 overflow-hidden rounded-2xl xl:w-72">
-              <Image
-                src={imageUrl}
-                alt={
-                  article.featuredImageAlt ??
-                  `Featured image for ${article.title}`
-                }
-                width={288}
-                height={180}
-                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-              />
-            </div>
-          )}
-
-          <div className="flex min-h-[180px] flex-1 flex-col justify-between space-y-4 xl:min-h-[200px]">
-            <div className="space-y-4">
-              <h2 className="group-hover:text-[var(--blog-accent)] text-2xl leading-tight font-bold text-balance transition-colors xl:text-3xl">
-                {article.title}
-              </h2>
-
-              {article.excerpt && (
-                <p className="text-muted-foreground line-clamp-3 text-base leading-relaxed xl:text-lg">
-                  {article.excerpt}
-                </p>
-              )}
-
-              {(article.topics ?? []).length > 0 && (
-                <div className="flex flex-wrap gap-2">
-                  {(article.topics ?? []).map((topic) => (
-                    <span
-                      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>
-                  ))}
-                </div>
-              )}
-            </div>
-
-            <div className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
-              {article.author && (
-                <>
-                  <span className="inline-flex items-center gap-2 font-medium">
-                    <AuthorAvatar author={article.author} size="sm" />
-                    {article.author.name}
-                  </span>
-                  <span className="text-border">•</span>
-                </>
-              )}
-              <time
-                dateTime={article.publishedAt}
-                className="font-medium"
-                aria-label={`Published ${formattedDate}`}
-              >
-                {formattedDate}
-              </time>
-              <span className="text-border">•</span>
-              <span className="font-medium">{readingTime}</span>
-            </div>
+          <div className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+            {article.author && (
+              <>
+                <AuthorLink author={article.author} basePath={basePath} />
+                <span className="text-border">•</span>
+              </>
+            )}
+            <time
+              dateTime={article.publishedAt}
+              className="font-medium"
+              aria-label={`Published ${formattedDate}`}
+            >
+              {formattedDate}
+            </time>
+            <span className="text-border">•</span>
+            <span className="font-medium">{readingTime}</span>
           </div>
         </div>
-      </Link>
+      </div>
     </article>
   );
 }
 
+function AuthorLink({
+  author,
+  basePath,
+}: {
+  author: PublishedAuthor;
+  basePath: string;
+}) {
+  return (
+    <Link
+      href={buildAuthorPath(basePath, author.slug)}
+      className="inline-flex items-center gap-2 font-medium transition-colors hover:text-[var(--blog-accent)] hover:no-underline"
+    >
+      <AuthorAvatar author={author} size="sm" />
+      {author.name}
+    </Link>
+  );
+}
+
 function AuthorAvatar({
   author,
   size,