Automate homepage link with frontmatter field in blog posts (#1227)

withastro · Aug 21, 2024 · 534712b · 534712b
1 parent 50676de
commit 534712b
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 6 deletions.
diff --git a/src/content/blog/astro-4100.mdx b/src/content/blog/astro-4100.mdx
@@ -1,6 +1,9 @@
 ---
 title: "Astro 4.10"
 description: "Astro 4.10 is out with experimental type-safe environment variables, as well as enhancements to the Container API and Rewrites."
+homepageLink:
+  title: Astro 4.10
+  subtitle: New "astro:env" environment variable management
 publishDate: "June 6, 2024"
 authors:
   - matthew

diff --git a/src/content/blog/astro-4120.mdx b/src/content/blog/astro-4120.mdx
@@ -1,6 +1,9 @@
 ---
 title: "Astro 4.12: Server Islands"
 description: Astro 4.12 is now available! This release includes includes the first experimental release of Server Islands, improvements to pagination and syntax highlighting, and more.
+homepageLink:
+  title: Astro 4.12
+  subtitle: New experimental Server Islands
 publishDate: "July 18, 2024"
 authors:
   - erika

diff --git a/src/content/blog/astro-4140.mdx b/src/content/blog/astro-4140.mdx
@@ -1,6 +1,9 @@
 ---
 title: "Astro 4.14"
 description: Astro 4.14 is available now! This release includes the first experimental version of the Content Layer API, experimental support for Intellisense inside content files, and more.
+homepageLink:
+  title: Astro 4.14
+  subtitle: New experimental Content Layer API
 publishDate: "August 15, 2024"
 authors:
   - erika

diff --git a/src/content/blog/netlify-official-deployment-partner.mdx b/src/content/blog/netlify-official-deployment-partner.mdx
@@ -5,6 +5,9 @@ authors:
   - fred
 description: |
   We are happy to announce that Netlify has become Astro’s official deployment partner, donating $12,500 each month towards the ongoing open source maintenance and development of Astro.
+homepageLink:
+  title: Astro ❤️ Netlify
+  subtitle: Announcing Our Official Deployment Partner
 publishDate: "July 15, 2024"
 socialImage: "/src/content/blog/_images/netlify-official-deployment-partner/astro-netlify-social.webp"
 coverImage: "/src/content/blog/_images/netlify-official-deployment-partner/astro-netlify-header.webp"

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -49,6 +49,19 @@ export const collections = {
 				.describe(
 					'Summary of this blog post. Appears on the blog index as well as in metadata displayed on social media.',
 				),
+			homepageLink: z
+				.object({
+					title: z.string().max(16).describe('Very short call-out, e.g. `Astro 4.14` or `New!`.'),
+					subtitle: z
+						.string()
+						.max(50)
+						.optional()
+						.describe(
+							'Short tagline attracting attention to the post, e.g. `New experimental Content Layer API` or `Announcing Astro DB`. Avoid punctuation and keep things punchy.',
+						),
+				})
+				.optional()
+				.describe('Configure the homepage banner link for this post if it’s the most recent post.'),
 			publishDate: z.coerce
 				.date()
 				.describe(

diff --git a/src/pages/_components/LatestBlogPostLink.astro b/src/pages/_components/LatestBlogPostLink.astro
@@ -0,0 +1,21 @@
+---
+import { getCollection } from 'astro:content';
+import PillLink from './PillLink.astro';
+
+/** Blog posts with a banner configured in their frontmatter. */
+const blogPostsWithBanner = await getCollection('blog', (entry) => !!entry.data.homepageLink);
+/** The most recent blog post. */
+const latestBlogPost = blogPostsWithBanner
+	.sort((a, b) => (a.data.publishDate > b.data.publishDate ? 1 : -1))
+	.pop();
+---
+
+{
+	latestBlogPost && (
+		<PillLink
+			href={`https://astro.build/blog/${latestBlogPost.slug}/`}
+			title={latestBlogPost.data.homepageLink!.title}
+			subtitle={latestBlogPost.data.homepageLink!.subtitle}
+		/>
+	)
+}
diff --git a/src/pages/_components/landing-page/Hero.astro b/src/pages/_components/landing-page/Hero.astro
@@ -1,8 +1,8 @@
 ---
 import CodeBlock from '~/components/CodeBlock.astro';
 import PageTitleBlock from '~/components/PageTitleBlock.astro';
+import LatestBlogPostLink from '../LatestBlogPostLink.astro';
 import Link from '../Link.astro';
-import PillLink from '../PillLink.astro';
 import HeroBackground from './HeroBackground.astro';
 import Teams from './Teams.astro';
 ---
@@ -11,11 +11,7 @@ import Teams from './Teams.astro';
 	<div
 		class="mt-16 md:mt-20 lg:mt-24 px-4 sm:px-8 mx-auto w-full sm:max-w-screen-md flex flex-col items-center justify-center gap-5 md:gap-6 lg:gap-8"
 	>
-		<PillLink
-			href="https://astro.build/blog/astro-4140/"
-			title="Astro 4.14"
-			subtitle="New experimental Content Layer API"
-		/>
+		<LatestBlogPostLink />
 		<PageTitleBlock
 			wide
 			lg