Skip to content

Commit b8f3dc8

Browse files
FauzanTrisuladanaFauzanTrisuladana
committed
fix: Update image and author fields to be optional with fallback sources, because an error
1 parent 698ddb1 commit b8f3dc8

5 files changed

Lines changed: 49 additions & 30 deletions

File tree

‎src/app/news/[slug]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export default async function Page({
7474
<div className="flex flex-row items-center justify-items-start mt-8 md:hidden">
7575
<Image
7676
className="rounded-full mr-2 "
77-
src={post.authors?.[0]?.avatar_url || ""}
77+
src={post.authors?.[0]?.avatar_url || "/plain-logo-blue.png"}
7878
alt={post.authors?.[0]?.display_name || ""}
7979
width={46}
8080
height={46}

‎src/components/NewsCard.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Image from "next/image";
44
import Link from "next/link";
55

66
interface ProgramAttribute {
7-
image: {
7+
image?: {
88
source_url: string;
99
width: number;
1010
height: number;
@@ -14,8 +14,8 @@ interface ProgramAttribute {
1414
excerpt: string;
1515
slug: string;
1616
date: string;
17-
authorName: string;
18-
authorImage: string;
17+
authorName?: string;
18+
authorImage?: string;
1919
}
2020
function formatDate(date: string): string {
2121
const d = new Date(date);
@@ -42,15 +42,21 @@ export default function NewsCard(props: ProgramAttribute) {
4242
const { image, alt_image, title, slug, date, authorName, authorImage } =
4343
props;
4444

45+
const fallbackImageSrc = "/shareable-card-preview.jpg";
46+
const fallbackAvatarSrc = "/plain-logo-blue.png";
47+
const imageSrc = image?.source_url || fallbackImageSrc;
48+
const avatarSrc = authorImage || fallbackAvatarSrc;
49+
const avatarAlt = authorName || "Author";
50+
4551
return (
4652
<Link
4753
href={`/news/${slug}`}
4854
className="w-full md:w-1/3 p-2 md:p-6 rounded-md flex flex-col"
4955
>
5056
<Image
5157
className="rounded-xl w-full aspect-[4/3] object-cover"
52-
src={image.source_url}
53-
alt={alt_image}
58+
src={imageSrc}
59+
alt={alt_image || title}
5460
width={400}
5561
height={300}
5662
/>
@@ -68,8 +74,8 @@ export default function NewsCard(props: ProgramAttribute) {
6874
<div className="flex flex-row items-center justify-items-start mt-auto">
6975
<Image
7076
className="rounded-full mr-2"
71-
src={authorImage}
72-
alt={authorName}
77+
src={avatarSrc}
78+
alt={avatarAlt}
7379
width={46}
7480
height={46}
7581
/>

‎src/components/NewsCarousel.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import Autoplay from "embla-carousel-autoplay";
1616

1717
interface ProgramAttribute {
1818
id: number;
19-
image: {
19+
image?: {
2020
source_url: string;
2121
width: number;
2222
height: number;
@@ -35,6 +35,7 @@ interface CarouselProps {
3535
}
3636

3737
export function CarouselTry({ articles }: CarouselProps) {
38+
const fallbackImageSrc = "/shareable-card-preview.jpg";
3839
const [api, setApi] = useState<CarouselApi>();
3940
const [current, setCurrent] = useState(0);
4041
const [isHovered, setIsHovered] = useState(false);
@@ -77,8 +78,8 @@ export function CarouselTry({ articles }: CarouselProps) {
7778
<Link href={`/news/${article.slug}`} className="block">
7879
<div className="relative w-full md:aspect-[21/9] aspect-[9/12] rounded-lg overflow-hidden">
7980
<Image
80-
src={article.image.source_url}
81-
alt={article.alt_image}
81+
src={article.image?.source_url || fallbackImageSrc}
82+
alt={article.alt_image || article.title}
8283
fill
8384
className="object-cover z-0"
8485
/>

‎src/components/SmallNewsCard.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Image from "next/image";
22
import Link from "next/link";
33

44
interface ProgramAttribute {
5-
image: {
5+
image?: {
66
source_url: string;
77
width: number;
88
height: number;
@@ -11,14 +11,20 @@ interface ProgramAttribute {
1111
title: string;
1212
excerpt: string;
1313
slug: string;
14-
authorName: string;
15-
authorImage: string;
14+
authorName?: string;
15+
authorImage?: string;
1616
date: string;
1717
}
1818
export default function SmallNewsCard(props: ProgramAttribute) {
1919
const { image, alt_image, title, slug, authorName, authorImage, date } =
2020
props;
2121

22+
const fallbackImageSrc = "/shareable-card-preview.jpg";
23+
const fallbackAvatarSrc = "/plain-logo-blue.png";
24+
const imageSrc = image?.source_url || fallbackImageSrc;
25+
const avatarSrc = authorImage || fallbackAvatarSrc;
26+
const safeAuthorName = authorName ?? "";
27+
2228
function formatDate(date: string): string {
2329
const dateString = new Date(date);
2430

@@ -37,21 +43,21 @@ export default function SmallNewsCard(props: ProgramAttribute) {
3743
>
3844
<Image
3945
className="rounded-xl w-full"
40-
src={image.source_url}
41-
alt={alt_image}
42-
width={image.width}
43-
height={image.height}
46+
src={imageSrc}
47+
alt={alt_image || title}
48+
width={image?.width ?? 400}
49+
height={image?.height ?? 300}
4450
/>
4551
<div className="flex items-center mt-2">
4652
<Image
4753
className="rounded-full w-6 h-6 mr-2"
48-
src={authorImage}
49-
alt={authorName}
54+
src={avatarSrc}
55+
alt={safeAuthorName || "Author"}
5056
width={24}
5157
height={24}
5258
/>
5359
<span className="text-sm text-gray-700">
54-
{authorName.split(" ").filter(Boolean).slice(0, 2).join(" ")}
60+
{safeAuthorName.split(" ").filter(Boolean).slice(0, 2).join(" ")}
5561
</span>
5662
<span className="text-sm text-gray-700 mx-2">|</span>
5763
<span className="text-sm text-gray-700">{formatDate(date)}</span>

‎src/components/SmallNewsCardBottom.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Image from "next/image";
44
import Link from "next/link";
55

66
interface ProgramAttribute {
7-
image: {
7+
image?: {
88
source_url: string;
99
width: number;
1010
height: number;
@@ -14,8 +14,8 @@ interface ProgramAttribute {
1414
excerpt: string;
1515
slug: string;
1616
date: string;
17-
authorName: string;
18-
authorImage: string;
17+
authorName?: string;
18+
authorImage?: string;
1919
orientation?: "horizontal" | "vertical";
2020
}
2121
function formatDate(date: string): string {
@@ -43,17 +43,23 @@ export default function SmolNewsCard(props: ProgramAttribute) {
4343
const { image, alt_image, title, slug, date, authorName, authorImage } =
4444
props;
4545

46+
const fallbackImageSrc = "/shareable-card-preview.jpg";
47+
const fallbackAvatarSrc = "/plain-logo-blue.png";
48+
const imageSrc = image?.source_url || fallbackImageSrc;
49+
const avatarSrc = authorImage || fallbackAvatarSrc;
50+
const avatarAlt = authorName || "Author";
51+
4652
return (
4753
<Link
4854
href={`/news/${slug}`}
4955
className="w-full md:w-1/3 p-2 rounded-md flex flex-col"
5056
>
5157
<Image
5258
className="rounded-xl w-full aspect-[4/3] object-cover"
53-
src={image.source_url}
54-
alt={alt_image}
55-
width={image.width}
56-
height={image.height}
59+
src={imageSrc}
60+
alt={alt_image || title}
61+
width={image?.width ?? 400}
62+
height={image?.height ?? 300}
5763
/>
5864
<h1 className="text-gray-600 font-sm mt-2">{formatDate(date)}</h1>
5965
<h1 className="text-navy font-semibold text-xl my-2">{title}</h1>
@@ -69,8 +75,8 @@ export default function SmolNewsCard(props: ProgramAttribute) {
6975
<div className="flex flex-row items-center justify-items-start mt-auto">
7076
<Image
7177
className="rounded-full mr-2"
72-
src={authorImage}
73-
alt={authorName}
78+
src={avatarSrc}
79+
alt={avatarAlt}
7480
width={32}
7581
height={32}
7682
/>

0 commit comments

Comments
 (0)