mirror of
				https://github.com/valentineus/popov.link.git
				synced 2025-11-03 22:39:44 +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>
 | 
			
		||||
		<p>
 | 
			
		||||
			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>Welcome, and feel free to explore!</p>
 | 
			
		||||
	</div>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,5 +1,6 @@
 | 
			
		||||
---
 | 
			
		||||
import Layout from "../layouts/BaseLayout.astro";
 | 
			
		||||
import LatestPostsSection from "../components/Sections/LatestPosts.astro";
 | 
			
		||||
import SocialLinksSection from "../components/Sections/SocialLinks.astro";
 | 
			
		||||
import WelcomeSection from "../components/Sections/Welcome.astro";
 | 
			
		||||
---
 | 
			
		||||
@@ -7,4 +8,5 @@ import WelcomeSection from "../components/Sections/Welcome.astro";
 | 
			
		||||
<Layout>
 | 
			
		||||
	<WelcomeSection />
 | 
			
		||||
	<SocialLinksSection />
 | 
			
		||||
	<LatestPostsSection />
 | 
			
		||||
</Layout>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user