Recent Blog Posts

Getting started with React components in Astro? Check these things!

Yes, you can write and render your React components in your Astro page. But remember, Astro *isn't* React, and you might be getting error messages when you *totally know* your React component should work. It's not complicated to establish the Astro-React relationship, but you might not be used to doing these things. . .

2021-10-13

Read more

Astro is a learner's paradise!

One of Astro's selling points has been that you can bring your own mix-and-match components... but I didn't really get the power of that as a *learner* until just now, listening to Fred K. Schott interviewed on devtools.fm

2021-09-30

Read more

Setting up React Testing Library in an Astro project

I am starting to experiment with React unit testing, and since my Astro blog contains React components, I wanted to see what happens when I tried adding React Testing Library to Astro!

2021-09-28

Read more

See more posts ...

The Code:

This is src/pages/blog.astro which is generated from markdown files located in src/pages/posts/ using:

---
let allPosts = Astro.fetchContent('./posts/*.md');
allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
Astro.fetchContent('src/pages/posts/*.md')
---
<div>
  {allPosts.slice(0, 3).map((post) => (
    <article>
      <h1>{post.title}</h1>
      <p>{post.url}</p>
      <p>{post.description}</p>
      <p>{new Date(post.date).toISOString().slice(0, 10)}</p>
      <a href={post.url}>Read more</a>
    </article>
  ))}
</div>