@xexr/blog-platform 1.0.3 → 1.0.5

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

@@ -7,6 +7,7 @@ import { cn } from "../../../lib/utils";
 import { ArrowLeft, ArrowUpRight, Mail, Share2 } from "lucide-react";
 import { Badge } from "../../../components/ui/badge";
 import { Card, CardContent } from "../../../components/ui/card";
+import { ExpandableArticleImage } from "../../../components/ExpandableArticleImage";
 import { Separator } from "../../../components/ui/separator";
 import {
   generateCompleteArticleStructuredData,
@@ -33,10 +34,14 @@ interface ArticlePageProps {
     previousArticle?: {
       url: string;
       title: string;
+      featuredImage?: string;
+      featuredImageAlt?: string;
     };
     nextArticle?: {
       url: string;
       title: string;
+      featuredImage?: string;
+      featuredImageAlt?: string;
     };
   };
   /** Public path where this blog is mounted, e.g. "/blog" or "/new-blog". */
@@ -124,13 +129,13 @@ export default function ArticlePage({
       {/* Article Header */}
       <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 text-balance sm:px-0 sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl">
+        <h1 className="article-title bg-linear-to-br from-[var(--blog-accent-hover)] via-[var(--blog-text-accent)] to-fuchsia-200 bg-clip-text px-4 text-2xl leading-tight font-light tracking-tight text-balance text-transparent 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 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">
+          <p className="article-excerpt text-muted-foreground mx-auto mt-6 max-w-[42rem] px-4 text-lg leading-relaxed text-balance sm:mt-8 sm:max-w-[46rem] sm:px-0 sm:text-xl md:max-w-[52rem] md:text-2xl lg:max-w-4xl lg:text-2xl">
             {article.excerpt}
           </p>
         )}
@@ -182,7 +187,7 @@ export default function ArticlePage({
 
       {/* Featured Image */}
       {imageUrl && (
-        <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">
+        <div className="article-featured-image mx-auto my-8 aspect-[16/9] w-full max-w-4xl overflow-hidden rounded-3xl border border-[var(--blog-accent-border)] shadow-[0_24px_80px_rgb(168_85_247_/_0.14)] sm:my-12 lg:my-16">
           <Image
             src={imageUrl}
             alt={
@@ -197,12 +202,19 @@ export default function ArticlePage({
       )}
 
       {/* 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
+        id="article-content"
+        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 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}
+              components={{ img: ExpandableArticleImage }}
+            />
           </div>
         </div>
 
@@ -271,11 +283,20 @@ export default function ArticlePage({
             {navigation?.previousArticle && (
               <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">
+                  {navigation.previousArticle.featuredImage && (
+                    <ArticleCardImage
+                      src={navigation.previousArticle.featuredImage}
+                      alt={
+                        navigation.previousArticle.featuredImageAlt ??
+                        `Featured image for ${navigation.previousArticle.title}`
+                      }
+                    />
+                  )}
                   <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-[var(--blog-accent)] transition-colors">
+                    <div className="text-foreground group-hover:text-[var(--blog-text-accent)] transition-colors">
                       {navigation.previousArticle.title}
                     </div>
                   </CardContent>
@@ -290,11 +311,20 @@ export default function ArticlePage({
                 )}
               >
                 <Link href={navigation.nextArticle.url} className="block">
+                  {navigation.nextArticle.featuredImage && (
+                    <ArticleCardImage
+                      src={navigation.nextArticle.featuredImage}
+                      alt={
+                        navigation.nextArticle.featuredImageAlt ??
+                        `Featured image for ${navigation.nextArticle.title}`
+                      }
+                    />
+                  )}
                   <CardContent className="p-4 md:text-right">
                     <div className="text-muted-foreground mb-2 text-sm font-medium">
                       Next Article →
                     </div>
-                    <div className="text-foreground group-hover:text-[var(--blog-accent)] transition-colors">
+                    <div className="text-foreground group-hover:text-[var(--blog-text-accent)] transition-colors">
                       {navigation.nextArticle.title}
                     </div>
                   </CardContent>
@@ -342,7 +372,7 @@ function ArticleTableOfContents({
         <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"
+            className="text-muted-foreground hover:text-[var(--blog-text-accent)] block leading-snug transition-colors"
           >
             {item.text}
           </a>
@@ -413,8 +443,8 @@ function ArticleShareLinks({ title, url }: { title: string; url: string }) {
   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">
+    <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>
@@ -422,24 +452,30 @@ function ArticleShareLinks({ title, url }: { title: string; url: string }) {
         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"
+        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"
       >
-        X
+        <span className="text-sm font-semibold" aria-hidden="true">
+          X
+        </span>
       </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"
+        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"
       >
-        LinkedIn
+        <span className="text-sm font-bold" aria-hidden="true">
+          in
+        </span>
       </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"
+        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"
       >
-        <Mail className="size-3.5" aria-hidden="true" />
-        Email
+        <Mail className="size-4" aria-hidden="true" />
       </a>
     </div>
   );
@@ -462,16 +498,27 @@ function RelatedArticles({
           <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"
+            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"
           >
-            <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>
+            {article.featuredImage && (
+              <ArticleCardImage
+                src={article.featuredImage}
+                alt={
+                  article.featuredImageAlt ??
+                  `Featured image for ${article.title}`
+                }
+              />
             )}
+            <div className="p-4">
+              <h3 className="text-foreground group-hover:text-[var(--blog-text-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>
+              )}
+            </div>
           </Link>
         ))}
       </div>
@@ -479,6 +526,20 @@ 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)]">
+      <Image
+        src={src}
+        alt={alt}
+        width={480}
+        height={270}
+        className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+      />
+    </div>
+  );
+}
+
 /**
  * Generate metadata for the article page for SEO optimization.
  * This function should be used in the Next.js metadata API.

package/dist/index.d.mts

@@ -13,6 +13,8 @@ import { LibSQLDatabase } from 'drizzle-orm/libsql';
 interface BlogTheme {
     accentColor?: string;
     accentHoverColor?: string;
+    textAccentColor?: string;
+    textAccentHoverColor?: string;
     accentBackgroundColor?: string;
     accentBorderColor?: string;
 }
@@ -30,6 +32,8 @@ interface ArticleDateMeta {
 type BlogThemeStyle = CSSProperties & {
     "--blog-accent": string;
     "--blog-accent-hover": string;
+    "--blog-text-accent": string;
+    "--blog-text-accent-hover": string;
     "--blog-accent-bg": string;
     "--blog-accent-border": string;
 };
@@ -107,10 +111,14 @@ interface ArticlePageProps {
         previousArticle?: {
             url: string;
             title: string;
+            featuredImage?: string;
+            featuredImageAlt?: string;
         };
         nextArticle?: {
             url: string;
             title: string;
+            featuredImage?: string;
+            featuredImageAlt?: string;
         };
     };
     /** Public path where this blog is mounted, e.g. "/blog" or "/new-blog". */

package/dist/index.d.ts

@@ -13,6 +13,8 @@ import { LibSQLDatabase } from 'drizzle-orm/libsql';
 interface BlogTheme {
     accentColor?: string;
     accentHoverColor?: string;
+    textAccentColor?: string;
+    textAccentHoverColor?: string;
     accentBackgroundColor?: string;
     accentBorderColor?: string;
 }
@@ -30,6 +32,8 @@ interface ArticleDateMeta {
 type BlogThemeStyle = CSSProperties & {
     "--blog-accent": string;
     "--blog-accent-hover": string;
+    "--blog-text-accent": string;
+    "--blog-text-accent-hover": string;
     "--blog-accent-bg": string;
     "--blog-accent-border": string;
 };
@@ -107,10 +111,14 @@ interface ArticlePageProps {
         previousArticle?: {
             url: string;
             title: string;
+            featuredImage?: string;
+            featuredImageAlt?: string;
         };
         nextArticle?: {
             url: string;
             title: string;
+            featuredImage?: string;
+            featuredImageAlt?: string;
         };
     };
     /** Public path where this blog is mounted, e.g. "/blog" or "/new-blog". */