From 3f32d4f9ceab901c48cab4cc760f45eae9059ec8 Mon Sep 17 00:00:00 2001 From: John Dunning Date: Mon, 15 Jan 2024 18:03:28 -0800 Subject: [PATCH] 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. --- .../astro/src/components/NewsSummary.astro | 23 ++++++++ .../src/components/NewsSummaryItem.astro | 58 ++++++++++++++++++ ...e-for-san-francisco-2019-year-in-review.md | 2 +- packages/astro/src/layouts/Layout.astro | 59 ------------------- packages/astro/src/pages/blog/[slug].astro | 20 ++----- packages/astro/src/pages/index.astro | 2 + packages/astro/src/utils/getBlogImage.ts | 22 +++++++ 7 files changed, 110 insertions(+), 76 deletions(-) create mode 100644 packages/astro/src/components/NewsSummary.astro create mode 100644 packages/astro/src/components/NewsSummaryItem.astro delete mode 100644 packages/astro/src/layouts/Layout.astro create mode 100644 packages/astro/src/utils/getBlogImage.ts diff --git a/packages/astro/src/components/NewsSummary.astro b/packages/astro/src/components/NewsSummary.astro new file mode 100644 index 0000000..85b7041 --- /dev/null +++ b/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); +--- + +
+

{title}

+
+ {recentPosts.map((post) => )} +
+
+ + diff --git a/packages/astro/src/components/NewsSummaryItem.astro b/packages/astro/src/components/NewsSummaryItem.astro new file mode 100644 index 0000000..c2e663c --- /dev/null +++ b/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; +--- + +
+ +
+

{title}

+ +
+ + diff --git a/packages/astro/src/content/blog/2020-02-06-code-for-san-francisco-2019-year-in-review.md b/packages/astro/src/content/blog/2020-02-06-code-for-san-francisco-2019-year-in-review.md index e4be984..9c33824 100644 --- a/packages/astro/src/content/blog/2020-02-06-code-for-san-francisco-2019-year-in-review.md +++ b/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! diff --git a/packages/astro/src/layouts/Layout.astro b/packages/astro/src/layouts/Layout.astro deleted file mode 100644 index bd79689..0000000 --- a/packages/astro/src/layouts/Layout.astro +++ /dev/null @@ -1,59 +0,0 @@ ---- -interface Props { - title: string; -} - -const { title } = Astro.props; ---- - - - - - - - - - - - {title} - - - - - - - diff --git a/packages/astro/src/pages/blog/[slug].astro b/packages/astro/src/pages/blog/[slug].astro index 935f946..6742b03 100644 --- a/packages/astro/src/pages/blog/[slug].astro +++ b/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); --- { - imageSrc && + imageData &&

- {image_alt} + {image_alt}

} diff --git a/packages/astro/src/pages/index.astro b/packages/astro/src/pages/index.astro index 2aaf943..ade24ff 100644 --- a/packages/astro/src/pages/index.astro +++ b/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"; --- @@ -33,4 +34,5 @@ import Card from "@/components/Card.astro"; href="https://eepurl.com/bfFkF9" /> + diff --git a/packages/astro/src/utils/getBlogImage.ts b/packages/astro/src/utils/getBlogImage.ts new file mode 100644 index 0000000..84c6959 --- /dev/null +++ b/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 +{ + 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; +}