Skip to content

Commit 84b0f48

Browse files
author
DidierRLopes
committed
fix latest blogposts
1 parent 5edd3f4 commit 84b0f48

File tree

3 files changed

+84
-58
lines changed

3 files changed

+84
-58
lines changed

‎docusaurus.config.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,16 @@ const config = {
5858
editUrl: 'https://github.com/DidierRLopes/my-website/tree/main/',
5959
feedOptions: {
6060
type: 'all',
61+
limit: 2000,
6162
copyright: `Copyright © ${new Date().getFullYear()} Didier Lopes.`,
62-
createFeedItems: async (params) => {
63-
const { blogPosts, defaultCreateFeedItems, ...rest } = params;
64-
return defaultCreateFeedItems({
65-
// keep only the 10 most recent blog posts in the feed
66-
blogPosts: blogPosts, //.filter((item, index) => index < 10),
67-
...rest,
68-
});
69-
},
63+
// createFeedItems: async (params) => {
64+
// const { blogPosts, defaultCreateFeedItems, ...rest } = params;
65+
// return defaultCreateFeedItems({
66+
// // keep only the 10 most recent blog posts in the feed
67+
// blogPosts: blogPosts, //.filter((item, index) => index < 10),
68+
// ...rest,
69+
// });
70+
// },
7071
},
7172
},
7273
theme: {

‎src/components/BlogHistory.tsx‎

Lines changed: 72 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export default function BlogHistory({ posts = [] }: BlogHistoryProps) {
4242
summary: post.summary,
4343
contentSize: post.content_html.length / 1024,
4444
url: post.url,
45+
content_html: post.content_html,
4546
}));
4647

4748
const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
@@ -120,51 +121,79 @@ export default function BlogHistory({ posts = [] }: BlogHistoryProps) {
120121
backdropFilter: "blur(5px)",
121122
borderRadius: "8px",
122123
boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
124+
width: "600px",
123125
}}
124126
>
125-
<p
126-
style={{
127-
fontSize: "1.1em",
128-
fontWeight: "normal",
129-
color: "#000000",
130-
marginBottom: "8px",
131-
}}
132-
>
133-
{data.date.toLocaleDateString(undefined, {
134-
year: "numeric",
135-
month: "long",
136-
day: "numeric",
137-
})}
138-
</p>
139-
<p
140-
style={{
141-
fontSize: "1.2em",
142-
fontWeight: "bold",
143-
color: payload[0].color,
144-
marginBottom: "8px",
145-
}}
146-
>
147-
{data.title}
148-
</p>
149-
<p
150-
style={{
151-
fontSize: "0.9em",
152-
color: "#000",
153-
fontStyle: "italic",
154-
marginBottom: "12px",
155-
}}
156-
>
157-
{data.summary}
158-
</p>
159-
<p
160-
style={{
161-
fontSize: "0.9em",
162-
color: "#666",
163-
fontStyle: "italic",
164-
}}
165-
>
166-
(click bar to view post)
167-
</p>
127+
<div style={{ display: "flex", alignItems: "center" }}>
128+
<div
129+
className="flex items-center justify-center mr-4"
130+
style={{
131+
width: "100px",
132+
height: "100px",
133+
flexShrink: 0,
134+
backgroundColor: "#f0f0f0"
135+
}}
136+
>
137+
<img
138+
className="rounded-xl w-full h-full"
139+
src={data.content_html.match(/<img.*?src="(.*?)"/)[1]}
140+
alt={data.title}
141+
style={{
142+
objectFit: "cover",
143+
width: "100px",
144+
height: "100px"
145+
}}
146+
/>
147+
</div>
148+
<div>
149+
<p
150+
style={{
151+
fontSize: "1.1em",
152+
fontWeight: "normal",
153+
color: "#000000",
154+
marginBottom: "8px",
155+
textAlign: "left",
156+
}}
157+
>
158+
{data.date.toLocaleDateString(undefined, {
159+
year: "numeric",
160+
month: "long",
161+
day: "numeric",
162+
})}
163+
</p>
164+
<p
165+
style={{
166+
fontSize: "1.2em",
167+
fontWeight: "bold",
168+
color: payload[0].color,
169+
marginBottom: "8px",
170+
textAlign: "left",
171+
}}
172+
>
173+
{data.title}
174+
</p>
175+
<p
176+
style={{
177+
fontSize: "0.9em",
178+
color: "#000",
179+
fontStyle: "italic",
180+
marginBottom: "12px",
181+
textAlign: "left",
182+
}}
183+
>
184+
{data.summary}
185+
</p>
186+
<p
187+
style={{
188+
fontSize: "0.9em",
189+
color: "#666",
190+
fontStyle: "italic",
191+
}}
192+
>
193+
(click bar to view post)
194+
</p>
195+
</div>
196+
</div>
168197
</div>
169198
);
170199
}

‎src/pages/index.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -319,8 +319,9 @@ export default function Home() {
319319

320320
<div className="mx-auto mt-16 flex max-w-[880px] flex-col px-3 text-center mb-16">
321321
<h1 className="_h1 !mb-2">Latest Blog Posts</h1>
322+
{allPosts && allPosts.length > 0 && <BlogHistory posts={allPosts} />}
322323
{isDesktop ? (
323-
<div className="flex items-start content-center mx-auto align-center justify-center mt-4 gap-8 mb-4 flex-row">
324+
<div className="flex items-start content-center mx-auto align-center justify-center mt-8 gap-8 mb-4 flex-row">
324325
{postsHighlight.map((post) => (
325326
<div
326327
key={post.id}
@@ -350,7 +351,7 @@ export default function Home() {
350351
))}
351352
</div>
352353
) : (
353-
<div className="flex items-center content-center mx-auto align-center justify-center mt-4 gap-4 mb-4 flex-col">
354+
<div className="flex items-center content-center mx-auto align-center justify-center mt-8 gap-4 mb-4 flex-col">
354355
{postsHighlight.map((post) => (
355356
<div key={post.id} className="my-2">
356357
<a href={`${post.id}`}>
@@ -369,11 +370,6 @@ export default function Home() {
369370
)}
370371
</div>
371372

372-
<div className="mx-auto mt-16 flex max-w-[880px] flex-col px-3 text-center mb-16">
373-
<div className="_subtitle text-lg">Consistency</div>
374-
{allPosts && allPosts.length > 0 && <BlogHistory posts={allPosts} />}
375-
</div>
376-
377373
<div className="mx-auto mt-16 flex max-w-[880px] flex-col px-3 text-center rounded-[14px]">
378374
<h1>What I believe in.</h1>
379375
<p className="mb-4 mt-4">

0 commit comments

Comments
 (0)