From 99a1cdb651515bb9e579737db78689269119e0e5 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Fri, 28 Feb 2025 02:09:52 -0600
Subject: [PATCH] feat: enhance blog post author display with Twitter links and
 default image

---
 .../website/app/[locale]/blog/[slug]/page.tsx |  41 ++++++--
 .../[locale]/blog/components/BlogPostCard.tsx |  94 ++++++++++++++++++
 apps/website/app/[locale]/blog/page.tsx       |  52 ++++++++--
 apps/website/lib/ghost.ts                     |   1 +
 apps/website/public/default.jpg               | Bin 0 -> 7520 bytes
 5 files changed, 173 insertions(+), 15 deletions(-)
 create mode 100644 apps/website/app/[locale]/blog/components/BlogPostCard.tsx
 create mode 100644 apps/website/public/default.jpg

diff --git a/apps/website/app/[locale]/blog/[slug]/page.tsx b/apps/website/app/[locale]/blog/[slug]/page.tsx
index 0f4345f..3984cdb 100644
--- a/apps/website/app/[locale]/blog/[slug]/page.tsx
+++ b/apps/website/app/[locale]/blog/[slug]/page.tsx
@@ -167,17 +167,44 @@ export default async function BlogPostPage({ params }: Props) {
 					<div className="flex items-center mb-6">
 						{post.primary_author?.profile_image && (
 							<div className="relative h-12 w-12 rounded-full overflow-hidden mr-4">
-								<Image
-									src={post.primary_author.profile_image}
-									alt={post.primary_author.name}
-									fill
-									className="object-cover"
-								/>
+								{post.primary_author.twitter ? (
+									<a
+										href={`https://twitter.com/${post.primary_author.twitter}`}
+										target="_blank"
+										rel="noopener noreferrer"
+										className="block cursor-pointer transition-opacity hover:opacity-90"
+									>
+										<Image
+											src={post.primary_author.profile_image}
+											alt={post.primary_author.name}
+											fill
+											className="object-cover"
+										/>
+									</a>
+								) : (
+									<Image
+										src={post.primary_author.profile_image}
+										alt={post.primary_author.name}
+										fill
+										className="object-cover"
+									/>
+								)}
 							</div>
 						)}
 						<div>
 							<p className="font-medium">
-								{post.primary_author?.name || "Unknown Author"}
+								{post.primary_author?.twitter ? (
+									<a
+										href={`https://twitter.com/${post.primary_author.twitter}`}
+										target="_blank"
+										rel="noopener noreferrer"
+										className="hover:text-primary transition-colors"
+									>
+										{post.primary_author.name || "Unknown Author"}
+									</a>
+								) : (
+									post.primary_author?.name || "Unknown Author"
+								)}
 							</p>
 							<p className="text-sm text-muted-foreground">
 								{formattedDate} • {post.reading_time} min read
diff --git a/apps/website/app/[locale]/blog/components/BlogPostCard.tsx b/apps/website/app/[locale]/blog/components/BlogPostCard.tsx
new file mode 100644
index 0000000..9b38222
--- /dev/null
+++ b/apps/website/app/[locale]/blog/components/BlogPostCard.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import type { Post } from "@/lib/ghost";
+import Image from "next/image";
+import Link from "next/link";
+
+interface BlogPostCardProps {
+	post: Post;
+	locale: string;
+}
+
+export function BlogPostCard({ post, locale }: BlogPostCardProps) {
+	const formattedDate = new Date(post.published_at).toLocaleDateString(locale, {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	});
+
+	return (
+		<Link
+			href={`/blog/${post.slug}`}
+			className="group block hover:bg-muted p-4 rounded-lg"
+		>
+			<article className="flex gap-6 items-start">
+				{post.feature_image && (
+					<div className="relative h-32 w-48 shrink-0">
+						<Image
+							src={post.feature_image}
+							alt={post.title}
+							fill
+							className="object-cover rounded-lg"
+						/>
+					</div>
+				)}
+				<div className="flex-1 min-w-0">
+					<h2 className="text-xl font-semibold mb-2 group-hover:text-primary">
+						{post.title}
+					</h2>
+					<p className="text-muted-foreground line-clamp-2 mb-4">
+						{post.custom_excerpt || post.excerpt}
+					</p>
+					<div className="flex items-center text-sm text-muted-foreground">
+						<div className="flex items-center">
+							{post.primary_author?.profile_image && (
+								<div className="relative h-6 w-6 rounded-full overflow-hidden mr-2">
+									{post.primary_author.twitter ? (
+										<a
+											href={`https://twitter.com/${post.primary_author.twitter}`}
+											target="_blank"
+											rel="noopener noreferrer"
+											className="block cursor-pointer transition-opacity hover:opacity-90"
+										>
+											<Image
+												src={post.primary_author.profile_image}
+												alt={post.primary_author.name}
+												fill
+												className="object-cover"
+											/>
+										</a>
+									) : (
+										<Image
+											src={post.primary_author.profile_image}
+											alt={post.primary_author.name}
+											fill
+											className="object-cover"
+										/>
+									)}
+								</div>
+							)}
+							{post.primary_author?.twitter ? (
+								<a
+									href={`https://twitter.com/${post.primary_author.twitter}`}
+									target="_blank"
+									rel="noopener noreferrer"
+									className="hover:text-primary transition-colors"
+								>
+									{post.primary_author.name || "Unknown Author"}
+								</a>
+							) : (
+								<span>{post.primary_author?.name || "Unknown Author"}</span>
+							)}
+						</div>
+						<span className="mx-2">in</span>
+						<span>{post.primary_tag?.name || "General"}</span>
+						<span className="mx-2">•</span>
+						<span>{post.reading_time} min read</span>
+						<span className="mx-2">•</span>
+						<span>{formattedDate}</span>
+					</div>
+				</div>
+			</article>
+		</Link>
+	);
+}
diff --git a/apps/website/app/[locale]/blog/page.tsx b/apps/website/app/[locale]/blog/page.tsx
index ab7328e..2481da7 100644
--- a/apps/website/app/[locale]/blog/page.tsx
+++ b/apps/website/app/[locale]/blog/page.tsx
@@ -102,7 +102,7 @@ function BlogPostCard({ post, locale }: { post: Post; locale: string }) {
 			className="group block hover:bg-muted p-4 rounded-lg"
 		>
 			<article className="flex gap-6 items-start">
-				{post.feature_image && (
+				{post.feature_image ? (
 					<div className="relative h-32 w-48 shrink-0">
 						<Image
 							src={post.feature_image}
@@ -111,6 +111,15 @@ function BlogPostCard({ post, locale }: { post: Post; locale: string }) {
 							className="object-cover rounded-lg"
 						/>
 					</div>
+				) : (
+					<div className="relative h-32 w-48 shrink-0">
+						<Image
+							src={"/default.jpg"}
+							alt="Default Image"
+							fill
+							className="object-cover rounded-lg"
+						/>
+					</div>
 				)}
 				<div className="flex-1 min-w-0">
 					<h2 className="text-xl font-semibold mb-2 group-hover:text-primary">
@@ -123,15 +132,42 @@ function BlogPostCard({ post, locale }: { post: Post; locale: string }) {
 						<div className="flex items-center">
 							{post.primary_author?.profile_image && (
 								<div className="relative h-6 w-6 rounded-full overflow-hidden mr-2">
-									<Image
-										src={post.primary_author.profile_image}
-										alt={post.primary_author.name}
-										fill
-										className="object-cover"
-									/>
+									{post.primary_author.twitter ? (
+										<a
+											href={`https://twitter.com/${post.primary_author.twitter}`}
+											target="_blank"
+											rel="noopener noreferrer"
+											className="block cursor-pointer transition-opacity hover:opacity-90"
+										>
+											<Image
+												src={post.primary_author.profile_image}
+												alt={post.primary_author.name}
+												fill
+												className="object-cover"
+											/>
+										</a>
+									) : (
+										<Image
+											src={post.primary_author.profile_image}
+											alt={post.primary_author.name}
+											fill
+											className="object-cover"
+										/>
+									)}
 								</div>
 							)}
-							<span>{post.primary_author?.name || "Unknown Author"}</span>
+							{post.primary_author?.twitter ? (
+								<a
+									href={`https://twitter.com/${post.primary_author.twitter}`}
+									target="_blank"
+									rel="noopener noreferrer"
+									className="hover:text-primary transition-colors"
+								>
+									{post.primary_author.name || "Unknown Author"}
+								</a>
+							) : (
+								<span>{post.primary_author?.name || "Unknown Author"}</span>
+							)}
 						</div>
 						<span className="mx-2">in</span>
 						<span>{post.primary_tag?.name || "General"}</span>
diff --git a/apps/website/lib/ghost.ts b/apps/website/lib/ghost.ts
index 35eca37..5bbb16c 100644
--- a/apps/website/lib/ghost.ts
+++ b/apps/website/lib/ghost.ts
@@ -66,6 +66,7 @@ export interface Post {
 		slug: string;
 		profile_image: string | null;
 		bio: string | null;
+		twitter: string | null;
 	};
 	authors?: Array<{
 		id: string;
diff --git a/apps/website/public/default.jpg b/apps/website/public/default.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..71334962e5abacd9f730458060d844c290cbfa2a
GIT binary patch
literal 7520
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

literal 0
HcmV?d00001