Add cards for 3 most recent blog posts on homepage

Add NewsSummary.astro and NewsSummaryItem.astro to render the blog cards.
Add getBlogImage() to dynamically get a linked image for a blog post.
Remove Layout.astro.
Fix the image name in 2020-02-06-code-for-san-francisco-2019-year-in-review.md.

packages/astro/src/components/NewsSummary.astro

@@ -0,0 +1,23 @@
+---
+import { getCollection } from "astro:content";
+import NewsSummaryItem from "@/components/NewsSummaryItem.astro";
+
+interface Props {
+	title?: string;
+}
+
+const { title = "In the News" } = Astro.props;
+const posts = await getCollection("blog");
+const recentPosts = posts.slice(-3);
+---
+
+<section>
+	<h2>{title}</h2>
+	<div class="grid">
+		{recentPosts.map((post) => <NewsSummaryItem post={post} />)}
+	</div>
+</section>
+
+<style>
+
+</style>

packages/astro/src/components/NewsSummaryItem.astro

@@ -0,0 +1,58 @@
+---
+import { getBlogImage } from "@/utils/getBlogImage";
+
+interface Props {
+	post: object;
+}
+
+const { post: { slug, data: { title, image } } } = Astro.props;
+const imageData = await getBlogImage(image);
+const backgroundImageURL = imageData?.src ?? "";
+const postURL = "blog/" + slug;
+---
+
+<article style={`background-image: url(${backgroundImageURL})`}>
+	<a href={postURL}>
+		<div class="dimmer"></div>
+		<h3>{title}</h3>
+	</a>
+</article>
+
+<style>
+	article {
+		aspect-ratio: 1;
+		background-size: cover;
+		background-position: center;
+		padding: var(--block-spacing-horizontal);
+		overflow: hidden;
+		position: relative;
+		flex-direction: column;
+		justify-content: flex-end;
+		display: flex;
+	}
+
+	article > a {
+		text-decoration: none;
+	}
+
+	article h3 {
+		--color: white;
+		font-size: 1rem;
+		margin-bottom: 0;
+		position: relative;
+	}
+
+	.dimmer {
+		background-color: rgba(0, 0, 0, 40%);
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+		transition: background-color .2s;
+		position: absolute;
+	}
+
+	article:hover .dimmer {
+		background-color: rgba(0, 0, 0, 25%);
+	}
+</style>

packages/astro/src/content/blog/2020-02-06-code-for-san-francisco-2019-year-in-review.md

@@ -1,5 +1,5 @@
 ---
-image: NDoCH-2019-2.jpg
+image: NDoCH-2019.jpg
 image_alt: 'Emily Wasserman, team captain leads of National Day of Civic Hacking at GitHub'
 title: Code for San Francisco 2019 Year in Review
 description: 2019 was a very busy year for the Code for SF community!

packages/astro/src/pages/blog/[slug].astro

@@ -1,8 +1,8 @@
 ---
-import type { ImageMetadata } from "astro";
 import { Image } from "astro:assets";
 import { getCollection } from "astro:content";
 import BaseLayout from "@/layouts/BaseLayout.astro";
+import { getBlogImage } from "@/utils/getBlogImage";
 
 export async function getStaticPaths()
 {
@@ -20,26 +20,14 @@ export async function getStaticPaths()
 
 const { entry: { render, data: { title, image, image_alt = "" } } } = Astro.props;
 const { Content } = await render();
-let imageSrc;
-
-if (image) {
-		// this Vite import method requires that its parameter be a literal string, not even one assembled from other literals
-	const images = import.meta.glob<{ default: ImageMetadata }>("/src/assets/blog/*.{jpeg,jpg,png,gif}");
-	const imagePath = "/src/assets/blog/" + image.replace(/^\/img\/uploads\//, "");
-
-	if (images[imagePath]) {
-		imageSrc = images[imagePath]();
-	} else {
-		console.error(`${title} missing image: ${imagePath}`);
-	}
-}
+const imageData = await getBlogImage(image);
 ---
 
 <BaseLayout title={title}>
 	{
-		imageSrc &&
+		imageData &&
 			<p>
-				<Image src={imageSrc} alt={image_alt} />
+				<Image src={imageData} alt={image_alt} />
 			</p>
 	}
 	<Content />

packages/astro/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import BaseLayout from "@/layouts/BaseLayout.astro";
 import Card from "@/components/Card.astro";
+import NewsSummary from "@/components/NewsSummary.astro";
 ---
 
 <BaseLayout title="Home">
@@ -33,4 +34,5 @@ import Card from "@/components/Card.astro";
 			href="https://eepurl.com/bfFkF9"
 		/>
 	</div>
+	<NewsSummary />
 </BaseLayout>

packages/astro/src/utils/getBlogImage.ts

@@ -0,0 +1,22 @@
+import type { ImageMetadata } from "astro";
+
+const images = import.meta.glob<{ default: ImageMetadata }>("/src/assets/blog/*.{jpeg,jpg,png,gif}");
+
+export async function getBlogImage(
+	filename: string): Promise<ImageMetadata | null>
+{
+	if (filename) {
+			// this Vite import method requires that its parameter be a literal string,
+			// not even one assembled from other literals
+		const imagePath = "/src/assets/blog/" + filename.replace(/^\/img\/uploads\//, "");
+
+		if (images[imagePath]) {
+			return (await images[imagePath]()).default;
+//			return await images[imagePath]();
+		}
+
+		console.error(`Missing image: ${imagePath}`);
+	}
+
+	return null;
+}