Add hero images to src folder, sort posts by latest

src/content/blog/first-post.md

@@ -2,7 +2,7 @@
 title: "First post"
 description: "Lorem ipsum dolor sit amet"
 pubDate: "Jul 08 2022"
-heroImage: "/blog-placeholder-3.jpg"
+heroImage: "/src/assets/blog-placeholder-3.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

src/content/blog/markdown-style-guide.md

@@ -2,7 +2,7 @@
 title: "Markdown Style Guide"
 description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
 pubDate: "Jul 01 2022"
-heroImage: "/blog-placeholder-1.jpg"
+heroImage: "/src/assets/blog-placeholder-1.jpg"
 ---
 
 Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.

src/content/blog/second-post.md

@@ -2,7 +2,7 @@
 title: "Second post"
 description: "Lorem ipsum dolor sit amet"
 pubDate: "Jul 15 2022"
-heroImage: "/blog-placeholder-4.jpg"
+heroImage: "/src/assets/blog-placeholder-4.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

src/content/blog/third-post.md

@@ -2,7 +2,7 @@
 title: "Third post"
 description: "Lorem ipsum dolor sit amet"
 pubDate: "Jul 22 2022"
-heroImage: "/blog-placeholder-2.jpg"
+heroImage: "/src/assets/blog-placeholder-2.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.

src/content/blog/using-mdx.mdx

@@ -2,7 +2,7 @@
 title: "Using MDX"
 description: "Lorem ipsum dolor sit amet"
 pubDate: "Jul 02 2022"
-heroImage: "/blog-placeholder-5.jpg"
+heroImage: "/src/assets/blog-placeholder-5.jpg"
 ---
 
 This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration installed and configured in your `astro.config.mjs` config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

src/layouts/BlogPost.astro

@@ -1,14 +1,28 @@
 ---
 import type { CollectionEntry } from "astro:content";
+import type { ImageMetadata } from "astro";
+import { Image } from "astro:assets";
+
 import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 import FormattedDate from "../components/FormattedDate.astro";
-import { Image } from "astro:assets";
 
 type Props = CollectionEntry<"blog">["data"];
 
 const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+
+let heroImagePromise;
+if (heroImage) {
+  const images = import.meta.glob<{ default: ImageMetadata }>(
+    "/src/assets/*.{jpeg,jpg,png,gif}",
+  );
+  if (!images[heroImage])
+    throw new Error(
+      `"${heroImage}" does not exist in glob: "src/assets/*.{jpeg,jpg,png,gif}"`,
+    );
+  heroImagePromise = images[heroImage];
+}
 ---
 
 <html lang="en">
@@ -39,11 +53,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
           <div class="w-[1/4] flex justify-center">
             {
               heroImage && (
-                <Image
+                <Image src={heroImagePromise()} loading="eager" alt="" />
-                  src={heroImage}
-                  loading="eager"
-                  alt=""
-                />
               )
             }
           </div>

src/pages/about.astro

@@ -6,7 +6,7 @@ import Layout from "../layouts/BlogPost.astro";
   title="About Me"
   description="Lorem ipsum dolor sit amet"
   pubDate={new Date("August 08 2021")}
-  heroImage="/blog-placeholder-about.jpg"
+  heroImage="/src/assets/blog-placeholder-about.jpg"
 >
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

src/pages/blog/index.astro

@@ -8,7 +8,7 @@ import FormattedDate from "../../components/FormattedDate.astro";
 import { Image } from "astro:assets";
 
 const posts = (await getCollection("blog")).sort(
-  (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
 );
 
 const IMAGE_EAGER_COUNT = 8;