fix latest blogposts

DidierRLopes · Dec 25, 2024 · 84b0f48 · 84b0f48
1 parent 5edd3f4
commit 84b0f48
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 58 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -58,15 +58,16 @@ const config = {
           editUrl: 'https://github.com/DidierRLopes/my-website/tree/main/',
           feedOptions: {
             type: 'all',
+            limit: 2000,
             copyright: `Copyright © ${new Date().getFullYear()} Didier Lopes.`,
-            createFeedItems: async (params) => {
-              const { blogPosts, defaultCreateFeedItems, ...rest } = params;
-              return defaultCreateFeedItems({
-                // keep only the 10 most recent blog posts in the feed
-                blogPosts: blogPosts, //.filter((item, index) => index < 10),
-                ...rest,
-              });
-            },
+            // createFeedItems: async (params) => {
+            //   const { blogPosts, defaultCreateFeedItems, ...rest } = params;
+            //   return defaultCreateFeedItems({
+            //     // keep only the 10 most recent blog posts in the feed
+            //     blogPosts: blogPosts, //.filter((item, index) => index < 10),
+            //     ...rest,
+            //   });
+            // },
           },
         },
         theme: {

diff --git a/src/components/BlogHistory.tsx b/src/components/BlogHistory.tsx
@@ -42,6 +42,7 @@ export default function BlogHistory({ posts = [] }: BlogHistoryProps) {
 		summary: post.summary,
 		contentSize: post.content_html.length / 1024,
 		url: post.url,
+		content_html: post.content_html,
 	}));
 
 	const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
@@ -120,51 +121,79 @@ export default function BlogHistory({ posts = [] }: BlogHistoryProps) {
 											backdropFilter: "blur(5px)",
 											borderRadius: "8px",
 											boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
+											width: "600px",
 										}}
 									>
-										<p
-											style={{
-												fontSize: "1.1em",
-												fontWeight: "normal",
-												color: "#000000",
-												marginBottom: "8px",
-											}}
-										>
-											{data.date.toLocaleDateString(undefined, {
-												year: "numeric",
-												month: "long",
-												day: "numeric",
-											})}
-										</p>
-										<p
-											style={{
-												fontSize: "1.2em",
-												fontWeight: "bold",
-												color: payload[0].color,
-												marginBottom: "8px",
-											}}
-										>
-											{data.title}
-										</p>
-										<p
-											style={{
-												fontSize: "0.9em",
-												color: "#000",
-												fontStyle: "italic",
-												marginBottom: "12px",
-											}}
-										>
-											{data.summary}
-										</p>
-										<p
-											style={{
-												fontSize: "0.9em",
-												color: "#666",
-												fontStyle: "italic",
-											}}
-										>
-											(click bar to view post)
-										</p>
+										<div style={{ display: "flex", alignItems: "center" }}>
+											<div
+												className="flex items-center justify-center mr-4"
+												style={{
+                          width: "100px",
+                          height: "100px",
+                          flexShrink: 0,
+                          backgroundColor: "#f0f0f0"
+                        }}
+											>
+												<img
+													className="rounded-xl w-full h-full"
+													src={data.content_html.match(/<img.*?src="(.*?)"/)[1]}
+													alt={data.title}
+													style={{
+														objectFit: "cover",
+                            width: "100px",
+                            height: "100px"
+													}}
+												/>
+											</div>
+											<div>
+												<p
+													style={{
+														fontSize: "1.1em",
+														fontWeight: "normal",
+														color: "#000000",
+														marginBottom: "8px",
+														textAlign: "left",
+													}}
+												>
+													{data.date.toLocaleDateString(undefined, {
+														year: "numeric",
+														month: "long",
+														day: "numeric",
+													})}
+												</p>
+												<p
+													style={{
+														fontSize: "1.2em",
+														fontWeight: "bold",
+														color: payload[0].color,
+														marginBottom: "8px",
+														textAlign: "left",
+													}}
+												>
+													{data.title}
+												</p>
+												<p
+													style={{
+														fontSize: "0.9em",
+														color: "#000",
+														fontStyle: "italic",
+														marginBottom: "12px",
+														textAlign: "left",
+													}}
+												>
+													{data.summary}
+												</p>
+												<p
+													style={{
+														fontSize: "0.9em",
+														color: "#666",
+														fontStyle: "italic",
+													}}
+												>
+													(click bar to view post)
+												</p>
+											</div>
+										</div>
 									</div>
 								);
 							}

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -319,8 +319,9 @@ export default function Home() {
 
         <div className="mx-auto mt-16 flex max-w-[880px] flex-col px-3 text-center mb-16">
           <h1 className="_h1 !mb-2">Latest Blog Posts</h1>
+          {allPosts && allPosts.length > 0 && <BlogHistory posts={allPosts} />}
           {isDesktop ? (
-            <div className="flex items-start content-center mx-auto align-center justify-center mt-4 gap-8 mb-4 flex-row">
+            <div className="flex items-start content-center mx-auto align-center justify-center mt-8 gap-8 mb-4 flex-row">
               {postsHighlight.map((post) => (
                 <div
                   key={post.id}
@@ -350,7 +351,7 @@ export default function Home() {
               ))}
             </div>
           ) : (
-            <div className="flex items-center content-center mx-auto align-center justify-center mt-4 gap-4 mb-4 flex-col">
+            <div className="flex items-center content-center mx-auto align-center justify-center mt-8 gap-4 mb-4 flex-col">
               {postsHighlight.map((post) => (
                 <div key={post.id} className="my-2">
                   <a href={`${post.id}`}>
@@ -369,11 +370,6 @@ export default function Home() {
           )}
         </div>
 
-        <div className="mx-auto mt-16 flex max-w-[880px] flex-col px-3 text-center mb-16">
-          <div className="_subtitle text-lg">Consistency</div>
-          {allPosts && allPosts.length > 0 && <BlogHistory posts={allPosts} />}
-        </div>
-
         <div className="mx-auto mt-16 flex max-w-[880px] flex-col px-3 text-center rounded-[14px]">
           <h1>What I believe in.</h1>
           <p className="mb-4 mt-4">