@xexr/blog-platform 1.0.7 → 1.0.9

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

@@ -7,21 +7,27 @@ import {
   type PublishedAuthor,
 } from "../../../types/contracts";
 import { cn } from "../../../lib/utils";
-import { ArrowLeft, ArrowUpRight, Mail, Share2 } from "lucide-react";
+import { ArrowLeft, ArrowUpRight, Globe, Mail } from "lucide-react";
+import { FaGithub, FaLinkedinIn, FaXTwitter } from "react-icons/fa6";
 import { Badge } from "../../../components/ui/badge";
 import { Card, CardContent } from "../../../components/ui/card";
+import ArticleTopActions from "../../../components/ArticleTopActions";
 import { ExpandableArticleImage } from "../../../components/ExpandableArticleImage";
+import { ArticleReadingProgress } from "../../../components/ArticleReadingProgress";
 import { Separator } from "../../../components/ui/separator";
 import {
   generateCompleteArticleStructuredData,
   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,
-  formatTableOfContentsSummary,
   formatArticleDateMeta,
   getBlogThemeStyle,
 } from "../../../lib/article-ui";
@@ -91,11 +97,15 @@ export default function ArticlePage({
   showShareLinks = true,
 }: ArticlePageProps) {
   const normalizedBasePath = normalizeBlogBasePath(basePath) || "/";
-  const dateMeta = formatArticleDateMeta(article.publishedAt, article.updatedAt);
+  const dateMeta = formatArticleDateMeta(
+    article.publishedAt,
+    article.updatedAt,
+  );
   const readingTime = formatReadingTime(article.readingSeconds);
   const tocItems = extractTableOfContents(article.content);
   const articleUrl =
-    article.meta.canonicalUrl ?? buildBlogPath(normalizedBasePath, article.slug);
+    article.meta.canonicalUrl ??
+    buildBlogPath(normalizedBasePath, article.slug);
 
   // Use the featured image URL provided by Bloggy (hosted on Bloggy's domain)
   const imageUrl = article.featuredImage;
@@ -113,7 +123,7 @@ export default function ArticlePage({
         <header className="mx-auto mb-8 max-w-4xl sm:mb-12 lg:mb-16">
           <Link
             href={navigation.backToHome.url}
-            className="text-muted-foreground hover:text-[var(--blog-accent)] group focus-visible:ring-ring inline-flex touch-manipulation items-center space-x-2 rounded-md px-2 py-1 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none sm:space-x-3"
+            className="text-muted-foreground group focus-visible:ring-ring inline-flex touch-manipulation items-center space-x-2 rounded-md px-2 py-1 transition-colors hover:text-[var(--blog-accent)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none sm:space-x-3"
             aria-label={navigation.backToHome.label ?? "Return to blog"}
           >
             <ArrowLeft
@@ -149,8 +159,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
@@ -168,7 +183,9 @@ export default function ArticlePage({
               Published {dateMeta.publishedDateLabel}
             </time>
             <span className="text-border">•</span>
-            <span className="font-medium">{dateMeta.publishedRelativeLabel}</span>
+            <span className="font-medium">
+              {dateMeta.publishedRelativeLabel}
+            </span>
             <span className="text-border">•</span>
             <span className="font-medium">{readingTime}</span>
           </div>
@@ -179,6 +196,14 @@ export default function ArticlePage({
             </time>
           )}
 
+          {showShareLinks && (
+            <ArticleTopActions
+              title={article.title}
+              url={articleUrl}
+              size="sm"
+            />
+          )}
+
           <div className="bg-border h-px w-6 sm:w-8" aria-hidden="true"></div>
 
           {(article.topics ?? []).length > 0 ? (
@@ -190,10 +215,7 @@ export default function ArticlePage({
                 <Link
                   key={topic.id}
                   href={buildBlogPath(
-                    (navigation?.backToHome?.url ?? "/blog").replace(
-                      /\/$/,
-                      "",
-                    ),
+                    (navigation?.backToHome?.url ?? "/blog").replace(/\/$/, ""),
                     `topics/${topic.slug}`,
                   )}
                   className="rounded-full border border-[var(--blog-accent-border)] bg-[var(--blog-accent-bg)] px-3 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)]"
@@ -235,9 +257,16 @@ export default function ArticlePage({
         className="article-content mx-auto grid max-w-6xl grid-cols-1 gap-8 lg:grid-cols-[minmax(0,1fr)_14rem] lg:gap-12"
       >
         <div className="min-w-0">
-          <ArticleTableOfContents items={tocItems} variant="mobile" />
+          <ArticleReadingProgress
+            items={tocItems}
+            contentId="article-body"
+            variant="mobile"
+          />
 
-          <div 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">
+          <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"
+          >
             <MDXRemote
               source={article.content}
               options={articleMdxOptions}
@@ -246,31 +275,47 @@ export default function ArticlePage({
           </div>
         </div>
 
-        <ArticleTableOfContents items={tocItems} variant="desktop" />
+        <ArticleReadingProgress
+          items={tocItems}
+          contentId="article-body"
+          variant="desktop"
+          showProgress={false}
+        />
       </div>
 
       {/* Author Bio */}
       {article.author?.bio && (
-        <div className="author-bio mx-auto mt-12 max-w-4xl">
+        <div id="about-author" className="author-bio mx-auto mt-12 max-w-4xl">
           <Separator className="mb-8" />
           <Card className="border-[var(--blog-accent-border)] bg-[var(--blog-accent-bg)]">
             <CardContent className="flex flex-col gap-4 p-5 sm:flex-row sm:items-start sm:p-6">
               <div className="shrink-0">
                 <AuthorAvatar author={article.author} size="lg" />
               </div>
-              <div className="min-w-0 space-y-2">
-                <div>
-                  <p className="text-muted-foreground text-sm font-medium">
-                    Written by
-                  </p>
-                  <h2 className="text-foreground flex flex-wrap items-center gap-2 text-xl font-semibold">
-                    {article.author.name}
-                    {article.author.isGuest && (
-                      <Badge variant="outline" className="text-xs">
-                        Guest Author
-                      </Badge>
-                    )}
-                  </h2>
+              <div className="min-w-0 flex-1 space-y-2">
+                <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="min-w-0">
+                    <p className="text-muted-foreground text-sm font-medium">
+                      Written by
+                    </p>
+                    <h2 className="text-foreground flex flex-wrap items-center gap-2 text-xl font-semibold">
+                      <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
+                        </Badge>
+                      )}
+                    </h2>
+                  </div>
+                  <AuthorSocialLinks author={article.author} />
                 </div>
                 <p className="text-muted-foreground leading-relaxed">
                   {article.author.bio}
@@ -306,7 +351,7 @@ export default function ArticlePage({
           <Separator className="mb-8" />
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             {navigation?.previousArticle && (
-              <Card className="group hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] cursor-pointer transition-colors">
+              <Card className="group cursor-pointer transition-colors hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)]">
                 <Link href={navigation.previousArticle.url} className="block">
                   {navigation.previousArticle.featuredImage && (
                     <ArticleCardImage
@@ -321,7 +366,7 @@ export default function ArticlePage({
                     <div className="text-muted-foreground mb-2 text-sm font-medium">
                       ← Previous Article
                     </div>
-                    <div className="text-foreground group-hover:text-[var(--blog-text-accent)] transition-colors">
+                    <div className="text-foreground transition-colors group-hover:text-[var(--blog-text-accent)]">
                       {navigation.previousArticle.title}
                     </div>
                   </CardContent>
@@ -331,7 +376,7 @@ export default function ArticlePage({
             {navigation?.nextArticle && (
               <Card
                 className={cn(
-                  "group hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] cursor-pointer transition-colors",
+                  "group cursor-pointer transition-colors hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)]",
                   !navigation?.previousArticle && "md:col-start-2",
                 )}
               >
@@ -349,7 +394,7 @@ export default function ArticlePage({
                     <div className="text-muted-foreground mb-2 text-sm font-medium">
                       Next Article →
                     </div>
-                    <div className="text-foreground group-hover:text-[var(--blog-text-accent)] transition-colors">
+                    <div className="text-foreground transition-colors group-hover:text-[var(--blog-text-accent)]">
                       {navigation.nextArticle.title}
                     </div>
                   </CardContent>
@@ -380,72 +425,6 @@ export default function ArticlePage({
   );
 }
 
-function ArticleTableOfContents({
-  items,
-  variant,
-}: {
-  items: ReturnType<typeof extractTableOfContents>;
-  variant: "mobile" | "desktop";
-}) {
-  if (items.length === 0) {
-    return null;
-  }
-
-  const list = (
-    <ul className="space-y-2 text-sm">
-      {items.map((item) => (
-        <li key={item.id} className={item.level === 3 ? "pl-4" : undefined}>
-          <a
-            href={`#${item.id}`}
-            className="text-muted-foreground hover:text-[var(--blog-text-accent)] block leading-snug transition-colors"
-          >
-            {item.text}
-          </a>
-        </li>
-      ))}
-    </ul>
-  );
-
-  if (variant === "mobile") {
-    return (
-      <details className="group mb-6 rounded-2xl border border-[var(--blog-accent-border)] bg-[var(--blog-accent-bg)] lg:hidden">
-        <summary className="text-foreground flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-semibold [&::-webkit-details-marker]:hidden">
-          <span>On this page</span>
-          <span className="text-muted-foreground flex items-center gap-2 text-xs font-medium">
-            {formatTableOfContentsSummary(items.length)}
-            <span
-              className="text-[var(--blog-text-accent)] transition-transform group-open:rotate-180"
-              aria-hidden="true"
-            >
-              ↓
-            </span>
-          </span>
-        </summary>
-        <nav
-          aria-label="Table of contents"
-          className="border-t border-[var(--blog-accent-border)] px-4 py-4"
-        >
-          {list}
-        </nav>
-      </details>
-    );
-  }
-
-  return (
-    <aside className="hidden lg:block">
-      <nav
-        aria-label="Table of contents"
-        className="sticky top-24 max-h-[calc(100vh-8rem)] overflow-y-auto border-l border-border pl-5"
-      >
-        <p className="text-muted-foreground mb-3 text-xs font-semibold tracking-wider uppercase">
-          On this page
-        </p>
-        {list}
-      </nav>
-    </aside>
-  );
-}
-
 function AuthorAvatar({
   author,
   size,
@@ -482,6 +461,93 @@ function AuthorAvatar({
   );
 }
 
+interface AuthorSocialLinkView {
+  key: string;
+  href: string;
+  label: string;
+  external: boolean;
+  icon: React.ReactNode;
+}
+
+function AuthorSocialLinks({ author }: { author: PublishedAuthor }) {
+  const links = getAuthorSocialLinks(author);
+  if (links.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-1 sm:justify-end">
+      {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:bg-background/60 hover:text-foreground inline-flex size-7 items-center justify-center rounded-full transition-colors"
+        >
+          {link.icon}
+        </a>
+      ))}
+    </div>
+  );
+}
+
+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-4" aria-hidden="true" />,
+        }
+      : undefined,
+    links.x
+      ? {
+          key: "x",
+          href: links.x,
+          label: "on X",
+          external: true,
+          icon: <FaXTwitter className="size-4" aria-hidden="true" />,
+        }
+      : undefined,
+    links.linkedin
+      ? {
+          key: "linkedin",
+          href: links.linkedin,
+          label: "on LinkedIn",
+          external: true,
+          icon: <FaLinkedinIn className="size-4" aria-hidden="true" />,
+        }
+      : undefined,
+    links.github
+      ? {
+          key: "github",
+          href: links.github,
+          label: "on GitHub",
+          external: true,
+          icon: <FaGithub className="size-4" aria-hidden="true" />,
+        }
+      : undefined,
+    links.email
+      ? {
+          key: "email",
+          href: `mailto:${links.email}`,
+          label: "email",
+          external: false,
+          icon: <Mail className="size-4" aria-hidden="true" />,
+        }
+      : undefined,
+  ];
+
+  return socialLinks.filter((link): link is AuthorSocialLinkView =>
+    Boolean(link),
+  );
+}
+
 function getAuthorInitials(name: string): string {
   const initials = name
     .trim()
@@ -528,36 +594,29 @@ function ArticleShareLinks({ title, url }: { title: string; url: string }) {
 
   return (
     <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-3">
-      <span className="text-muted-foreground inline-flex basis-full items-center justify-center gap-2 text-sm font-medium sm:basis-auto">
-        <Share2 className="size-4" aria-hidden="true" />
-        Share
-      </span>
+      <ArticleTopActions title={title} url={url} size="sm" />
       <a
         href={`https://x.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`}
         target="_blank"
         rel="noopener noreferrer"
         aria-label="Share on X"
-        className="text-muted-foreground hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] hover:text-foreground inline-flex size-9 items-center justify-center rounded-full border border-border grayscale transition-colors"
+        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)]"
       >
-        <span className="text-sm font-semibold" aria-hidden="true">
-          X
-        </span>
+        <FaXTwitter className="size-4" aria-hidden="true" />
       </a>
       <a
         href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`}
         target="_blank"
         rel="noopener noreferrer"
         aria-label="Share on LinkedIn"
-        className="text-muted-foreground hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] hover:text-foreground inline-flex size-9 items-center justify-center rounded-full border border-border grayscale transition-colors"
+        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)]"
       >
-        <span className="text-sm font-bold" aria-hidden="true">
-          in
-        </span>
+        <FaLinkedinIn className="size-4" aria-hidden="true" />
       </a>
       <a
         href={`mailto:?subject=${encodedTitle}&body=${encodedUrl}`}
         aria-label="Share by email"
-        className="text-muted-foreground hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] hover:text-foreground inline-flex size-9 items-center justify-center rounded-full border border-border grayscale transition-colors"
+        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)]"
       >
         <Mail className="size-4" aria-hidden="true" />
       </a>
@@ -582,7 +641,7 @@ function RelatedArticles({
           <Link
             key={article.id}
             href={buildBlogPath(basePath, article.slug)}
-            className="group overflow-hidden rounded-2xl border border-border transition-colors hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] hover:no-underline"
+            className="group border-border overflow-hidden rounded-2xl border transition-colors hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] hover:no-underline"
           >
             {article.featuredImage && (
               <ArticleCardImage
@@ -594,7 +653,7 @@ function RelatedArticles({
               />
             )}
             <div className="p-4">
-              <h3 className="text-foreground group-hover:text-[var(--blog-text-accent)] line-clamp-3 font-semibold transition-colors">
+              <h3 className="text-foreground line-clamp-3 font-semibold transition-colors group-hover:text-[var(--blog-text-accent)]">
                 {article.title}
               </h3>
               {article.excerpt && (
@@ -612,7 +671,7 @@ function RelatedArticles({
 
 function ArticleCardImage({ src, alt }: { src: string; alt: string }) {
   return (
-    <div className="aspect-[16/9] overflow-hidden border-b border-border bg-[var(--blog-accent-bg)]">
+    <div className="border-border aspect-[16/9] overflow-hidden border-b bg-[var(--blog-accent-bg)]">
       <Image
         src={src}
         alt={alt}

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",
+    );
+  });
+});