HighlightedPosts.astro

---
import { Image } from "@astrojs/image/components";
import { findImage } from "~/utils/findImage";
import { getNormalizedPost } from "~/utils/getNormalizedPost";
const {} = Astro.props;

const posts = await Astro.glob("~/data/posts/*.md"); // returns an array of posts that live at ./src/pages/post/*.md

const images = new Map();

const normalizedPosts = new Map();

async function setup() {
  for (let i = 0; i < posts.length; i++) {
    const image = await findImage(posts[i].frontmatter.image);
    images.set(posts[i], image.src);
    const np = await getNormalizedPost(posts[i]);
    normalizedPosts.set(posts[i], np);
  }
}

await setup();
---

<section class="px-4 py-8 mx-auto max-w-6xl lg:py-10">
  <div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
    <h2
      class="max-w-lg mb-2 font-sans text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group"
    >
      <span class="inline-block mb-1 sm:mb-4"
        ><a href="/article/">Articles</a>
      </span>
    </h2>  
  </div>

  <div class="grid gap-6 row-gap-5 md:grid-cols-2 lg:grid-cols-4 -mb-6">
    {
      posts.slice(0, 8).map((post) => (
        <div class="mb-6 transition">
          <Image
            src={images.get(post)}
            class="object-cover w-full h-32 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
            alt="Post 1 Image"
            aspectRatio="16:9"
            width={400}
            height={200}
            format={"jpeg"}
          />
          <h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
            <a
              href={'/article/'+normalizedPosts.get(post).slug}
              class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
            >
              {post.frontmatter.title}
            </a>
          </h3>
          <p class="text-gray-700 dark:text-gray-400">
            {post.frontmatter.description}
          </p>
        </div>
      ))
    }
  </div>
  <div class="text-center p-3">
    <a href="/article" class="btn font-medium text-gray-600 hover:text-gray-900 dark:hover:text-white shadow-none">
      <div class="flex flex-row align-middle">
        <span class="mr-2">More Articles</span>
        <svg class="w-5 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd"
            d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
            clip-rule="evenodd"></path>
        </svg>
      </div>
    </a>
      </div>
</section>

Could you share the findImage function too? Also have you checked if this correctly works when building too?

Code for everything but this file can be found at:

https://github.com/onwidget/astrowind
https://github.com/onwidget/astrowind/blob/main/src/utils/images.js

You can just check out Astrowind and drop in my replacement file AFAIK.

Here is my personal site that I built w/Astrowind and deployed to https://www.theoryofgeek.com/ via Vercel.

Right now my personal site is in a private GitHub repo, if you want me to export and attach just LMK.

Thanks! Much appreciated. I assume this is the code that solved your image issue? I seem to remember getting linked to this gist from an image-issue related bug post.
images = import.meta.glob('~/assets/images/**');

RE: the fix as that import.meta.glob, I think so? It's been a few weeks now. I just remember thinking how hilarious it was that the two biggest stumbling blocks were a) a path-related issue for the images and b) trying to center a few divs. Felt very 90s, lol.