Skip to content

Commit 424380b

Browse files
elrickvmelrickvm
committed
Add Author Images to all post
1 parent 85b1d7f commit 424380b

File tree

11 files changed

+230
-80
lines changed

11 files changed

+230
-80
lines changed

‎assets/img/authors/charles.jpg‎

254 KB
Loading

‎assets/img/authors/elrick.jpg‎

160 KB
Loading

‎assets/img/authors/jacob.jpg‎

97.5 KB
Loading

‎assets/img/authors/jeffrey.jpg‎

259 KB
Loading

‎assets/img/authors/jorge.jpg‎

197 KB
Loading

‎assets/img/authors/min.jpg‎

171 KB
Loading

‎assets/img/authors/paul.jpg‎

112 KB
Loading

‎assets/img/authors/rachelle.jpg‎

134 KB
Loading

‎assets/img/authors/taras.jpg‎

171 KB
Loading

‎routes/blog-index-route.tsx‎

Lines changed: 165 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,24 @@ export function blogIndexRoute() {
1818
twitterXImage: "/assets/index-meta-home-cloud-native.png",
1919
});
2020

21+
const authorsWithImage = [
22+
"charles",
23+
"elrick",
24+
"taras",
25+
"jacob",
26+
"min",
27+
"jeffrey",
28+
"jorge",
29+
"paul",
30+
];
31+
const firstName = latest.author.split(" ")[0].toLowerCase();
32+
const isAuthorImageAvailable = authorsWithImage.includes(
33+
firstName,
34+
);
35+
const authorImage = isAuthorImageAvailable
36+
? `/assets/img/authors/${firstName}.jpg`
37+
: "/assets/fs-logo-no-text.svg";
38+
2139
return (
2240
<App>
2341
<div class="flex flex-col justify-self-center !max-w-none prose">
@@ -39,83 +57,166 @@ export function blogIndexRoute() {
3957
New
4058
</span>
4159
<h3 class="font-black text-3xl">{latest.title}</h3>
42-
<p>
43-
{latest.author} - {new Intl.DateTimeFormat("en-US", {
44-
month: "long",
45-
day: "numeric",
46-
year: "numeric",
47-
}).format(latest.date)}
48-
</p>
4960
<p class="max-w-prose font-normal">{latest.description}</p>
5061
<strong>&rarr; Read Article</strong>
62+
<div class="flex flex-row items-center pt-2">
63+
<div>
64+
<img
65+
class="mr-4 rounded-full w-10 h-10 object-cover"
66+
src={authorImage}
67+
alt={`${latest.author}'s profile`}
68+
/>
69+
</div>
70+
<div>
71+
<p class="m-0 font-black">{latest.author}</p>
72+
<p class="m-0 text-gray-500 text-sm">
73+
{new Intl.DateTimeFormat("en-US", {
74+
month: "long",
75+
day: "numeric",
76+
year: "numeric",
77+
}).format(latest.date)}
78+
</p>
79+
</div>
80+
</div>
5181
</div>
5282
</a>
5383
</section>
5484
<section>
5585
<h2>Last Three</h2>
5686
<ol class="md:gap-6 lg:gap-11 space-y-10 md:space-y-0 md:grid md:grid-cols-2 lg:grid-cols-3 mx-auto p-4 max-w-7xl">
57-
{recent.map((post) => (
58-
<li class="md:mt-0 p-2 md:p-4 border prose">
59-
<a
60-
class="no-underline"
61-
href={`/blog/${post.id}`}
62-
>
63-
<img
64-
class="flex-shrink-0 rounded-lg md:w-[500px] md:h-[200px] object-cover"
65-
src={post.image
66-
? `blog/${post.id}/${post.image}`
67-
: "/assets/fs-logo-no-text.svg"}
68-
alt="Blog image"
69-
/>
70-
<div>
71-
<h3 class="font-black text-2xl">{post.title}</h3>
72-
<p>
73-
{post.author} - {new Intl.DateTimeFormat("en-US", {
74-
month: "long",
75-
day: "numeric",
76-
year: "numeric",
77-
}).format(latest.date)}
78-
</p>
79-
<p class="max-w-prose font-normal">
80-
{post.description}
81-
</p>
82-
<strong>&rarr; Read Article</strong>
83-
</div>
84-
</a>
85-
</li>
86-
))}
87+
{recent.map((post) => {
88+
const authorsWithImage = [
89+
"charles",
90+
"elrick",
91+
"taras",
92+
"jacob",
93+
"min",
94+
"jeffrey",
95+
"jorge",
96+
"paul",
97+
];
98+
const firstName = post.author.split(" ")[0].toLowerCase();
99+
const isAuthorImageAvailable = authorsWithImage.includes(
100+
firstName,
101+
);
102+
const authorImage = isAuthorImageAvailable
103+
? `/assets/img/authors/${firstName}.jpg`
104+
: "/assets/fs-logo-no-text.svg";
105+
106+
return (
107+
<li class="flex flex-col md:mt-0 p-2 md:p-4 border h-full prose">
108+
<a
109+
class="flex flex-col h-full no-underline"
110+
href={`/blog/${post.id}`}
111+
>
112+
<img
113+
class="flex-shrink-0 rounded-lg md:w-[500px] md:h-[200px] object-cover"
114+
src={post.image
115+
? `blog/${post.id}/${post.image}`
116+
: "/assets/fs-logo-no-text.svg"}
117+
alt="Blog image"
118+
/>
119+
<div class="flex-grow">
120+
<h3 class="font-black text-2xl">{post.title}</h3>
121+
<p class="max-w-prose font-normal">
122+
{post.description}
123+
</p>
124+
<strong>&rarr; Read Article</strong>
125+
</div>
126+
{/* Author Info */}
127+
<div class="flex flex-row items-center mt-auto pt-4">
128+
<div>
129+
<img
130+
class="mr-4 rounded-full w-10 h-10 object-cover"
131+
src={authorImage}
132+
alt={`${post.author}'s profile`}
133+
/>
134+
</div>
135+
<div>
136+
<p class="m-0 font-black">{post.author}</p>
137+
<p class="m-0 text-gray-500 text-sm">
138+
{new Intl.DateTimeFormat("en-US", {
139+
month: "long",
140+
day: "numeric",
141+
year: "numeric",
142+
}).format(post.date)}
143+
</p>
144+
</div>
145+
</div>
146+
</a>
147+
</li>
148+
);
149+
})}
87150
</ol>
88151
</section>
89152
<section>
90153
<h2>All</h2>
91154
<ol class="md:gap-6 lg:gap-11 space-y-10 md:space-y-0 md:grid md:grid-cols-2 lg:grid-cols-3 mx-auto p-4 max-w-7xl">
92-
{blog.getPosts().map((post) => (
93-
<li class="md:mt-0 p-2 md:p-4 border prose">
94-
<a class="no-underline prose" href={`/blog/${post.id}`}>
95-
<img
96-
class="flex-shrink-0 rounded-lg md:w-[500px] md:h-[200px] object-cover"
97-
src={post.image
98-
? `blog/${post.id}/${post.image}`
99-
: "/assets/fs-logo-no-text.svg"}
100-
alt="Blog image"
101-
/>
102-
<div>
103-
<h3 class="font-black text-2xl">{post.title}</h3>
104-
<p>
105-
{post.author} - {new Intl.DateTimeFormat("en-US", {
106-
month: "long",
107-
day: "numeric",
108-
year: "numeric",
109-
}).format(latest.date)}
110-
</p>
111-
<p class="max-w-prose font-normal">
112-
{post.description}
113-
</p>
114-
<strong>&rarr; Read Article</strong>
115-
</div>
116-
</a>
117-
</li>
118-
))}
155+
{blog.getPosts().map((post) => {
156+
const authorsWithImage = [
157+
"charles",
158+
"elrick",
159+
"taras",
160+
"jacob",
161+
"min",
162+
"jeffrey",
163+
"jorge",
164+
"paul",
165+
];
166+
const firstName = post.author.split(" ")[0].toLowerCase();
167+
const isAuthorImageAvailable = authorsWithImage.includes(
168+
firstName,
169+
);
170+
const authorImage = isAuthorImageAvailable
171+
? `/assets/img/authors/${firstName}.jpg`
172+
: "/assets/fs-logo-no-text.svg";
173+
174+
return (
175+
<li class="flex flex-col md:mt-0 p-2 md:p-4 border h-full prose">
176+
<a
177+
class="flex flex-col h-full no-underline"
178+
href={`/blog/${post.id}`}
179+
>
180+
{/* Blog Image */}
181+
<img
182+
class="flex-shrink-0 rounded-lg md:w-[500px] md:h-[200px] object-cover"
183+
src={post.image
184+
? `blog/${post.id}/${post.image}`
185+
: "/assets/fs-logo-no-text.svg"}
186+
alt="Blog image"
187+
/>
188+
{/* Main Content */}
189+
<div class="flex-grow">
190+
<h3 class="font-black text-2xl">{post.title}</h3>
191+
<p class="max-w-prose font-normal">
192+
{post.description}
193+
</p>
194+
<strong>&rarr; Read Article</strong>
195+
</div>
196+
{/* Author Section */}
197+
<div class="flex flex-row items-center mt-auto pt-4">
198+
<div>
199+
<img
200+
class="mr-4 rounded-full w-10 h-10 object-cover"
201+
src={authorImage}
202+
alt={`${post.author}'s profile`}
203+
/>
204+
</div>
205+
<div>
206+
<p class="m-0 font-black">{post.author}</p>
207+
<p class="m-0 text-gray-500 text-sm">
208+
{new Intl.DateTimeFormat("en-US", {
209+
month: "long",
210+
day: "numeric",
211+
year: "numeric",
212+
}).format(post.date)}
213+
</p>
214+
</div>
215+
</div>
216+
</a>
217+
</li>
218+
);
219+
})}
119220
</ol>
120221
</section>
121222
</div>

0 commit comments

Comments
 (0)