mirror of
				https://github.com/valentineus/popov.link.git
				synced 2025-11-04 14:59:45 +03:00 
			
		
		
		
	feat: add LatestPosts section to homepage
- Introduced a new LatestPosts component to display the five most recent blog posts. - Updated the index page to include the LatestPosts section, enhancing content visibility. - Made minor text adjustments in the Welcome section for clarity.
This commit is contained in:
		
							
								
								
									
										35
									
								
								src/components/Sections/LatestPosts.astro
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										35
									
								
								src/components/Sections/LatestPosts.astro
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,35 @@
 | 
				
			|||||||
 | 
					---
 | 
				
			||||||
 | 
					import { getCollection } from "astro:content";
 | 
				
			||||||
 | 
					import dayjs from "dayjs";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const posts = await getCollection("blog", ({ data }) => {
 | 
				
			||||||
 | 
						return data.draft !== true;
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const latestPosts = posts.slice(0, 5);
 | 
				
			||||||
 | 
					---
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<style lang="scss">
 | 
				
			||||||
 | 
						@use "../../scss/variables" as *;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						small {
 | 
				
			||||||
 | 
							font-size: $fontSizeBase * 0.75;
 | 
				
			||||||
 | 
							opacity: 0.5;
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					</style>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<section>
 | 
				
			||||||
 | 
						<h2>Latest posts</h2>
 | 
				
			||||||
 | 
						<ul>
 | 
				
			||||||
 | 
							{
 | 
				
			||||||
 | 
								latestPosts.map((post) => (
 | 
				
			||||||
 | 
									<li>
 | 
				
			||||||
 | 
										<a href={`/blog/${post.slug}`}>{post.data.title}</a>
 | 
				
			||||||
 | 
										<small>{dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY")}</small>
 | 
				
			||||||
 | 
									</li>
 | 
				
			||||||
 | 
								))
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
						</ul>
 | 
				
			||||||
 | 
					</section>
 | 
				
			||||||
@@ -3,7 +3,7 @@
 | 
				
			|||||||
		<h1>Hi, I'm Valentin Popov 👋</h1>
 | 
							<h1>Hi, I'm Valentin Popov 👋</h1>
 | 
				
			||||||
		<p>
 | 
							<p>
 | 
				
			||||||
			I'm a professional software developer currently working as a project manager and team lead. On my personal
 | 
								I'm a professional software developer currently working as a project manager and team lead. On my personal
 | 
				
			||||||
			website, I share insights, ideas, and articles on software development, leadership, and the digital world.
 | 
								website, I share thoughts on tech, leadership, and digital life.
 | 
				
			||||||
		</p>
 | 
							</p>
 | 
				
			||||||
		<p>Welcome, and feel free to explore!</p>
 | 
							<p>Welcome, and feel free to explore!</p>
 | 
				
			||||||
	</div>
 | 
						</div>
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,5 +1,6 @@
 | 
				
			|||||||
---
 | 
					---
 | 
				
			||||||
import Layout from "../layouts/BaseLayout.astro";
 | 
					import Layout from "../layouts/BaseLayout.astro";
 | 
				
			||||||
 | 
					import LatestPostsSection from "../components/Sections/LatestPosts.astro";
 | 
				
			||||||
import SocialLinksSection from "../components/Sections/SocialLinks.astro";
 | 
					import SocialLinksSection from "../components/Sections/SocialLinks.astro";
 | 
				
			||||||
import WelcomeSection from "../components/Sections/Welcome.astro";
 | 
					import WelcomeSection from "../components/Sections/Welcome.astro";
 | 
				
			||||||
---
 | 
					---
 | 
				
			||||||
@@ -7,4 +8,5 @@ import WelcomeSection from "../components/Sections/Welcome.astro";
 | 
				
			|||||||
<Layout>
 | 
					<Layout>
 | 
				
			||||||
	<WelcomeSection />
 | 
						<WelcomeSection />
 | 
				
			||||||
	<SocialLinksSection />
 | 
						<SocialLinksSection />
 | 
				
			||||||
 | 
						<LatestPostsSection />
 | 
				
			||||||
</Layout>
 | 
					</Layout>
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user