@xexr/blog-platform 1.0.6 → 1.0.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.0.8
+
+### Patch Changes
+
+- Add reading progress and active table-of-contents state to public article pages.
+- Include route runtime dependencies in the package build output for subpath app imports.
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/app/blog/[slug]/page.d.ts

@@ -0,0 +1,68 @@
+import type { ReactElement } from "react";
+import type { PublishedArticle } from "../../../types/contracts";
+import type { BlogTheme } from "../../../lib/article-ui";
+
+interface ArticlePageProps {
+  article: PublishedArticle;
+  className?: string;
+  navigation?: {
+    backToHome?: {
+      url: string;
+      label?: string;
+    };
+    previousArticle?: {
+      url: string;
+      title: string;
+      featuredImage?: string;
+      featuredImageAlt?: string;
+    };
+    nextArticle?: {
+      url: string;
+      title: string;
+      featuredImage?: string;
+      featuredImageAlt?: string;
+    };
+  };
+  basePath?: string;
+  theme?: BlogTheme;
+  postArticleCta?: {
+    title: string;
+    description?: string;
+    href: string;
+    label: string;
+  };
+  relatedArticles?: PublishedArticle[];
+  showShareLinks?: boolean;
+}
+
+export default function ArticlePage(props: ArticlePageProps): ReactElement;
+
+export function generateArticleMetadata(
+  article: PublishedArticle,
+  basePath?: string,
+): {
+  title: string;
+  description: string;
+  keywords: string;
+  authors: { name: string }[] | undefined;
+  openGraph: {
+    title: string;
+    description: string;
+    type: string;
+    url: string;
+    images: { url: string; alt: string }[] | undefined;
+    publishedTime: string;
+    modifiedTime: string;
+    authors: string[] | undefined;
+    siteName: string;
+  };
+  twitter: {
+    card: string;
+    title: string;
+    description: string;
+    images: string[] | undefined;
+  };
+  alternates: {
+    canonical: string;
+  };
+};

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

@@ -2,12 +2,18 @@ import React from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { MDXRemote } from "next-mdx-remote-client/rsc";
-import { type PublishedArticle } from "../../../types/contracts";
+import {
+  type PublishedArticle,
+  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,
@@ -87,11 +93,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;
@@ -109,7 +119,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
@@ -145,6 +155,7 @@ 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>
               {article.author.isGuest && (
                 <Badge variant="outline" className="text-xs">
@@ -163,7 +174,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>
@@ -174,14 +187,42 @@ 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>
 
-          <span
-            className="text-xs tracking-wider uppercase sm:text-sm"
-            role="text"
-          >
-            From {article.site.name}
-          </span>
+          {(article.topics ?? []).length > 0 ? (
+            <nav
+              aria-label="Article topics"
+              className="flex flex-wrap justify-center gap-2"
+            >
+              {(article.topics ?? []).map((topic) => (
+                <Link
+                  key={topic.id}
+                  href={buildBlogPath(
+                    (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)]"
+                >
+                  {topic.name}
+                </Link>
+              ))}
+            </nav>
+          ) : (
+            <span
+              className="text-xs tracking-wider uppercase sm:text-sm"
+              role="text"
+            >
+              From {article.site.name}
+            </span>
+          )}
         </div>
       </header>
 
@@ -207,9 +248,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}
@@ -218,34 +266,39 @@ 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="flex size-12 shrink-0 items-center justify-center rounded-full bg-[var(--blog-accent)] text-lg font-semibold text-white"
-                aria-hidden="true"
-              >
-                {article.author.name.slice(0, 1)}
+              <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">
+                      {article.author.name}
+                      {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}
@@ -281,7 +334,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
@@ -296,7 +349,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>
@@ -306,7 +359,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",
                 )}
               >
@@ -324,7 +377,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>
@@ -355,61 +408,141 @@ export default function ArticlePage({
   );
 }
 
-function ArticleTableOfContents({
-  items,
-  variant,
+function AuthorAvatar({
+  author,
+  size,
 }: {
-  items: ReturnType<typeof extractTableOfContents>;
-  variant: "mobile" | "desktop";
+  author: PublishedAuthor;
+  size: "md" | "lg";
 }) {
-  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>
-  );
+  const sizeClass = size === "lg" ? "h-12 w-12 text-base" : "h-9 w-9 text-sm";
+  const initials = getAuthorInitials(author.name);
 
-  if (variant === "mobile") {
+  if (author.avatarUrl) {
     return (
-      <nav
-        aria-label="Table of contents"
-        className="mb-8 rounded-2xl border border-[var(--blog-accent-border)] bg-[var(--blog-accent-bg)] p-4 lg:hidden"
-      >
-        <p className="text-foreground mb-3 text-sm font-semibold">
-          On this page
-        </p>
-        {list}
-      </nav>
+      <Image
+        src={author.avatarUrl}
+        alt={author.name}
+        width={size === "lg" ? 48 : 36}
+        height={size === "lg" ? 48 : 36}
+        className={cn("shrink-0 rounded-full object-cover", sizeClass)}
+        loading="lazy"
+      />
     );
   }
 
   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>
+    <span
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex shrink-0 items-center justify-center rounded-full font-medium",
+        sizeClass,
+      )}
+      aria-hidden="true"
+    >
+      {initials}
+    </span>
+  );
+}
+
+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()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase())
+    .join("");
+
+  return initials || "?";
+}
+
 function PostArticleCta({
   cta,
 }: {
@@ -444,36 +577,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>
@@ -498,7 +624,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
@@ -510,7 +636,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 && (
@@ -528,7 +654,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}