fix: show the title only if the list has items

src/components/blog/PostPreview.astro

@@ -18,7 +18,7 @@ const { as: Tag = "div", post, withDesc = false } = Astro.props;
 <Tag>
 	{post.data.draft && <span class="text-red-500">(Draft) </span>}
 	<a class="cactus-link" data-astro-prefetch href={`/posts/${post.id}/`}>
-		{post.data.fixedToTop && <span class="text-accent-2">*</span>}
+		{post.data.fixedToTop && <span class="text-accent-2 mr-2">*</span>}
 		{post.data.title}
 	</a>
 </Tag>

src/pages/index.astro

@@ -33,18 +33,22 @@ const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES);
 		<SocialList />
 	</section>
 
-	<section class="mt-16">
+	{
-		<h2 class="title text-accent mb-6 text-xl"><a href="/posts/">置顶文章</a></h2>
+		allFixedToTopPostsByDate.length > 0 && (
-		<ul class="space-y-4" role="list">
+			<section class="mt-16">
-			{
+				<h2 class="title text-accent mb-6 text-xl"><a href="/posts/">置顶文章</a></h2>
+				<ul class="space-y-4" role="list">
+					{
 				allFixedToTopPostsByDate.map((p) => (
 					<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
 						<PostPreview post={p} />
 					</li>
 				))
 			}
-		</ul>
+				</ul>
-	</section>
+			</section>
+		)
+	}
 
 	<section class="mt-16">
 		<h2 class="title text-accent mb-6 text-xl"><a href="/posts/">Posts</a></h2>