Recent Blog Posts

Making a reusable Astro component from CodePen's embed HTML

Since interactive CodePen embedded workspaces are sometimes better, and more accessible ways to blog about code, I thought I'd extract the patterns in the HTML and practice making a little Astro component!


Read more

Rewriting a React Component as an Astro Component

I'd been using a lot of components in my Astro blog, but I realized that they were almost all *React* components, because that's what I know. So, I wanted to try reproducing some functionality by replacing a React component with a corresponding Astro component.


Read more

Interpreting the Astro "Upgraded Required" message in live web preview

A misleading error message that might steer you down the wrong path...


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( - new Date(;
  {allPosts.slice(0, 3).map((post) => (
      <p>{new Date(, 10)}</p>
      <a href={post.url}>Read more</a>