@xexr/blog-platform 1.0.2 → 1.0.3

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

@@ -3,16 +3,10 @@ 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 { format, formatDistanceToNow } from "date-fns";
 import { cn } from "../../../lib/utils";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, ArrowUpRight, Mail, Share2 } from "lucide-react";
 import { Badge } from "../../../components/ui/badge";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "../../../components/ui/card";
+import { Card, CardContent } from "../../../components/ui/card";
 import { Separator } from "../../../components/ui/separator";
 import {
   generateCompleteArticleStructuredData,
@@ -20,6 +14,12 @@ import {
 } from "../../../lib/structured-data";
 import { articleMdxOptions } from "../../../lib/mdx";
 import { buildBlogPath, normalizeBlogBasePath } from "../../../lib/urls";
+import {
+  type BlogTheme,
+  extractTableOfContents,
+  formatArticleDateMeta,
+  getBlogThemeStyle,
+} from "../../../lib/article-ui";
 
 interface ArticlePageProps {
   article: PublishedArticle;
@@ -41,6 +41,19 @@ interface ArticlePageProps {
   };
   /** Public path where this blog is mounted, e.g. "/blog" or "/new-blog". */
   basePath?: string;
+  /** Optional theme values for host-site brand integration. */
+  theme?: BlogTheme;
+  /** Optional post-article CTA supplied by the host site. */
+  postArticleCta?: {
+    title: string;
+    description?: string;
+    href: string;
+    label: string;
+  };
+  /** Optional related articles supplied by the host site. */
+  relatedArticles?: PublishedArticle[];
+  /** Whether to render static article share links. */
+  showShareLinks?: boolean;
 }
 
 /**
@@ -63,30 +76,35 @@ export default function ArticlePage({
   className,
   navigation,
   basePath = "/blog",
+  theme,
+  postArticleCta,
+  relatedArticles = [],
+  showShareLinks = true,
 }: ArticlePageProps) {
   const normalizedBasePath = normalizeBlogBasePath(basePath) || "/";
-  const publishedDate = new Date(article.publishedAt);
-  const updatedDate = new Date(article.updatedAt);
-  const isUpdated = updatedDate.getTime() !== publishedDate.getTime();
-  const formattedDate = formatDistanceToNow(publishedDate, { addSuffix: true });
+  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);
 
   // Use the featured image URL provided by Bloggy (hosted on Bloggy's domain)
   const imageUrl = article.featuredImage;
 
   return (
     <article
+      style={getBlogThemeStyle(theme)}
       className={cn(
-        "article-page mx-auto max-w-4xl px-4 py-6 pb-12 sm:px-6 sm:py-8 sm:pb-16 lg:px-8 lg:py-12 lg:pb-24",
+        "article-page mx-auto max-w-6xl px-4 py-6 pb-12 sm:px-6 sm:py-8 sm:pb-16 lg:px-8 lg:py-12 lg:pb-24",
         className,
       )}
     >
       {/* Navigation */}
       {navigation?.backToHome && (
-        <header className="mb-8 sm:mb-12 lg:mb-16">
+        <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-foreground 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 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"
             aria-label={navigation.backToHome.label ?? "Return to blog"}
           >
             <ArrowLeft
@@ -104,15 +122,15 @@ export default function ArticlePage({
       )}
 
       {/* Article Header */}
-      <header className="article-header mb-6 space-y-4 text-center sm:mb-8 sm:space-y-6 lg:mb-12 lg:space-y-8">
+      <header className="article-header mx-auto mb-6 max-w-4xl space-y-4 text-center sm:mb-8 sm:space-y-6 lg:mb-12 lg:space-y-8">
         {/* Title */}
-        <h1 className="article-title text-foreground px-4 text-2xl leading-tight font-light tracking-tight sm:px-0 sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl">
+        <h1 className="article-title text-foreground px-4 text-2xl leading-tight font-light tracking-tight text-balance sm:px-0 sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl">
           {article.title}
         </h1>
 
         {/* Excerpt */}
         {article.excerpt && (
-          <p className="article-excerpt text-muted-foreground mx-auto mt-6 max-w-xs px-4 text-base leading-relaxed sm:mt-8 sm:max-w-lg sm:px-0 sm:text-lg md:max-w-2xl md:text-xl lg:max-w-4xl lg:text-2xl">
+          <p className="article-excerpt text-muted-foreground mx-auto mt-6 max-w-xs px-4 text-base leading-relaxed text-balance sm:mt-8 sm:max-w-lg sm:px-0 sm:text-lg md:max-w-2xl md:text-xl lg:max-w-4xl lg:text-2xl">
             {article.excerpt}
           </p>
         )}
@@ -135,17 +153,19 @@ export default function ArticlePage({
             <time
               dateTime={article.publishedAt}
               className="font-medium"
-              aria-label={`Published ${formattedDate}`}
+              aria-label={`Published ${dateMeta.publishedDateLabel}`}
             >
-              Published {formattedDate}
+              Published {dateMeta.publishedDateLabel}
             </time>
             <span className="text-border">•</span>
+            <span className="font-medium">{dateMeta.publishedRelativeLabel}</span>
+            <span className="text-border">•</span>
             <span className="font-medium">{readingTime}</span>
           </div>
 
-          {isUpdated && (
+          {dateMeta.isUpdated && (
             <time dateTime={article.updatedAt} className="text-xs">
-              Updated {format(updatedDate, "MMMM d, yyyy")}
+              Updated {dateMeta.updatedDateLabel}
             </time>
           )}
 
@@ -162,7 +182,7 @@ export default function ArticlePage({
 
       {/* Featured Image */}
       {imageUrl && (
-        <div className="article-featured-image relative my-8 aspect-[16/9] w-full overflow-hidden rounded-lg sm:my-12 lg:my-16">
+        <div className="article-featured-image mx-auto my-8 aspect-[16/9] w-full max-w-4xl overflow-hidden rounded-2xl sm:my-12 lg:my-16">
           <Image
             src={imageUrl}
             alt={
@@ -177,50 +197,85 @@ export default function ArticlePage({
       )}
 
       {/* Article Content */}
-      <div className="article-content">
-        <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-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-img:mx-auto prose-img:rounded-lg prose-a:transition-colors max-w-none">
-          <MDXRemote source={article.content} options={articleMdxOptions} />
+      <div 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" />
+
+          <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-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-img:mx-auto prose-img:rounded-2xl prose-a:text-[var(--blog-accent)] prose-a:transition-colors hover:prose-a:text-[var(--blog-accent-hover)] max-w-none">
+            <MDXRemote source={article.content} options={articleMdxOptions} />
+          </div>
         </div>
+
+        <ArticleTableOfContents items={tocItems} variant="desktop" />
       </div>
 
       {/* Author Bio */}
       {article.author?.bio && (
-        <div className="author-bio mt-12">
+        <div className="author-bio mx-auto mt-12 max-w-4xl">
           <Separator className="mb-8" />
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                About {article.author.name}
-                {article.author.isGuest && (
-                  <Badge variant="outline" className="text-xs">
-                    Guest Author
-                  </Badge>
-                )}
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="prose dark:prose-invert">
-                <p className="text-muted-foreground">{article.author.bio}</p>
+          <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>
+              <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>
+                <p className="text-muted-foreground leading-relaxed">
+                  {article.author.bio}
+                </p>
               </div>
             </CardContent>
           </Card>
         </div>
       )}
 
+      {((postArticleCta ?? false) ||
+        showShareLinks ||
+        relatedArticles.length > 0) && (
+        <div className="mx-auto mt-12 max-w-4xl space-y-8">
+          <Separator />
+          {postArticleCta && <PostArticleCta cta={postArticleCta} />}
+          {showShareLinks && (
+            <ArticleShareLinks title={article.title} url={articleUrl} />
+          )}
+          {relatedArticles.length > 0 && (
+            <RelatedArticles
+              articles={relatedArticles.slice(0, 3)}
+              basePath={normalizedBasePath}
+            />
+          )}
+        </div>
+      )}
+
       {/* Article Navigation */}
       {(Boolean(navigation?.previousArticle) ||
         Boolean(navigation?.nextArticle)) && (
-        <nav className="article-nav mt-12">
+        <nav className="article-nav mx-auto mt-12 max-w-4xl">
           <Separator className="mb-8" />
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
             {navigation?.previousArticle && (
-              <Card className="group hover:bg-accent/50 cursor-pointer transition-colors">
+              <Card className="group hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] cursor-pointer transition-colors">
                 <Link href={navigation.previousArticle.url} className="block">
                   <CardContent className="p-4">
                     <div className="text-muted-foreground mb-2 text-sm font-medium">
                       ← Previous Article
                     </div>
-                    <div className="text-foreground group-hover:text-primary transition-colors">
+                    <div className="text-foreground group-hover:text-[var(--blog-accent)] transition-colors">
                       {navigation.previousArticle.title}
                     </div>
                   </CardContent>
@@ -230,7 +285,7 @@ export default function ArticlePage({
             {navigation?.nextArticle && (
               <Card
                 className={cn(
-                  "group hover:bg-accent/50 cursor-pointer transition-colors",
+                  "group hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] cursor-pointer transition-colors",
                   !navigation?.previousArticle && "md:col-start-2",
                 )}
               >
@@ -239,7 +294,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-primary transition-colors">
+                    <div className="text-foreground group-hover:text-[var(--blog-accent)] transition-colors">
                       {navigation.nextArticle.title}
                     </div>
                   </CardContent>
@@ -270,6 +325,160 @@ 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-accent)] block leading-snug transition-colors"
+          >
+            {item.text}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+
+  if (variant === "mobile") {
+    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>
+    );
+  }
+
+  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 PostArticleCta({
+  cta,
+}: {
+  cta: NonNullable<ArticlePageProps["postArticleCta"]>;
+}) {
+  return (
+    <div className="rounded-2xl border border-[var(--blog-accent-border)] bg-[var(--blog-accent-bg)] p-5 sm:p-6">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="space-y-1">
+          <h2 className="text-foreground text-xl font-semibold">{cta.title}</h2>
+          {cta.description && (
+            <p className="text-muted-foreground leading-relaxed">
+              {cta.description}
+            </p>
+          )}
+        </div>
+        <Link
+          href={cta.href}
+          className="inline-flex shrink-0 items-center justify-center gap-2 rounded-full bg-[var(--blog-accent)] px-4 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
+        >
+          {cta.label}
+          <ArrowUpRight className="size-4" aria-hidden="true" />
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+function ArticleShareLinks({ title, url }: { title: string; url: string }) {
+  const encodedTitle = encodeURIComponent(title);
+  const encodedUrl = encodeURIComponent(url);
+
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <span className="text-muted-foreground inline-flex items-center gap-2 text-sm font-medium">
+        <Share2 className="size-4" aria-hidden="true" />
+        Share
+      </span>
+      <a
+        href={`https://x.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-muted-foreground hover:border-[var(--blog-accent-border)] hover:text-[var(--blog-accent)] rounded-full border border-border px-3 py-1.5 text-sm transition-colors"
+      >
+        X
+      </a>
+      <a
+        href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-muted-foreground hover:border-[var(--blog-accent-border)] hover:text-[var(--blog-accent)] rounded-full border border-border px-3 py-1.5 text-sm transition-colors"
+      >
+        LinkedIn
+      </a>
+      <a
+        href={`mailto:?subject=${encodedTitle}&body=${encodedUrl}`}
+        className="text-muted-foreground hover:border-[var(--blog-accent-border)] hover:text-[var(--blog-accent)] inline-flex items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-sm transition-colors"
+      >
+        <Mail className="size-3.5" aria-hidden="true" />
+        Email
+      </a>
+    </div>
+  );
+}
+
+function RelatedArticles({
+  articles,
+  basePath,
+}: {
+  articles: PublishedArticle[];
+  basePath: string;
+}) {
+  return (
+    <section className="space-y-4" aria-labelledby="related-articles-title">
+      <h2 id="related-articles-title" className="text-xl font-semibold">
+        You might also like
+      </h2>
+      <div className="grid gap-4 md:grid-cols-3">
+        {articles.map((article) => (
+          <Link
+            key={article.id}
+            href={buildBlogPath(basePath, article.slug)}
+            className="group rounded-2xl border border-border p-4 transition-colors hover:border-[var(--blog-accent-border)] hover:bg-[var(--blog-accent-bg)] hover:no-underline"
+          >
+            <h3 className="text-foreground group-hover:text-[var(--blog-accent)] line-clamp-3 font-semibold transition-colors">
+              {article.title}
+            </h3>
+            {article.excerpt && (
+              <p className="text-muted-foreground mt-2 line-clamp-3 text-sm leading-relaxed">
+                {article.excerpt}
+              </p>
+            )}
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
+
 /**
  * Generate metadata for the article page for SEO optimization.
  * This function should be used in the Next.js metadata API.

package/dist/app/blog/page.tsx

@@ -13,6 +13,10 @@ import {
 } from "../../lib/structured-data";
 import { buildBlogPath, normalizeBlogBasePath } from "../../lib/urls";
 import { formatDistanceToNow } from "date-fns";
+import {
+  type BlogTheme,
+  getBlogThemeStyle,
+} from "../../lib/article-ui";
 
 interface BlogHomePageProps {
   articles: PublishedArticle[];
@@ -31,6 +35,8 @@ interface BlogHomePageProps {
     totalPages: number;
     baseUrl?: string;
   };
+  /** Optional theme values for host-site brand integration. */
+  theme?: BlogTheme;
 }
 
 /**
@@ -49,11 +55,13 @@ export default function BlogHomePage({
   includeStructuredData = false,
   basePath = "/blog",
   pagination,
+  theme,
 }: BlogHomePageProps) {
   const normalizedBasePath = normalizeBlogBasePath(basePath) || "/";
 
   return (
     <div
+      style={getBlogThemeStyle(theme)}
       className={cn(
         "blog-home-page container mx-auto max-w-5xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16",
         className,
@@ -62,7 +70,7 @@ export default function BlogHomePage({
       {/* Site Header */}
       {siteName && (
         <header className="blog-header mb-8 text-center sm:mb-12 lg:mb-16">
-          <h1 className="blog-title text-foreground mb-2 text-3xl font-light tracking-tight sm:text-4xl lg:text-5xl">
+          <h1 className="blog-title mb-2 bg-linear-to-r from-[var(--blog-accent-hover)] to-[var(--blog-accent)] bg-clip-text text-3xl font-semibold tracking-tight text-balance text-transparent sm:text-4xl lg:text-5xl">
             {siteName}
           </h1>
           {siteTagline && (
@@ -162,13 +170,13 @@ function ArticlePreview({
     <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-lg hover:no-underline focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+        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-lg">
+            <div className="relative aspect-[16/10] w-full overflow-hidden rounded-2xl">
               <Image
                 src={imageUrl}
                 alt={
@@ -183,7 +191,7 @@ function ArticlePreview({
           )}
 
           <div className="space-y-3">
-            <h2 className="group-hover:text-primary text-lg leading-tight font-bold transition-colors sm:text-xl md:text-2xl">
+            <h2 className="group-hover:text-[var(--blog-accent)] text-lg leading-tight font-bold text-balance transition-colors sm:text-xl md:text-2xl">
               {article.title}
             </h2>
 
@@ -216,7 +224,7 @@ function ArticlePreview({
         {/* 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-lg xl:w-72">
+            <div className="relative aspect-[16/10] w-64 shrink-0 overflow-hidden rounded-2xl xl:w-72">
               <Image
                 src={imageUrl}
                 alt={
@@ -232,7 +240,7 @@ function ArticlePreview({
 
           <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-primary text-2xl leading-tight font-bold transition-colors xl:text-3xl">
+              <h2 className="group-hover:text-[var(--blog-accent)] text-2xl leading-tight font-bold text-balance transition-colors xl:text-3xl">
                 {article.title}
               </h2>
 

package/dist/index.d.mts

@@ -1,14 +1,42 @@
 import { PublishedArticle, PublishedSite, PublishResult, PublishedAuthor } from './types/index.mjs';
 export { PublishPayload } from './types/index.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
+import { CSSProperties } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 import { NextRequest, NextResponse } from 'next/server';
 import * as drizzle_orm_sqlite_core from 'drizzle-orm/sqlite-core';
 import { LibSQLDatabase } from 'drizzle-orm/libsql';
 
+interface BlogTheme {
+    accentColor?: string;
+    accentHoverColor?: string;
+    accentBackgroundColor?: string;
+    accentBorderColor?: string;
+}
+interface TocItem {
+    id: string;
+    text: string;
+    level: 2 | 3;
+}
+interface ArticleDateMeta {
+    publishedDateLabel: string;
+    publishedRelativeLabel: string;
+    updatedDateLabel: string;
+    isUpdated: boolean;
+}
+type BlogThemeStyle = CSSProperties & {
+    "--blog-accent": string;
+    "--blog-accent-hover": string;
+    "--blog-accent-bg": string;
+    "--blog-accent-border": string;
+};
+declare function getBlogThemeStyle(theme?: BlogTheme): BlogThemeStyle;
+declare function formatArticleDateMeta(publishedAt: string, updatedAt: string): ArticleDateMeta;
+declare function extractTableOfContents(markdown: string): TocItem[];
+
 interface BlogHomePageProps {
     articles: PublishedArticle[];
     siteName?: string;
@@ -26,6 +54,8 @@ interface BlogHomePageProps {
         totalPages: number;
         baseUrl?: string;
     };
+    /** Optional theme values for host-site brand integration. */
+    theme?: BlogTheme;
 }
 /**
  * Blog home page component that displays a list of published articles.
@@ -34,7 +64,7 @@ interface BlogHomePageProps {
  * @xexr/blog-platform package. It provides a clean, SEO-friendly
  * article listing with proper metadata.
  */
-declare function BlogHomePage({ articles, siteName, siteTagline, className, site, includeStructuredData, basePath, pagination, }: BlogHomePageProps): react_jsx_runtime.JSX.Element;
+declare function BlogHomePage({ articles, siteName, siteTagline, className, site, includeStructuredData, basePath, pagination, theme, }: BlogHomePageProps): react_jsx_runtime.JSX.Element;
 /**
  * Generate metadata for the blog home page for SEO optimization.
  * This function should be used in the Next.js metadata API.
@@ -85,8 +115,21 @@ interface ArticlePageProps {
     };
     /** Public path where this blog is mounted, e.g. "/blog" or "/new-blog". */
     basePath?: string;
+    /** Optional theme values for host-site brand integration. */
+    theme?: BlogTheme;
+    /** Optional post-article CTA supplied by the host site. */
+    postArticleCta?: {
+        title: string;
+        description?: string;
+        href: string;
+        label: string;
+    };
+    /** Optional related articles supplied by the host site. */
+    relatedArticles?: PublishedArticle[];
+    /** Whether to render static article share links. */
+    showShareLinks?: boolean;
 }
-declare function ArticlePage({ article, className, navigation, basePath, }: ArticlePageProps): react_jsx_runtime.JSX.Element;
+declare function ArticlePage({ article, className, navigation, basePath, theme, postArticleCta, relatedArticles, showShareLinks, }: ArticlePageProps): react_jsx_runtime.JSX.Element;
 /**
  * Generate metadata for the article page for SEO optimization.
  * This function should be used in the Next.js metadata API.
@@ -1807,4 +1850,4 @@ declare function OPTIONS(request: NextRequest): Promise<NextResponse>;
 
 declare const PACKAGE_VERSION: string;
 
-export { ApiKeyAuth, type AuthConfig, type AuthResult, ArticlePage as BlogArticlePage, BlogHomePage, type BlogPlatformConfig, type BlogPlatformStorage, type BlogPostingSchema, type BlogSitemapConfig, type BreadcrumbListSchema, Button, type CanonicalUrlOptions, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DrizzleStorage, EnvAuth, type GeneratedMetadata, InMemoryStorage, type LinkTag, type MetaTag, type MetadataOptions, type NextjsSitemapEntry, NoAuth, type OrganizationSchema, PACKAGE_VERSION, Pagination$1 as Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PersonSchema, PublishResult, PublishedArticle, PublishedAuthor, PublishedSite, type RateLimitConfig, type RateLimitResult, Pagination as ShadcnPagination, type SitemapChangeFreq, type SitemapData, type SitemapEntry, type SitemapOptions, StructuredDataError, type StructuredDataOptions, UninitializedAuth, type WebSiteSchema, autoConfigureRateLimit, bpArticles, bpOperations, buildBlogPath, buttonVariants, checkRateLimit, cn, configureRateLimit, createBlogSitemapRoute, createDynamicBlogSitemap, createRateLimitErrorResponse, createStructuredDataScript, enforceRateLimit, extractKeywordsFromArticle, extractTokenFromHeader, generateArticleMetadata, generateArticleStructuredData, generateAuthorStructuredData, generateBlogHomeMetadata, generateBlogHomeStructuredData, generateBlogSitemapEntries, generateBreadcrumbStructuredData, generateCanonicalUrl, generateCanonicalUrlFromSlug, generateCompleteArticleStructuredData, generateOrganizationStructuredData, generatePaginationMetadata, generateSiteMetadata, generateSitemap, generateSitemapIndex, generateWebSiteStructuredData, getAuthConfig, getBaseUrl, getDrizzleAdapterSql, getPathPrefixFromBlogUrl, getRateLimitHeaders, getStorage, initBlogPlatform, initBlogPlatformDev, initBlogPlatformOnce, initBlogPlatformProd, initEnvAuth, isValidCanonicalUrl, metadataToHtml, normalizeBlogBasePath, normalizeDomain, normalizeSlug, POST$1 as publishHandler, safeGenerateArticleStructuredData, setAuthConfig, setStorage, shouldSkipAuth, sitemapToXml, GET as slugExistsHandler, OPTIONS as slugExistsOptionsHandler, structuredDataToJsonLd, POST as unpublishHandler, updateArticleCanonicalUrl, usePagination, validateMetadata, validateSitemap, validateStructuredData, GET$1 as versionHandler };
+export { ApiKeyAuth, type AuthConfig, type AuthResult, ArticlePage as BlogArticlePage, BlogHomePage, type BlogPlatformConfig, type BlogPlatformStorage, type BlogPostingSchema, type BlogSitemapConfig, type BlogTheme, type BreadcrumbListSchema, Button, type CanonicalUrlOptions, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DrizzleStorage, EnvAuth, type GeneratedMetadata, InMemoryStorage, type LinkTag, type MetaTag, type MetadataOptions, type NextjsSitemapEntry, NoAuth, type OrganizationSchema, PACKAGE_VERSION, Pagination$1 as Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PersonSchema, PublishResult, PublishedArticle, PublishedAuthor, PublishedSite, type RateLimitConfig, type RateLimitResult, Pagination as ShadcnPagination, type SitemapChangeFreq, type SitemapData, type SitemapEntry, type SitemapOptions, StructuredDataError, type StructuredDataOptions, UninitializedAuth, type WebSiteSchema, autoConfigureRateLimit, bpArticles, bpOperations, buildBlogPath, buttonVariants, checkRateLimit, cn, configureRateLimit, createBlogSitemapRoute, createDynamicBlogSitemap, createRateLimitErrorResponse, createStructuredDataScript, enforceRateLimit, extractKeywordsFromArticle, extractTableOfContents, extractTokenFromHeader, formatArticleDateMeta, generateArticleMetadata, generateArticleStructuredData, generateAuthorStructuredData, generateBlogHomeMetadata, generateBlogHomeStructuredData, generateBlogSitemapEntries, generateBreadcrumbStructuredData, generateCanonicalUrl, generateCanonicalUrlFromSlug, generateCompleteArticleStructuredData, generateOrganizationStructuredData, generatePaginationMetadata, generateSiteMetadata, generateSitemap, generateSitemapIndex, generateWebSiteStructuredData, getAuthConfig, getBaseUrl, getBlogThemeStyle, getDrizzleAdapterSql, getPathPrefixFromBlogUrl, getRateLimitHeaders, getStorage, initBlogPlatform, initBlogPlatformDev, initBlogPlatformOnce, initBlogPlatformProd, initEnvAuth, isValidCanonicalUrl, metadataToHtml, normalizeBlogBasePath, normalizeDomain, normalizeSlug, POST$1 as publishHandler, safeGenerateArticleStructuredData, setAuthConfig, setStorage, shouldSkipAuth, sitemapToXml, GET as slugExistsHandler, OPTIONS as slugExistsOptionsHandler, structuredDataToJsonLd, POST as unpublishHandler, updateArticleCanonicalUrl, usePagination, validateMetadata, validateSitemap, validateStructuredData, GET$1 as versionHandler };