add the ability to mark a post as featured in the frontmatter

stefkn · Jun 12, 2024 · a2f6500 · a2f6500
1 parent 48a6289
commit a2f6500
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -12,7 +12,8 @@ const postsCollection = defineCollection({
       message: "Cover image must be at least 1080 pixels wide!",
     }),
     imageAlt: z.string(),
-    tags: z.array(z.string())
+    tags: z.array(z.string()),
+    featured: z.boolean()
   })
 });
 const journalsCollection = defineCollection({

diff --git a/src/content/posts/lessons-from-flask-in-production.md b/src/content/posts/lessons-from-flask-in-production.md
@@ -6,6 +6,7 @@ author: 'Stefan Nowak'
 image: '../../assets/post_images/gradient_bg.jpg'
 imageAlt: 'photo by Sean Sinclair on Unsplash'
 tags: ["web", "python", "flask"]
+featured: true
 ---
 
 

diff --git a/src/pages/posts.astro b/src/pages/posts.astro
@@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
 import { Image } from "astro:assets";
 import { getCollection } from "astro:content";
 const allPosts = await getCollection("posts");
-const firstPost = allPosts[0];
+const featuredPost = allPosts.find((post) => post.data.featured);
 const pageTitle = "Blog posts";
 ---
 
@@ -13,25 +13,25 @@ const pageTitle = "Blog posts";
 	</section>
 	<main class="wrapper articles">
 		{
-			firstPost && (
+			featuredPost && (
 				<div class="article-post hero-post">
 					<div class="post-details">
 						<div class="featured-post-label">
 							Featured post
 						</div>
-						<a href={`/posts/${firstPost.slug}/`}>
-							{firstPost.data.title}
+						<a href={`/posts/${featuredPost.slug}/`}>
+							{featuredPost.data.title}
 						</a>
-						<p>{firstPost.data.description}</p>
+						<p>{featuredPost.data.description}</p>
 						<p class="post-date">
-							{firstPost.data.pubDate.toDateString()}
+							{featuredPost.data.pubDate.toDateString()}
 						</p>
 					</div>
 					<div class="article-image">
-						<a href={`/posts/${firstPost.slug}/`}>
+						<a href={`/posts/${featuredPost.slug}/`}>
 							<Image
-								src={firstPost.data.image}
-								alt={firstPost.data.imageAlt}
+								src={featuredPost.data.image}
+								alt={featuredPost.data.imageAlt}
 								class="post-index-card-image"
 								onload="this.style.opacity=1; this.style.filter='grayscale(0)'"
 							/>
@@ -42,7 +42,7 @@ const pageTitle = "Blog posts";
 		}
 
 		{
-			allPosts && allPosts.slice(1).map((post) => (
+			allPosts && allPosts.filter((post) => {return post !== featuredPost}).map((post) => (
 				<div class="article-post">
 					<div class="post-details">
 						<a href={`/posts/${post.slug}/`}>{post.data.title}</a>