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!

2021-09-16

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.

2021-09-09

Read more

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

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

2021-09-04

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>