@xexr/blog-platform 1.0.1 → 1.0.3

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

@@ -3,21 +3,23 @@ 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,
   createStructuredDataScript,
 } 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;
@@ -37,6 +39,21 @@ interface ArticlePageProps {
       title: string;
     };
   };
+  /** 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;
 }
 
 /**
@@ -58,29 +75,36 @@ export default function ArticlePage({
   article,
   className,
   navigation,
+  basePath = "/blog",
+  theme,
+  postArticleCta,
+  relatedArticles = [],
+  showShareLinks = true,
 }: ArticlePageProps) {
-  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 normalizedBasePath = normalizeBlogBasePath(basePath) || "/";
+  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
@@ -98,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>
         )}
@@ -129,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>
           )}
 
@@ -156,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={
@@ -171,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} />
+      <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>
@@ -224,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",
                 )}
               >
@@ -233,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>
@@ -247,7 +308,9 @@ export default function ArticlePage({
       {/* JSON-LD Structured Data */}
       {(() => {
         const structuredDataProps = createStructuredDataScript(
-          generateCompleteArticleStructuredData(article),
+          generateCompleteArticleStructuredData(article, {
+            pathPrefix: normalizedBasePath,
+          }),
         );
         return (
           <script
@@ -262,15 +325,173 @@ 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.
  */
-export function generateArticleMetadata(article: PublishedArticle) {
+export function generateArticleMetadata(
+  article: PublishedArticle,
+  basePath = "/blog",
+) {
   const title = article.meta.title ?? article.title;
   const description = article.meta.description ?? article.excerpt;
   const canonicalUrl =
-    article.meta.canonicalUrl ?? `${article.site.domain}/blog/${article.slug}`;
+    article.meta.canonicalUrl ??
+    `${article.site.domain}${buildBlogPath(basePath, article.slug)}`;
   const ogImage = article.meta.ogImage ?? article.featuredImage;
 
   return {

package/dist/app/blog/page.tsx

@@ -11,7 +11,12 @@ 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";
 
 interface BlogHomePageProps {
   articles: PublishedArticle[];
@@ -22,12 +27,16 @@ interface BlogHomePageProps {
   site?: PublishedSite;
   /** Whether to include structured data */
   includeStructuredData?: boolean;
+  /** Public path where this blog is mounted, e.g. "/blog" or "/new-blog". */
+  basePath?: string;
   /** Pagination configuration */
   pagination?: {
     currentPage: number;
     totalPages: number;
     baseUrl?: string;
   };
+  /** Optional theme values for host-site brand integration. */
+  theme?: BlogTheme;
 }
 
 /**
@@ -44,10 +53,15 @@ export default function BlogHomePage({
   className,
   site,
   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,
@@ -56,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 && (
@@ -81,7 +95,11 @@ export default function BlogHomePage({
         ) : (
           <div className="space-y-0">
             {articles.map((article) => (
-              <ArticlePreview key={article.id} article={article} />
+              <ArticlePreview
+                key={article.id}
+                article={article}
+                basePath={normalizedBasePath}
+              />
             ))}
           </div>
         )}
@@ -92,7 +110,7 @@ export default function BlogHomePage({
             <Pagination
               currentPage={pagination.currentPage}
               totalPages={pagination.totalPages}
-              baseUrl={pagination.baseUrl ?? "/blog"}
+              baseUrl={pagination.baseUrl ?? normalizedBasePath}
               className="justify-center"
             />
           </div>
@@ -104,7 +122,9 @@ export default function BlogHomePage({
         site &&
         (() => {
           const structuredDataProps = createStructuredDataScript(
-            generateBlogHomeStructuredData(site, articles.slice(0, 5)),
+            generateBlogHomeStructuredData(site, articles.slice(0, 5), {
+              pathPrefix: normalizedBasePath,
+            }),
           );
           return (
             <script
@@ -130,8 +150,14 @@ function formatReadingTime(seconds: number): string {
 /**
  * Individual article preview component for the blog listing.
  */
-function ArticlePreview({ article }: { article: PublishedArticle }) {
-  const articleUrl = `/blog/${article.slug}`;
+function ArticlePreview({
+  article,
+  basePath,
+}: {
+  article: PublishedArticle;
+  basePath: string;
+}) {
+  const articleUrl = buildBlogPath(basePath, article.slug);
   const formattedDate = formatDistanceToNow(new Date(article.publishedAt), {
     addSuffix: true,
   });
@@ -144,13 +170,13 @@ function ArticlePreview({ article }: { article: PublishedArticle }) {
     <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={
@@ -165,11 +191,11 @@ function ArticlePreview({ article }: { article: PublishedArticle }) {
           )}
 
           <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>
 
-            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground">
+            <div className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
               {article.author && (
                 <>
                   <span className="font-medium">{article.author.name}</span>
@@ -198,7 +224,7 @@ function ArticlePreview({ article }: { article: PublishedArticle }) {
         {/* 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={
@@ -214,7 +240,7 @@ function ArticlePreview({ article }: { article: PublishedArticle }) {
 
           <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>
 
@@ -225,7 +251,7 @@ function ArticlePreview({ article }: { article: PublishedArticle }) {
               )}
             </div>
 
-            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground">
+            <div className="text-muted-foreground flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
               {article.author && (
                 <>
                   <span className="font-medium">{article.author.name}</span>
@@ -261,6 +287,7 @@ export function generateBlogHomeMetadata(
     currentPage: number;
     totalPages: number;
   },
+  basePath = "/blog",
 ) {
   const baseTitle = siteName ? `${siteName} - Blog` : "Blog";
   const title =
@@ -272,7 +299,7 @@ export function generateBlogHomeMetadata(
     siteDescription ?? "Read our latest articles and insights.";
 
   // Generate pagination URLs for SEO
-  const baseUrl = "/blog";
+  const baseUrl = normalizeBlogBasePath(basePath) || "/";
   const canonicalUrl = siteUrl
     ? `${siteUrl}${pagination && pagination.currentPage > 1 ? `${baseUrl}?page=${pagination.currentPage}` : baseUrl}`
     : undefined;